IS03 アイコンの作り方2
前回から、時間たってますが そろそろ続きを書きます。
まず、アイコン作成するには サイズを決めなければなりません。
サイズは
説明/解像度 高解像度 中解像度 低解像度
最大サイズ 72x72px 48x48px 36x36px
推奨範囲 60x60px 40x40px 30x30px
矩形の範囲 56x56px 38x38px 28x28px
こんな感じです・・・とは、いっても96pxで作っても普通に縮小されて表示できます。
グラスアイコンを作る場合、中の描画は少し小さめになるんで元の画像をそのまま使うには
96pxで、作ったほうが楽です。
今回は、手順だけなんで色を変えてつくるともっと綺麗になると思います。
では、早速GIMPを立ち上げてみましょう。
[ファイル]-[新しい画像]で 次のように作成します。
塗りつぶし色は、なんでもいいです。まあ透明が見やすいかな
作成部分が、小さいので表示の拡大縮小ツールで 見やすい大きさにします
新規レイヤーを作成します。[レイヤー]-[レイヤーを追加]
こんな感じに、新しいレイヤーが追加されます。レイヤー名はなんでもいいです。
[選択]-[すべて選択]をして[選択]-[角を丸める]で、適当に丸めてください。
[ツール]-[描画ツール]-[塗りつぶし]で、選択範囲を白か黒に塗りつぶしてください。
[Script-Fu]-[Layer Effects]-[Bevel and Emboss]で次の様に設定してください。
下のように、レイヤーがなってると思います。
レイヤーの目の部分をクリックすると、ついたり消えたりします。
ついてる時が、可視状態ということです。
背景レイヤーを目を消し不可視状態にして、一番上のレイヤー部分で右クリックをして
可視レイヤーの統合を選んでください。ダイアログBOXでたら、統合をポチッと押してね。
また、新しいレイヤーを追加します。こんな感じになってるはずです
先ほど統合したレイヤーを不可視状態にして、新たに作ったレイヤーを編集していきます
[選択]-[選択範囲の縮小]で、3ピクセル縮小させて選択範囲を先ほどと同じ様に塗りつぶして
また、同じようにエンボス処理をします。エンボス処理で、角度を-30度にしてください。
可視レイヤーを統合し、[選択]-[選択範囲を反転]をして[編集]-[消去]をしてください。
上2つのレイヤーを可視状態にしたら、こんな感じになってます。
では、上2つのレイヤーを統合して、[選択]-[選択範囲を反転]させ[選択]-[選択範囲の縮小]で、2ピクセル縮小させ、[編集]-[消去]してください。
こうなってる、はずです。
ちょっと、外側がぼやぼやっとなってるので [選択]-[選択範囲を拡大]で5ピクセル大きくして
[選択]-[選択範囲を反転]をして[編集]-[消去]をし、選択範囲をもとに戻すため[選択]-[選択範囲を反転]をさらに、してください。
次は、パスを作って選択範囲を変形させていきます。
まず、新規レイヤーを作成します。次に[選択]-[選択範囲をパスに]を選びます。
この状態だとパスが見えてませんので、パスダイアログを表示し可視状態ににします。
パスを表示したら、[ツール]-[パス]を選択して、編集にチェックします。
パスのところをクリックすると、下のように●があらわれます。
Shiftキーを押しながら、●をクリックすると●が、消えていきますので下のようになるまで、消してください。
●をクリックすると、棒のようなものが、●から生えてくるので、それの端をつまんで下のように変形してください(左下と右上をいじってます)
そうしましたら、パスを選択範囲に変えます[選択]-[パスを選択範囲に]
次に、[ツール]-[描画ツール]-[ブレンド]で下のを選んで、上から下にに適応させてください。
ちょっと、濃いので レイヤーの不透明度を適当にいじっていい感じにします。
あとは、PNGファイルで登録して終わり~♪
作るより、ここに書くほうが大変でしたww
今回は、白ベースなんで白が多いけど 違う色でいろいろやってみてください。
わからないことが、ありましたらコメントでもどうぞ^^
あっ・・・ひとつ処理を忘れてたわ・・・
枠を作ったところ(パスの前に)で、枠にぼかし処理をいれると綺麗になりますよ。
背景を黒で枠ぼかし処理済みだと こんな感じです。
まず、アイコン作成するには サイズを決めなければなりません。
サイズは
説明/解像度 高解像度 中解像度 低解像度
最大サイズ 72x72px 48x48px 36x36px
推奨範囲 60x60px 40x40px 30x30px
矩形の範囲 56x56px 38x38px 28x28px
こんな感じです・・・とは、いっても96pxで作っても普通に縮小されて表示できます。
グラスアイコンを作る場合、中の描画は少し小さめになるんで元の画像をそのまま使うには
96pxで、作ったほうが楽です。
今回は、手順だけなんで色を変えてつくるともっと綺麗になると思います。
では、早速GIMPを立ち上げてみましょう。
[ファイル]-[新しい画像]で 次のように作成します。
塗りつぶし色は、なんでもいいです。まあ透明が見やすいかな
作成部分が、小さいので表示の拡大縮小ツールで 見やすい大きさにします
新規レイヤーを作成します。[レイヤー]-[レイヤーを追加]
こんな感じに、新しいレイヤーが追加されます。レイヤー名はなんでもいいです。
[選択]-[すべて選択]をして[選択]-[角を丸める]で、適当に丸めてください。
[ツール]-[描画ツール]-[塗りつぶし]で、選択範囲を白か黒に塗りつぶしてください。
[Script-Fu]-[Layer Effects]-[Bevel and Emboss]で次の様に設定してください。
下のように、レイヤーがなってると思います。
レイヤーの目の部分をクリックすると、ついたり消えたりします。
ついてる時が、可視状態ということです。
背景レイヤーを目を消し不可視状態にして、一番上のレイヤー部分で右クリックをして
可視レイヤーの統合を選んでください。ダイアログBOXでたら、統合をポチッと押してね。
また、新しいレイヤーを追加します。こんな感じになってるはずです
先ほど統合したレイヤーを不可視状態にして、新たに作ったレイヤーを編集していきます
[選択]-[選択範囲の縮小]で、3ピクセル縮小させて選択範囲を先ほどと同じ様に塗りつぶして
また、同じようにエンボス処理をします。エンボス処理で、角度を-30度にしてください。
可視レイヤーを統合し、[選択]-[選択範囲を反転]をして[編集]-[消去]をしてください。
上2つのレイヤーを可視状態にしたら、こんな感じになってます。
では、上2つのレイヤーを統合して、[選択]-[選択範囲を反転]させ[選択]-[選択範囲の縮小]で、2ピクセル縮小させ、[編集]-[消去]してください。
こうなってる、はずです。
ちょっと、外側がぼやぼやっとなってるので [選択]-[選択範囲を拡大]で5ピクセル大きくして
[選択]-[選択範囲を反転]をして[編集]-[消去]をし、選択範囲をもとに戻すため[選択]-[選択範囲を反転]をさらに、してください。
次は、パスを作って選択範囲を変形させていきます。
まず、新規レイヤーを作成します。次に[選択]-[選択範囲をパスに]を選びます。
この状態だとパスが見えてませんので、パスダイアログを表示し可視状態ににします。
パスを表示したら、[ツール]-[パス]を選択して、編集にチェックします。
パスのところをクリックすると、下のように●があらわれます。
Shiftキーを押しながら、●をクリックすると●が、消えていきますので下のようになるまで、消してください。
●をクリックすると、棒のようなものが、●から生えてくるので、それの端をつまんで下のように変形してください(左下と右上をいじってます)
そうしましたら、パスを選択範囲に変えます[選択]-[パスを選択範囲に]
次に、[ツール]-[描画ツール]-[ブレンド]で下のを選んで、上から下にに適応させてください。
ちょっと、濃いので レイヤーの不透明度を適当にいじっていい感じにします。
あとは、PNGファイルで登録して終わり~♪
作るより、ここに書くほうが大変でしたww
今回は、白ベースなんで白が多いけど 違う色でいろいろやってみてください。
わからないことが、ありましたらコメントでもどうぞ^^
あっ・・・ひとつ処理を忘れてたわ・・・
枠を作ったところ(パスの前に)で、枠にぼかし処理をいれると綺麗になりますよ。
背景を黒で枠ぼかし処理済みだと こんな感じです。
by hiro_711i
| 2010-12-28 16:28