DesignTips > ボタン・アイコン等 > イラストレータ アイコンの作り方

イラストレータ アイコンの作り方

イラストレータ アイコンの作り方

イラストレータでアイコンの作り方を解説します。

質感のある黒のグラデーションがかっこいいアイコンですね。このままデザインとしても十分に使えます。

イラストレーターでアイコンを作る方法はさほど難しくないですが、グラデーションやエッジ、シャドウなど細かな設定でテクニックがいります。各ステップで詳しく解説していますので、じっくりと読んで作り方をマスターしてみて下さい。

Step01 イラストレーターで正円を描く

イラストレーターでアイコンの原型を描く

イラストレーターの楕円形ツールで正円を描きます。(正円は楕円形ツールでShift+ドラッグ)

この円はアイコンの外側(銀縁の部分)の円になります。自分のイメージしているアイコンの大きさに円を設定してください。

Step02 円の内側に円をコピーする

円の内側に円をコピーする

イラストレーターで描いた正円の内側に小さい正円を描きます。

Step01で描いた円を選択して、[オブジェクト→変形→個別に変形]をクリックします。

Step03 個別に変形

個別に変形を実行

[個別に変形]ダイアログボックスが開きますので上図のように設定します。

コピーをクリックを忘れずに!

Step04 内側に正円がコピーされた

内側に正円がコピーされた

内側に90%に縮小された正円がコピーされました。

あとはこの二つの円にグラデーションを適用させていきます。

Step05 外側の円にグラデーションを適用

外側の円にグラデーションを適用

アイコンの縁にグラデーションを設定します。

外側の円を選択して、グラデーションパネル(ウインドウ→グラデーション)で上図のように設定します。

少々ややこしいグラデーションの設定ですが、角度、位置、カラーをしっかりと設定してください。なお、カラーはグレースケールで設定します。(グラデーションパネルでカラーをダブルクリック→右上の調整スライダーのカラーモードを指定をクリック→グレースケール)

グラデーションを線形、角度をななめにし、カラーを黒系、白系と互い違いに設定することで、光に反射した銀縁のような質感を演出することができます。

Step06 アイコンに黒のグラデーションを適用

アイコンに黒のグラデーションを適用

外側の円にグラデーションを適用したら、今度はアイコン(内側の円)に黒のグラデーションを適用させます。

内側の円を選択して、グラデーションパネル(ウインドウ→グラデーション)で上図のように設定します。

こちらも細かいグラデーションの設定ですが、角度、位置、カラーをしっかりと設定してください。ほぼ単色の黒に近い色合いですが、わずかなグラデーションを適用させることで単色の黒よりもリアルな質感を演出することができます。

Step07 アイコンの内側に影を適用させる

イラストレーターでアイコンの内側に影を適用させる

続いてはアイコンの銀縁を浮き上がらせます。

イラストレーターで小さな円を選択して、[効果→スタイライズ→光彩(内側)]をクリックします。

Step08 光彩(内側)

光彩(内側)

光彩(内側)ダイアログボックスが開きますので上図のように設定します。

Step09 内側に影が適用された!

アイコンの内側に影が適用された!

アイコンの内側に影が適用されました!

エッジ内側の影により、外側の銀縁が浮き上がったような効果を得ることができましたね。

Step10 円にアイコン画像を挿入

イラストレーターでアイコンに画像を挿入

円にアイコン画像を挿入させます。

イラストレーターのシンボルパネル(ウインドウ→シンボル)を開き、[右上をクリック(上図参考)→シンボルライブラリを開く→webアイコン]をクリックします。

(画像はどんな画像でも結構です。お使いのIllustratorに搭載されているシンボルライブラリから適当な画像を利用するか、ない場合はペンツール等でご自身で作ってみてください。)

Step11 アイコン画像を挿入

イラストレーターでアイコン画像を挿入

webアイコンの中からお好みのアイコン画像を選択し、アートボードへドラッグします。

その状態のまま、シンボルパネルの[シンボルへのリンクを解除]をクリックします。あとはこのアイコン画像の大きさと色を変更して円に配置します。

Step12 アイコン画像を配置

アイコン画像を配置

アイコン画像の大きさと色を白に変え、円に配置しました。

これでブラックアイコンの出来上がりです!

このままでも十分にアイコンとして使えますね。今回はさらにイラストレーターでアイコンの下に薄い影を適用させてみます。

Step13 アイコンの下に楕円を描く

イラストレーターでアイコンの下に楕円を描く

イラストレーターの楕円形ツールで上図のような楕円を描きます。

色は黒に設定してください。

Step14 アイコンに影を適用

イラストレーターでアイコンに影を適用

アイコンに影を適用させます。

楕円を選択し、[効果→スタイライズ→ぼかし]をクリックします。

Step15 イラストレーターでぼかしの設定

イラストレーターでぼかしの設定

ぼかしダイアログボックスが表示されますので、上図を参考に設定します。

ぼかし具合は[プレビュー]をチェックすることで確認することができます。お好みのぼかし具合に設定してください。

アイコン(イラストレーター)完成!

イラストレータでアイコンを作る方法

ぼかしを設定した楕円をアイコンの下に移動し(レイヤーを背面へ)、完成です。

イラストレーターで質感のある銀縁とリアルな黒のグラデーションが映えた美しいアイコンが出来上がりました。

テクニックそのものは大したことはしていませんが、グラデーションなどそれぞれの設定は細かかくし、リアルな質感にこだわりました。すぐにでも実践で使えるアイコンですのでぜひお試しください。

関連記事:イラストレーターで反射するアイコンの作り方

関連記事:凹凸感のあるアイコン素材の作り方

この投稿文は次の言語で読めます: 簡体中国語, 英語

イラストレーターで反射するアイコンの作り方
斜線入りwebボタンの作り方(イラストレーター)
付箋のイラストの作り方(イラストレーター)
ノートと破けたノートのイラストの作り方(イラストレーター)
メダルバッジを作る方法(イラストレーター)
Photoshopでナチュラルなwebボタンを作る方法
滴るロゴの作り方(Illustrator)
凹凸感のあるアイコン素材の作り方
イラストレーターで文字を立体的に飛び出させるTips