2005年06月29日

#002 押したくなるなる、そのボタン


今回のレシピは「ボタン」です。

まずは3つのボタンをよ〜く見てください。

[A]
002ボタンA

[B]
002ボタンB

[C]
002ボタンC


[A]は角丸四角に文字だけの平面的なもの

[B]は、[A]に立体的な処理をしてボタンらしくしたもの

[C]は…ほとんど[B]と変わらないように見えると思いますが、
これは立体的な処理を[B]とは違う手法で行ったもの



[B]の立体的処理は「エフェクト」といって、
専門的なグラフィックソフトにある、メニューで選ぶだけで簡単に
平面を立体的にみせたり、影をつけたり、へこませたりできるものです。

これはソフトによって、機能にない場合があります。
FireworksやPhotoshopには充実したエフェクトメニューがありますが
やっぱこれらのソフトはそれなりに高価ですからね!


でも[A]じゃぁ〜ちょっと物足りないでしょ?
じゃぁ今回は[C]でいきましょう!!


準備はいいですか?そんじゃ、レッツ・ビギン♪





▼制作レシピ

※詳細な手順は無料配信中のメールマガジンに記載されています。
 興味のある方はぜひご登録ください!
 (このブログのサイドメニューから登録できます)

[1]角丸四角を描きます。塗りは好きな色をどうぞ。

=#002 手順1


[2]塗りの色をグラデーションにします

#002 手順2"


[3]グラデーションを調整。

#002 手順3"


[4]テキストを入力して位置を調整。
  テキスト色はコントラストがはっきりしたものにしましょう。

#002 手順4"


[5][4]のテキストと矢印(三角)をコピーして、真上に貼付け。
  テキスト色は四角形と同系色の濃い色を。
  ↓この画像はクリックで拡大します。

#002 手順5


[6][5]のテキストを、[4]のテキストの下に重ね順を変更。
  ↓この画像はクリックで拡大します。

#002 手順6


[7]下側にしたテキスト[5]を上に1ピクセル、左に1ピクセル移動する
  ↓この画像はクリックで拡大します。

#002 手順7


[8]押したくなるなるボタンの完成です!

002ボタン


はい、お疲れさまでした!
エフェクトなしでもそこそこ立体的に見せることができるんですよ〜。
ここぞ!というリンクのときには、こういうボタン型の方が
やはりついつい押したくなると思うので、ぜひ活用してみてください。


人気blogランキング参加中!
↑お役に立てたらポチっとクリックお願いします!


それでは、また来週!


この記事へのトラックバックURL

http://trackback.blogsys.jp/livedoor/maneweb99/26601935