自分でビルドしたFirefoxのアイコンやバージョン情報の画像をiceweaselにしてみる(別の画像を使用)

「自分でビルドしたFirefoxのアイコンやバージョン情報の画像をiceweaselにしてみる(概要と、Debian版iceweaselの画像への差し替え)」の続きとして、別のところから入手した画像を使用してバージョン情報/クレジット画像と各種アイコンファイルに使用してみる。
(2009/7/19)バージョン3.5系では画像の保存場所が変わっているので注意。「自分でビルドしたFirefoxのアイコンやバージョン情報の画像をiceweaselにしてみる(概要と、Debian版iceweaselの画像への差し替え)」の追記を参照。

画像の入手

バージョン情報ダイアログの画像(about.png)
クレジット画面の画像(aboutCredits.png)
その他のアイコン

完成

画像の入手

iceweaselのアイコンとして
https://wiki.ubuntu.com/IceWeaselIcon
に投稿作品が色々あったので、その中で最も気に入ったものを使用することに。
具体的には、IYY氏の
http://ubuntuforums.org/showpost.php?p=1622432&postcount=182
のもの。SVGファイルも公開されているが、今回はpng画像を使用する。
自分で使うだけなので、どのような画像をどのように編集しても自由なのだが、ここでは、独自ビルドしたときの地球の絵だけの状態から、上のWikiページの画像を使用した各種画像を作成する上でのメモを残す。

バージョン情報ダイアログの画像(about.png)

Debian版のテキストロゴを再現したものにIYY氏のアイコンを合わせたものを作ってみる。

Inkscapeでロゴのテキスト部分を再現*1
1. 「ice」の文字を書く(フォントは「Luxi Sans」っぽい)
2. フィル(中の塗りつぶし)の色を付ける(単色で#2715d3ff)
3. グラデーションツールで「対象」をストローク(輪郭線)にして、文字のストロークを線形グラデーションで上から下に引っ張る(既定は横方向)。まっすぐ引っ張るにはCtrlキーを押しっ放しにしてグラデーションの端までポイントをドラッグする。色は、「#ffffffff」(上=オフセット0)から「#ffffff00」(下=オフセット1)になるようにグラデーションエディタで設定する
4. 「ice」の文字を複製(Ctrl+D)して移動し、「weasel」に文字を変更、フィル色を#73a1d1ffにする(単色)
5. 両方のテキストを選択し、「オブジェクト - 整列／配置」の「整列」(基準は「選択」)で「オブジェクトの下端を基準の上端に揃えて配置」をクリックすると、文字の下のラインが揃う
6. 「ice」の後ろと「w」の間を調整(左右方向)
7. テキスト全体を複製し、それらが選択されている状態で下矢印キーで引っ張り、Vキーで垂直反転する
8. 反転したテキストのストロークの塗りを「なし」にして、フィルのグラデーションを縦方向に作成、「ice」は#2715d3ff(上)-#eeeeee3f(下)、「weasel」は#73a1d1ff(上)-#eeeeee3f(下)。
9. 「ice」のテキストをパスに変換(Shift+Ctrl+C)後「i」の文字の玉の部分のノード群をノード編集ツールで選択して消す(「BackSpaceやDeleteでOK」)
10. サイズ調整後PNG形式にエクスポート
GIMPで合成
1. オリジナルのmozilla/browser/base/branding/about.pngを開く
2. アイコンや文字のある部分を周辺の背景色で上書きして消す
3. 先ほどエクスポートした画像を開き、貼り付け後新規レイヤーのボタンでフローティング選択領域をレイヤーにする
4. 移動ツールを選択後、上下矢印キーで縦方向に移動
5. IYY氏の画像を開いて全選択(Ctrl+A)後コピー(Ctrl+C)し、ロゴ同様に貼り付けて位置調整
6. IYY氏の画像のウィンドウで「画像 - 画像拡大縮小...」により20x20程度の大きさに縮小
7. 縮小した画像を「色 - 色相-彩度...」で「色相」を「25」ぐらいにして色を変更し、これをコピーして作成中の画像に貼り付けて「i」の玉の部分に持ってくる
8. 保存する

途中のテキストのInkscape用作業データは
http://cid-3f9be5b1cd4a806c.skydrive.live.com/browse.aspx/%e5%85%ac%e9%96%8b/%e3%83%86%e3%82%b9%e3%83%88%e7%94%a8%e7%b4%a0%e6%9d%90/iceweasel%e3%81%ae%e3%83%86%e3%82%ad%e3%82%b9%e3%83%88%e3%83%ad%e3%82%b4%e5%86%8d%e7%8f%be
にアップロードした。作業中データなので、段階ごとに幾つかコピーしてある。

クレジット画面の画像(aboutCredits.png)

今度は、オリジナルの画像のアイコンのある部分を「周辺の背景色で上書きして消す」ということが難しいため、別のやり方でアイコンを消す。作業はGIMP上。

オリジナルのmozilla/browser/base/branding/aboutCredits.pngを開く
ウィンドウを縦に伸ばしてから切り取りツールで一番左の1ピクセルの列(1x149ピクセルの領域)を切り取る(Enter)
「画像 - 画像拡大縮小...」で幅/高さの比率固定の鎖を外し、横幅を300ピクセル(元の幅)にする
この上にIYY氏の画像を貼り付けて位置調整
保存する

その他のアイコン

mozicon128.pngは、公開されているPNGファイル(127x127)をGIMPで開いてキャンバスサイズを128x128にして中央にくるように調整したものを保存する。
document.pngは、IYY氏のアイコンを縮小したものを元のアイコンの地球の部分にかぶせるようにすれば、特に問題なく処理できる。
.icoファイルはGIMPで48x48の.icoファイルとして保存した。document.icoはdocument.pngをそのまま使用し、firefox.icoは128x128のアイコンを48x48にサイズ変更した。
残りのPNG/XPMファイルは、ImageMagickのconvertで変換した。

$ cd [mozillaディレクトリの場所]/browser/app
$ for size in 16 50; do convert -antialias -geometry ${size}x${size} mozicon128.png mozicon${size}.xpm; done
$ for size in 16 32 48; do convert -antialias -geometry ${size}x${size} mozicon128.png default${size}.png; done
$ for size in 48 64; do convert -antialias -geometry ${size}x${size} mozicon128.png ../base/branding/icon${size}.png; done