ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テンプレートモンスター
ホームページテンプレート

Free Templates Online JP
無料ホームページテンプレート
Free Templates Online JP

株式会社ネットオン
採用Webマーケティング
indeed広告代理店

海外 SEO対策 トラッキングツール
海外 SEO対策
ランキングチェックツール

Rank Tracker

テクニック

Homeグラフィック講座 > ドットマトリックスを作成する方法

ドットマトリックスを作成する方法

投稿日:2013年2月26日   レベル:初心者    ソフトウェア:illustrator

このチュートリアルではドットマトリックスを作成する方法について紹介します。


Step1:基となる円を描く

小さな円を描いてください。(楕円形ツールを使いシフトキーを押しながら円を描きます。)

このチュートリアルではドットマトリックスを作成する方法について紹介します。

「効果」−「パスの変形」−「変形」を選択し、下記の設定をしてください。必要があれば、垂直方向の移動を調整して、円と円の間に少し間隔が開くようにしてください。

このチュートリアルではドットマトリックスを作成する方法について紹介します。

下記の数値で同じ作業を水平方向にも繰り返します。(新規効果を適用するかどうかの確認画面が表示されますので、「新規効果を適用」をクリックしてください。)

このチュートリアルではドットマトリックスを作成する方法について紹介します。

こんな風になります。

このチュートリアルではドットマトリックスを作成する方法について紹介します。

今のところはまだ2つの効果が適用された一つの円にすぎません。このオブジェクトを、選択して編集することが可能な円のグループに変えます。「オブジェクト」−「アピアランスを分割」を選んでください。そうすると、下記のようになっているはずです。

このチュートリアルではドットマトリックスを作成する方法について紹介します。

Ctrl+Cを押して円をコピーし、レイヤーウインドウのグループの隣にある目のマークをクリックしてください。次に、Ctrl+Fで元のグループの真上にペーストしてください。(理由は、非表示にしている元のグループを後ほど使用するからです。)

ここで、ダイレクト選択ツール(ツールバーの白いカーソルです。)を使って、円を選択して削除し文字を作成します。ダイレクト選択ツールの使用方法は次のとおりです。

このチュートリアルではドットマトリックスを作成する方法について紹介します。

Step2:LED風のテキストを作る

文字が現れるように、円を選択して消してください。文字には違う色をつけてください。(ここでは濃いグレーを使用しています)

このチュートリアルではドットマトリックスを作成する方法について紹介します。

先ほど、隠した円のグループを表示させます。(先ほどの目のマークを再度クリックしてください)

このチュートリアルではドットマトリックスを作成する方法について紹介します。

黒い角丸長方形を、全ての円を囲むように描いて、「オブジェクト」−「重ね順」−「最背面へ」を選んで、その長方形を一番下に移動させてください。

このチュートリアルではドットマトリックスを作成する方法について紹介します。

選択ツール(黒のカーソル)で文字のオブジェクトをクリックし、グラデーションと1ptの線幅を適用してください。次に、「効果」−「スタイライズ」−「光彩(外側)」を適用し、LED電球のような見た目にします。下記に近い色を使用してください。

このチュートリアルではドットマトリックスを作成する方法について紹介します。

これでベーシックなLEDのディスプレイが出来ました。必要に応じてそれぞれのグループの色を調整してください。

このチュートリアルではドットマトリックスを作成する方法について紹介します。




Step3:モザイク風の絵を描く

このテクニックを使えば、モザイク風の絵を描くことも可能です。次に、なげなわツールを使ってベーシックな風景を描いてみましょう。なげなわツールで、ダイレクト選択ツールと同じように、円の周りをドラッグして選択をしてください。(クリックでは円は選択されません)今回作成するのは次のような作品です。

このチュートリアルではドットマトリックスを作成する方法について紹介します。

まず、円を縦横に並べてください。全ての円に色を塗り、1ptの線幅で線を内側に揃えるを選択してください。(線のウインドウを開いて、下記のオプションを適用します)線と塗りの色はまだどんな色でも構いません。

このチュートリアルではドットマトリックスを作成する方法について紹介します。

こんな感じです。

このチュートリアルではドットマトリックスを作成する方法について紹介します。

なげなわツールで選択をして丘を描きます。

このチュートリアルではドットマトリックスを作成する方法について紹介します。

丘は緑色で塗り、線はそれより濃い緑色にしてください。Ctrl+Gで丘をグループ化します。

このチュートリアルではドットマトリックスを作成する方法について紹介します。

選択ツールを使って、丘のグループをダブルクリックし、グループ編集モードに入ります。グループ編集モードでは選択した以外の部分は薄くなります。これにより、他のものを選ぶことなく、丘だけを選択できます。なげなわツールを使って、下記のような感じで選択範囲を描いてください。

このチュートリアルではドットマトリックスを作成する方法について紹介します。

選んだ円をわずかに薄い色合いの緑にしてください。これは丘にちょっとした影を付けるためです。

さらに円を選んで、もっと色の薄い緑にしてください。

このチュートリアルではドットマトリックスを作成する方法について紹介します。

これで丘の部分は完成です。アートボードの何もない部分をダブルクリックしてグループ編集モードを終了します。

このチュートリアルではドットマトリックスを作成する方法について紹介します。

同様のテクニックを使って、残りの風景を描いてください。各セクション毎にグループ化して、グループ編集モードを使ってください。(ヒント:まだ色を付けていない円にもグループモードを使うことができます。)次に、木を作り、水面、山、空、雲、太陽と作業を進めます。

このチュートリアルではドットマトリックスを作成する方法について紹介します。

Step4:アレンジを加える

私は他にも色々と実験してみて、3Dのような見た目のものを思いつきました。これを作成するには「効果」−「3D」−「押し出し・ベベル」をデフォルトの設定のまま適用し、修正したりコピーしたりしながら移動しました。最後にPhotoshopでレベル補正の微調整をして仕上げました。そのやり方をご紹介したかったのですが、上手く説明する方法が見つからないまま、Illustratorの動作が極端に遅くなってしまいました。処理速度の速いコンピュータをお持ちであったり、もしくは忍耐強い方であれば、是非お試しください。(もし助けが必要な場合はお気軽にご連絡を頂くか、ここにコメントをお残しください。)

このチュートリアルではドットマトリックスを作成する方法について紹介します。

引用:Web Design Library  翻訳:幕澤



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング