pickup
イラストレーター

今回はこのサイト内で使用している猫のアイコンをillustratorで制作したので、その制作工程を初心者向けに解説していきます。

色々な制作方法がありますが、私なりの方法を猫先生に解説していただきます!

猫先生
みなさんこんにちは!猫先生だよー♪
今回はついこの間まで普通の猫だった僕が、簡単で可愛いアイコンの作り方をご紹介していくよ〜!
僕が出来上がるまでを簡単にわかりやすくご紹介していくよ!
説明
※本記事で説明するパネルが出ていない方は、画面上部のウィンドウから表示する事ができます。
※各ツールの変更はツールパネルのアイコン右下に『.』があるツールのみ長押しで変更ができます。
スポンサーリンク

簡単なアイコンの制作方法

 

neko-seisaku

 

猫先生
出来上がりはこんな感じ!それでは作っていきましょう♪

猫先生
可愛く作ってね❤️
まずアートボードにパーツとなるオブジェクトを作成して、整列させてから着色していきます。

ドキュメント作成

Illustratorを起動し、ファイルから新規をクリックするか、Ctrl+Nキー(Windows)またはCommand+Nキー(macOS)を押します。

Webタブを選択し、右側にサイズを入力します。ここでは、このサイト内で使用するアイコンのため、アートボードの幅と高さを144 pxに設定しました。

「作成」をクリックします。

猫先生
アイコンをデザインする際は、正方形で作成すると便利ですよ。

オブジェクトツールを配置

①猫先生の輪郭を作ります

楕円形

ツールボックス内太赤丸を長押しで楕円形ツールを選択します。アートボードをクリックしてドラッグし、円を作成します。

猫先生
Vキーを押すと選択ツールに切り替えれます。

猫先生
円の縦横比を保持してサイズを変更するには、Shiftキーを押しながらバウンディングボックスをドラッグします。バウンディングボックスとは上記画像の選択されている緑の丸の事です。

②猫先生の耳を作ります

耳

耳の部分は上記画像と同じツール内を長押しで多角形ツールを選択します。アートボードをクリックすると、多角形パネルが表示されるので、辺の数を3に設定して三角形を作ります。半径はあとでドラッグして小さくするので大体で大丈夫です。

猫先生
同じ図形をもう一つ作る時は、オブジェクトを選択してAlt キーを押したままドラッグすると同じ物が複製できます。

三角形の角をドラッグして大小の三角形を2つ作ります。

完成した2つを重ねて選択ツールに切り替えて重なった三角形をドラッグして選択します。

猫先生
グループにしたいオブジェクトを選択して
windowsの場合はキーボードの Ctrl+G
macの場合はキーボードの「⌘(コマンドボタン)+G」を押すこれでバラバラの図形がグループ化されるよ♪
グループ化しておくとワンクリックで両方まとめて選択出来るから便利です。

③猫先生の目を作ります

楕円形ツールで円を2つ作って重ねます。選択ツールで重なった2つを選択します。

パスファインダー で型抜きをします。

ウィンドウからパスファインダーパネルを表示させ、形状モードの前面オブジェクトで型抜きを選択します。

アーモンド型が完成しました。

パスファインダー

前面オブジェクトで型抜き
下のオブジェクトが上のオブジェクトの形に切り抜かれます。複数オブジェクトを選択した場合は、一番下のオブジェクトがそれよりも上にあるオブジェクト全ての形で切り抜かれます。

そこに楕円形ツールで大小の円を重ねていきます。

必要に応じて中心ウィジェットをドラッグして、円の位置を調整します。

猫先生
ここでもさっき説明した図形の複製をして同じ物を2つ作るよ!
目が完成しました!

猫先生
目もグループ化して置くといいよ!
④猫先生の鼻を作ります
多角形ツールで三角形を作成して数値を入力して角度を変えます。

図形を選択した後、赤丸の回転ツール をダブルクリックし、回転ダイアログボックスで角度を入力します。

ここでは逆三角形を作りたいので180°に設定します。

⑤猫先生の口、ヒゲを作ります

まず口を作ります。

 

口説明

円弧ツールを選択して右クリックします。円弧ツールオプションが表示されるので、今回はX軸の長さを15px、Y軸の長さを17px、句配を凸形を43に設定します。

同じ図形をもう一つ作成し、変形で反転させます。
図形を選択した状態で右クリック→変形リフレクトを選択します。リフレクトダイアログボックスで、角度を90°コピーを選択します。そのままドラッグして端を合わせます。

猫先生
口もグループ化しておいてね!

猫先生
シフトキーを押しながらドラッグすると比率が変えずに移動、変形ができるよ!
ヒゲは同様に円弧ツールでカーブを作成した物を6つ複製していきます。

猫先生
複製はオブジェクトを選択してAlt キーを押したままドラッグね!

図形の調整・整列作業

完成した図形を整列していきます。

 

整列

顔の中心に鼻を配置させます。顔と鼻を選択したらウィンドウから整列パネルを表示させます。オブジェクトの整列の中の、水平方向中央に整列垂直方向中央に整列を選択します。

猫先生
整列パネルやコントロールパネルの整列オプションを使用して、選択したオブジェクトを指定した軸に沿って整列、または分布をさせることができます。
オブジェクトは、基準点となる線やアンカーポイント、選択範囲、アートボードまたはキーオブジェクトに整列することができます。

同じ様に目も真ん中に揃えてから、位置感を見ながら好みの場所に配置します。

耳やヒゲも同じ様に配置します。

着色

シェイプに塗りのカラーと様々な線の属性を適用します。

猫先生
Vキーを押して選択ツールにするよ!

 

カラーパネル

猫先生の目を選択して、ウィンドウからプロパティアピアランスにある、塗りのカラースウォッチをクリックします。右上のスウォッチのオプションを選択し、スウォッチパネル内のカラーをクリックします。

同様に顔などのパーツも選択ツールで着色していきます。

アレンジ

これだけでも簡単なアイコンは出来上がるのですが、もう一工夫します。

猫先生の模様の部分は、ブラシツールで書き足します。

 

猫の柄

猫先生
模様がないとネズミと間違えられちゃうよ〜!
ブラシツールの線の色をなしに設定し、白を選択してマウスを押しながら描いていきます。

猫先生
ここはセンスが問われる所です!
最後に全て選択してグループ化します。カワイイ猫先生の出来上がりです!
アレンジ

まとめ

猫先生
いかがですか?すごく簡単でしょ?
着色とアレンジ次第でミケ猫や黒猫、僕みたいなトラ猫まで色々作れちゃいます♪

猫先生
僕の仲間もどんどん増えていく予定だからお楽しみに!
以上!猫先生でした🤗
CreaveArtでは使用するロゴやバナー、TOP画像から画像の加工まで全て自作しています!
アート感溢れる作品をどんどん増やしていきますのでお楽しみに。
スポンサーリンク

Twitterでフォローしよう

おすすめの記事