ファビコン工房流 Faviconの作り方

Fireworksイメージ

我流なので、もっと良い方法があるのかもしれないですけれど、ファビコン工房でのFaviconの作り方を紹介します。

【使用ソフト】
Fireworks MX
イラスト描く時には「Photoshop」を使うので、本当はそちらの方が慣れてるんですけど、「Photoshop」は1600倍までしかズームアップできないのです(少なくともウチで使ってるバージョンでは)。
なので、最大6400倍までいけるFireworksを使ってます。
ドット絵専用のフリーのツールとかもあるんですけれど、レイヤーとか色の使い方がどうもしっくりこなくてここに落ち着いてます。
FireworksはFireworksでパレットの使い方が独特だったり、カーソルと描き込みの点がズレたりで困ったところもあるのですけど…。

【作成手順】
1.キャンバスの作成
16×16pxの背景色が白のキャンバスを作成します。
間隔を1pxにしたグリッドも表示。
上の画像のようになる筈です。

2.輪郭を作成
1pxの黒のブラシで輪郭を描いていきます。
何も見ない時もありますけど、大体見本を用意してから描きます。
16×16pxということは中心がないので、左右にズラしたくなかったら2px必要とか念頭に置きながら簡略化しながら作成します。
あんまり細かいところ描いてもわかりにくくなるだけなので。

3.着色
色を付けていきます。
輪郭では表現しきれない部分は色で表現するようにしてます。
何かの形を表現する場合も輪郭線アリ/ナシなど、時と場合によって使い分けています。
色はウェブセーフカラーしか使ってません。
バケツツールを使う時は、アンチエイリアスはオフにしておきます(色がはみ出すため)。

4.確認
実寸に戻し、おかしくないか確認します。
そのままではグリッド線が邪魔なので、オフにします。
初回は大概おかしいので、微調整していきます。
何か絵面が物足りない時は影をつけるなど色を足していきます。

5.書き出し
できた画像をGIFで書き出します。
セーフカラーしか使ってないので、書き出し時に色味が変わったりは問題ない筈。
できたGIFファイルの拡張子をicoに変更し、完成です!

早ければ1つ作るのに約10分です。
既存の画像からFaviconを作れるジェネレーターなどもあるので、それらを使う方がお手軽はお手軽ですが、個人的にはっきりした形の方が好きなのでドットで描く方法を選んでます。

2009年3月5日

Faviconの感想やリクエストなどありましたら、コメントをどうぞ!