こんにちは。アドベントカレンダー7日目を担当します、フォトグラファーの小林です！
制作の現場では、Photoshopを使ったレタッチ作業が頻繁に発生します。
Web制作において、写真は「素材」であると同時に「デザインの一部」です。 この記事では、Web制作でよく使うPhotoshopレタッチについて、考え方から基本操作までを紹介します。
▽neccoのアドベントカレンダーはこちらから
そもそもレタッチとは
写真に対して何らかの修正・調整を加える作業のことを指します。
レタッチと言っても、定義が人によって曖昧ですが、
大きく分けると、レタッチには次の二つの方向性があると思ってます。
- 合成や加工によって新しい世界観をつくる、演出的なレタッチ
- 写真の色味や不要なものを削除するような、写真そのものの魅力を引き出すためのレタッチ
今回はWeb制作でよく使う②の「魅力を引き出すためのレタッチ」をメインに伝えていこうと思います。
はじめに。一番大事なのは、VISIONをつくること。
最初にして一番難しいです。
伝えたい人にどう見せたいか、何が良い写真なのか考えることが技術よりも大切です。
手を動かす前に、次のようなことを考えます。
- なぜそのレタッチをする必要があるのか
- どんな人が見るのか
- デジタルか、紙か
- 大きさはどれくらいか
- どんな印象を与えたいか
- どの程度の工数かけるか
これを決めずにレタッチを始めると、やり直しが増えたり、無駄に工数がかかったりしがちです。
小さい掲載先なのにかなり細かい箇所までレタッチし過ぎて時間かかり過ぎたり…など。
目的を定めることで、スムーズな作業ができ工数の節約になります。
おすすめのワークスペース
作業を始める前に、Photoshopの基本設定を整えておくと後が楽になります。
まずツールの位置などをレタッチしやすいよう整理していきます。
レイヤーのウィンドウを大きくする
Photoshopの初期設定ではレイヤーは右下の位置にあり、レイヤーが重なると使いづらくなっていきます。おすすめはレイヤーを一列で見れるようにすると、レイヤーが多くなってきても見やすくレイヤー整理もしやすいので便利です。
背景を掲載先に合わせる
初期設定ではミディアムグレーの背景ですが、個人的には白いサイトなどに置かれる写真なら背景を白にして写真調整してます。背景黒と白では、レタッチしてる時の写真の印象も結構違いがあるので最終アウトプット先のイメージに合わせて変更してます。
非破壊編集のレタッチをする（スマオブ+調整レイヤー）
Photoshopでレタッチを行う際意識したいのが 非破壊編集で作っていくということです。
元の画像データを直接変更せず、後から修正できる形で作業を進めるのが基本になります。
- クライアントや社内の修正依頼
- デザイン変更
- 写真の差し替え
などが発生します。 そのため、非破壊編集を前提にしたレタッチが必須になります。
調整レイヤーとは？
中央の半月のようなアイコンを押すと調整レイヤーをいじることができます。
さまざまな項目がありますが、トーンカーブ、色相彩度、特色色域の選択の3種くらいで問題ないです。
レタッチの最初にやること
色味の偏りを整える
自然な写真にするには、一度本来の基準となるニュートラルな色に戻し、そこから伝えたい方向性の色に補正します。特にストックフォトなどのレンポジ写真はホワイトバランス（WB）の値が偏ってたり、フィルターがかかっていることが多いため注意が必要です。
ホワイトバランスと色かぶりの値を調整し本来の色に近い色味を目指します。
パースを整える
レンズのゆがみや撮影時の角度によって、垂直・水平が崩れていることがあります。
実は垂直・水平が取れてないことも多いのでよく写真を観察した方が良いです。
Webサイトに掲載する場合、写真は四角の枠内にあるのでズレてると違和感につながりやすいため、最初に補正します。意図的な斜めや歪みの場合は補正は必要ないです。
レタッチのフローとレイヤー解説
レイヤーの階層
「元画像を下に置き、調整や加工を上に重ねていく」のが基本構造です。
修正があったとしてももどりやすいように以下のような構造で整理しています。
original レイヤー
これは撮影したままの写真です。
このレイヤーは基本的に触りません。
画像が破損しないように写真を右クリックして「スマートフィルター用に変換」もしくは
「フィルター」→「スマートフィルター用に変換」でスマオブに変換しておきます。
retouch（レタッチ用グループ）
- トーンの調整レイヤー
- 服のゴミ
- 目の血管を抑える
- 髪のはね毛やムラ
- 肌の調整
- 全体調整（cameraRAWフィルター）
などの編集要素をまとめています。
まず全体調整です。
スマートフィルターのCameraRawフィルターを使って全体を調整してます。CameraRawフィルターの内容は膨大なので説明を省きますが、最初の色温度や色被りはここで設定するのが便利です。
色被りの他に以下を調整してます。
- 明るさ
- コントラスト
- 色温度
- 彩度
- 肌の色
- 背景のトーン
- 周辺減光のムラをなくす
などをまとめて調整しています。
修正レイヤー全体図
レタッチは、元の画像の上に塗り絵をするような感覚で行っています。
修正内容ごとにレイヤーを分けておくことで、後から修正が入った場合でも、それぞれの要素を個別に調整できるようにしています。
また、オプションバーの「全レイヤーを対象」にチェックを入れることで、空白のレイヤー上でも、削除ツールや修復ツールを使用してレタッチが可能になります。これにより、元画像を直接編集せず、非破壊的に作業を進めることができます。
skin（肌）
- 肌のトーンを整える
- 髪の毛
- 赤み・ムラの調整
- やりすぎないのがコツ
ツールとしては以下の2種を使ってます。
スポット修復ブラシツール
小さなホコリやシミ、ニキビなど、テクスチャが単純な箇所の修正に最適です。
削除ツール
Photoshopの最新機能。より広範囲の不要物を自然に、かつ簡単に消すことができます。
スポット修復ブラシツールの上位互換的な存在ですがやや重いです。
hair （髪）
- 髪のムラ
- 明暗調整
- 輪郭の締まり
トーンカーブで色味を整える
- 髪の毛や服の青みを取り除く
- 白目の明るさ・黒目のコントラスト
最後に全体を見て完成です。
いかがだったでしょうか。
レタッチもレイヤー構成を意識すると、編集の意図や工程がはっきりし、無駄な修正ややり直しも減っていきます。シンプルな構造を保つことが、きれいなレタッチへの近道です。
明日の記事は阿部さんの「採用応募者さんへ2025年ver 」のメッセージ記事です！お楽しみに！
▽neccoのアドベントカレンダーはこちらから
