ブログ用のアイコン、ファビコンをMacで超お手軽に作ってみたよ
WordPressに引越して新装開店したことだし、この際、「すぐびん」のアイコンでも作ってみようかってことで。ファビコンにも使えるし。
今回使ったソフトは「Keynote」と「プレビュー」だけ。Keynoteは単にそれしか図を描けるソフトをぼくが持っていないから。図が描ければなんでもいい。
なんといっても重要なのはどんな絵柄にするかっていうこと。いざ考え出すとこれがなかなか難しい。すぐびんのメインは読書感想なので、本を表す絵柄にしたい。まさか四角い箱にするわけにもいかず、本をいろんな角度から眺めてみる。うん、この視点が良さそう。
絵心がないので、凝ったデザインははなからあきらめている。だから単純な幾何学図形で上の写真を表現したい。
Keynoteで、円と長方形とを組み合わせてこんな感じにしてみた。まあまあよかろう。円のはみ出した部分は後でトリムします。
上の図はもう出来上がったようになっていますが、ここに至る前の色を決める段階で結構難儀しています。Smart&Passiveをイメージしていろんな配色を試した結果、この配色に落ち着いた。
Keynoteで描いた図形をコピーしてプレビューに貼り付け。「クリップボードから新規作成」です。このときなぜかPDF形式でファイルができてしまうので、そのままではうまく編集できない。形式をPNGもしくはJPEGにしていったん保存し直します。その後、正方形になるようにいらない部分をトリムして、
まずはアイコン画像の出来上がり。
ファビコンにするにはもう一作業が必要。上で完成したアイコン画像を16x16サイズの縮小して「別名で保存」―「フォーマット」―「Windowsアイコン」で保存する。拡張子icoが付いたファビコンファイルの出来上がりです。
このファイルをファビコンに設定わけですが、ぼくが今使っているWordPressテーマのGrapheneは、オプションでファビコンを設定できるようになっている(とっても親切設計!)。ので、その項目を入力してファビコン設定の完了です。
今回ついでにiPhoneライクなアイコンも作ってみた。
使わせていただいたのはこちらのサイト。
iPhone Style Icon Generator
反射の仕方とかシャドウ、サイズやファイルタイプを適当に設定して、
こんな画像が出来ました。今のところこのサイトのヘッダー画像なんかに使っています。
他にいいデザインを思いついたらまたそのときどうするか考えようっと。