2011/11/19

GIMPで画像からPNGアイコンを作成

「嫁でホームを埋めたい埋め尽くしたい」と思ったので。
丸3日かけてこの出来はちょっとアレですが・・・。とりあえず手順を書いておきます。

フォトショでもあればよかったんですが、あいにくそんな高価なツールは持っていないのでGIMPでやりました。今回は私が知りうる中で最も理想的なゆうかりんであろうモックさんの絵を使わせて頂きました。モックさんありがとうございます。

まずは画像をトリミングします。JTrimを使います。上下、または左右に平行移動したいときは[座標1]の値を変えていきます。

トリミングが終わったらGIMPの作業に移ります。なお、GIMPの左右のウィンドウ(ドック)が閉じてしまった場合は [ ウィンドウ > 最近閉じたドック ] から復元できます。

GIMPで画像を開きます。影を付ける場合は予め作っておきます。影の作り方はこちらのサイトを参考にしました。影単体を保存してくと後々楽です。

[ 拡大 ] 見やすいように200%に拡大します。

[ 色 > 色相-彩度 :彩度を40に設定 ] 少し彩度をあげます。これはお好みで。

[ ツールボックス > ファジー選択 :しきい値を“110”に指定 ] 余白を透明化します。ファジー選択を使います。


画像ではわかりにくいですが、ピンクの枠の周りから画像全体のフチまでが選択されています。


[ 色 > 色を透明度に ] プレビューが表示されるので問題がなければOKを押します。すると右の画像のように白かった部分か透明になっています。

[ レイヤーを複製 ] 光沢をつけるために今あるレイヤーを複製します。

[ 選択 > 選択範囲を反転 ] これで先程のファジー選択とは逆の範囲を選択できます。

[ ツールボックス > ブレンド ]
色:白
不透明度:お好みで
グラデーション:背景色から透明
形状:線形


左上から対角に引っ張ります。すると右の画像のように全体的に白っぽくなります。

[ ツールボックス > 楕円選択 ]

左下から右上に、はみ出してもいいのでグイッと選択。
[ 編集 > 切り取り ] これで右画像のようになります。左下隅がちょっと残ってしまったのでそれも切り取っておきます。切り取り方は楕円でも半円でも上から下に向かってでもいいです。割と適当でも何とかなるかも。
これで光沢は出来上がりです。


[ レイヤーの不透明度 ] ちょっと明るすぎると感じたら不透明度を下げます。

[ PNGで保存 ] ファイルタイプから選択でも可能ですが、拡張子を手打ちしたほうが早いです。

[ 可視レイヤーの結合 ] 画像のとおりです。

[ エクスポート ] 圧縮レベルはお好みで。0だと無圧縮なので綺麗ですが、ファイルサイズが大きいです(あとで最適化するので多少大きくても構いませんが)。GIMPでの作業はこれで終わりです。

この時点でのサイズは
  • 35枚
  • 240*240
  • 合計7.7MB
7MB超は少し大きすぎます。画面解像度にもよりますが、私のケータイは800*480なのでアイコンは128*128もあれば十分でしょう。リサイズと最適化をします。

リサイズにはRalphaを使いました。複数のPNGファイルをまとめて縮小でき、透明部分も維持できます。PNGの最適化にはRalphaでpngoutを使ってもいいですが、私はPNGGauntletを使いました。最終的には、
  • 35枚
  • 128*128
  • 合計1.3MB
になりました。合計で6MB以上小さくなっています。

これでアイコン作成は終わりです。私はDVRを使ってホームに設置しました。トップ画は35個並べていますが、流石に実用的とは言い難いです。実際に使うなら以下のようになるでしょう。
Zeamがドックアイコン変更に対応したら最高なんですけどね。EVOデフォルトのロック画面だと顔に被ってしまうのでMagicLockerでロック画面を変えています。


余談:

本当はフチを消そうと思ったんですが、それに2日も掛かったうえに微妙な出来だったのでやめました。フチ付きアイコンは実質半日も掛かってません。フォトショならもっと簡単にできると思います。

余白が狭かったせいか影の付き方が微妙な気がする。また作りなおすか・・・。

0 件のコメント:

コメントを投稿