超現場ブログ

Technique,Design and Events

Photoshopのレイヤースタイルを多様して、一歩上のデザインを

Twitter Facebook Google+ はてブ

223

こんにちは!WEB塾超現場主義 札幌校です。

今日は私が受講生の皆さんに常日頃お伝えしていることを書きます。

それは・・・

レイヤースタイルで、デザインのクオリティをあげよう!

すみません。少し略しました。

正しくは「レイヤースタイルを多様して、一手間を惜しまずデザインのクオリティをあげよう!」ということです。

さて、こちらのボタン、どちらを押してみたいと思うでしょうか?

e95e8391e7fa333226a451c9d45ba4bc

 

どちらかというと、下のボタンではないでしょうか。
(まぁ好みもあるので、100%とは言いませんが・・・)

2つともフォトショップのレイヤースタイルを使用しています。

どんなレイヤースタイルか

上のボタン

文字とボタンそれぞれにドロップシャドウ
下のボタン
フォントにはドロップシャドウ
ボタンにはシャドウ(内側)・グラデーションオーバーレイ・ドロップシャドウの3種類

そうなんです。
上のボタンは単純に影をいれただけです。

実際に触ってみましょう!

下のボタンは、まずはグラデーションオーバーレイで赤から、若干明るい赤にグラデーションをひきます。

次に、シャドウ(内側)を以下の設定に。

シャドウ内側

次に、シャドウ(外側)を以下の設定に。

シャドウ外側

ここで小ネタですが、今回はどっちも影の角度は同じなので関係ないですが、
違う角度の影を生み出すために、独自の包括光源を使用のチェックボックスを外し忘れることがしばしば・・・。

気づかず作業して、後からあああああ・・・ってなることもあります。
皆さんは気をつけください!

そして次にフォント。
ちょっと埋まってる感を出すために、ドロップシャドウをこんな感じでいれてます。

文字シャドウ

この作業量が、デザインのクオリティをあげるための最低限必要なことだと私は思ってます。

まとめ

海外のクオリティの高いPSDファイルをダウンロードして、レイヤースタイルを調べるとほんとびっくりします。

色んな高いクオリティのサイトのデザインをよーーーーーーーーーっく見てみてください

1pxの美学がそこにたくさんあります。
1pxにこだわることで、クオリティは全然違います!

これを読んでいるデザイナー志望さんは、是非、一手間を惜しまず、クオリティの高いデザインを目指しましょう!

他にも色々なテクニックを知りたい!という方は、是非一度ご相談ください

ご質問・ご相談の方はこちら

ご質問・ご相談ですか?

どんなことでもお気軽にご相談ください。

ご質問・ご相談はこちら

Copyright © 超現場主義 All rights reserved.