頑張らない!でも諦めない!必死にならずにええかげん

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

      2014/11/22

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

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

13_タブのみ表示

タブのみ表示

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

[rakuten]001:9784844362807[/rakuten]

はじめに

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

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

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

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

 

AIファイル作成

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

AIファイルの新規作成

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

01_新規ファイルの作成

新規ファイルの作成

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

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

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

 

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

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

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

作成されたアートボード

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

03_作成された新規ファイル

作成された新規ファイル

アートボードの編集

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

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

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

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

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

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

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

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

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

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

アートボードの属性編集

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

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

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

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

08_アートボード名称の変更

アートボード名称の変更

[rakuten]001:9784798033938[/rakuten]

複数アートボードの配置

アートボードの追加

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

09_アートボードの追加

アートボードの追加

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

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

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

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

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

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

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

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

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

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

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

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

同様に繰り返します。

13_32pxも同様にアートボードを変更

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

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

同様に繰り返します。

14_16pxも同様にアートボードを変更

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

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

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

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

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

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

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

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

アイコンデザインの作成

作成されたアートボード

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

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

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

今回利用するデザイン

デザインを配置します。

18_デザインの配置

デザインの配置

[rakuten]001:9784798033594[/rakuten]

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

Web用に保存

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

19_Web用に保存の選択

Web用に保存の選択

Web用に保存ダイアログ

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

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

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

画像ファイル名の入力

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

21_保存

保存 

出力画像ファイルの確認

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

22_出力ファイルの確認

出力ファイルの確認

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

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

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

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

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

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

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

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

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

書き出しからの画像生成

書き出しの実行

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

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

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

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

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

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

26_ファイル形式の選択

ファイル形式の選択

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

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

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

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

オプションの選択

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

28_解像度と背景の選択

解像度と背景の選択

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

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

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

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

[rakuten]001:9784881667590[/rakuten]

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

画像のアイコン化

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

 

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

作成されたアイコン

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

マルチアイコンの表示

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

30_Exploreでのマルチアイコン表示

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

参考

出力ファイル一覧

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

16px画像
出力方法 16px サイズ比較
画像 サイズ
Web用に保存(PNG8) favicon_ai-m16 284 byte 100%
スクリーン(72ppi) screen_16px 383 byte 135%
32px画像
出力方法 32px サイズ比較
画像 サイズ
Web用に保存(PNG8) favicon_ai-m32 424 byte 100%
スクリーン(72ppi) screen_32px 618 byte 146%
48px画像
出力方法 48px サイズ比較
画像 サイズ
Web用に保存(PNG8) favicon_ai-m48 567 byte 100%
スクリーン(72ppi) screen_48px 829 byte 146%
72px画像
出力方法 72px サイズ比較
画像 サイズ
Web用に保存(PNG8) favicon_ai-m72 732 byte 100%
スクリーン(72ppi) screen_72px 1.15 KB 157%
1000px画像(参考)
出力方法 1000px サイズ比較
画像 サイズ
Web用に保存(PNG8) favicon_ai-m1000 10.8 KB 100%
スクリーン(72ppi) screen_1000px 16.8 KB 156%

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

*本ページ内に記載されされた各社ブランド、サービス名、商標、登録商標については、
各社ブランドのロゴや商標等に関する帰属についてをご確認ください


最後までお読みいただきありがとうございました。

アイキャッチ画像に利用させて頂いております、各社ブランドのロゴやシンボルに関しては、
各社ブランドのロゴや商標等に関する帰属についてをご確認頂けますようお願い致します。

AdMax Promotion

ブログ記事のご紹介
すべて展開 | すべて省略

Rakuten Promotion

ページ
すべて展開 | すべて省略

プロモーション(btm)

Google or AdMax Promotion (it)

 - Illustrator, デザイン , , , , , , , , ,

Comment

  1. […] 1つのアートボードを使ったIllustratorによるFavicon画像の作成 複数アートボードを使ったIllustratorによるFavicon画像の作成 […]

  関連記事