簡単にできる「見栄えのするボタン」のチュートリアル
Webサイトに欠かすことのできないボタン。
ボタンのできの良し悪しで、クリック率が大きく変わることもあります。
そこで今回は2EXPERTDESIGN内の「How to Design A Big Good-Looking Button in Photoshop」で紹介された、ボタンのチュートリアルを和訳してご紹介します。
このチュートリアルに沿って制作すれば、１ピクセルまでこだわったボタンを簡単に実現できますので、今後の制作にとても重宝すると思います。
以下、意訳してご紹介。
完成形
必要な素材
スポンサーリンク
STEP1：Photoshopで木のテクスチャを開いてください。
まず最初に木のテクスチャをダウンロードしてから、ダウンロードしたファイルをPhotoshopで開いてください。1024×768ピクセルの画像サイズで、背景として使用します。
STEP2：ボタンの背景を作る。
ボタンは2つのパーツで構成されています。：透明な表面のボタンと、メインボタンのようになるボタンの背景です。
メインのボタンは木の背景に見事に調和した、緑のグラデーションを使用しています。
角丸長方形ツール（U）を選択し、40pxの半径で360 ×80pxの白い図形を描きます。素晴らしい大きなボタンが表示されます！
シェイプレイヤーをダブルクリックして次のレイヤー効果のオプションを追加していきます。
光彩（内側）を追加して形状を作成し、シェイプの不透明度を25％にします。
前半のボタンは下記の様になります。
STEP3：メインのボタン作成
後半のステップです。
再び角丸長方形ツール（U）を選択し、半径30pxの340×60pxの図形を描きます。
その図形を、最初に描いた図形の真ん中に配置して、マージンが10pxになるようにします。
次のレイヤー効果を追加してレイヤーを綺麗にしていきます。
ボタンの土台ができ上がりました。
最後の仕上げ
チュートリアルの最初にある「必要な材料」から、アイコンをダウンロードしてください。
Photoshopで36×36pxから24×24pxにリサイズして配置します。
「Download this tutorial」というテキストを配置します。
フォントは大変人気な「Museo 500」というフリーフォントを使用します。
以上で完成となります。
いつも同じようなデザインになってしまいがちなボタンですが、こういうチュートリアルを一つずつこなして、ボタンデザインの引き出しを増やしておきたいものです。
レイヤースタイルを巧みに使ったテクニックですので、チュートリアルが終わった後レイヤースタイルを登録しておけば、簡単に使いまわすことができます。
初めて当ブログに訪れた方や何度か当ブログにお越し頂いている皆様。
もしブログの内容が気に入って頂けましたらRSSリーダーの登録よろしくお願いします。
スポンサーリンク
