• Webテクニック
• Beginner
• Design
• Photoshop

色んな Webサイトを見ていると、1px にこだわって作られたキレイなデザインがたくさんあります。私は Photoshop を使っているので、Photoshop のレイヤースタイルを使って、1px の細かい所を作る Tips をまとめてみました。基本的な操作ばかりなので、これから Photoshop で Webデザインをやってみたいなーという人向けの記事です。

色んな素敵なデザインの Webサイトを観察していると、1px の細かいところまでこだわって作られてるデザインってとても多いですよね。1px … Webデザインでは一番小さいサイズ。「神は細部に宿る」という言葉もあるけれど、1px までしっかり作られたグラフィックはとても美しいですね！

今回は Photoshop を使って、いろんな 1px を作ってみました。とは言っても難しいグラフィックデザインを作るわけではなくて、レイヤースタイルを使った簡単な Tips 集（基本操作？）です。ボタンなどの UI エレメントの作成を中心にした、簡単なものばかり。そんな小技をまとめてみました。

また、私は Photoshop CS5 を使っているので、バージョンによって説明する所で使っている画面が違うかもしれません …。

Photoshop レイヤースタイルで 1px 目次

1. レイヤースタイルって何だろう？
2. シンプルなボタンを作ってみる
   • 描画モードとは？
3. シャドウ（内側）を使った 1px
4. 光彩（内側）を使った 1px
5. ちょっと寄り道、ドロップシャドウの距離とサイズ
6. カラーオーバーレイ、グラデーションオーバーレイ、パターンオーバーレイ
7. グラデーションで 1px を作る
8. ちょっと寄り道、マスクが便利
9. グラデーションとシャドウ（内側）
   • 同じレイヤースタイルをもうひとつ加える
10. 塗りを 0 + ベベルとエンボス
11. ベベルとエンボスでレタープレス

1. レイヤースタイルって何だろう？

今回は Photoshop で色々サンプルを作っていきます。その中で使うのが、レイヤーのレイヤースタイルというもの。レイヤースタイルって何でしょう？レイヤースタイルは、レイヤーに色んな効果（スタイル）をつけてくれる便利なもの！ちょっと具体的にどんな機能なのかを、ひとつひとつ見ていきます。

レイヤースタイルは、Photoshop の画面上部のメニュー（ツールオプションバー）の 、レイヤー → レイヤースタイル から選ぶこともできますが、レイヤーパネルのレイヤー上をダブルクリックすると表示されます。

レイヤースタイルの表示

レイヤースタイルを上から見ていくと、以下のようにいっぱいあります …。

Photoshop のレイヤースタイル

• ドロップシャドウ、シャドウ（内側）
• 光彩（外側）、光彩（内側）
• ベベルとエンボス、サテン
• カラーオーバーレイ
• グラデーションオーバーレイ
• パターンオーバーレイ
• 境界線

