アプリケーションやプラグインを作成していると、アイコンとして利用する画像(実際にはpngファイル)を作成するケースが良くあります。既存のアイコン素材を組み合わせて手軽に作成する場合は、Axialis IconWorkshopやIconGeneratorがおすすめですが、素材に無いようなアイコンを作成したい場合は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は基本的にベクター画像を扱うソフトなので、サイズを拡大・縮小しても綺麗な画像が生成できる点がメリットになります。
