多くの人々にハピネスを提供する!UNIEARTH

オフィシャルブログ
会社HPへ
お問い合わせ

とっても便利! グラデーションボタンのバリエーションをカラーパレット一つで作成できる!

こんにちは、WEBデザイナーのワダです。今回は知っていると便利な、グラデーションボタンのバリエーションをカラーパレット一つで作成出来る方法を、お話しさせていただきます。

ポータルサイトなどのWEBデザインで、もっとも多く使う部品の一つと言っても過言ではないのがボタンですよね。ページの構成によっては数十種類のバリエーションを作らなくてはいけないときもあります。

こういうケースでは一つ一つのボタンのグラデーションを、グラデーションエディターを使って変えていると結構時間がかかったりします。というより面倒臭いですよね。

しかし、ある技を使えば、カラーパレットの色を選択するだけで簡単にバリエーションが作れるようになります。

その1_ベースとなるボタンを作ります!

では、早速はじめたいと思います。

グラデーションを施す

まず、シェイプツールで適当な大きさの長方形を作成します。この時のカラー設定は必ず、シャイプ自体の塗りで設定してください。【注】レイヤー効果のカラーオーバーレイで色をつけてしまわないようにご注意ください。

次に、レイヤー効果でグラデーションオーバーレイを設定します。この時のグラデーションオーバーレイの設定はソフトライト50%、線形です。(図1)

設定01

【図1】描画モードをソフトライトにすることで、後のカラー変更が可能になります。

次に、グラデーションのサムネイルをクリックして、グラーデーションエディターを起動させ、光沢を作るためにカラー分岐点を中央で二つ作成します。

一つ目の設定は色:黒(#000000)・位置:50%に、もう一つは色:グレイ(#515151)・位置51%に設定します。(図2)

設定02

【図2】グラデーションの中央の分岐点は距離が近づくほど、
ハイライト効果により光沢が強いテクスチャーになります。

こうのように、グラデーションの分岐点を極端に近づける事で、はっきりとした光沢を作る事が出来ました。(図3)

設定03

【図3】グラデーションの分岐点がバー中央の50%前後の位置で設定しているので、
ボタンの上下中央に光沢ができました

次に、少し立体感をだすために、シャドウ(内側)を施します。

シャドウ(内側)の設定は、モード:通常、透明:20%、角度、−90、距離:4px、チョークとサイズは0にします。この長方形の上に白色のテキストを加えれば、ボタンが一つ出来上がりました。

白色のテキストも立体感がでるように、先ほどと同じようにシャドウ(内側)をつけています。設定は、モード:通常、透明:20%、角度、−90、距離:2px、チョーク:0、サイズ:0です。

これでベースとなりボタンが出来ました。(図4)

設定04

【図4】ベースとなるボタンの完成です

その2_複製して自由に色をかえる!

では、ここからカラーパレットだけで、全体の色味を変えていきましょう。
まず、先ほどつくったボタンをグループ化し、それを複製します。

次に複製した長方形シャイプを選択し、塗りの色を自由に変えます。するとグラーデーションの詳細な設定をしなくても、選択した色味のグラデーションボタンができました。あとはテキストを任意に変えるだけです。(図5)

設定05

【図5】色とテキストを変更するだけで、ボタンのバリエーションが出来ました

同じように、灰色の「戻るボタン」をつくってみました。

設定06

まとめ

今回の内容はいかがでしたでしょうか。

ボタンが多いサイトを作る時などには、重宝するのではないでしょうか。少しでも、御役にたてれば幸いです。
今後も、知っているようで知らない効率の上がるフォトショップのデザインテクニックをお伝えしていきます。

この記事を書いた人

wada

WEBデザイナー wada

見た目は細いが、心は熱い!?
動物と音楽をこよなく愛する、ハートフルデザイナー!!
コードネーム『フシ丸』とは私のことです♪

wadaの最近の記事

pagetop