イラレでファビコンを作る方法3  illustrator CC 講座10-03

SDのトレースが完了しました。形状ができあがりましたのでカラーリングになります。

カラーリングとサイズ調整

色設定としては当初金と銀でエンボス処理っぽい事をして…と考えていましたが、非常に小さいファビコンで細かいディティールを入れても厳しいかもしれません。

そこでまずキーワードから感じる印象でカラーリングを考えます。
セッジという私のペンネームですが、セッジというのはカヤツリグサ系の草のことです。

草ですので、イメージカラーとしては「セッジ」はグリーン系、「デザイン」については「セッジ」の作り出したもの=影響と言うか影ということで、緑系暗色と設定しました。

カラーリング

カラーリングが決まったところでサイズ調整に入ります。
Bloggerでのファビコンの規定では「100KB未満の正方形」としか書いてありません。

ファイルサイズを合わせることはそんなに難しいことではありませんが、視認性の問題もありますので、やはりPixel数で合わせたいところです。

そこで少し調べてみますと、一般的なファビコンサイズが見つかりました。
以下のようになります。

 16x16、24x24、32x32、48x48、64x64(単位は全てPixel)

このうち32x32が、ChromeやFirefox、Safariのタブへの対応サイズの様です。
一応、代表的なサイズに合わせてそれぞれ縮小してみます。

まずはこの5種類のサイズを【長方形ツール】で作成し、右クリック→【ガイドの作成】を選びます。

サイズ調整1

作成したガイドに合わせ、【拡大・縮小ツール】でそれぞれのサイズに合わせてみます。また別バージョンとして座布団有りの白文字バージョンも作ってみました。

サイズ調整2

サイズ調整3

サイズ調整をしたら、32x32のファビコンをコピーし、【ファイル】→【新規】を選び、今回はプリセットにサイズが設定されていないので、幅と高さに32と入力して【作成】ボタンを押します。

カスタムファイルサイズ

新しい画面が開きましたら、そこに先程コピーしておいたファビコンをペーストします。
位置がズレる可能性がありますので、ズレていたら修正して下さい。

オブジェクトのペースト

書き出しとBloggerでの読み込み

ズレなどの修正が終わったら、【ファイル】→【書き出し】→【書き出し形式】を選び、次のファイルダイアログウインドウで名前付けしたあと、PNG形式を選択します。

ファイル書き出し1

書き出しボタンを押すと、PNGオプションウインドウが表示されるので、解像度:スクリーン(72ppi)、アンチエイリアス:文字に最適、にしてOKを押します。

ファイル書き出し2

こうして書き出したPNG形式のファビコンをBloggerに読み込みます。

Blogger設定の【レイアウト】→【ファビコン】→【編集】、新しく表示されるウインドウの【ファイルを選択】ボタンで作成したファビコンを選択し、保存を押します。

Bloggerへの読み込み

これでブログにファビコンを設定することができました。

PNG形式を選択している理由は透明部分があるかどうかです。
JPG形式の方が対応しているブラウザは多いのですが、JPGは透明部分の保存ができません。

透明な部分があるPNGファイルを、Bloggerブログに組み込んでみたところ、ブラウザのベース色の上にファビコンが乗る形になりました。

ファビコン表示例

以上、みなさんもファビコンを作成して自己ブログ、自己サイトのタブから独自性を持たせてみてはいかがでしょうか。

Ai講座もくじ

ランキング応援よろしくお願いします!
にほんブログ村 デザインブログへ

[Sponcer Link]


コメント