複数アートボードを使ったIllustratorによるFavicon画像の作成

2013/06/28 2014/11/22

WordPressを利用したサイトは多くありますが、
大抵のサイトではブラウザのタブなどに対して、
オリジナルのアイコンが表示されていると思います。
そのアイコンは通称Favicon(ファビコン)と呼ばれ、
サイトをお気に入りに追加した際にも表示されます。

私個人的にはGoogleChromeを多用しているため、
多くのタブを開いてもパッと見でどのタブかが、
わかりやすいというメリットを感じています。

タブのみ表示

私はIllustratorを用いてこうした画像の作成を行っていますが、
Illustratorを買ってみたけどどうにも使いこなせないという方が、
もし居られるようだったらとおもい、自分なりの作業方法を投稿しておきます。

[rakuten]001:9784844362807[/rakuten]

はじめに

いつもお読みいただきありがとうございます。

今回はちょっと余談的に、
Illustratorの複数のアートボードを利用して、
faviconの画像の作成方法を捕捉でご紹介します。

Illustratorをお使いの方ですとこんな説明はいらないだろう・・・と、
感じる部分もありますが、あくまでも補足的に投稿しておきます。

2014/02/09追記
こうしたアートボードを複数作成し、
アートボードのファイル名で画像として出力するような場合にWeb用に保存を一括して出力を行うこともできます。

Illustrator(.ai)の複数アートボードを一括で、PhotoShopから高画質にWeb用に保存

AIファイル作成

AIファイルの作成は通常通り行います。

AIファイルの新規作成

Illustratorを起動し、ファイルメニューから[新規作成]を選択します。
当方のIllustratorバージョンはCS5を利用しています。

新規ファイルの作成

アートボードサイズと単位の指定

開かれた新規ドキュメントウィンドウに対して、
作成するファイル名を入力し、単位に「ピクセル」を選択します。
今回は最大サイズ72pxの画像を作成しますので幅と高さには72を入力します。

※今回は以下投稿の素材としての作成を行っています。

wordpressサイトにブックマークアイコン(Favicon／ファビコン)を追加する

[OK]をクリックして作成を開始します。

アートボードサイズの指定

作成されたアートボード

作成されたアートボードは指定した72px四方にて作成されています。

作成された新規ファイル

アートボードの編集

上部ツールバーより[ドキュメント設定]をクリックします。

ドキュメント設定のクリック

開かれたドキュメント設定ダイアログで[アートボードの編集]をクリックします。

アートボードの編集のクリック

アートボードウィンドウの表示

[ウィンドウ]－[アートボード]を選択し、アートボードウィンドウを表示します。

アートボードウィンドウの表示

アートボードの属性編集

アートボードウィンドウにて作成されているアートボードをクリックします。
ツールバーウィンドウに表示された[名前]に現在のアートボード名が表示されます。

アートボードウィンドウからの編集

ツールバーウィンドウに表示された[名前]にてアートボードの名前を編集します。

アートボード名称の変更

[rakuten]001:9784798033938[/rakuten]

複数アートボードの配置

アートボードの追加

今回は複数サイズのアートボードで一括してfaviconを作成しますので、
新規にアートボードを追加します。
アートボードウィンドウの「□」をクリックし追加します。

アートボードの追加

画面を縮小しアートボードが追加されていることを確認します。

作成されたアートボードの確認

追加アートボードの属性編集

アートボードウィンドウにて追加したアートボードをクリックします。
ツールバーウィンドウに表示された[名前]に現在のアートボード名が表示されます。
[名前]にてアートボードの名前を編集します。

追加アートボードの名称変更

追加アートボードのサイズ変更

ツールバーに表示された[W]と[H]に
変更したいサイズを入力します。
Wは幅、Hは高さを指定します。

追加アートボードのサイズ変更

32pxアートボードに対しても繰り返す

同様に繰り返します。

32pxも同様にアートボードを変更

16pxアートボードに対しても繰り返す

同様に繰り返します。

16pxも同様にアートボードを変更

アートボードのレイアウト変更

アートボードを選択しドラッグアンドドロップすることで、
作成済みのアートボードの位置を変更することができます。

アートボードのレイアウト移動

何かツールのボタンを押して、アートボード編集モードを終了します。

アートボード編集モードの終了

アイコンデザインの作成

作成されたアートボード

作成したアートボードに対して画像のデザインを配置します。

作成済アートボードの確認

今回利用するデザイン

デザインを配置します。

デザインの配置

[rakuten]001:9784798033594[/rakuten]

Webおよびデバイス用に保存からの画像生成

Web用に保存

画像に出力したいアートボードをアートボードウィンドウでクリックし選択します。
ファイルメニューから[Webおよびデバイス用に保存]を選択します。

