ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

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

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

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

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

Rank Tracker

テクニック

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

Photoshopで立体感のあるツイッターのフォローボタンを作る方法

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

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

Step1.はじめに

このチュートリアルでは、立体感のあるツイッターのフォローボタンの作り方について説明します。
完成図は以下の通りです。

完成図



Step2.ボタンの作成

Photoshopを開いて600px×400pxの新規ファイルを作成します。
背景を薄い青(#f0f5f9)で塗ります。

新規ドキュメントの作成

角丸長方形ツールを選択し、半径を10pxに設定します。
295px×58pxの長方形を描きます。

半径10pxの角丸長方形を描く

「レイヤー」−「レイヤースタイル」−「レイヤー効果」を選択し、次のようにレイヤースタイルを設定します。

シャドウ(内側)の設定

グラデーションオーバーレイの設定

境界線の設定



Step3.ボタンに立体感をつける

角丸長方形のレイヤーを複製し、最初に作ったレイヤーの下に配置します。
「編集」−「変形」−「拡大・縮小」を選択し、ボタンの高さを64pxにします。

64pxの高さにする

複製元のレイヤーと同じレイヤー効果がついているため、これを削除します。
レイヤー効果を削除するには、レイヤーパレットの該当するレイヤーの上で右クリックし、「レイヤースタイルを消去」を選択します。

「レイヤー」−「レイヤースタイル」−「レイヤー効果」を選択し、次の画像のように設定します。

シャドウ(内側)の設定

グラデーションオーバーレイの設定

境界線の設定

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

適用後の図



Step4.ボタンに光の反射をつける

複製した方のレイヤーの、レイヤーパレットのサムネイルの上で、「Ctrl」キーを押しながらマウスをクリックします。
すると図がある部分だけが選択されます。

サムネイルをCtrl+クリックする

新規レイヤーを作成し、一番上に配置します。
ブラシツールを選択し、250pxの大きさで白(#ffffff)のソフト円ブラシを使って、選択範囲の下側を1、2回塗ります。
ボタンの下側が明るくなります。

ソフトブラシで反射光を描く



Step5.テキストとアイコンの追加

テキストとツイッターの鳥のアイコンを追加します。
テキストには「Arial」フォントを使います。

ツイッターの鳥はここからダウンロードしてドキュメントに追加します。
サイズを32px×23pxに変更し、下の画像のように配置します。

テキストとアイコンを入れる

テキストと鳥に次のレイヤー効果を設定します。

グラデーションオーバーレイの設定

ドロップシャドウの設定



Step6.完成

これでボタンの完成です。

完成図



引用:Web Design Library 著者:2expertsdesign.com 翻訳:菊池



スポンサードリンク

コメント

ランダム記事5件

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