ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

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

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

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

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

Rank Tracker

テクニック

Homeフォトショップ講座 > Photoshopで見映えの良いボタンを作成する方法

Photoshopで見映えの良いボタンを作成する方法

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

このチュートリアルではPhotoshopで見映えの良いボタンを作成する方法を紹介します。

Step1.はじめに

今日はこのボタンを作成します。

完成形

まずは、素材を準備します。下記2点をダウンロードしてください。
木材のテクスチャ
ダウンロードアイコン



Step2.Photoshopで木材のテクスチャを開く

Photoshopで、先ほどの木材のテクスチャを開きます。
1024px×768pxとし、今回の作品の背景にします。



Step3.ボタンの背景を作成する

今回作成するボタンは、透きとおるような表面の背景とメインのボタンという2つのパーツから成り立っています。
メインのボタンにはグリーンのグラデーションを使い、木材のテクスチャとマッチするようにします。

角丸長方形ツール角丸長方形ツール(U)を選択して、40pxの半径で360px×80pxの白いシェイプを描いてください。

ボタンの背景を描く

このシェイプに内側の影を付けて線を加え、シェイプの不透明度を25%にします。
このシェイプのレイヤーをダブルクリックして、下記のレイヤー効果を加えます。

シェイプの不透明度を変える

光彩(内側)を設定する

境界線を設定する

このようになります。

Step3の結果



Step4.メインのボタンを作る

角丸長方形ツール角丸長方形ツール(U)を再度選択し、半径30pxで340px×60pxのシェイプを描きます。
先ほどのシェイプの真ん中に置き、真ん中のシェイプとボタンの背景の間の余白が10pxになるようにします。

背景より一回り小さいシェイプを描く

次に、下記のレイヤースタイルを加えます。

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

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

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

境界線を設定する

このようになります。

完成形



Step5.ボタンを装飾する

Step1で準備したダウンロードアイコンを24px×24pxに縮小し、ボタンの大きさに合わせます。
Photoshopでエレメントのサイズを変えるには、Ctrl+Tを押すか「編集」−「パスを変形」−「拡大・縮小」を選択します。

アイコンをボタンに貼り付ける

次に、ボタンにテキストを加えます。
ここでは無料フォントのMuseo 500を使い、"Download this tutorial"と書きます。
Museo 500は、エレガントでとても人気のあるフォントです。



Step6.完成

完成です。

完成形



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



スポンサードリンク

コメント

ランダム記事5件

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