Blog

Webデザイン応用 第4回「画像処理の基本」

(1)色補正の基本

デジカメの普及とともに、Web制作のための撮影をデジカメで済ましてしまうケースが増えている。しかし、プロがライティングした写真と異なり、発色がおかしかったり、露出が足りない場合がよくある。そんな時に行うのが、写真の色補正である。

1-1.明度・暗度の補正

写真撮影時に露出が合っておらず、全体的に薄暗くなってしまうことはよくある。こうした時には明度を補正する。ただし、写真が明るくなりすぎた「白トビ」、逆の暗くなりすぎた「黒ツブレ」を起こしてしまっているものについては補正しきれないことが多い。そういった場合には思いきってハイキーなカラーにしてしまうのも一つの手だろう。

●レベル補正

レベル補正

レベル補正は「ヒストグラム」を見ながら補正することができるので、写真全体の明度・暗度を補正するのに向いている。
ただし、補正は全体にかかるので、あるレベルだけを調整したい場合には向かない。

●トーンカーブ

トーンカーブ

トーンカーブはレベル補正に比べるとピンポイントで明度・暗度の補正をするのに向いている。使いこなすのは難しいツールだが、トーンの意味さえ掴んでしまえば様々な補正を行うことができる。

●明るさ・コントラスト

明るさ・コントラスト

トーンカーブを使って中間色を補正するとコントラストが弱い、いわゆる「眠い」画像になってしまう場合が多い。こうした時はコントラストを強くすることで、印象を変えることができる。ただし、あまり強度な効果を加えると「トーンジャンプ」を起こしてしまうので注意しよう。

1-2.カラー補正

室内で撮影を行うと、“色が被っている”ケースは頻繁に発生する。
蛍光灯下の青カブリなどがこれにあたり、。こうした時は、被った色相の彩度を抑えるのが基本となる。

●色相・彩度

色相・彩度

色の構成要素である「色相・彩度・明度」を調整することができる。色々な意味で使い勝手の良いツールなので覚えておくと良いだろう。

●バリエーション

ワンクリックでプレビューを見ながら色を調整することができるので、非常に便利だ。ただし、「色相・彩度」と異なり被っている色を調べることができないので、この方法で色補正をするには多少の慣れが必要だろう。
また、明確に傾けたい色が存在する場合は、この補正の利用価値は十分にあると言える。

1-3.調整レイヤーの利用

一度、色を補正してしまうと再度、補正し直すのは非常に手間だ。こうした時には「調整レイヤー」を利用すると便利だ。
調整レイヤーを使って補正された部分はいつでも削除・編集を行うことができるので、オリジナルの画像を保持したまま色補正を行うことができる。また、調整レイヤーにもマスク・グループ化を設定することができるので、有効に活用しよう。

(2)リサイズ・トリミング

デジカメで撮影した写真をWebサイトで利用しようと思うと大きすぎる。こうしたケースはあらゆるシチュエーションで発生する。この場合に行うのが、「リサイズ」と「トリミング」という作業だ。両方とも“画像を小さくする”という点では同じだが、それぞれ目的が異なるので、ケースバイケースで使い分けていこう。

2-1.リサイズ時の注意

画像の変形を行うとき、決してやってはいけないのは元画像よりも拡大することだ。元画像よりも拡大すると、 Photoshopは計算によって足りない部分の画素情報を生成する。確かにある程度であれば気にならないレベルだが、画像全体が荒れた印象になってしまう。こうなるとせっかくの画像も台なしになってしまうので、画像の変形は「大→小」が鉄則と覚えておこう。

2-2.リサイズ

リサイズ例

画像のサイズそのものを小さくして、任意の画像サイズにおさまるようにする手法。被写体全体を見ることができるのでイメージはつかみ易いが、その反面、画像が細かくなりすぎて視認性が落ちることもあるので注意が必要だ。

2-3.トリミング

トリミング例

画像の必要な部分のみを大きく扱う手法。トリミング次第では非常にインパクトのある画像を作ることができるが、トリミングする箇所の選択を失敗すると、伝えたいことが伝わらなかったりと多少の慣れとセンスを必要とする。

