フェンリル

Developer's Blog

影やハイライトの付け方にひと工夫

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ピクセルの影やハイライトでも、ちょっと作り方を変えてみるだけで、パキッとキレイに見える、こんなのはいかがでしょうか?

Facebook コメント

コメント

Tweets that mention 影やハイライトの付け方にひと工夫 « Elegant Apps Developers -- Topsy.com2010年12月05日 4:36

[...] This post was mentioned on Twitter by Yasumasa Ashida, Fenrir Inc. [iPhone]. Fenrir Inc. [iPhone] said: Elegant Apps Developers に記事を追加しました。今日は「影やハイライトの付け方にひと工夫」です。影もパキッとしてたほうが気持ちいいですね。 http://bit.ly/hohrQF #EADev [...]

名前(必須)

メールアドレス(必須)

URL

スタイル用のタグが使えます

このコメント欄でのご質問、ご要望には、開発チームから回答できない場合があります。ご質問、ご要望は「User Community」内のフォーラムまでお寄せください。