• HOME
  • >
  • Photoshop
  • >
  • 簡単にできる「見栄えのするボタン」のチュートリアル

簡単にできる「見栄えのするボタン」のチュートリアル

Webサイトに欠かすことのできないボタン。
ボタンのできの良し悪しで、クリック率が大きく変わることもあります。

そこで今回は2EXPERTDESIGN内の「How to Design A Big Good-Looking Button in Photoshop」で紹介された、ボタンのチュートリアルを和訳してご紹介します。
このチュートリアルに沿って制作すれば、1ピクセルまでこだわったボタンを簡単に実現できますので、今後の制作にとても重宝すると思います。

以下、意訳してご紹介。

完成形

ボタンの画像

必要な素材

木のテクスチャのダウンロード

アイコンのダウンロード

スポンサーリンク

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リーダーの登録よろしくお願いします。

スポンサーリンク

Related Posts

Leave a Reply

メールアドレスが公開されることはありません。

This blog is kept spam free by WP-SpamFree.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください