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

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

      2014/11/22

Google or AdMax Promotion(it)

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

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

13_タブのみ表示

タブのみ表示

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

[rakuten]001:9784844362807[/rakuten]

はじめに

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

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

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

AIファイル作成

AIファイルの新規作成

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

01_AIファイルの新規作成

AIファイルの新規作成

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

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

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

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

作成されたアートボード

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

03_作成されたアートボード

作成されたアートボード

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

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

04_デザインの作成

デザインの作成

[rakuten]001:9784798033938[/rakuten]

アイコン用画像の出力

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

05_Web用に保存

Web用に保存

Web用に保存の設定

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

06_出力サイズの確認72px

出力サイズの確認72px

Web用に保存

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

07_出力の保存

出力の保存

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

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

08_出力サイズの確認48px

出力サイズの確認48px

 

09_出力サイズの確認32px

出力サイズの確認32px

 

10_出力サイズの確認16px

出力サイズの確認16px

出力したファイルの確認

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

11_作成された各画像

作成された各画像 

[rakuten]001:9784798033594[/rakuten]

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

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

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

 

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

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

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


最後までお読みいただきありがとうございました。
アルゴリズン


役に立ったと思っていただけたら、以下からシェア頂けたら幸いです^^

QRコードからもこのURLを開けます。

Pitta Promotion

アイキャッチ画像に利用させて頂いております、各社ブランドのロゴやシンボルに関しては、
各社ブランドのロゴや商標等に関する帰属についてをご確認頂けますようお願い致します。
ロゴの使用等に関する苦情・ご意見等がございましたら管理者までご連絡ください。

AdMax Promotion

カテゴリ
すべて展開 | すべて省略

Rakuten Promotion

プロモーション(btm)

Google or AdMax Promotion (it)

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

Comment

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

  関連記事