Lopan.jp

カラフルなボタンが作れる汎用レイヤースタイル。

カラフルなボタンが作れる汎用レイヤースタイル。

Webサイトには欠かせないボタンのデザイン、いつもどうしてますか?
Photoshopで作るのならレイヤースタイルが便利ですよね。個人的にお気に入りで、お手軽で、けっこう長らく使い古しているレイヤースタイルがあるので、そのレイヤースタイルについてまとめてみます。(文末でCSS3でも同じものを作ってみてます。)

まえおき

数年前のappleのボタンみたいな、ツヤがあって透明感があるWeb2.0風なボタン。最近とんと見かけませんが、そんなボタンがチョチョイで作れるレイヤースタイルなら、さまざまなサイトで配布されています。

けど最近はこういうツヤのあるボタンはなくなってきました。むしろちょっとザラついてた方が今っぽい気がします(2012年現在)。最近は下記サイトに感化されてます。

無料レイヤースタイル

上で紹介したみたいな無料のレイヤースタイルはバリエーションも豊富でお手軽で便利だけど、その分「スタイル」パレットが煩雑になったり、絶対使わないものまで入っててごっちゃごちゃになっちゃったりします。
それにたいていの場合その色専用のスタイルになってるので(違うのもあるかもしれませんが)ちょっと色味を変えたい時とか、同じ感じの別色バージョンを作りたい時に、結構大変なのです(下図参照)。

無料のレイヤースタイル

Web Buttons Freebie by ~Divirta06 on deviantART

以上をふまえての、汎用レイヤースタイル。

下図のように、「グラデーションオーバーレイ」や「光彩(内側)」をソフトライトで重ねるだけ、の簡単ボタンです:)。
(※ゴテっとしたボタンや、キラッとしたボタンは苦手で、こういうサラッとしたボタンが好きです。)

ソフトライトがポイント

元のシェイプの色にハイライトと影を加えてるだけなので、色替えも簡単なのです:D。

シェイプの色を替えるだけ

以上をふまえての、ちょっと凝ったボタン。

ふまえて、こちらで紹介されているような、スイッチみたいなボタンを作ってみます。
こんな感じになりました。

スイッチみたいなボタン

1レイヤーだけではちょっと難しかったので、同じシェイプを2つ複製して、それぞれに別のレイヤースタイルを適用して作ってます。なので色替えは3手間:(…。けど割と簡単な方!

レイヤーの構造
各レイヤーのレイヤースタイル

ただ、ひとつ大きな弱点は、彩度が高(低)過ぎたり、明度が高(低)過ぎると機能しないって所です。下図のように、元の色が高彩度(低彩度)、高明度(低明度)だと、ハイライトも影も消し飛んじゃいます…。
なので、このレイヤースタイルを使う場合は、ある程度彩度が低くて、それでいて鮮やかめの色(中間色あたり)を選ぶようにします。

あんま原色原色したボタンは作れない…

以上をふまえた、レイヤースタイルを配布。

スタイルを作成してみました(こちらからダウンロードできますので、よろしければどうぞ)ので、こちらの使い方も記しておきます。

  1. ダウンロードした「Switch_Button.asl」ファイルを、「ライブラリ/Application Support/Adobe/Adobe Photoshop CS4/Presets/Styles/」フォルダの中に入れる。

  2. Photoshopの「スタイル」パレットの「スタイルを読み込み...」を選択し、先ほど入れた「Switch_Button.asl」を読み込む。

  3. 適当に(とはいえボタンぽいカタチで)シェイプを作成し、前述した点に気をつけて、お好みのカラーを選択。

  4. シェイプを3つに複製し、一番下のシェイプのみ下辺を5px下へ伸ばす。一番上のレイヤーにはテキストを配置。

  5. それぞれにスタイルを適用(下図参照)。

「.asl」ファイルを「Style」フォルダへ格納
配布したスタイルの使い方

新規スタイルの作成

自分で作ったレイヤースタイルを、いつでも簡単に呼び出せるようにするには、「スタイル」パレットの「新規スタイル...」からスタイルを作成します。手順はチョチョイ以下の通り。

  1. スタイルを作成したいレイヤーを選択し、「スタイル」パレットのメニューの一番上の「新規スタイル...」を選択。

  2. 名前をつけて「OK」すれば、「スタイル」パレットにスタイルとして追加されます。(スタイルの用法は前述の通り。)

また、「スタイルを保存...」からスタイルを保存すれば、パレットまるごと「.asl」という拡張子で、外部ファイルとしてまとめる事もできます。(「.asl」ファイルの用法は前述の通り。)

新規スタイルの作成手順

上図の3コマめにある「描画オプションを含める」というのは、そのレイヤーの「不透明度」と「塗り」のこと。チェックを入れると、「不透明度」と「塗り」の設定も、スタイルとして記録されます。
※ただし記録されるのはそれぞれが100%未満の場合のみ…。:(

CSS3だけでもできます。

けど、このデザインならば、CSS3だけでもできちゃいます。
「境界線」は「border」でしょ、「グラデーションオーバーレイ」は「background: linear-gradient()」で、「ドロップシャドウ」と「シャドウ(内側)」は「box-shadow」、「text-shadow」で表現できます。

上図を別窓で開く。
※Firefox 13.0.1、Safari 5.1.7、Chrome 20.0.1132.47 で表示確認済みですが、IEとかその他ブラウザでは確認してませんのであしからず。。

  • このエントリーをはてなブックマークに追加
  • ツイート

Comment & Pingback

1 Comment for カラフルなボタンが作れる汎用レイヤースタイル。

  1. Pingback: Web制作者がマジで学べる国内ブログ厳選10個【制作+SEO対策編】 | 株式会社LIG

コメントを残す

*がついている欄は必須項目です。