投稿日：2008年3月7日　　　レベル：初心者　　　　ソフトウェア：

---

このチュートリアルでは世界にひとつだけのWeb 2.0風ボタンの作り方をご紹介します。なお、このチュートリアルで提供する色はあくまでもここで使うためのものですので、さまざまな色/グラデーションを試して独自のスタイルを作ってください。

• Step1 ： 新規ドキュメント作成
• Step2 ： スタイルの設定
• Step3 ： 反射の設定
• Step4 ： アイコン設定

まず初めに、新規ドキュメントを作成します（サイズは任意です。この例では164×50を使います）。

角丸長方形を作って選んだ色をつけてボタンのメインカラーにします。この例では、黒（#000000）を使って半径5ピクセルで設定します。





以下のスタイルを適用します。





もう一つ別の角丸長方形を作り、同じ半径（5px）にします。この角丸長方形でボタンに反射をつけますので、小さめに作り上側に置きます。ここではシェイプに「#DEDEDE」で色をつけます。



次にレイヤーパレットの下にある「ベクトルマスクを追加」ボタンをクリックします。

「D」キーを押してから「X」キーを押して前面を白、背景を黒にします。グラデーションツールで角丸長方形の上から下まで線を引くとこのようになります。



これからたった今作ったばかりのレイヤーと（スタイルを追加した）基本のレイヤーの間にテキストを追加します。この例では、「Helvetica - Medium Condensed - 14pt - Sharp」を使います。色は白（#FFFFFF）とセンスの良いグリーン（#DCF414）の二つを使います。小さなイメージを置けるよう、テキストをボタンの右側に置いてください。



次に左側に小さなイメージを追加します。ここではPhotoshopに標準機能で付いているチェックマークを使います。

引用:Web Design Library 著者:BlogWatts.com翻訳:菊池

スポンサードリンク