自分でアイコンを作ろう！

3月29日の話の続き。

本日は、IEの お気に入りに表示されるアイコン（favicon）の作り方について。

準備

必要なもの。

• BMP形式で保存できる お絵描きソフト
• アイコン変換ソフト『@icon変換』　→ ダウンロード

@icon変換をダウンロードしたら設定変更。
メニューバーの[リスト] → [ライブラリ編集]とクリック。
アイコンの絵が表示されるので見やすいぉ。

今回 @icon変換で必要になるのは この5つのボタン。

メニューバーから開く事もできまする。
ツールボタンとメニューバーでの操作の対比表。

ツールボタン	メニューバー
【素材ファイルを開く】	[ファイル] → [開く]
【単独アイコンに保存】	[ファイル] → [単独icoとして保存]
【BMPに保存】	[ファイル] → [bmp形式で保存]
【透過マスクの編集】	[編集] → [透過マスクの編集]
【アルファチャンネルの編集】	[編集] → [アルファチャンネルの編集]

お絵描き

お絵描きソフトを起動。　オイラはPictBearを使用(｀・ω・´)

1. キャンバスのサイズを16ピクセル×16ピクセルに変更。
2. 絵を描く。
3. 背景色を絵の中で使っていない色で塗りつぶす。
4. BMP形式で保存。

既存のアイコンに手を加える場合

以下の方法でBMP形式に変換してから お絵描きソフトで開いて描き加えて上書き保存しませう。

@icon変換を起動。

1. ツールボタンの【素材ファイルを開く】をクリックして、保存してあるアイコンを開く。
2. 開いたアイコンをクリック。
3. 【BMPに保存】をクリックして保存。

ICO形式に変換

背景色を透過にする

@icon変換を起動。

1. 【素材ファイルを開く】をクリックして、さっき作った絵を開く。
2. 開いたアイコンをクリック。

【透過マスクの編集】をクリック。

1. 『マスク表示』にチェックを入れる。
2. 【色から自動生成】ボタンをクリック。
3. カーソルがスポイト形に変わったら、背景色の部分をクリック。
   背景色全体にドットのようなものが表示されればOK。
4. 【OK】をクリック。

このままICO形式で保存しても使えますが、滲んで汚くなりまつ(´・ω・｀)


なので、もう一手間。

32bitに変換

アイコンが選択されている状態で

1. 【アルファチャンネルの編集】をクリック。
2. 【マスクからアルファチャンネルを作る。】をクリック。
   背景がグレーに変わればOK。
3. 【OK】をクリック。

アイコンとして保存

ICO形式で保存すれば完成でし(・∀・)

1. 【単独アイコンに保存】をクリックしてICO形式で保存。

32bitに変換すると こんなに綺麗になりまする♪
理屈は分からんけどｗｗ

---

お気に入りのアイコンの変更方法は こちらをご覧下しゃい。