一個ずつ説明していくと、とても長くなりそうですし、サテンとかあんまり使ったことないし X( なので、ここからは具体的にサンプルを作りながら説明していきますね！ここでは、レイヤースタイルにはこんな種類がある … ということだけ頭に入れておいてくださいね！

2. シンプルなボタンを作ってみる

レイヤースタイルを説明するために、まずは簡単なものから作ってみます。 シンプルなボタンを作りながら、レイヤースタイルを見ていきましょう。

完成図

まずはボタンの形を角丸長方形ツールで作ります。多角形長方形ツールって何？という人は、過去記事：これからPhotoshopでWebデザインをしたい初心者さんのためのツールパネルとかいろいろを読んでみてくださいね！

角丸長方形ツールで描いたシェイプ

とりあえず、こんな長方形を描きました！

2.1. グラデーションを加える

これをちょっとボタンらしくする為に、グラデーションを加えてみます。使うのはレイヤースタイルの中のグラデーションオーバーレイ。これでレイヤー（今回のサンプルでは、角丸長方形）にグラデーションを加えます。

今回は特に難しいことはせずに、普通にグレー（#ababab）から白（#ffffff）までのグラデーションを指定しました。角度は 90度で、描画モード（後述）も通常です。

グラデーションオーバーレイのレイヤースタイル

グラデーションオーバーレイを、上から簡単に説明すると …

• 描画モード
  これはちょっと後述します。描画モードもたくさんあるので …
• 不透明度
  これは簡単ですね！どれくらい透過にするかです。
• グラデーション
  色やグラデーションの間隔など、細かく調整できます！今回は色を変えただけで、特にいじってません。
• スタイル
  グラデーションの種類です。今回は普通に線形を使います。他にも円形、角度、反射、菱形があります。
• 角度
  これも簡単ですね！グラデーションの向きです。
• 比率
  グラデーションの比率です … 口では説明しづらいのですが、比率を下げるとグラデーションの効きが少なくなって、大きくするともっとぼんやりする感じです。スライダーを左右に振ってもらえば、どんな風になるか分かると思います。

さて、上記の画像の様にグラデーションオーバーレイを設定すると、以下のようになりました！

グラデーションを指定したボタン

最初なので少し丁寧に説明していきます …。今度はこれに縁取り、境界線を引きます。今回はもちろん 1px です。

2.2. 境界線を引く

レイヤースタイルの境界線は、名前の通り境界線を引くことができます。レイヤースタイルをを見てみると、以下のようにいろいろ指定ができます。

境界線のレイヤースタイル

簡単に境界線を説明すると …

• サイズ
  もちろん線の太さです！
• 位置
  これは輪郭の外側に線を引くか、内側に線を引くか（中央もあります）です。外側に引くか、内側に引くかで、他のスタイルとの兼ね合いがあるので注意が必要です。
• 描画モード
  さっきも出てきましたが、これは後述します。
• 不透明度
  さっきと同じ、透過度です。
• 塗りつぶしタイプ
  線を色で塗りつぶすか、グラデーションで塗りつぶすかを選びます。

今回はサイズを 1px、色は濃い目のグレー（#424242 ）で、位置は内側に引きました。

境界線を引いたボタン

今回は内側に 1pxの線を引きましたが、なんで内側に引いたのかには理由があります … とりあえず先にすすみましょう。

2.3. 白いシャドウを引く

今回は 1px がテーマなので、ボタンの下に 1pxの白いシャドウを入れてみます。使うのはレイヤースタイルのドロップシャドウ。ドロップシャドウは名前の通り、影をつけるスタイルです。

ドロップシャドウのスタイル

今回は白いシャドウにするので、描画モードを乗算から通常へ。不透明度は 100%にしました。さっきから出てきていた描画モード … ちょっと寄り道して、描画モードをおさらいしておきます。

2.4. 描画モードとは？

Photoshop を使うなら、ぜひ覚えておきたいのがこの描画モード。描画モードを勉強するにあたって、まずは色の混合（ブレンド）について知らなくてはなりません。色を混ぜるとどうなるか … という色の混合には以下のようなものがあります。

2.4.1. 加法混合（光の三原色）

まずは Webで使われている加法混合。RGB って言った方が分かりやすいかもですね！加法混合（光の三原色）は色を混ぜていくと最終的に白くなる … ちょっと不思議な？感覚ですね w 絵の具を混ぜても白くならないのに、光の三原色は混ぜると明るくなって、最後には白になります！

2.4.2. 減法混合

一般的には馴染み深いのはこっちかなー … 減法混合、色の三原色は、子どもの頃から馴染んできた絵の具を混ぜる感覚と同じですね。色んな色を混ぜれば、どんどん暗くなっていって、最後には黒になります。

2.4.3. 色の混合と描画モード

色の混合と描画モードがどう関係あるの？って言われそうですけど、描画モードは、このどっちかの色の混合を使ってるものが多いんです。ここでは全部の描画モードの説明はしませんが、主に使う描画モードを説明しますね。

描画モード：通常

これは説明いらないですね w 普通に描画します。

描画モード：乗算

これは分かりやすいかもしれません。減法混合、色の三原色で他の色（他のレイヤーなど）とブレンドする描画モードです。重ねれば暗くなっていきます。

試しにこんなピンクのハートに、グレーのレイヤーを乗算で重ねるとどうなるでしょう？

オリジナル画像

グレー（#cccccc）を乗算で重ねると、当然ハートのピンクは暗くなります。

乗算でグレーを重ねた画像

描画モード：スクリーン

スクリーンは乗算の逆 … というか、今度は加法混合（光の三原色）の方で色をブレンドするモードです。色を重ねると明るくなるモードです。同じように実験してみると、ピンクのハートは明るくなります。グレーを重ねてるのに、明るくなる … この感覚に慣れが必要ですね！

スクリーンでグレーを重ねた画像

描画モード：オーバーレイ

オーバーレイはさっきの乗算とスクリーンを、足して2で割ったような感じです。明るい所はスクリーンの効果でより明るくなって、暗い所は乗算の効果でより暗くなるといった感じです。私はというときにはメリハリを付けたいならオーバーレイって感じで使っています。

オーバーレイで重ねた画像

ちょっとサンプル画像が微妙だったかな … X(

描画モードについては、過去記事：Photoshop初心者さんが写真のレタッチ（色調補正）などをするために覚えたい機能で、少し詳しく書きました（ブレンドモードって書いてますが）。

さて、ボタンの作成に戻ります w さっきはドロップシャドウを、どの描画モードでブレンドするか … でした。白いシャドウを使うので、描画モードを通常にした … というお話でした。ドロップシャドウのレイヤースタイルを確認してみると …。

シャドウのレイヤースタイル

• 描画モード
  説明した通りです！今回は通常を選びました。
• 不透明度
  透過度です。
• 角度
  光の向き、角度です。また、角度の横に、包括光源を使用というのがあります。これは何かというと、他のレイヤースタイルと同じ角度を使うか？ということ。もし他のレイヤーで角度を変更すると、ここの角度も変わります。変えたくないなら、包括光源を使用のチェックを外しておきます。
• 距離
  シャドウと元の形からの距離です。角度 90度で 1px とすれば、下 1px に影ができます。
• スプレッド
  シャドウのボケ具合です。100%にするとくっきりします。
• サイズ
  シャドウのサイズです。0px で元の形と同じ大きさになります。

距離、スプレッド、サイズの3つも、ぜひしっかり覚えておきたいですね。あとでもうちょっと説明します w まずは先を急ぎましょう。

今回は、下記のようにドロップシャドウを設定しました。

• 角度：90度
• 距離：1px
• スプレッド：0%
• サイズ：0px

ドロップシャドウで 1pxの影

ボタンの下に 1px のくっきりとしたシャドウができました。

角度 90度で距離 1px なので、ボタンの下に 1px のシャドウです。サイズが 0px（元の形と同じ）なので、ボケてもいません。なのでスプレッドは 0%でもくっきりしてますよね！

境界線とドロップシャドウの関係

さっき境界線のところで、線を内側に引きました。覚えてますか？ w なんで内側に引いたかというと、このドロップシャドウとの関係があるからです。もし外側に引いていたら、距離 1px のシャドウは、境界線の下に隠れてしまします。その場合は、ドロップシャドウの距離を 2px にすれば、1px だけ表示されます。

また、境界線の位置は、マスク（後述）を使うときも関係してくるので、どの位置にするかは注意しておきたいですね！

2.5. テキストを入れて、シャドウをつけて完成！

最後にテキストを入れて、テキストにもさっきみたいな白いドロップシャドウを入れれば完成です！

3. シャドウ（内側）を使った 1px

さっきはドロップシャドウを使って、1px の線を描きました。今度はシャドウ（内側）を使って、ボタンの内側に 1px の線を作ってみます！

完成図

まずはさっきと同じように、角丸長方形ツールでボタンの形を作って、グラデーションオーバーレイと境界線を指定します（下の画像）。今回は、境界線の位置を外側にしました（理由は後で！）。

3.1. シャドウ（内側）を使って 1px の線を引く

これにシャドウ（内側）で 1px のラインを引きます。シャドウ（内側）のレイヤースタイルを見てみると、以下のような感じです。

シャドウ（内側）のレイヤースタイル

初めてチョークというものが出てきました。チョークはドロップシャドウのところで出てきたスプレッドと基本的に同じで、ボケ具合を調整します。100% にするとシャドウがくっきりします。

今回はグラデーションの角度は 90度にしてありますが、包括光源を使用のチェックを外して、シャドウ（内側）の角度は 120度で指定しました。すると下記の画像の様に、ボタンの内側に 1px のラインができました！

シャドウ（内側）で 1px を描いたボタン

長方形の左辺と上辺にだけ 1px の白い線ができました。もちろん角度を 90度にすれば、上辺だけになります。

3.2. 仕切り線を入れてみる

ついでじゃないですけど、1px（正確には 2px）の仕切り線を入れてみます。境界線と同じ色で縦に 1本線を引いて（鉛筆ツールなどで）、その隣りにも 1本白い線を引きます。

仕切り線を描く

はみ出してるのには理由があります。というのも、後でボタンの大きさを大きくしたいなー … となったとき、もしぴったりに線を引いてあると、また書き直さないといけなくなります。でもマスクを使えば、簡単にはみ出した線を隠せますよね！

3.3. マスクを使って、はみ出した部分を隠す

それではボタンの形のマスクを作ってみます。command キー（Windows は Ctrl？）を押しながら、ボタンのシェイプレイヤーのベクトルマスクサムネールをクリックします。すると、ボタンの部分だけ選択されます。

ボタンの形に選択される

この状態で、さっき作った仕切り線のレイヤーにマスクをかけます。仕切り線のレイヤーを選択して、下の方のベクトルマスクを追加ボタンを押します。

すると、ボタンからはみ出した部分は、マスクに隠れて見えなくなりました！

はみ出した部分が隠れる

さっき境界線の位置を外側にしたって書きました。何で外側にしたかというと、マスクと関係があるからなんです。今回のサンプルは外側に境界線（青い輪郭の線）を書いているので、以下のようになっています。

境界線を外側にした場合

縦の白い線は、青い輪郭の線の内側で止まってますよね。もし、境界線を内側に書いてる場合は、以下のようになります。

境界線を内側にした場合

白い線が、輪郭の線に重なってしまいます。この場合は選択範囲を作るときに、1px 縮小するなどしてからマスクを作らなくてはいけませんねー。

細かい所ですけど、今回は 1pxという細かいお話なので … X( 最後にテキストをいれて、うっすらドロップシャドウ（黒い影）をつけたら完成！

完成！

3.4. マスクを使って、仕切り線をぼかす

せっかくマスクを作ったので、ちょっと寄り道です。くっきりとした仕切り線を、うっすら消えてくような感じにするにはどうすればいいでしょう。

仕切り線がうっすらと消えていく …

これはさっき作ったマスクに、グラデーションをかけて表現できますね！

ちょっと曲がっちゃったけど w

4. 光彩（内側）を使った 1px

今度はレイヤースタイルの光彩（内側）を使って、ボタンの内側に 1px のラインを引いてみます。

完成図

さっきと同じように、グラデーションオーバーレイと境界線（位置は外側）を使って、ボタンのベースを作ります（下の画像）。

グラデーションと境界線

今回はちょっと色が濃いですが、これには訳があります（後述）。気にせずに先に進みましょう w

4.1. 光彩（内側）を使って線を引く

レイヤースタイルから、光彩（内側）を開きます。レイヤースタイルは下記のようにしました。

光彩（内側）のレイヤースタイル

• 描画モード
  今回はスクリーンにしましたけど、色は白なので、通常でもOKです。
• 不透明度
  42%にしました。
• ノイズ
  これは、光彩にノイズを加えることができますが、今回は 0%で。
• 塗りつぶし
  塗りつぶしはカラーかグラデーションを選べます。今回は普通にカラーで塗りつぶし。色は白で。
• テクニック
  さらにソフトにと精細から選べます。
• ソース
  これは中央から光らせるか、エッジ側から光らせるかです。今回はエッジを選びます。
• チョーク
  シャドウ（内側）のところでも出てきましたね！今回はくっきりした線をひきたいので、100%にしてボケ具合をくっきりな方へ。
• サイズ
  1px のラインを引くので、1pxにします。

すると以下のように、ボタンの内側に 1pxの線ができました！境界線を内側にしている場合は、2px にしないと出ないので、注意してくださいね！

光彩（内側）で 1px

4.3. テクスチャを使って、質感を加える

今回はちょっと寄り道して、テクスチャを使って、ボタンに質感を加えてみます。新しいレイヤーを作って、今回は白で塗りつぶします。次にメニューの フィルター → ノイズ → ノイズを加える から、真っ白のレイヤーにノイズを加えます。

ノイズを加える

今回は上記のようにしましたが、これはお好みです。でもこのままだと色が合わないので、トーンカーブや、レベル補正を使って、青くしたのが下の画像です。

青くしたノイズ

これをレイヤーの描画モードをソフトライト、不透明度 60%くらいで重ねると、以下のような感じになりました。ボタンからはみ出す部分は、マスクを使って隠します（仕切り線を隠す所でやりましたね！）。

テクスチャを重ねたボタン

するとボタンにノイズが加わって、ちょっといい感じになりました w テクスチャはネガ反転したり、ノイズの量を変えたりすれば、いろんな質感が出せるので、何気に便利ですねー。最初に色を濃くしていたのは、このテクスチャを重ねるからだったんですね！もちろん後からでも調整できるので、最終的に好きな感じの色にします。

あとはテキストを入れたりして完成です！

完成！

5. ちょっと寄り道、ドロップシャドウの距離とサイズ

ここでちょっと寄り道して、ドロップシャドウの距離とサイズについて見てみましょう。ドロップシャドウ … と聞くと、黒いぼんやりした影 … というイメージですけど、実際はくっきり描くこともできるし、黒だけじゃなくて、色んな色で描くことができるのは、見てきた通りです。白のくっきりとした、1px のドロップシャドウを最初の方で使いましたよね！

例えばドロップシャドウのスタイルを下記のように設定すると、どんな風になるでしょう？

ドロップシャドウのレイヤースタイル

描画モードを通常にして濃いブルーの影を、距離 0px で指定してます。スプレッド（ボケ具合）を 100%にして、サイズを 8pxにすると …。

こんな風に境界線のようにハッキリとした影になりました！距離を 0 にするとぐるーっと一周影ができます。

下記はサイズを 0 にして、ボタンのサイズと同じ大きさにしました。角度を 90度にして、距離を 2px にするとこんな感じに。でも、境界線を外側に 1px指定すると、2px のうち1pxは隠れて、見えてる部分は 1pxになるので注意してくださいね（1px とか 2px とか、ごちゃごちゃして意味わかんなくなってきますね …）！

初心者の頃は何となく使っていたドロップシャドウも、描画モード、角度、距離、サイズ、スプレッドを使いこなせば、狙った通りのドロップシャドウが作れるようになりますね！

6. カラーオーバーレイ、グラデーションオーバーレイ、パターンオーバーレイ

ここからちょっと 1px の話題からそれますね。さっきノイズのテクスチャを別レイヤーで作って、ボタンに重ねて質感を加えました。でも別レイヤーを作ると、スタイルに追加してワンクリックで使い回すことができません …。レイヤースタイル一個で作ってしまえば、追加したスタイルを次回からワンクリックで使い回すことができます。

Photoshop のスタイルパネル

ここに追加すれば、ワンクリックで同じスタイルが作れる！

さっきは別レイヤーにテクスチャを使いましたけど、パターンオーバーレイを使う … という方法もあります。その為には、ベースカラー、カラーオーバーレイ、グラデーションオーバーレイ、パターンオーバーレイの4つのレイヤースタイルを覚える必要があります。

まず、ベースカラーというのは、レイヤーを塗りつぶした色のこと。

ベースカラー

それではカラーオーバーレイ、グラデーションオーバーレイ、パターンオーバーレイというのは、何でしょう …。グラデーションオーバーレイは、今まで使ってきたので分かると思います。レイヤーにグラデーションをかけるものでした。

ではカラーオーバーレイというのは何でしょう？これは色で塗りつぶすレイヤースタイルです。ん？ベースカラーで塗りつぶせば、要らないんじゃない？って思う人もいるかもしれませんが、ちょっと違います。とりあえず先にすすんで、今度はパターンオーバーレイを見てみましょう。

パターンオーバーレイは、レイヤーにパターンを指定することができるレイヤースタイルです。パターンというのは、自分で色々追加できる柄とかテクスチャのこと。基本的にはシームレス（継ぎ目のない）ものを使うことが多いですよね！

6.1. パターンを加えてみる

では早速パターンオーバーレイを使ってみたいと思います。今回は透過の斜線のパターンを使ってみます。

パターンオーバーレイのレイヤースタイル

パターンを指定したあと、ボタンがどうなっているか見てみると …

あれ？パターンが表示されていない X( … これはどういうことかというと、レイヤースタイルの重なり順が関係しています。

レイヤースタイルの重なり順は、上から以下の通りに重なっています。

レイヤースタイルの重なり順

1. カラーオーバーレイ
2. グラデーションオーバーレイ
3. パターンオーバーレイ
4. ベースカラー

さっきの例は、パターンオーバーレイの上に、描画モードを通常にしたグラデーションオーバーレイが重なっているため、せっかく指定したパターンが見えないんです。なのでグラデーションオーバーレイの不透明度を変更したり、描画モードを変更したりして、下のパターンオーバーレイが見えるようにしなくてはなりません。

今回は、グラデーションオーバーレイの描画モードをオーバーレイにしてみます。すると以下のようにパターンオーバーレイが見えるようになりました！

パターンオーバーレイが表示されました！

上の画像は、パターンオーバーレイ自体の描画モードもオーバーレイにして、不透明度を変更しています。また、ちょっと色が淡くなったので、ベースカラーにちょっと青を加えました。

今回はパターンオーバーレイとグラデーションオーバーレイでしたが、この上にカラーオーバーレイのレイヤースタイルを乗せる場合もあります。レイヤースタイルの描画モードと重なり順には、ちょっと注意が必要ですね！

今回は斜線のパターンを使ってみましたけど、前述したテクスチャをパターンに指定しておけば、同じようにできちゃいますね！

完成！

最後にさっき作ったテクスチャレイヤーを重ねて、ノイズを加えてみました。当然色が薄くなるので、カラーオーバーレイを使って、少し濃くなるように微調整 …。完成です ;D

レイヤースタイルの重なり順は、他の所でもおこります。前半で出てきた、境界線が一番上にきますが、その他は以下のような感じで重なっています。

1. 境界線
2. シャドウ（内側）
3. 光彩（内側）

7. グラデーションで 1px を作る

今度はグラデーションを工夫して、1px のラインを作ってみましょう。グラデーションは、その位置や色を自由に選べますよね。言葉だと説明しにくいので、以下の画像を見てください。

グラデーションの画面

グラデーションの右端、98%の部分、そしてさらに明るい色を 100%のところで指定します。角度を 90度に指定すると、以下のようになります。

グラデーションで 1px

ちょっと薄かったかな X(

境界線の内側に、1px の明るい部分ができました。これは説明不要ですね！グラデーションは色んな使い方ができるので、いろいろ試してみるとおもしろいですね。

完成！

8. ちょっと寄り道、マスクが便利

前半で、はみ出した部分はマスクを使って隠す … という小技を使いました。ここでマスクについて補足です。まずは下の画像を見てください。

上のリボン（のつもり）の端っこを、三角にしたいなーと思って、選択範囲の部分をマスクを使って隠します。すると以下のようになります！

マスクで隠しても、ちゃんとレイヤースタイルに指定したスタイル（上の例では境界線）が効きます！なので最初からシェイプで形を作らなくても、マスクを使って形を整える … というのもアリなんですね！リボンの端っこを、三角じゃなくてギザギザにしたいなーというときでも、マスクを替えるだけで OK です！

9. グラデーションとシャドウ（内側）

今度は逆向きのグラデーションと、シャドウ（内側）を使って、検索フォームを作ってみます。グラデーションを逆向きにすれば、凹んだ感じがでますよね！

完成図

まずはいつもみたいに、角丸長方形ツールで角丸長方形をつくりますが、今回は半分だけ角丸にする必要があります…。

9.1. 半分だけ角丸長方形を作る

パス選択ツールで角丸のパスをクリックすると、以下のようにアンカーポイントが打たれています。要らないアンカーポイントを、アンカーポイントの削除ツールで削除しちゃいます。

1. アンカーポイントの削除ツールで削除する

2. ハンドルを消す

削除しても残りのふたつのアンカーポイントから、曲線を描くハンドルが出ていて邪魔なので、ペンツールのアンカーポイントの切り替えツールで、ハンドルを消します。

3. 半分だけ角丸長方形ができました！

9.2. グラデーションを加える

これに検索フォームらしく、グラデーションを加えます。注意したいのは、グラデーションの中間の位置。今まではあんまりこだわらずに、50%（真ん中）を指定したままでしたけど、今回は 75%くらいに指定してみました。

中間点 75% の位置のグラデーション

あとはいつもみたいに境界線と、1px の白いドロップシャドウを加えると、以下のような感じになりました。

グラデーションを加えたフォーム

9.3. シャドウ（内側）を加える

今度はさらに、シャドウ（内側）を加えていきます！今回は以下のような感じに指定しました。

シャドウ（内側）のレイヤースタイル

すると下の画像のように、ちょっと検索フォームっぽくなりました！

シャドウ（内側）を加えたフォーム

でも、ちょっと薄い … うっすらとしたシャドウは、ディスプレイによっては全く見えません X( 上の画像のシャドウは、見えてない人もいるかも … そこでちょっとひと工夫。シャドウ（内側）をもうひとつ加えてみます。

9.4. 同じレイヤースタイルをもうひとつ加える

とは言っても、同じレイヤースタイルをふたつ加えることはできません …。でも同じレイヤーをふたつ作ることはできますよね！まずはさっき作った検索フォーム部分のレイヤーを、まるごとコピーします。command + Jキー（Windows は Ctrl + J？）でコピーするのが楽ちんです。

コピーしたレイヤーのスタイルは、シャドウ（内側）だけを残して全部削除します。その上で、レイヤー自体の塗りを 0 にします！

レイヤーの塗りを 0 に

こうすると、レイヤーのベースカラーなどは表示されずに、内側（シャドウ）だけが表示されます！ふたつめのシャドウ（内側）を以下のように設定して、少しきりっとさせてみました。

ふたつ目のシャドウ（内側）のレイヤースタイル

少しくっきりしましたね！あとはボタン部分をつけて出来上がりです！

ふたつ目のシャドウ（内側）を加えた状態

拡大図

少し拡大してみると、シャドウが2重になっています。

完成！

10. 塗りを 0 + ベベルとエンボス

さっきのサンプルで、塗りを 0 にするということを学んだので、応用すればこんなこともできちゃいます。

完成図

木目調のテクスチャの上に、レタープレスっぽく長方形を描きますが、ベースカラー自体は塗りを 0 にしてます。シャドウ（内側）とグラデーションオーバーレイを使っていますが、もうひとつ新しいレイヤースタイル、ベベルとエンボスを使っています。

10.1 ベベルとエンボス

ここではベベルとエンボスをちょっと見てみましょう。

ベベルとエンボスのレイヤースタイル

• スタイル
  ベベル（外側）、べベル（内側）、エンボス、ピローエンボス、エンボスの境界線を描く … がありますが、今回は凹んでるっぽく見せるので、ベベル（内側）を指定しました。
• テクニック
  滑らかに、ジゼルハード、ジゼルソフトがあります。今回は滑らかにを指定してます。
• 深さ
  深さを調整しますが、今回はサイズを 0px にしているので、関係ありません。
• 方向
  上か下かですけど、今回は下で。上にすると、凹んでる感じじゃなくて、出っ張ってる感じになります。

その他陰影の部分は上記の画像の通りです。ハイライトのモード（明るい部分を指定するところ）は不透明度 0%にして表示しないようにしています。これは、あとでドロップシャドウを使って、下に 1px の線を引くからです。

シャドウのモードは、暗い部分を指定する所ですね。今回は不透明度 50%程にしました。
（ベベルとエンボス、説明するの難しいですね …）

上記の様に設定すると、下の画像の様にちょっと凹んだ感じがでます！分かり難いので、グラデーションオーバーレイ（うっすらとした黒いグラデーション）も表示させています。もちろんレイヤー自体の塗りは 0 です。境界線は描かないで、ベベルとエンボスで 1px を描いています。

ベベルとエンボス + グラデーションオーバーレイ

10.2. シャドウ（内側）、ドロップシャドウを加える

あとはシャドウ（内側）や、ドロップシャドウで 1px の白い影をつければ、それっぽくなりますね！

最後にテキストやアイコンを入れてできあがりです！

完成！

検索フォームの所では、境界線やシャドウ（内側）、グラデーションオーバーレイで凹んだ感じを出してきました。でも、場合によっては、ベベルとエンボスを使って 1px の線を作った方が、仕上がりがキレイな場合があります。ベベルとエンボス … ちょっと覚えておきたいですね！

11. ベベルとエンボスでレタープレス

長くなったので最後にします w 最近の Webデザインではレタープレスが流行ってますよね！私も大好きです。

完成図

前半、テキストに 1px の白いドロップシャドウをつけることで、レタープレスっぽい表現をしてきました。サイズが大きくなれば、シャドウ（内側）を加えてそれっぽく見せることができますよね！

でも、せっかくベベルとエンボスというレイヤースタイルがあるので、ちょっと大きめなレタープレスを作るなら、ベベルとエンボスを使った方がキレイに仕上がりますね！上の画像は、ベベルとエンボスを使っています。逆に下はベベルとエンボス無しです。

ベベルとエンボス無しのレタープレス

ベベルとエンボスを使わないで作ったレタープレスです …。ふたつ並べてみると …。

ベベルとエンボス、有りと無し

ベベルとエンボスを加えた方が、キレイに仕上がってるんじゃないかなーと思います！

12. 最後に …

いろいろとレイヤースタイルを中心に、1px をテーマにして見てきました。でも Photoshop は道具だし、道具の使い方は人それぞれです。前にリスペクトしているグラフィックデザイナーさんが、「画板だよ、Photoshop なんて。」って言ってました。色んな意味が込められた言葉だなーと思ったけど、好きなように表現する場所でもある Photoshop。色を選ぶのに、カラーパレットから選ぶのもありだし、5%くらいに透過したレイヤーを何枚も重ねて、色を作るのだってアリなんですよね。

なのでここで紹介したやり方が正しいとかではないし、むしろこういうときは、こうした方がいいよー！などあったら、教えていただければなーと思います！以上、私がよくやっている、1px の Tips 集でした。

また、今回いろいろ専門用語？が出てきたので、ツールなどよく分からなかった人は、過去記事を参考にしてもらえると嬉しいです！

• これからPhotoshopでWebデザインをしたい初心者さんのためのツールパネルとかいろいろ
• Photoshop初心者さんが写真のレタッチ（色調補正）などをするために覚えたい機能