Photoshop を使用した Tips 、前回はタブアイコンについてのお話でしたが、今回はアイコンや文字に付ける影やハイライトについてお話しさせて頂きます。
iPhone、iPad の光は通常、上90度から当たるようになっており、それに合わせてボタンやアイコン、文字に影やハイライトを付けます。その際に、Photoshop の「ドロップシャドウ」や「ベベルとエンボス」なども使えますが、この機能では特に文字がぼやっとしてしまいがちなのが残念です。そこで、自分で影やハイライトを付けてみましょう。まず、影などを付けたいもののレイヤーをコピーして同じものを真下に作ります。そして、ハイライトか影なのかによって次のように調整してやります。
- ハイライト → 白などの薄い色にして下に1ピクセル（Retina Display では2ピクセル）ずらす
- 影 → 黒などの濃い色にして上に1ピクセル（Retina Display では2ピクセル）ずらす
下図の☆アイコンは、A が Photoshop のレイヤー効果を使用したもの、B が同じ★アイコンのレイヤーをもうひとつ作り、黒くした後、上に1ピクセルずらしたものです。
★の上方面にそれぞれ影が入っているのですが、A の方が影がぼやっと2ピクセルほどあるのに対し、B の方は1ピクセルの影がパキッとしていてキレイです。これらの★のレイヤーは下記のようになっています。
色付けされたレイヤーが、B の★のシャドウです。
ちなみにボタンの影やハイライトは、上記と同じように同じレイヤーをふたつ作り、下のレイヤーに効果で境界線をグラデーションでつけます。不透明度100%の白～不透明度0%の白の境界線を下図のように作成します。
そして、レイヤー効果を完了後、そのレイヤーの塗りを0%にすると、下図のようなハイライトができ、これをボタンの下に置くとキレイなハイライトのできあがりです。
たった1ピクセルの影やハイライトでも、ちょっと作り方を変えてみるだけで、パキッとキレイに見える、こんなのはいかがでしょうか？
関連記事
