ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

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

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

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

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

Rank Tracker

テクニック

Homeフォトショップ講座 > モダンなボタンの作り方

モダンなボタンの作り方

投稿日:2008年4月22日   レベル:初心者    ソフトウェア:PhotoShop
このチュートリアルでは、モダンなボタンを描いてみたいと思います。


Step1:新規ドキュメントの作成
新規ドキュメントを作成します。

大きさは130ピクセル×80ピクセル、背景を白にします。


Step2:角丸長方形ツールの設定
角丸長方形ツールを使って、次の画像のように設定します。

ps_14208_01.jpg


Step3:ボタンのシェイプを作る
ボタンのシェイプを作ります。

ps_14208_02.jpg


Step4:ボタンのシェイプの設定
では、ボタンのシェイプにこのように設定します。

ドロップシャドウ:

ps_14208_03.jpg

グラデーションオーバーレイ:

ps_14208_04.jpg

境界線:

境界線のサイズを1ピクセルに、色を「#9EAB48」に設定します。

ボタンはこのようになります。

ps_14208_05.jpg


Step5:新規レイヤーの作成
新規レイヤーを作成します。

楕円形選択ツールを使って右側に小さい選択範囲を作ります。

この画像をご覧ください。

ps_14208_06.jpg


Step6:スタイルの追加
白く塗ってからこのようにスタイルを追加します。

シャドウ(内側):

ps_14208_07.jpg

境界線:

境界線のサイズを1ピクセルに、色を「#95A339」に設定します。


Step7:ボタンの完成
ボタンはこのようになります。

ps_14208_08.jpg


Step8:新規レイヤーの作成
新規レイヤーを作成します。

長方形選択ツールを使って3つの選択範囲を作り、この画像のように色を塗ります。

それぞれの選択範囲の幅 、1ピクセルです。

ps_14208_09.jpg


Step9:テキストの追加
あとはボタンにテキストを追加するだけで完成です。

ここでは12ピクセルの「MS Trebuchet」フォントを使い、「スムーズ」を設定しました。

また、テキストに「#7D8928」の色で1ピクセルの境界線を追加しました。


Step10:完成


ps_14208_10.jpg

これで完成です!

楽しんでください!


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



スポンサードリンク

コメント

ランダム記事5件

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