【Photoshop入門】Webデザインをはじめよう！第5回 写真をレタッチして、配置しよう
PhotoshopでWebデザインをはじめよう！
Webデザインの仕上げとして、写真を配置します。本記事では、Photoshopを使って写真の汚れや余計やものを消して見栄えをよくするノウハウ、写真をデザイン上に配置する際に役立つ「マスク」機能について解説します。
写真を準備する
第4回「ロゴを配置して、背景パーツを作成しよう」では、ロゴや見出しの背景パーツといった、ベクター形式のオブジェクトを追加しました。今回はラスター形式（ビットマップ）の写真を追加して、Webデザインを仕上げます。まずは、写真を修正（レタッチ）して、そのあとWebデザインに配置します。
Photoshopは写真のレタッチに長けたソフトですので、レタッチ関連の機能がたくさんあります。すべてを紹介するのは難しいので、今回はよく使うツールや実際にありがちなケースを通して、作業のイロハを学んでみましょう。
Webデザインのメインビジュアル部分に使用する写真を例に解説していきます。
画像サイズを調整する
メインビジュアルには、サンプルファイルの「メイン用.JPG」を使用します。メインビジュアルの領域は960×360pxですが、メイン用.JPGのサイズは3872×2592pxもあります。
このように最終的なサイズよりも写真が極端に大きい場合は、画像サイズを調整します。目安としては、最終的なサイズより少し大きめのサイズにします。
※写真のサイズや解像度が小さすぎるとレタッチしづらいため、最終的なサイズが小さい場合は、レタッチ後に調整するといいでしょう。
［ファイル］メニュー→［開く］からメイン用.JPGを開き、カラーモードがRBGになっていることを確認します。カラーモードは、ファイルのタブのファイル名末尾で確認できます。CMYKとなっている場合は、［イメージ］メニュー→［モード］→［RBG］を選びます。
次に［イメージ］メニュー→［画像解像度］を選択し、［画像解像度］ダイアログボックスで画像サイズを調整します。ここでは幅を「1555px」としました。
高さを少し短くしておきましょう。［イメージ］メニュー→［カンバスサイズ］を選択し、［カンバスサイズ］ダイアログボックスで高さを「985px」としました。
1555×985pxの写真となりました。画像が暗い、あるいは明るい場合などは、［イメージ］メニュー→［色調補正］にある［トーンカーブ］や［レベル補正］の機能を使って調整しておきます。
写真の準備ができました。これからレタッチしていきますが、作業ミスに備えて、写真のレイヤーをコピーしておくといいでしょう。
様々な便利ツールで写真を綺麗にする
レタッチの内容
今回は次の図のように、レンズ由来の歪みを補正する、建物の壁の汚れを消す、電線を消す、ドアの貼り紙を消す、背景を広げる、というレタッチをしながら、Photoshopの便利なツールの使い方を解説していきます。
レンズ由来の歪みを補正する
デジタルカメラで撮影した写真は、レンズによって微妙な歪み（歪曲収差、わいきょくしゅうさ）が生じます。この歪みの値は、カメラとレンズの種類によって決まります。
デジタルカメラの写真はデータ内にカメラプロファイルやExif情報を持っており、そこにはカメラとレンズの種類の情報が含まれており、Photoshopではそれらの情報をもとに歪みを自動補正できます。
［フィルタ］メニュー→［レンズ補正］を選び、［レンズ補正］ダイアログボックスを開きます。レンズプロファイルに応じた補正が自動で行われるので、プレビューを見ながら元画像と比較・調整を行い、［OK］をクリックします。
建物の壁の汚れを消す
建物の壁の汚れや小さなヒビを修正します。この壁のように、色味やテクスチャが比較的均一な場合は、［スポット修復ブラシツール］や［修復ブラシツール］がおすすめです。今回は［スポット修復ブラシツール］で修正していきましょう。
［ツール］パネルで［スポット修復ブラシツール］を選択し、ツールオプションバーでブラシのサイズを決め、［種類］は［コンテンツに応じる］を選びます。あとは、修正したい場所をクリック＆ドラッグしていくだけで、Photoshopが周りの壁のテクスチャを計算して自動で補正してくれます。
自動補正の結果が期待する状態にならないときは、作業を取り消して（1段階戻して）、ブラシのサイズやドラッグの長さなどを変えてみてください。
細かいムラを修正するには、今回のような比較的均一な色味の場合は、［混合ブラシツール］を使うといいでしょう。［混合ブラシツール］を選び、一度option（alt）キーで壁を選択し、［にじみ］の量を「10％～20％」にして、壁をさっと塗るだけでも十分な補正が行われます。ちなみに、この方法は肌の補正などにも応用できます。
修正後は、かなり綺麗な壁となりました。
電線を消す
左側にある電線を消します。［ツール］パネルで［コンテンツに応じた移動ツール］を選択し、隣の空を電線の形に大雑把に囲みます（［多角形選択ツール］などで選択範囲を作った上で［コンテンツに応じた移動ツール］に持ち替えてもOKです）。
作成された破線（選択範囲）を、電線の位置へドラッグして電線を覆います。ドラッグを解除すると、Photoshopが自動で補正し、電線が消えます。
※［コンテンツに応じた移動ツール］は写っているものを移動するツールなので、逆の使い方（電線を選択して空の部分で解除）をすると、電線を増やすこともできます。
［コンテンツに応じた移動ツール］や先ほどの［スポット修復ブラシツール］などの自動補正系ツールは一見万能のように思えますが、複雑なテクスチャや、細かい範囲に対する補正となるとやや不向きです。そのような場合は、［コピースタンプツール］を使ういいでしょう。
［コピースタンプツール］を使って、残りの電線を消していきましょう。
まず、［ツール］パネルで［なげなわツール］や［多角形選択ツール］などを選択し、補正したい部分を囲んで選択範囲を作成します。これで、この選択範囲の中でしか修正が及ばないようになりましたので、はみ出しなどを心配しなくても大丈夫です。
［ツール］パネルで［コピースタンプツール］を選択し、ブラシのサイズを選びます。option（alt）キーを押しながら空をクリックすると、その位置の空がスタンプにコピーされ、次に修正したい部分をクリックすると、その空がスタンプされます。
スタンプにコピーされる位置は固定ではありません。マウスを移動すると、コピーされる位置もマウスと同じ距離を移動します。そのため、option（alt）キー+クリックし直して、コピーされる位置を変更しながら修正を進めましょう。
修正作業が終わったら、［選択範囲］メニュー→［選択を解除］を選択して、選択範囲を解除します。command（control）+ dでも解除できます。もし、選択範囲の境界となっていたところにムラが残っているようなら修正します。
ドアの貼り紙を消す
ドアの貼り紙やガラスの反射など、余分なものも消します。［なげなわツール］や［多角形選択ツール］などの選択範囲系のツールでは、一度選択範囲を作成したあとにshiftキーを押しながら、さらに選択範囲を作ると選択範囲を追加できます。
複数ある貼り紙はまとめて選択して［コピースタンプツール］で塗り、最後に［混合ブラシツール］で仕上げます。
壁の汚れ、電線、貼り紙、そしてここでは触れませんでしたが、地面の影も消して、見た目がかなり綺麗になりました。
背景を広げる
最後に、横幅を少しだけ長くします。［切り抜きツール］を選んで、左端の中央を左にドラッグして［OK］をクリックします。すると、カンバスが広がります。実は、［切り抜きツール］はカンバスを拡大するときにも使うことができます。他にも角度を補正しながら切り抜くことなどもでき、便利なツールです。
次に［ツール］パネルで［長方形選択ツール］を選択し、ツールオプションバーで［ぼかし］を「3px」にします。建物以外の左側部分を覆う長方形を作成し、［編集］メニュー→［コンテンツに応じて拡大・縮小］を選び、左端の中央を左に延ばします。Photoshopが自動で補正し、自然な感じとなります。
写真の修正が終わりました。ファイル名を「メイン用.psd」として保存し、いったん閉じます。
写真をWebデザインに配置する
それでは、Webデザインに進みましょう。［ツール］パネルで［移動ツール］を選択し、メインビジュアルの灰色のシェイプ（「メイン」シェイプレイヤー）を選びます。［ファイル］メニュー→［リンクを配置］を選択して、先ほどの「メイン用.psd」を選びます。
「メイン」シェイプレイヤーの上に、「メイン用.psd」がスマートオブジェクトになって配置されました。横幅をメインビジュアルの幅に合わせ、return（enter）キーを押します。
［レイヤー］パネルの「メイン用」と「メイン」の間でoption（alt）キーを押すと、手のマークがL字の矢印マークに変わります。
そのままクリックすると、「メイン用」写真が、下の「メイン」シェイプの形に切り抜かれます。このような切り抜き機能を「マスク」といいます。マスクには数種類ありますが、今回のは「クリッピングマスク」と呼ばれる方法です。あとは、［移動ツール］で「メイン用」写真を移動して、切り抜く範囲を調整します。
メインビジュアルが第2回で設定したサイズ通りに配置できました。メインビジュアル上の文字は、読みやすいように、第4回の［レイヤースタイル］の［ドロップシャドウ］を使って白いフチを付けておきます。
以上の要領で、サブの写真も編集し、配置します。最後に全体の配置を調整して、トップページの完成です。
スマートオブジェクトの利点を活用しよう
写真をWebデザインに配置したあとに、再度レタッチしたい場合、2つの方法があります。
1つ目は、元の写真データをレタッチする方法です。要領は第4回の「ベクトルスマートオブジェクト」と同じです。レイヤーの左側にあるアイコンをダブルクリックすると、今回はPhotoshop内で元の写真データが開きます。それを修正し［保存］して戻ると、修正内容がWebデザイン上の写真にも反映されます（［埋め込みを配置］を選ぶと、ファイル名が変わるので、元の写真データには影響しません）。
2つ目は、スマートオブジェクトの「スマートフィルター」機能を使う方法です。スマートオブジェクトであれば、元の写真データに影響することなく、ぼかしやシャープなどのフィルターを適用できます。
Webデザイン上の写真を選択し、［フィルター］メニューから任意のフィルターを選ぶと、「スマートフィルター」というレイヤーが生成され、フィルターが適用されます。
トップページのデザインが完成しました。最終回となる第6回「完成したWebデザインから、画像やCSSコードを生成しよう」では、画像の書き出し方法について説明します。