投稿日：2009年10月20日　　　レベル：初心者　　　　ソフトウェア：

---

このチュートリアルでは、Photoshopでウェブサイト用の地球ボタンを作ってみたいと思います。

• Step1 ： はじめに
• Step2 ： レイヤースタイルを追加
• Step3 ： ボタンに反射を追加
• Step4 ： 画像編集
• Step5 ： ボタンに輝きを追加
• Step6 ： 画像の消去
• Step7 ： ボタンにデザインを追加
• Step8 ： 様々なスタイルを追加
• Step9 ： 画像を加工する
• Step10 ： テキストを追加
• Step11 ： 完成

まずはじめに、解像度500X300でこのチュートリアル用に新規ファイルを作成し、カンバスカラーを白にします。
続いて、角丸長方形ツール（丸み：30px）を選択し、#d61d23の色で次のようにシェイプを描きます。

次にこのレイヤーに下記のようなレイヤースタイルを適用します。

ボタンは次のようになっているはずです。

ここで、ボタンに反射を追加します。
「Ctrl」＋「J」で現在のレイヤーを複製した後、新しいレイヤーを作成し、
コピーしたレイヤーと共に反転させ、ひとつのレイヤーに結合します。
次に、「編集」−「変形」−「垂直方向に反転」を適用し、下記のようにします。

ボタンの下の反射をもっと透明にするために、クイックマスクモードで下記のようなグラデーションをかけます。

次に画像編集モードに戻ります。
これで選択範囲が作成されます。
「Delete」キーを押して選択範囲の画像を消します。

「Ctrl」＋「D」で選択を解除し、次のステップに進みます。

ボタンに輝きを追加したいと思います。
角丸長方形ツール（丸み：80px）を選択し、白で下記のような形を作ります。

このレイヤーを「レイヤー」−「ラスタライズ」−「シェイプ」でラスタライズします。
次に、もう一度クイックマスクモードを選択して次のようにグラデーションをかけます。

画像編集モードに戻ると選択範囲が作成されています。
「Delete」キーを押して、画像の選択部分を消去します。

「Ctrl」＋「D」で選択を解除して、現在のレイヤーの描画モードを「オーバーレイ」に変えます。

これでボタンは完成です。
ここから次のステップに移ります。
ボタンに何かデザインを加えた方が見栄えが良くなると思います。
そこで、楕円ツールを選んで、次のように白の丸いシェイプを描きます。

次に、下記のようなレイヤースタイルを追加します。

結果をご覧ください。

ここでは、丸いデザイン要素に絵を追加します。
これをお使いください。他から探してきても結構です。
画像を開いて縮小し、下の図のように配置します。

「イメージ」−「色調補正」−「彩度を下げる」（「Ctrl」＋「Shift」＋「U」））
で白黒にして、このレイヤーの描画モードを「オーバーレイ」に変えます。

シャープツール（ブラシ：100px、モード：通常、強さ：40%）を選んで、この部分をさらにシャープにします。

いよいよ最後の工程です。
チュートリアルの最後にテキストを追加しましょう。
横書き文字ツールで次のように白を使って何か書きます。

この上の画像ではSegoe UIというフォントを白で使っています。
ただ、これは商業用のフォントなので、お持ちでない場合はいくらでも代用が利きます。

たとえばArial Blackです。
最後に、このレイヤーに次のレイヤースタイルを適用します。

すると、こんな風になります。

これで作品は完成です。
自分で作成したかっこいい地球ボタンをお楽しみください。
色を変えてみるのもいいでしょう。

引用:Web Design Library　著者:www.photoshopstar.com　翻訳：幕澤

スポンサードリンク