Illustratorでシンプルなアイコンをつくる

2016-09-02

こんにちは。
モンスターを捕獲したり討伐したり、ともだちになったりと日々忙しいchinamiです。

WEBや印刷物のデザインをしているとついつい使いたくなってしまうアイコン。
フリー・商用可のものがたくさん配布されていますが、
ちょっと自分のデザインとテイストが合わないなー、全体で統一した雰囲気を出したいなー
なんて時にサクサクっとつくれたらカッコいいですよね

今回はかんたんなアイコンのつくりかたをサクサクっとご紹介します

まずはドキュメントを作成します（メニュー＞ファイル＞新規作成）
サイズは80×80pxで作成。
以下のように設定してください

wand_01-02

「新規オブジェクトをピクセルグリットに整合」のチェックは必ず外してください！
なぜかって？こうなります

wand_01-03

アートボードができましたー

アイコンは既存の長方形ツールや楕円形ツールをつかって、イメージに近い図形を重ねていく方法が出来映えがいいです。
では見本として、~~かんたんな~~お世話になる機会の多い虫めがねアイコンをつくっていきましょう。

楕円形ツール（L）をshift＋ドラックで正円を配置します。
大きさは50×50pxくらい、線幅は6pxが綺麗です。

wand_01-04

虫めがねの持つ部分を直線ツールで円の中心軸に配置。
直線を選択したら、線パネルの丸型線幅とラウンド結合を選択しておきましょう。
線の角が丸くなりましたね。こうすることで、まるっとした柔らかい印象に仕上がります。

wand_01-05

前述した通り、基本的に既存の図形を使ったら、あとは調整作業です。
正円と直線を選択してグループ化（command+G）、
45度回転させたら整列パネルの垂直方向上に整列・水平方向右に整列でアートボードの右上にそろえます。

wand_01-06 ん！ちょこっとアートボードからはみ出ていますね。はみ出したいお年頃でしょうか
ここは甘やかさずしっかり更正させてやりましょう。

線幅の半分はみ出しているので、その分内側に移動させます。
考え方としては横：X-（線幅/2）px、縦：Y+（線幅/2）pxです。
今回線幅は6pxで進めているので、横：X-3px、縦：Y+3pxですね

wand_01-07 ぴったりおさまりました。

wand_01-08

ついでにダイレクト選択ツール（A）を使って左下のも引っ込めちゃいましょう。
スマートガイド（メニュー＞表示＞スマートガイド）を利用するとうまい具合にいけます

wand_01-09

虫めがねアイコンの完成です。

wand_01-10 てれれれ〜↑
あとはお好みで光の反射を入れてもかわいいです。
注意することはアートボード内に収まるサイズで仕上げること、線幅を統一させることですかね。
背景色とアイコン色はコントラストをつけたほうが、くっきり綺麗にみえます。

いかがでしょうか？
今回基本中の基本虫めがねを作成しましたが、他のアイコンも楕円ツールや直線ツールを利用すれば案外かんたんにできちゃいます。
線幅を変更したりするとだいぶオリジナリティがでます。ぜひご自分のサイトデザインにも流用してみてください

wand_01-11