アイコンビルダー
アイコン作成ってめんどくさい。
| tags: | python, tips, example, icon, windows, utility |
|---|---|
| rating: | 5.0 |
| created: | 2007-02-05T20:24:24 |
アイコンを簡単に作成するツール バイナリインストーラを追加 アイコン作成の標準指南書は複雑で非常に手間がかかる。
背景
Windows XP 用アイコン作成法 ここ読みました。
こんな手間アイコンひとつひとつに掛けてられません！
ずぼらな私は ドロップ１発即完了！ というものが欲しいのです。
アイコン生成ツールを探してみましたが、 ほとんどシェアウェアか ２５６色アイコンまでしかサポートしてくれませんでした。
すばらしい出来のソフトウェアもあったにはあったんですが、 やはり、ドロップ１発で完了するものは見つかりませんでした。
で、自作することに。
アルファチャネルの必要性
XPからはアルファチャネルをアイコンで利用できるようになりました。 ピクセル単位で透明度を指定できるので、 ぼんやりした影を自然に背景へ落とすことが出来ます。
アルファチャネルがない場合、 背景色を決め打ちした画像を用意するしかありません。 こういったアイコンが想定外の背景色上に描画される時、 エッジが非常に美しくないことになってしまいます。
意外とアルファチャネルって必要なのか疑問に思われる方も多いでしょうが、 以下をみれば、その有用性がわかってもらえるかもしれません。
アルファあり
アルファありは背景にドロップシャドウが馴染みます。
アルファなし
アルファなしは背景にドロップシャドウが馴染みません。
注意
InternetExplorer6以前の方は似たような画像が表示され、 アルファチャネルの有用性がわからないことでしょう。 速やかに「Firefox1.5以降」か 「InternetExplorer7以降」への バージョンアップをオススメします。
マスクの必要性
ビットマップヘッダにて、元の高さの２倍のビットマップ指定をすると、 マスクデータを参照するようになります。
アルファチャネルが有効ならマスクは不要かと思われますが、 実際にはこそこそとマスクは利用されているようです。
例えばアイコンを選択した時のシルエットにもマスクは使われているようです。 ちゃんと使える見栄えの良いアイコンを作成するには マスクは必要ということです。
アルファチャネルのない画像では当然必要です。
意外と大変アイコンフォーマット
- ファイル全体
![digraph icon_builder1 {
subgraph cluster0 {
label = "アイコンファイル"
ICON [shape=record, label= "{ICONFILEHEADER|ICONDIRENTRY[0..N]|BITMAPENTRY[0..N]}"]}
}](../../_images/graphviz-1cc06cc116c5692c560305c8c91bf0d2c8666813.png)
- 各要素
![digraph icon_builder2 {
subgraph cluster0 {
label = "ヘッダー（ICONFILEHEADER）"
ICON_FILE_HEADER [shape=record, label ="{short idReserved | short idType | short idCount}"]}
}](../../_images/graphviz-77579d5fb379354ad7c7bb2818a6370179e90e85.png)
![digraph icon_builder3 {
subgraph cluster0 {
label = "アイコンエントリ（ICONDIRENTRY）"
ICON_DIR_ENTRY [shape=record, label= "{BYTE bWidth| BYTE bHeight | BYTE bColorCount | BYTE bReserved | WORD wPlanes | WORD wBitCount | DWORD dwBytesInRes | DWORD dwImageOffset}"]}
}](../../_images/graphviz-b166ba4f28bdb24af0e7dc2cedb84b582446ba3f.png)
![digraph icon_builder4 {
subgraph cluster0 {
label = "ビットマップエントリ（BITMAPENTRY）"
BITMAP_ENTRY [shape=record, label= "{BITMAPINFOHEADER | PALETTE DATA\n4Bytes×(0 or 16 or 256) | BITMAP RAW DATA(32BPP or 4BPP or 8BPP)\nW×H×Bytes/Pixel | MASK RAW DATA(1BPP)\n4bytes_aligned(W÷８)×H}"]}
}](../../_images/graphviz-f47b0dec2359e61f645cea2986bfa777ed37f654.png)
- ビットマップヘッダ
![digraph icon_builder5 {
subgraph cluster0 {
label = "ビットマップヘッダ（BITMAPINFOHEADER）"
BITMAP_INFO_HEADER [shape=record, label= "{long biSize | long biWidth | long biHeight | WORD biPlanes | WORD biBitCount | long biCompression | long biSizeImage | long biXPersPerMeter | long biYPelsPerMeter | long biClrUsed | long biClrImportant}"]}
}](../../_images/graphviz-39e8ef980f838fcf9850634d12cbc63ab609881d.png)
注意点:
1. BITMAPINFOHEADER.biHeight ＝ ICONDIRENTRY.bHeight × ２
2. RAW DATAはボトムラインからトップ方向に格納すること！
3. ４バイトアラインになっていること！
4. ピクセルデータは「Ｂ・Ｇ・Ｒ・Ａ」の順番で格納。
5. パレットデータは「Ｂ・Ｇ・Ｒ・Ｘ」の順番で格納。
Windowsの旧来のアイコン描画
アルファチャネルサポート環境では、 32BPPデータをそのまま利用して単純にブレンド描画されますので、 この場合、８ビットカラーは無用です。
しかし、16BPP画面設定環境やリモートデスクトップ、 Windows2000などでもちゃんと表示されるアイコンを作るには、 アルファチャネルサポートなしの環境を想定しなければいけません。
アイコン描画にアルファチャネルを利用できない環境では 以下のような旧来のアイコン描画手順を用いてアイコンが描画されます。
「BITMAP RAW DATA」はXORエントリと仮称します。 「MASK RAW DATA」はANDエントリと仮称します。
- 背景画像に対し「MASK RAW DATA」をANDオペレーションで描画します。
- 1.の結果に対し「BITMAP RAW DATA」をXORオペレーションで描画します。
- 2.の結果をアイコンとして描画します。
以上の手順なので、それぞれのエントリには以下の条件が付け加えられます。
- 「MASK RAW DATA」は「反転マスク」で、 背景を残したいピクセルを白にした画像を用意しなければならない。
- 「BITMAP RAW DATA」は「MASK RAW DATA」が白に相当するピクセルは 値が「0」でなければならない（8BPPでも）。
- 最低でも8BPPカラー画像を含んでいなければならない。
ちゃんとしたアイコン
ちゃんと各種環境でそれなりに綺麗に見えるアイコンを作るには
- 32BPP画像、8BPP画像の２種類
- ４８×４８、３２×３２、１６×１６の３サイズ
以上６種類の画像をバンドルする必要があります。 （推奨は4BPP画像も含むので、９画像になるのですが、 256色環境は絶滅寸前なのでもういいかな？と思います。）
有名どころのアイコンの中身の列挙順をみると、
- 32BPP, 16×16サイズ
- 32BPP, 32×32サイズ
- 32BPP, 48×48サイズ
- 8BPP, 16×16サイズ
- 8BPP, 32×32サイズ
- 8BPP, 48×48サイズ
という順番になっています。
これまでに述べた様々な細則を３２ＢＰＰのＰＮＧファイルひとつから 一括して生成するようにしたのがこの アイコンビルダー です！
ダウンロード
ソースダウンロード
サンプル群のMercurialチェックアウト:
> md samples
> cd samples
> hg init
> hg pull -u http://python.matrix.jp/repos/samples
「samples/icon_builder/icon_builder.py」がソースです。
面倒なかたはこちら ： https://www.box.com/shared/n6yzxs4x6u
リンク先の「 setup_icon_builder.exe 」をダウンロードして実行すれば デスクトップショートカットまで作成してくれます。
使い方
icon_builder.py test.png
これだけで「test.ico」を生成します。
ショートカットなどをデスクトップに置いておけば、 PNG画像をそのショートカットにドロップするだけで PNG画像のそばにアイコンが生成されます。
バイナリインストーラを使えば、 デスクトップにショートカットを作成してくれますので、 PNGファイルをそのショートカットにドロップするだけです！
警告
PNG画像は「２４ビットカラー＋８ビットアルファチャネル」形式が必須。 サイズは正方形であれば任意ですが、 損失の最も少ないのは「９６×９６ピクセル」サイズです。
PNG画像の作り方
筆者が良く使う方法は
「 Inkscape 」を使います。
起動してShift+Ctrl+Dで「ドキュメントの設定」を開きます
ここで「９６ｐｘ×９６ｐｘ」サイズに設定します。
そしておもむろに絵を描きます。
Shift+Ctrl+Eで「ビットマップにエクスポート」を開きます。
エクスポート領域をページとして、 「９６ｐｘ×９６ｐｘ」サイズを指定します。 ファイル名をセットしてエクスポートを押す。
- サンプル：
- アイコン化してみた：
「 Open Clip Art Library 」などから取得した SVGイメージを組み合わせてレイアウトするだけでも かなり印象の良いアイコンが作れます。
まとめ
実行ファイルにドロップするだけで、 即座にアイコンファイルを吐くことができるようになりました。
なかなかてこずりましたね～。 Windowsの仕様に振り回されるのがまたさらに嫌いになりました。
wxPythonやPILなども今回のようなアイコンファイルの 書き出しはサポートしていません。
ちょろっと探してみただけなんですが、 .Netライブラリでもサポートしてなさそうですよ？
Windowsの32BPPビットマップファイルフォーマットとかまだまだ不安。 だから私はPNGを多用しがちです。
ちなみにXP以前のエクスプローラの詳細・縮小表示や画像ビューア およびInternetExplorer6以前では、 PNGを綺麗にプレビューできない場合があります。 用意する元画像の確認には32BPPのアルファチャネルサポート環境、 例えばFireworksやPictBearSEなどを利用してくださいね。
修正履歴
- 2007/2/18
- 画像のマスクに相当する部分をゼロにしておく処理を追加。
- リサイズ時にリサンプルアルゴリズムを適用。
- 2007/2/21
- バイナリインストーラの作成および公開。
- 2007/2/24
- ８ｂｐｐアイコンの画質向上。 （quantizeの利用とバックカラーの調整）