Photoshop11

【簡単】Photoshopでリッチなデザインのボタンに仕上げる方法


きれいなリッチデザインのボタンって、おもわずクリックしたくなりますよね。

いざそれを作るとなると難しいような気もしますが、コツをつかめば意外と簡単です。

今回は、ぜひWebサイトのデザインに取り入れたいリッチなデザインのボタンの作る際のテクニックを紹介します。

 

【導入】リッチデザインとは?

リッチとフラット

 

ここに二つのボタンを用意しました。

上がフラットデザイン、下がリッチデザインと呼ばれるデザインです。
見てお分かりの通り、フラットデザインはシンプルで平面的なデザインで装飾が少ないです。
対してリッチデザインは装飾が多く、立体的なデザインになっています。

 

最近はフラットデザインが流行しているためフラットデザインのボタンも見かけられますが、
今回はついつい押したくなる下の方のリッチなデザインボタンの作り方を説明します。

 

 

STEP1 角丸四角形とテキストを用意

step1

まずは角丸長方形ツールで角丸長方形を作り、その上に文字ツールで「ダウンロード」の文字を配置しましょう。

 

文字を角丸四角形のちょうど真ん中に配置するためには、photoshop画面上部の配置関係を変更するツールを使用します。

2つのレイヤー両方を選択した状態で、このツールの左から2つ目と右から2つ目を押してみましょう。

配置設定

 

 

STEP2 角丸長方形にグラデーションをかけて丸みを出す

角丸長方形にレイヤー効果をかけます。

レイヤー効果

 

グラデーションにチェックをいれて、今回は下のような設定にします。

グラデーションチェック

 

次に、”グラデーション”のすぐ横のこの部分をクリックしてグラデーションの詳細を決めるグラデーションエディタを開きます。

グラデーション詳細

 

グラデーションエディタでは、図の部分がグラデーションの色を表しているので、ここの色をまずは変更します。

グラデーションカラー

 

赤丸部分をクリックして、次に青丸部分をクリックして色を変更しましょう。今回は明るめのオレンジにしています。

色の変更

 

グラデーションの色の濃い方(左)も色を変えましょう。今回は先ほどのオレンジより少し濃いオレンジにしています。

これでグラデーションの設定は終わりです。グラデーションエディタをOKを押して閉じましょう。

以下のように少し丸みの出た状態になっているとおもいます。

グラデーション確認

 

 

SETP3 角丸長方形に影をつけてより立体的にする

引き続き角丸長方形にレイヤー効果をかけていきます。ドロップシャドウにチェックを入れて、以下のように設定してください。

ドロップシャドウ設定

描画モードの横にあるカラー設定ですが、ここの色はボタンのカラーであるオレンジをかぎりなく黒に近づけた色にするのがポイントです。

真っ黒にしてしまうと不自然な影になってしまいます。

影の色

 

不透明度は必ず調整して、影をなじませましょう。そうすると、以下のようにより立体的になっていると思います。

ドロップシャドウ確認

 

STEP4 角丸長方形に境界線をつける

同じくレイヤー効果で境界線にチェックを入れ、以下のように設定します。

境界線のカラーはグラデーションの下の濃いオレンジと同じ色です。

境界線

 

レイヤー効果の画面をOKを押して閉じると以下のようになっています。これで角丸長方形に施す効果は終了です。

境界線確認

 

STEP5 テキストが少し凹んだようにみせる

今度はテキストのほうにレイヤー効果をかけます。かける効果は「シャドウ(内側)」で、以下のように設定します。

ここで1px程度の影をいれるのがポイントです。カラーはドロップシャドウと同じ色にしましょう。

内側シャドウ設定

 

 

これでレイヤー効果のOKボタンを押してボタンのデザインを確認してみましょう。

リッチデザイ確認

あとは影の濃さの微調整など、再度全体のデザインを整えて完成です。

 

 

まとめ

リッチデザインは細部までこだわることが大事です。

 

今回は上記のようなやり方でリッチなデザインを制作しましたが、ポイントは

・影は真っ黒ではなくメインカラーを限りなく黒に近づけた色にする。

・1px単位のデザインにこだわる。

といったところでしょうか。

 

1px単位のデザインを加えるだけでレイヤーが浮き出て見えたり、凹んでみえたりするのは、おもしろくも難しいことですが、この記事でご紹介したテクニックを参考に、みなさんもオリジナルのリッチなデザインのボタンを作成してみてください。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


NESTonlineBlog編集部

NESTonlineBlog編集部です。ご寄稿頂いた記事などを公開していきます。

Next ArticlePhotoshopでクオリティの高いボタンをデザインするテクニックまとめ