Web用に保存の選択

Web用に保存ダイアログ

ファイル形式と画像サイズを選択し[保存]をクリックします。
ファイル形式はGIF、JPEG、PNGなど用途に合わせて選択します。

形式の選択とファイルサイズの確認

画像ファイル名の入力

保存したいファイル名を指定します。

保存

出力画像ファイルの確認

出力された画像を確認します。

出力ファイルの確認

他のアートボードでも同様に繰り返す

他のサイズのアートボードでも同様にWeb用に保存を繰り返します。

他のアートボードも繰り返す

それぞれの出力画像ファイルの確認

それぞれ出力された画像を確認します。
Web用に保存を選択して出力した場合には、
画像はサイズと解像度が見た目に合わせて適切に処理されます。

その為、画像を拡大して見るといった用途は考慮せず、
Web上で適切にみられる解像度にすることでファイルサイズが抑えられています。

すべてのサイズで出力されたファイル

書き出しからの画像生成

書き出しの実行

[ファイル]－[書き出し]を実行することで、
すべてのアートボードを個別に出力することができます。

ファイルメニューの書き出しを選択する際には、
アートボードを選択する必要はありません。

ファイルの書き出しの選択

書き出しファイル形式の指定

書き出しを行いたいファイル形式を選択します。

ファイル形式の選択

次に下部に表示された[□各アートボードに保存]に対してチェックを付与し、
[範囲]に対してはアートボードの番号を「開始－終了」で入力します。
これはアートボードの番号(アートボードウィンドウの左に表示された番号)を指定することができます。

出力されるファイル名は、
「ファイル名に入力した文字列＋アートボード名＋拡張子」で順に出力されます。

アートボードごとの出力を選択

オプションの選択

書き出しのファイル形式に応じて、オプションが表示されます。
PNGを選択した場合には、以下のような解像度を選択するダイアログが表示されます。
解像度の指定と背景の透過を指定し[OK]をクリックします。

解像度と背景の選択

一括で出力された画像ファイルの確認

それぞれ出力された画像を確認します。
書き出しの場合、少しファイルサイズは大きくなりますが、
Web用に保存よりも綺麗な画像で生成されます。

出力されたファイルの確認

[rakuten]001:9784881667590[/rakuten]

各ファイルからのアイコン化

画像のアイコン化

画像ファイルからのアイコン作成に関しては、以下の投稿に記載しています。

画像ファイル(PNG、GIF、JPEG)ファイルからのアイコン(ico)ファイル化

こうしてIllstratorを用いてアイコン作成が行えました。
ファビコンの作成程度であれば、
高価なIllustratorを利用するまでもありませんが、
１本持っていることで様々な素材作成からデザインの仕事まで、
できることの幅が広くなることは間違いありません。
[rakuten]online-shoppers:10200789[/rakuten]

作成されたアイコン

Web用に保存からのアイコン化ファイル
 書き出しからのアイコン化ファイル

マルチアイコンの表示

このサイトの作者さんのおっしゃるように、
ここではマルチアイコンを生成してくれますので、
Explore上でアイコン表示を変更すると以下のように、
大きさに合わせたアイコンが表示されるようになります。

Exploreでのマルチアイコン表示

参考

出力ファイル一覧

参考までに出力ファイルを一覧化しておきます。
（テーブルはやっつけですみません、また追って更新します・・・）

16px画像

出力方法	16px		サイズ比較
出力方法	画像	サイズ	サイズ比較
Web用に保存(PNG8)		284 byte	100%
スクリーン(72ppi)		383 byte	135%

32px画像

出力方法	32px		サイズ比較
出力方法	画像	サイズ	サイズ比較
Web用に保存(PNG8)		424 byte	100%
スクリーン(72ppi)		618 byte	146%

48px画像

出力方法	48px		サイズ比較
出力方法	画像	サイズ	サイズ比較
Web用に保存(PNG8)		567 byte	100%
スクリーン(72ppi)		829 byte	146%

72px画像

出力方法	72px		サイズ比較
出力方法	画像	サイズ	サイズ比較
Web用に保存(PNG8)		732 byte	100%
スクリーン(72ppi)		1.15 KB	157%

1000px画像（参考）

出力方法	1000px		サイズ比較
出力方法	画像	サイズ	サイズ比較
Web用に保存(PNG8)		10.8 KB	100%
スクリーン(72ppi)		16.8 KB	156%

私もこの本を読んでいますが、あーこんな方法があったのか・・・と
本当にこの本の趣旨のとおりの発見があります＾＾；
[amazonjs asin=”4774149470″ locale=”JP” tmpl=”Small” title=”10倍ラクするIllustrator仕事術　～ベテランほど知らずに損している効率化の新常識”]