Adobe CC

Adobe Illustrator CCでアイコン画像を作成する方法

アプリケーションやプラグインを作成していると、アイコンとして利用する画像(実際にはpngファイル)を作成するケースが良くあります。既存のアイコン素材を組み合わせて手軽に作成する場合は、Axialis IconWorkshopIconGeneratorがおすすめですが、素材に無いようなアイコンを作成したい場合はAdobe Illustratorがおすすめです。

ここでは、Adobe Illustrator CC 2019を使ってアイコン画像(png画像)を作成する方法と、ポイントになる設定を載せています。

アイコン用ドキュメントの作成

新規作成時の設定で「詳細設定」ボタンをクリックして、詳細設定画面を開きます。

新規作成で詳細設定を選択

1つのファイルで複数のアイコンを作成できた方が便利なので、アートボードの数に作成したいアイコンの数を指定します。今回は40個のアートボードを作成し、横に5個ずつ並べるようにしました。(横5個×縦8個=40個…になります。縦の数は自動で設定されます)

また、作成するアイコンのサイズは32x32pxを指定し、カラーモードにRGB、ラスタライズ効果にスクリーン(72dpi)、プレビューモードはピクセルを選択します。アイコンのサイズは自由でかまいませんが、カラーモード、ラスタライズ効果、プレビューモードは以下の設定にしておくことをおすすめします。

設定が完了したら、ドキュメントの作成ボタンをクリックして、ドキュメントを作成します。

アイコン作成用の詳細設定

これで横5個×縦8個、合計40個のアートボードが作成されました。

新規作成後のドキュメント

ドキュメントの設定

そのままでは、キャンバスの背景が白く表示される(実際は透明)ため、透明部分が分かるように設定を変更します。

キーボードのShift+Ctrl+D、もしくは「メニュー> 表示> 透明グリッドを表示」から、透明グリッドを表示にチェックを入れます。
このとき「ピクセルプレビュー」と「ピクセルにスナップ」にもチェックが入っていることを確認し、もしチェックされていなければ、同様にチェックを入れます。

透明グリッドの表示

これで透明色が、2色の格子模様で表示されるようになりました。

透明グリッドを表示した画面

作成したアイコン画像を使う時の背景色が分かっている場合は、Illustratorで編集しているときから背景色を設定しておくと、完成形のイメージがつかみやすくなります。

Alt+Ctrl+Pでドキュメント設定を開いて、グリッドのサイズやカラーを設定します。ここでは、濃いグレーの背景色を設定しました。

透明グリッドの色を設定

これで透明色部分の色が変更され、実際に表示したときのイメージがつかみやすくなりました。

透明グリッドの色を変更した画面

アイコンの作成と書き出し

作成した1つのアートボード(1つの枠)につき、アイコンを1つ作成していきます。明示的にアートボードを切り替えなくても、それぞれの枠内に描画すれば、自動で対象のアートボード内に配置されるので、難しい事は考えずに「とりあえず枠内にアイコンを描画」していけばOKです。また、使わない枠はそのまま放置していても問題ありません。

アイコンの作成

実際に書き出すときのファイル名は、アートボードの名前で設定します。
アイコンを描画したアートボードに、書き出したいファイル名を設定していきます。なお、拡張子(.pngなど)は書き出すときに自動で設定されるので、拡張子の名前は不要です。

アイコン数が多くてアートボードの番号が分かりづらい場合は、アートボードの番号(下の画像の1,2,3~という部分)をダブルクリックすると、対応するアートボードがフォーカスされます

アートボードに名前を設定

アートボードに名前を設定したら、Alt+Ctrl+E、もしくは「ファイル> 書き出し> スクリーン用に書き出し」を選択します。

書き出し

書き出し用の画面が表示されるので、左側で書き出したいアートボードにチェックを入れます。全て書き出したい場合は「すべて」にチェックを入れます。

書き出し先のフォルダを指定し、書き出すフォーマットを指定します。
このとき、書き出す倍率やファイル名のサフィックス(後ろに付ける名前)や画像形式を複数設定可能なので、1つの画像から、サイズの異なるアイコンを複数作成する事も簡単に行えます。

今回は、オリジナルのサイズ(1x = 32x32px)の他に、20x20pxに縮小した画像も作成するため「スケールを追加」で20pxの設定も追加しています。また、20pxの画像のファイル名の後ろには”_20″を付けるように設定しています。

書き出しの設定ができたら、「アートボードを書き出し」ボタンをクリックしてファイルを書き出します。

スクリーン用に書き出す設定

これで、オリジナルサイズ(32x32px)の画像ファイルと、20x20pxに縮小してファイル名の後ろ(サフィックス)に”_20″を付けた画像ファイルが生成されました。

なお、Illustratorは基本的にベクター画像を扱うソフトなので、サイズを拡大・縮小しても綺麗な画像が生成できる点がメリットになります。

生成されたアイコン