投稿日：2011年9月9日　　　レベル：初心者　　　　ソフトウェア：

---

このチュートリアルではPhotoshopでクールなweb2.0風バッジを作成する方法を紹介します。

• Step1 ： シェイプの作成をする
• Step2 ： 境界線を追加する
• Step3 ： 光の表現を作る
• Step4 ： テキストを入力する
• Step5 ： 完成

クールなweb2.0風バッジを作ります。

多角形ツールを選び、以下のように設定してから、シェイプを作成します。

シェイプを作成したら、右クリックから「レイヤーをラスタライズ」を選びます。

「レイヤー」−「レイヤースタイル」−「グラデーションオーバーレイ」を追加します。

そうすると、次のような状態になっていると思います。

Ctrlキーを押しながらレイヤーパレットのサムネイルをクリックし、図形を選択します。
「選択範囲」−「選択範囲を変更」−「縮小」を選択し、2pxと設定します。

新しいレイヤーを作成し、適当な色で塗りつぶします。
塗りつぶしたレイヤーの不透明度を0%に変更します。
それから、「レイヤー」−「レイヤースタイル」−「境界線」を選び、1pxの白い境界線を追加します。

現時点ではこのようになっているはずです。

新しいレイヤーを作成し、楕円形選択ツールを使って、シェイプの半分以上を囲むように選びます。

境界線のレイヤーに移動し、「選択範囲」−「選択範囲を反転」を選び、Delキーを押します。
すると楕円形ツールに囲まれた分、バッチから明るい部分が削除され、暗くなります。
境界線のレイヤーの、レイヤーの描画モードをソフトライトにします。

Segoeフォントを使って白色のテキストを追加します。 「Ctrl」+「T」キーを押し、テキストを回転させます。

「レイヤー」−「レイヤースタイル」−「ドロップシャドウ」を選び、テキストに影をつけます。

同じくレイヤー効果から「グラデーションオーバーレイ」を追加します。

これで完成です。

引用:Web Design Library　著者:avivadirectory.com　翻訳：なかけん

スポンサードリンク