ポケットラボ

PhotoshopをWebデザインにて使うようになり3年ほど経ちましたが、まだまだ使いこなせなかったり、使ったことない機能がまだまだあったり覚えることがたくさんありますね。

今回はWebデザインをする際に、少しの工夫でリッチ（良く）魅せるPhotoshopのチュートリアルです。機能的には日常的に使っている機能かと思いますのでそれほど難しいことではないかと思いますので、是非制作する（使えそう）な機会がありましたら取り入れてみてくださいね。続きより！

グラデーション

単色で少しのっぺり感が少し気になる場合、少しグラデーションを加えてあげるだけで少し良く魅せることができます。

ボタンのような横長デザインの場合は、縦にグラデーションをかけるかと思いますが、スクエア型（四角）の形には、円形のグラデーションを付けることで少しリッチに見えます。

その際には、グラデーションがほんのりついてるかな、ぐらいの気持ちでいいと大丈夫です。逆に明度の差が大きかったりすると逆に汚く見えてしまう場合があります。

円形のグラデーションは、効果より付けたい場合は【レイヤースタイル】→【グラデーション】→【スタイル】より「円形」を選択。

ノイズを付ける

一見、ベタ塗りのように見えますが、よく見ると少しだけノイズが入っています。

ノイズを付けることによって、デザインに少し質感を出すことができます。もちろん使いどころよってはノイズを付けない方がよいところや、最近のデザイントレンドのフラットデザインに用いることがないかもしれません。

ノイズの付け方は、【フィルター】→【ノイズ】→【ノイズを加える】よりノイズの数値を「1〜3%」ぐらいの数値でデザインに合わせてお使いください。

ノイズは背景だけではなく、文字に使ったり、ライン、境界線に使ったり、オブジェクトに使ってもとっても汎用性が高いので覚えておいていい手法ですね！

境界線などの内側薄い色ラインを入れてあげる

ボタンデザインなどではよく見かける方法です。

上記のボタンデザインでは、左のボタンは境界線とグラデーションで作った場合ですが、右のボタンデザインは周りの境界線の内側に1pxの薄いラインを入れてあります。

すっごく若干ですが、細かいところまでデザインされているデザインは美しいです。ボタンの場合だと、グラデーションに加え、より立体感を得られることができますね。

上記のボタンの場合だと、Photoshopのレイヤースタイルのシャドウ（内側）のみできるのでとっても簡単です。

少し工夫をすれば、色々なボタンにすることもできるので色々応用ができますね！

他にも色々な手法があると思います。色々見つけていったらきっとデザインのクオリティも上がっていくと思います！