ブログ用のアイコン、ファビコンをMacで超お手軽に作ってみたよ

2012/08/29

WordPressに引越して新装開店したことだし、この際、「すぐびん」のアイコンでも作ってみようかってことで。ファビコンにも使えるし。
今回使ったソフトは「Keynote」と「プレビュー」だけ。Keynoteは単にそれしか図を描けるソフトをぼくが持っていないから。図が描ければなんでもいい。

なんといっても重要なのはどんな絵柄にするかっていうこと。いざ考え出すとこれがなかなか難しい。すぐびんのメインは読書感想なので、本を表す絵柄にしたい。まさか四角い箱にするわけにもいかず、本をいろんな角度から眺めてみる。うん、この視点が良さそう。
絵心がないので、凝ったデザインははなからあきらめている。だから単純な幾何学図形で上の写真を表現したい。
Keynoteで、円と長方形とを組み合わせてこんな感じにしてみた。まあまあよかろう。円のはみ出した部分は後でトリムします。
上の図はもう出来上がったようになっていますが、ここに至る前の色を決める段階で結構難儀しています。Smart&Passiveをイメージしていろんな配色を試した結果、この配色に落ち着いた。

Keynoteで描いた図形をコピーしてプレビューに貼り付け。「クリップボードから新規作成」です。このときなぜかPDF形式でファイルができてしまうので、そのままではうまく編集できない。形式をPNGもしくはJPEGにしていったん保存し直します。その後、正方形になるようにいらない部分をトリムして、
まずはアイコン画像の出来上がり。
ファビコンにするにはもう一作業が必要。上で完成したアイコン画像を16x16サイズの縮小して「別名で保存」―「フォーマット」―「Windowsアイコン」で保存する。拡張子icoが付いたファビコンファイルの出来上がりです。

このファイルをファビコンに設定わけですが、ぼくが今使っているWordPressテーマのGrapheneは、オプションでファビコンを設定できるようになっている（とっても親切設計!）。ので、その項目を入力してファビコン設定の完了です。