2-4.シャープ

シャープ

縮小した画像はPhotoshopで補正されるが、この時、特にエッジの部分の処理が甘くなる。結果、“ゆるい”印象になってしまうので、シャープ系フィルターを使って画像を補正しよう。これだけでも随分と印象が引き締まって見える。
縮小したらシャープ。これが基本だ。

(3)画像の変形

拡大・縮小以外の変形も操作法法はほとんど同じだ。一応、確認の意味でざっと見ていこう。

3-1.回転

回転

バウンティングボックスを回転させることで、画像を回転させることができる。

3-2.ゆがみ

ゆがみ

バウンティングボックスの4つ角を起点にして、画像を変形することができる。

3-3.遠近法

遠近法

「3-2.ゆがみ」と似ているが、必ず2つの角がセットになって変形するという点がことなる。
切り抜いた画像の影を作成する場合などに利用される。

3-4.180度回転・90度回転(時計回り)・90度回転(反時計回り)

それぞれの角度で画像を回転させる。

3-5.垂直方向に反転

垂直方向に反転

縦方向に画像を回転させる。180度回転と同じ機能。

3-6.水平方向に反転

水平方向に反転

左右を反転させる。

(4)画像の切り抜き

4-1.マスクの基礎

マスクは不必要な部分を表示しないようにするための機能だ。画像の合成などに利用され、高度なグラフィックの作成には欠かせない機能の一つとなっている。
Photoshopにおけるマスクは、「長方形選択ツール」や「自動選択ツール」で作成した「選択範囲」に対して適用される。つまり、マスクとは“画像の表示制御用の特殊な選択範囲”だと言い換えることもできる。
マスクは適用対象となっているレイヤーと共に保存されており、いつでも再編集することができる。また、削除と異なりいつでも復帰させることができるのも魅力だ。

4-2.選択範囲の作成

Photshopは選択範囲に対して処理を行うソフトウェアだ。つまり任意の選択範囲を作成することができるようになることが、Photoshopを扱うための第一歩と言える。ただし、目的とする選択範囲によって使用するツールが異なるので、それぞれの特性を理解しておこう。

●自動選択ツール

マスクしたい範囲が単色もしくはそれに近い場合。また逆にマスクしたい範囲外が単色もしくはそれに近い場合に効率良く選択範囲を作成することができるツール。
上部パネルで選択する範囲やアンチエイリアスの有無などのオプションを設定することができる。

●色域指定

色域から選択範囲を作成するツール。
範囲、複数の色など、細かく操作することができる。

●クイックマスク

クイックマスクはこれまでのツールと毛色が異なるが、細かい選択範囲を作成することができる。

●ペンツール

ペンツールはベジェ曲線を描くためのツールだ。パラメトリック曲線によって曲線や直線を効率良く描くことが可能で、選択範囲を作成することも可能。
なお、本講議ではベジェ曲線について履修している時間がないので、省略する。

4-3.チャンネル

チャンネルは選択範囲を保存するための特殊なレイヤーだと思ってもらって良い。チャンネルにおけるアルファ値 100%は白(#FFFFFF)であり、アルファ値0%は黒(#000000)である。つまり、黒→白のグラデーションを使用すれば、だんだん表示されるといったことが可能となる。
マスクとは特殊な選択範囲であることは前述した通りだが、このマスクもチャンネルから編集することができる。なお、チャンネルにマスクが出現するのはマスクが適用されているレイヤーがアクティブになっている場合のみなので注意すること。

4-4.抽出ツール

抽出ツールはPhotoshop 6.0から実装された機能で、動物の毛のようなエッジが曖昧(あいまい)な画像を切り抜く場合に使用する。なかなか上手く行かないことが多いが、かなり強力な機能なので使い方だけ確認しておこう。

コメント&トラックバック

  • Trackback URL
  • http://www.indetail.jp/blog/469.html/trackback
  • Name
  • Web
  • Comment