プロとして恥ずかしいPhotoshopのタブー｜Photoshopの基本

2013/07/11

まだ新人の頃によくお世話になったMdnのプロとして恥ずかしくないPhotoshopの大原則

今回はその逆で、プロとしてやってはいけないPhotoshopの基本的なことを書いていきたいと思います。ごくごく基本的なことなのでプロの方は読み飛ばしてください。

Contents

1 画像の拡大縮小を繰り返さない
2 画像の補正を繰り返さない
3 無駄なアンチエイリアスを出さない
4 自由変形で角丸をつぶさない
5 過度なドロップシャドウを使わない
6 過度なベベル（内側）を使わない
7 安易な画像反転をしない
8 画像切抜きの境界線に白を残さない

画像の拡大縮小を繰り返さない

Photoshopで主に扱う画像はラスターデータのため、一度劣化したデータは戻ってきません。下図のように画像を縮小し変形を確定後、再度拡大すると画像は劣化してしまします。
画像を変形する場合は、元画像をコピーして残しておくかスマートオブジェクトに変換するようにしましょう。

画像の補正を繰り返さない

これも画像の拡大縮小と同じく、画像に直接何度も色調補正を繰り返すと画像は劣化していきます。下の図は、「イメージ」＞「色調補正」>「明るさ・コントラスト」でコントラストを+50した時の画像イメージとヒストグラムを表示したものです。補正後のヒストグラムに縦線が入って隙間が出来ているのがわかると思います。これは、補正によって元画像の情報が減っていることを示しています。

補正の繰り返しをする場合は、調整レイヤーの機能を使いましょう。

※ヒストグラム…画像が持つ明るさや色のデータをグラフ化して表したもの。

無駄なアンチエイリアスを出さない

Photoshopでweb制作をする場合の注意になりますが、出さなくていい部分にアンチエイリアスが出てしまうと画像がぼけたように見えてしまいます。
直線部分には無駄なアンチエイリアスが出ない様に処理しましょう。ちなみに僕はPhotoshopでなら1px単位のグリッドを表示して余分なアンチエイリアスを消しています。Fireworksはもっと楽で、1px単位の作業になるので無駄なアンチエイリアスが出る事はほぼありません。

※アンチエイリアス…1pxの単位より細かい部分に描画するときに発生するギザギザを目立たない様にする処理。

自由変形で角丸をつぶさない

PhotoshopではIllustratorの効果のように、角丸のカーブを維持したまま自由変形はできません。角丸長方形を変形する場合は、パスのアンカーポイントを直接選択して変形しましょう。

過度なドロップシャドウを使わない

デザインを始めたばかりの方によくあることだと思いますが、レイヤースタイルで強すぎるドロップシャドウを使わない様にしましょう。
デザインの品が下がるだけでなく、視認性を低下させてしまう場合もあります。実際の現場では見えるか見えないかぐらいの微妙なシャドウを使う場合が多いです。

過度なベベル（内側）を使わない

これもドロップシャドウと同じく初心者の方によく見られます。
手軽に立体感を出せるレイヤースタイルのベベル・エンボスですが、テキストの内側にベベルを適応すると、テキストが細って見え弱々しい印象になってしまいます。
テキストに内ベベルを使う場合は、適応範囲を押さえる、または細る部分を見越して始めからテキストを太くしておきましょう。

安易な画像反転をしない

求める素材が手に入らないからといって、安易に画像反転をすると様々な弊害が出てきます。人の顔は左右対称ではないので、反転するとモデルの雰囲気が変わってしまします。
また文字、利き手、ほくろなども実際と変わってしまいます。特に見逃しやすいのがシャツのボタンや着物の重ね順。着物の重ねが逆になると大変なことになってしまいます…

画像切抜きの境界線に白を残さない

人物画像を切り抜き画像を合成する際は、境界線の処理をしっかりと。白い部分が残るとこれだけでデザイン全体のクオリティーが低く見えてしまします。
パスで切り抜く場合は、少し内側を切り抜くと自然な感じになります。まぁ、最近はパスのみで切り抜くことはあまりないでしょうから、時間がないときでも「レイヤー」＞「マッティング」＞「フリンジ削除」や「レイヤーマスク」＞「マスクの調整」くらいの処理はしておきましょう。