ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テンプレートモンスター
ホームページテンプレート

Free Templates Online JP
無料ホームページテンプレート
Free Templates Online JP

株式会社ネットオン
採用Webマーケティング
indeed広告代理店

海外 SEO対策 トラッキングツール
海外 SEO対策
ランキングチェックツール

Rank Tracker

テクニック

Homeフォトショップ講座 > Photoshopで立体感のあるボタンを作成する方法

Photoshopで立体感のあるボタンを作成する方法

投稿日:2011年7月26日   レベル:初心者    ソフトウェア:PhotoShop

このチュートリアルではPhotoshopで立体感のあるボタンを作成する方法を紹介します。

Step1.はじめに

行動を促すボタンは、ECサイトにおいて欠かすことの出来ない重要なパーツです。
最高の売り上げを生み出すため、押してもらいやすい立体感のあるボタンを作成しましょう。

完成図



Step2.レイヤーを設定する

Photoshopで、次の設定の新規ドキュメントを作成します。

新規ドキュメントを作成する

レイヤーパネル上でAltキーを押し、背景レイヤーをダブルクリックして編集できるようにします。

背景レイヤーのロックを解除する

「レイヤー」−「レイヤースタイル」−「グラデーションオーバーレイ」を選び、次のように設定します。

グラデーションオーバーレイを設定する



Step3.ガイドを配置する

ボタンを描く前に、ガイドを用意します。
「ビュー」−「定規」を選び、ドキュメントに定規を表示します。
定規の上でマウスの左ボタンを押し、ドキュメント内にドラッグ&ドロップすると、ガイドを表示できます。
縦と横のガイドを、ドキュメントの中心で交差するように配置します。

ガイドを中央で交差させる



Step4.ボタンの形状を描く

角丸長方形ツール角丸長方形ツールを選択し、半径を200pxに設定します。
マウスカーソルをガイドが交差する部分に置き、マウスの左ボタンを押したままAltキーを押します。
すると中心からシェイプを作成できるので、そのままドラッグします。

大きいシェイプを描く

同様の方法で、今度は少し小さめの角丸長方形を描きます。 (角丸長方形ツール角丸長方形ツールを選択し、ガイドの交差するポイントにカーソルを合わせます。次に、マウスの左ボタンを押したままAltキーを押し、ドラッグしてシェイプを描きます。)
より良い仕上がりにするため、下の画像へ赤くマークしたように、シェイプ間の上下左右の幅を等しくするよう注意します。

小さいシェイプを描く

シェイプ間の幅に気をつける



Step5.大きい方のシェイプへレイヤースタイルを適用する

大きい方のシェイプを選択し、レイヤースタイルのパネルを開きます。
次のようにスタイルを適用してください。

ドロップシャドウを設定する

シャドウ(内側)を設定する

グラデーションオーバーレイを設定する

レイヤースタイルを適用すると、このようになります。

レイヤースタイルを適用する



Step6.小さい方のシェイプにレイヤースタイルを適用する

小さいほうのシェイプを選択し、レイヤースタイルのパネルを開きます。
下記の画像の通りにスタイルを適用してください。

ドロップシャドウを設定する

シャドウ(内側)を設定する

グラデーションオーバーレイを設定する

レイヤースタイルを適用すると、このようになります。

レイヤースタイルを適用する



Step7.テキストを入力する

文字ツールを選択し、Bebas Neue fontでボタンの真ん中へテキストを入力します。
今回は「CLICK ME」と入力します。



Step8.完成

完成です。

完成



引用:Web Design Library 著者:stoodit.com 翻訳:幕澤



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング