GimpでWeb2.0風バッジを簡単作成！

Gimpを使ってWeb2.0風バッジを作ります。

-------------------------Gimp特集-------------------------
過去記事：Gimpで飛び出す写真を作ろう！（初心者向け）
過去記事：GimpでWeb2.0風-反射ロゴを作ろう！
----------------------------------------------------------



☆ GimpでWeb2.0風バッジを作ろう！　☆

=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-==-=-=-=-=-=-=

【目次】（クリックすると、各ステップへ移動します。）

■ステップ１：Gfigオブジェクトの作成
■ステップ２：バッジを描く
■ステップ３：バッジにグラデーションをつける
■ステップ４：バッジに縁をつける
■ステップ５：バッジに影をつける

=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-==-=-=-=-=-=-=

完成画像：




■ステップ１：Gfigオブジェクトの作成

１．Gimp起動　→　新規作成

２．[フィルタ]　→　[下塗り]　→　[Gfig]

参考画像：




２．Gifオブジェクトを作成します。

参考画像：




３．星型のツールをダブルクリックして、点の数を決めます。
20～30くらいがちょうど良いかと思います＾＾

参考画像：




４．描きます。

参考画像：




５．参考画像を参考に、ギザギザの大きさを調節します。

参考画像：




６．こんな感じになればOKです！

参考画像：





■ステップ２：バッジを描く

１．さきほどの、Gfigオブジェクトのところで、[使用]を 選択 にして、[描画]ボタンを押します。

参考画像：





２．こんな感じに、点線で描かれます。

参考画像：




３．これで、バッヂのかたどりは完成です。
これに色を塗っていきます。

■ステップ３：バッジにグラデーションをつける

１．バッジのかたどりが完成したので、色を塗りましょう。

２．グラデーションツールを使用します。

参考画像：




３．グラデーションを自分で作成します。
左端と右端の色を指定するだけでOK

参考画像：




※
～ グラデーションのコツ ～
１．左端の色を決める。
２．右端の色は、左端の色を少しだけ明るくしたもの（or暗くしたもの）を使用。
３．キレイなグラデーションになります☆


４．グラデーションが完成したら、保存します。

参考画像：




５．グラデーションを適用します。

参考画像：




こんな感じになりましたら、オッケーです＾＾





■ステップ４：バッジに縁をつける

１．さきほどの状態から、右クリック → [選択] → [縁取り]
をします。

参考画像：




縁は 4～7pxくらいが良いと思います。


２．このように、縁だけが選択されます。

参考画像：




３．塗りつぶしツールで、縁にしたい色を選択します。

参考画像：




４．縁のところで右クリック → [編集] → [描画色で塗りつぶし]　ます。

参考画像：




こんな感じになったら、オーケーでーす＾＾






■ステップ５：バッジに影をつける

影をつけて、ちょっと立体感を出しましょう！


１．[色で選択ツール]　で　背景の白い部分を選択します。

参考画像：





２．右クリック → [選択] → [反転]　をします。
こうすることで、バッヂ全体を囲むことができます。

参考画像：




こんな感じ
↓




３．右クリック → [Script-Fu] → [影] → [影付け]　をします。

参考画像：




どんな影をつけるか設定します。
オフセットが大きいほど、元画像から影がはみ出ます。
ぼかしを大きくすると、ぼんやりした影が作れます。

参考画像：




以上で、バッヂの完成です＾＾

関連記事

• TwitterやFacebookの写真を中心したコミュニケーションサービス「Plixi」
• 写真撮影時の「照明配置」の仕方を共有できるサイト「Strobox」
• 選んだ二色をブレンドした色を教えてくれるサイト「ColorBlendy」
• HTML5で作られたドローツール「deviantART Muro」が高機能で使える
• ズーム可能な画像埋め込みパーツが作られるサイト「Zoom.it」