人気ブログランキング | 話題のタグを見る
ブログトップ

また、ゲームですか

bloodcross.exblog.jp

ゲーム日誌

IS03 アイコンの作り方2

前回から、時間たってますが そろそろ続きを書きます。

まず、アイコン作成するには サイズを決めなければなりません。

サイズは

説明/解像度 高解像度  中解像度  低解像度
最大サイズ  72x72px 48x48px 36x36px
推奨範囲   60x60px 40x40px 30x30px
矩形の範囲  56x56px 38x38px 28x28px

こんな感じです・・・とは、いっても96pxで作っても普通に縮小されて表示できます。

グラスアイコンを作る場合、中の描画は少し小さめになるんで元の画像をそのまま使うには

96pxで、作ったほうが楽です。

今回は、手順だけなんで色を変えてつくるともっと綺麗になると思います。
では、早速GIMPを立ち上げてみましょう。
IS03 アイコンの作り方2_f0053227_148037.jpg

[ファイル]-[新しい画像]で 次のように作成します。
IS03 アイコンの作り方2_f0053227_1412291.jpg

塗りつぶし色は、なんでもいいです。まあ透明が見やすいかな

作成部分が、小さいので表示の拡大縮小ツールで 見やすい大きさにします
IS03 アイコンの作り方2_f0053227_1417186.jpg

新規レイヤーを作成します。[レイヤー]-[レイヤーを追加]
IS03 アイコンの作り方2_f0053227_14385283.jpg

こんな感じに、新しいレイヤーが追加されます。レイヤー名はなんでもいいです。
IS03 アイコンの作り方2_f0053227_14271422.jpg

[選択]-[すべて選択]をして[選択]-[角を丸める]で、適当に丸めてください。
IS03 アイコンの作り方2_f0053227_14331644.jpg

[ツール]-[描画ツール]-[塗りつぶし]で、選択範囲を白か黒に塗りつぶしてください。
IS03 アイコンの作り方2_f0053227_14421962.jpg

[Script-Fu]-[Layer Effects]-[Bevel and Emboss]で次の様に設定してください。
IS03 アイコンの作り方2_f0053227_14502373.jpg

下のように、レイヤーがなってると思います。
IS03 アイコンの作り方2_f0053227_14535153.jpg

レイヤーの目の部分をクリックすると、ついたり消えたりします。
ついてる時が、可視状態ということです。
背景レイヤーを目を消し不可視状態にして、一番上のレイヤー部分で右クリックをして
可視レイヤーの統合を選んでください。ダイアログBOXでたら、統合をポチッと押してね。
IS03 アイコンの作り方2_f0053227_153108.jpg

また、新しいレイヤーを追加します。こんな感じになってるはずです
IS03 アイコンの作り方2_f0053227_1565545.jpg

先ほど統合したレイヤーを不可視状態にして、新たに作ったレイヤーを編集していきます
[選択]-[選択範囲の縮小]で、3ピクセル縮小させて選択範囲を先ほどと同じ様に塗りつぶして
また、同じようにエンボス処理をします。エンボス処理で、角度を-30度にしてください。
IS03 アイコンの作り方2_f0053227_15175042.jpg

可視レイヤーを統合し、[選択]-[選択範囲を反転]をして[編集]-[消去]をしてください。
上2つのレイヤーを可視状態にしたら、こんな感じになってます。
IS03 アイコンの作り方2_f0053227_152471.jpg

では、上2つのレイヤーを統合して、[選択]-[選択範囲を反転]させ[選択]-[選択範囲の縮小]で、2ピクセル縮小させ、[編集]-[消去]してください。
こうなってる、はずです。
IS03 アイコンの作り方2_f0053227_15331983.jpg

ちょっと、外側がぼやぼやっとなってるので [選択]-[選択範囲を拡大]で5ピクセル大きくして
[選択]-[選択範囲を反転]をして[編集]-[消去]をし、選択範囲をもとに戻すため[選択]-[選択範囲を反転]をさらに、してください。

次は、パスを作って選択範囲を変形させていきます。
まず、新規レイヤーを作成します。次に[選択]-[選択範囲をパスに]を選びます。
この状態だとパスが見えてませんので、パスダイアログを表示し可視状態ににします。
IS03 アイコンの作り方2_f0053227_15444095.jpg

パスを表示したら、[ツール]-[パス]を選択して、編集にチェックします。
IS03 アイコンの作り方2_f0053227_15481993.jpg

パスのところをクリックすると、下のようにがあらわれます。
IS03 アイコンの作り方2_f0053227_15543554.jpg

Shiftキーを押しながら、をクリックするとが、消えていきますので下のようになるまで、消してください。
IS03 アイコンの作り方2_f0053227_1622169.jpg

をクリックすると、棒のようなものが、から生えてくるので、それの端をつまんで下のように変形してください(左下と右上をいじってます)
IS03 アイコンの作り方2_f0053227_1663796.jpg

そうしましたら、パスを選択範囲に変えます[選択]-[パスを選択範囲に]
次に、[ツール]-[描画ツール]-[ブレンド]で下のを選んで、上から下にに適応させてください。
IS03 アイコンの作り方2_f0053227_16153785.jpg

ちょっと、濃いので レイヤーの不透明度を適当にいじっていい感じにします。
IS03 アイコンの作り方2_f0053227_16193616.jpg

あとは、PNGファイルで登録して終わり~♪

作るより、ここに書くほうが大変でしたww

今回は、白ベースなんで白が多いけど 違う色でいろいろやってみてください。

わからないことが、ありましたらコメントでもどうぞ^^

あっ・・・ひとつ処理を忘れてたわ・・・

枠を作ったところ(パスの前に)で、枠にぼかし処理をいれると綺麗になりますよ。
背景を黒で枠ぼかし処理済みだと こんな感じです。
IS03 アイコンの作り方2_f0053227_1628464.jpg

by hiro_711i | 2010-12-28 16:28

by hiro_711i