個人的にずっとphotoshopが苦手でした( ;∀;)

機能も多く出来ることが多すぎて、操作が難しいイメージがありました。ただ色々なサイトを見ていると「ここのデザインって良いなぁ。何で良く見えるんだろう?」ということが多々あって、それがPhotoshopの使い方ひとつで見栄えがぐんと良くなることを知ってから、少しずつPhotoshopが好きになりました。

今回は同じように「どうやったら見栄えが良くなるんだろう?」という人のために、簡単な手間でデザインが良く見える操作方法を知っている限り紹介したいと思います。

他のサイトデザインでも良く使われている技法なので、見慣れたものも多いと思いますが実際に操作方法を知ることでステップアップにつながればと思います。では、どうぞ!

まずは2つのポイントについて

1.キーワードは「質感」

ほとんどのデザインにある見栄えが良く見えるコツ、それは「質感」です。

世の中にあるものには全て質感があって、少し汚れていたり、凹凸があったり、光を反射していたり、模様があったりします。好きな色をベタ塗りしただけ、ではなくそこにプラス質感を入れると見た目がアップし、こだわりを感じます。

2.加工は「ほのか」にするのが良い

あからさまな加工はわざとらしく、雰囲気を壊してしまいます(ポップな感じ、現実離れした雰囲気にするならまた別の話ですが)。

背景やバナーなど、文字や写真を際立たせる補助の役割としてデザインをする時には「ほのか」にするぐらいが調度良いと思います。「そう言われると、よく見たらそんな加工もしてあるなぁ」というぐらいがベストですね。

サンプルを使って例を紹介します

では実際に小技テクニックをご紹介したいと思います。

ちょっとしたことで雰囲気が変わるのでぜひ試してみてくださいね。

例1.ざらざら感を出す(ノイズ加工)

ざらざら感を出す

ノイズ加工はフィルター>ノイズ>ノイズを加えるで加工できます。上の例では2%ほどのノイズを加えました。加工なしに比べて少しざらついた質感が生まれます。

写真に使用するとレトロ感を出すことができますね。Webサイトの背景にもこういったノイズ加工のものが多く使われています。gif画像がメジャーだった昔はノイズなんて邪魔な存在だったのに、技術が進んで高画質が当たり前になると逆にレトロ感を出すデザインが流行るっていうのは面白いですね。

例2.中央にライティング

中央にライティング

中央にほのかに光を作ることで、質感を出すことができます。これも簡単に出来る方法なのでおすすめです。今回は中央に向かって明るくしているので、中央に文字やロゴなどがあると効果的だと思います。やり方は以下の通りです。

ライティング操作

微妙な陰影が出来るので落ち着いた印象を与えることができます。

例3.パターンを重ねる

パターンは自分で作っても良いですし、ネット上にフリーのパターンデータが沢山配布されているのでそういうのを利用しても良いと思います。ラインやドットなどの基本的なものや、チェックや花柄など種類は沢山ありますが、ラインなどの基本的なものが一番使いやすいです。

例えばこういったところでパターンのデータがダウンロードできます。
http://wegraphics.net/downloads/12-free-minimal-web-patterns/

まずはパターンをphotoshopに読みこむ必要がありますが、手順は以下の通りです。

パターンの読み込み

読みこんだら希望のパターンを選んで塗りつぶしするだけなので、後は簡単ですね。実際に塗りつぶしてみたいと思います。

パターン使用例

上の例(右半分)では、緑に塗りつぶしたレイヤーの上に新規レイヤーを作成して、斜め線のパターンを塗りつぶした後にレイヤーモードを「乗算」にして透明度を調整しています。少しパターンの柄が入るだけでちょっと凝った印象になりますよね。

レイヤーモード(ブレンドモード)については以前記事を書いたのでそちらをご覧ください。

Photoshopのブレンドモードがよく分からない人のための手引き その①
Photoshopのブレンドモードがよく分からない人のための手引き その②

また写真に使用しても面白いですね。パターンのレイヤー上で、消しゴムを使って部分的にパターンを消したりするのも違った味が出ます。

写真にパターンを使用

例4.レイヤースタイルを駆使する

凸凹を表現するデザインは良く見かけますけど、あれはほとんどレイヤースタイルで作られています。

レイヤースタイル

色々な組み合わせで違ったものが作れますが、WebDesignRecipesさんの記事で詳しく紹介されていたのでそちらをご紹介します。

Webデザインの1pxを作るためのPhotoshopのレイヤースタイルいろいろ

レイヤースタイルを覚えると、Web上で良く見るボタンなどは大体作ることができますね。

例5.レトロ感を出す

Instagramをはじめ写真で良く使われていますが古ぼけた雰囲気を出すだけで、自分で撮った写真でも味わいが出たりします。

レトロ感を出す例

上の写真は花の写真の上に、新規レイヤーで黄色系の色でブラシで適当に塗り残しを作り重ねています(レイヤーモードは今回乗算にしています)。元の写真レイヤーは直接扱わないので、何度でもやり直しが出来て便利ですよ。

他にもこちらの記事ではヴィンテージ感のある写真に加工する方法もご紹介しています。興味がある方はぜひご覧ください。

Photoshopで写真をヴィンテージ感のあるレトロな雰囲気に加工する方法

文字のグランジも消しゴムを使えば簡単に出来ます。

文字のグランジ手順1

文字のグランジ手順2

はんこ風のデザイン加工についてはこちらの記事でも詳しく書いています。

Photoshopでスタンプのようなかすれた表現をカンタンに作る方法

小技を覚えると、ワンランク上の表現ができる

というわけで、簡単なものを5つご紹介させていただきました。

ひとつひとつの操作は簡単ですけど、組み合わせや使う素材によって色々な表現になるので、ぜひバナー作りなどで役立ててもらえたらと思います。

簡単な操作を色々覚えることで、自然とPhotoshopの操作が身につくのでおすすめです。無理に難しいところから入らず、出来そうなところから手をつけてみるとphotoshopの楽しさが分かると思います(^^)

何かのお役に立てば幸いです!