suture_photoshop_illustrator

少しの工夫でリッチなデザインに魅せるテクニックのPhotoshopの方法や使い方

  • このエントリーをはてなブックマークに追加

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

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


グラデーション

Rich photoshop 01

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

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

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

Rich photshop 02

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

 

ノイズを付ける

Rich photshop 03

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

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

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

Rich photoshop 003

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

Rich photshop 04

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

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

Rich photshop 05

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

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

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

ボタンのレイヤースタイル

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

Rich photshop 07

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

おすすめ記事

  1. photoshopでできる手書き風のデザインする色々な方法
  2. 縫い目や刺繍風デザインをPhotoshopやIllustratorで描く方法
  3. 「可愛いをつくりたい!」ガーリーデザインをする際のポイントやテクニック
  4. 色々なサイトを参考にボタンを作ってみました【psd付き】
  5. バナー制作時に困ったらいつもお世話になっている素材サイト

関連記事

PAGE TOP