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

2013/06/27 2014/11/22

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

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

タブのみ表示

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

[rakuten]001:9784844362807[/rakuten]

はじめに

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

今回はちょっと余談的に、
Illustratorの１つのワークスペースを利用して、
faviconの画像の作成方法を捕捉でご紹介します。

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

AIファイル作成

AIファイルの新規作成

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

AIファイルの新規作成

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

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

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

作成されたアートボード

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

作成されたアートボード

ファビコン用デザインの作成

ファビコンのデザイン作成は、
16px、32px、48pxの３サイズで綺麗に表示されるように、
作成する必要がありますので凝ったデザインは控えた方が無難です。

デザインの作成

[rakuten]001:9784798033938[/rakuten]

アイコン用画像の出力

デザインの作成が完了したら、
ファイルメニューの[Webおよびデバイス用に保存]をクリックします。
※以後、「Webおよびデバイス用に保存」は通称の「Web用に保存」と表記

Web用に保存

Web用に保存の設定

開かれた「Web用に保存」のダイアログにて、
[画像サイズ]タブをクリックし出力される画像サイズを確認します。
今回は72pxのアートボードを72px画像で
出力しますので変更は不要です。
サイズを変更した場合には必ず[適用]をクリックしてください。

出力サイズの確認72px

Web用に保存

[保存]をクリックすると保存ダイアログが開きますので保存します。

出力の保存

異なるサイズのファイルを出力

先ほどは72px画像を出力しましたが、
続けて48px、32px、16pxのfavicon.ico用のファイルを出力します。

出力サイズの確認48px

出力サイズの確認32px

出力サイズの確認16px

出力したファイルの確認

それぞれの画像サイズでファイルが出力されました。

作成された各画像

[rakuten]001:9784798033594[/rakuten]

画像ファイルのアイコンファイル化

アイコン(.ico)ファイル作成

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

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

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

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