2011年8月21日日曜日

GIMPでAndoroidダッシュボード向けアイコンにチャレンジ2


前回(GIMPでAndoroidダッシュボード向けアイコンにチャレンジ)のアイコン作成に挑んでみましたが、できたアイコン見て「いまいちじゃね?」って思う人もいたんじゃないでしょうか。
まぁ、いなかろうが自分がそう思ってるんだから周りもそう思うはずという思い込みで進めて行きたいと思います。
↓前回作成したのはちなみにコレです。
噴出しadd
↓今回作成するのはコレ。
 噴出し改
ちょっとよくなりましたよね?(希望
では、さっさと進めましょう。次の手順で進行します。
  1. 作業のベースファイル作成
  2. 背景部分の枠を決定
  3. 白縁取り作成
  4. 影を作成
  5. 背景内部のグラデーション作成
  6. 前面の絵を白で書き込み
  7. 絵を強調するため背景へ反映
  8. レイヤー整理、縮小して出力

作業のベースファイル作成

前回は「iosched」のアイコンを参考に縦96ピクセル、横144ピクセルのアイコンを作成しようとしてそのサイズの画像を最初から作成しましたが、今回は拡大したサイズで編集し最終的に縮小する手順で進めます。
比較画像まで作ってませんが、最初からそのサイズで作成する場合に比べて以下のような効果があると思ってます。
  1. 拡大状態での曲線が綺麗になる
  2. 縮小時に勝手にジャギが軽減されてアンチエイリアス効果がでる
2については、拡大時の線が細すぎると逆につぶれて見えなくなりますが、その辺意識して太めに作れば良いでしょう。
ということで、目的のサイズ縦96ピクセル、横144ピクセルの倍で縦192ピクセル、横288ピクセルで作成します。
image
上の画像では編集するときに中心位置がわかりやすいように薄いグレー、濃いグレーで塗りつぶしたレイヤーを一番下に配置しています。これは好みで作っても作らなくても良いでしょう。
前回も設定しましたが、グリッドの設定も行っておきます。
グリッドは4pxで、グリッドを表示、グリッドへスナップを設定します。
image image

背景部分の枠を決定

さっきの画像で既に枠を意識しているのですが、これから作成する背景の位置を決定、確認するため、下の階層へレイヤーを追加して枠部分を作成します。
ツールボックスから短径の選択枠を取り出して枠の領域を選択します。
image image
メニュー>選択>角を丸めるで15を指定して丸めましょう。
image image
背景の濃い目の色を描画色(ここでは3366CC)に設定してメニュー>編集>描画色で塗りつぶすで塗ります。
image image

白縁取り作成

次に白の縁取りを作成します。
先ほどの背景レイヤーの下の階層へ、白縁取り用のレイヤーを作成します。
image
背景の1グリッド(4px)  大き目の短径を選択し、角を15で丸めて、描画色白で塗りつぶします。
imageimage

影を作成

前回、影を灰色で塗りつぶししましたが、今回は少し変えましょう。
塗りつぶしもいいのですが、やっぱり時代はぼかしです。
白縁取りの下へ影レイヤーを追加します。(白縁取りで使用した選択枠は維持しておいてください。)
描画色を濃い目の灰色(404040)で作成し、塗りつぶします。(白縁取りと同じ領域のため見えません。)
image image
ちょっと困るので、レイヤーを非可視としましょう。
image image
次に、影レイヤーを選択状態とし、先ほど使用した選択枠を解除します。
image image
フィルター>ぼかし>ガウシアンボカシを選択し、8pxでぼかします。
image image
この状態で、背景・白縁取りを表示するとこうなります。
image
ちょっと影の位置を移動しましょう。影レイヤーを選択して移動ツールを使います。
image image
移動対象は画像、機能の切り替えはアクティブなレイヤーを移動です。
そのまま、画像部分をドラッグしてグリッド(4px)の半分(2px)右下へ移動します。
image image
前回よりずっと影っぽくなりましたね?

背景内部のグラデーション作成

背景内部のグラデーションは基本的に前回と同様です。
濃い目の色(3366cc)で塗りつぶした状態で、薄めの色(66FFFF)でグラデーションを斜めに反映します。
ただ、この後の作業でガウシアンボカシを入れる関係で、枠の中だけでなく全体を塗りつぶします。
グラデーションの開始位置がわかりにくいので、いったん白縁取りの下へレイヤー追加して濃い目の色で塗りつぶします。
image    image
グラデーションツール(ブレンド)を選択して、描画色から透明を選択し、枠の左上から右下へグラデーション編集します。
image image
結果下のようになります。白縁取りと仮の背景枠を非可視にすると右の画像のとおり。
image image
右の状態だと、中心位置とかわからなくなるので背景グラデーションレイヤーを非可視にして進めます。

前面の絵を白で書き込み

これは前回と一緒で任意で絵を描きましょう。
あとで1/2に縮小するので、若干太目を意識します。
image image

 

絵を強調するため背景へ反映

前回はやりませんでしたが、グラデーションの背景に白の絵を載せただけだとちょっと安っぽい感じがしたのでちょっと強調表現をさせましょう。
image image
絵の下に、背景グラデーションレイヤーを持ってきます。
ツールボックスのファジー選択ツールを使用して、前面レイヤーの絵の部分を選択していきます。
image image
パーツが複数の場合はShiftキーを押しながら選択すると、複数個の選択枠が一度に作れます。
選択枠を維持したまま、背景グラデレイヤーを選択して、濃い目の背景色で選択領域のみ塗りつぶします。
image image
選択枠を解除します。
image
ガウシアンぼかしで8px指定でぼかします。
image image
最後に、不要な描画部分を削除します。
レイヤーの確認用背景を表示して、位置を参考に背景領域選択枠を再度作成します。
image image
グラデーション背景を表示して、選択枠を反転します。
 image image
画像のウィンドーをアクティブにした状態でデリートキーを押します。(選択部分となっている背景枠の外側を削除)
image
これで絵のぼかしが反映されたグラデーション背景が完成です。

レイヤー整理、縮小して出力

表示したいレイヤーのみ可視状態とします。
image
☆この状態のxcfファイルを今後利用するために、大事に保管しておきましょう。☆
最後の仕上げとして、本来作成したかった縦96ピクセル、横144ピクセルへ縮小します。
image image
image
ファイル>名前をつけて保存でPNGファイルに出力して完成です。

作成結果比較

前回作成したのが左、今回のが右です。
 噴出しadd 噴出し改
前回は自分で言っておきながらホントに及第点かぁ?と思ってましたが、今回は確実に及第点でしょう。
若干絵とサイズが変わってるとかそういう「大人って汚い!」な部分を除いてもなかなか良いんじゃないでしょうか。
と、長くなりましたがアイコンについてはコレで終わりです。
あそうだ、先日、いつのまにかアプリが50DL突破してました。パチパチ。
そして初のエラーレポートが報告されてました。orz
まぁ不具合報告でも早くユーザレビュー投稿されるようなアプリ作ってみたいものです。
それではこの辺で、でわでわ。

0 件のコメント:

コメントを投稿