私は毎日使っている Adobe Photoshopですが、まだまだ使いこなせてません ...。 初心者だったころは今以上に分からないことだらけでした。 今回はとても長い記事になってしまいましたが、初心者だった頃分かりにくかったなーと思った Photoshop の機能についてまとめてみました。

私がWeb制作をするときにいつもお世話になってるのが Adobe Photoshop。Photoshop はWebデザイナーでなくても DTPデザイナーやカメラマンなど、職種を問わずいろんな所で使われていますよね。もちろん仕事で使っていないけれど、趣味のことに Photoshop を使っているという人もたくさんいると思います。

Photoshop はとっても高機能でいろんな機能がついていて、分からないことだらけ …。難しい用語もあったりして、取っ付きにくいなーと思ってる人も多いはず。学校で Photoshop を習ったことがない人ならなおさらですよね。

私も最初の頃（今でもですが）は何をどーやったら思ったように Photoshop を上手に扱えるのか全然分かりませんでした。Adobeさんの Photoshop のユーザーズガイド … 見ても初心者さんには難しい用語とか多くて … 結局分からなかったような …

Photoshop を始めたばかりの頃、分からなかったこと、つまづいたことなど振りかえってまとめてみました。それから私は現在フリーでWebデザイナーをしていて、近くに Photoshop を教えてくれる人がいないので間違った使い方や解釈をしているかもしれません。少しでも参考になればとも思う反面、これはこーゆー風にした方がいいぞーとか、それはダメな使い方だよーなどあったらコメントいただけるとうれしいです！

私はWeb制作が基本なので、印刷用とは違う所もたくさんあると思います。また私は CS5 を使っているので画面が違ったり、機能が違ったりするのもあるかもしれませんがそこはご了承くださいね！一般の人はWeb素材を作ったりは無いと思うので、基本的に写真についてのことについてです。

Photoshop レタッチ 目次

1. Photoshopで写真の補正に挑戦
2. 明るさとコントラストはお手軽だけど、もうちょっとステップアップ
3. レベル補正ってなんだろう
4. トーンカーブを使えばもっと細かく色調補正ができます
5. マスクを上手に使ってみよう
6. ブレンドモードってなに？
7. 最後にシャープフィルター

Photoshopで写真の補正に挑戦

色調補正、レタッチを始める前に … 実は写真（これからは画像って言います）は補正を加えるとどんどん劣化していきます。補正をするのに劣化？というとちょっと混乱しそうですが、後で分かりやすく説明します。そのことを頭にいれておいて、補正はできるだけ最小限、やりすぎ注意ということを忘れないでくださいね！

調整レイヤーが便利

それから画像の色調補正は メニュー → イメージ → 色調補正 でもちろんできるんですけど、ここだと失敗した時のやり直しが後々面倒だったりします。

なので、直接画像をいじらないで調整レイヤーを使うことをおすすめします。失敗しても簡単にもとに戻せますよー！

調整レイヤーはレイヤーパネルの下の所、塗りつぶしまたは調整レイヤーの新規作成をクリックして作ります。必要に応じて使い分けてみてくださいね！

1. 明るさとコントラストはお手軽だけど、もうちょっとステップアップ

カメラで撮ってパソコンで見てみると、思ってたより暗かったりしてちょっときれいにしたいなーと思うといちばん最初に思いつくのがこの明るさ・コントラストの調整じゃないかなーと思います。レバーを動かすだけで簡単に明るくしたり暗くしたり、コントラストをつけたりできるので初心者のときは真っ先に使っていました。

明るさ・コントラストをいじるだけで、簡単に画像の補正ができますよね！

オリジナル画像。全体的に暗くって性格も暗いです …

で、こっちが明るさ・コントラストで補正したあとです。

さっきも言いましたが、画像は Photoshop で加工すればするほど画質は落ちていく場合があります。ちょっと明るさ・コントラストを変更した画像がどうなってるかをヒストグラムというもので見てみると …。
（ヒストグラムはメニュー → イメージ → 色調補正 → レベル補正、またはウインドウ → ヒストグラム で見ることができます。）

これがオリジナルのヒストグラム。真っ黒なグラフのような感じです。

そしてこっちが補正後の画像のヒストグラムです。

ヒストグラムとは？
0~255（暗い所から明るい所）までがどんな風に分布しているかを見れます。

補正後の画像のヒストグラムに所々白く抜け落ちてるのがわかります。ヒストグラムは暗い所から明るい所の分布を表してる訳ですから、白く抜け落ちてる部分の明るさの部分はすっかりなくなってるということです。

ということはその分滑らかさがなくなって画像が荒くなってるってこと … あとでまた説明しますが、画像を補正していくとこういう風に荒くなる可能性があるのでやり過ぎには注意が必要なんですね。（もちろんわざと色を飛ばすとかもありなので、上のような状態がダメっていうわけではないです。）

ここで、iは、無料の互換性のあるTrue Typeフォントを見つけることができます

じゃあ明るさとコントラストは使うなってこと？そーいうことではなくて、ちょっと次のレベル補正というのを見てみましょう。その中でどうして白く抜け落ちるかも分かると思います。

追記：重要

コメント欄でチャンネルの切り替えを指摘していただきました！画像を補正する前に、イメージ → モード → 8bit/チャンネルから 16bit/チャンネルへ。補正後、8bi/tチャンネルに戻したときには色調補正ででるシロ抜けがなくなります！boiさん、コメントありがとうございました！

2. レベル補正ってなんだろう

レベル補正ではさっき出てきたヒストグラムを見ながら色調補正が行えます。しかも、明るさもコントラストもレベル補正でできるし、明るさ・コントラストでは出来なかったRGB（赤、緑、青）ごとの補正もできるので、明るさ、コントラストよりも細かい補正ができるんです。

ちょっと寄り道：色の3原色について

RGBという言葉がでてきたので、ちょっと色の3原色について簡単に復習してみましょう。違う色同士って混ぜると色が変わりますよね。でもこの色の混合にはいろいろあって加法混合と減法混合というのがあります。難しい言葉ですが、画像でみると簡単に分かると思います。

加法混合

Webの色はこっちです。R（赤：Red）、G（緑：Green）、B（青：Blue）を混ぜると白になっちゃいます。光の3原色なんていったりもします。テレビとかもこっち。

子供の頃だれでも絵の具を使って絵を描いたことがあると思うんですけど、あの時の感覚とは違いますよね w 混ぜると白になるなんて …。でもこのRGBカラーについての感覚にちょっと慣れるのも必要かもしれません。

減法混合

印刷関係などの色の感覚はこっちです。いろんな色を混ぜると最終的には黒になります。絵の具の感覚なのでしっくりくるのはこっちですね。

印刷の場合はこれにKを加えて、CMYK（Cyan – シアン、Magenta – マゼンタ、Yellow – イエロー、Key – 黒のこと）と言ったりします。プロセスカラーなんて言い方もあります。

レベル補正に挑戦

レベル補正では、ヒストグラムのシャドウ、中間調、ハイライトの3つのスライダーをいじります。さっきも出てきましたが、画面は調整レイヤーの画面です。

使い方は簡単で、以下のような感じです。

• シャドウスライダーを右にもってくと、暗いところはより暗くなる。
• ハイライトスライダーを左にもってくと、明るいところはより明るくなる。
• 中間調を右にすると暗くなり、左にすると明るくなります。

ハイライトのスライダーを左にしたり、中間点を左にすれば明るさの調整ができるし、ハイライトスライダー、シャドウスライダーを中央によせればコントラストが強くなりますよね。

レベル補正ではこれを赤、緑、青（RGB）ごとにできるので明るさ、コントラストだけでなく色調の補正もできるというわけです。

もうちょっと赤っぽくしたい時は赤のハイライトを強くしたり、緑のシャドウを弱くしたりとか … 。この辺はさっきの3原色の関係で変わって行くので少し慣れが必要ですね。

でも、理屈というか、こういう風に使うんだーということが分かれば、あとは自分の好みでいじれるようになると思うのでいろいろ試してみてください。

さっきの画像をレベル補正で明るさ・コントラストで調整したようにいじってみると …

青い線はオリジナルの位置。ハイライトを山裾に寄せて、中間調を少し左へ … シャドウをちょっと右にしてコントラストを意識して …

こんな風に、明るさ・コントラストでできたことはレベル補正でもできちゃいます。今回はRGB各色はいじらないで、全体的な調整だけでやっています。

レベル補正ではシャドウスライダー、ハイライトスライダーを動かして補正します。本来0 ~ 255までの階調があるものをつめてしまう感じです。なので補正後の画像のヒストグラムを見ると、つめたものを0 ~ 255で引き延ばすので間が飛んで白い部分が現れるっていう感じです。明るさ・コントラストのところで見たヒストグラムの状態がそれです。

色のはっきりした画像といろんな色の画像

上のサンプル画像のヒストグラムは山が3つくらいある感じでした。ヒストグラムの形は画像によって様々です。例えば色がはっきりとしたこんな花の画像の場合はというと …

赤や黄色が鮮やかな花の写真ですねー。こういう写真のブルーのヒストグラムを見てみると …

こんな風な感じです。暗い部分の青は強いけれど、明るい部分の青は弱いですね。こんな風にいろんな画像のヒストグラムを見ておくのも色補正するときのヒントになるかもしれませんねー。

3. トーンカーブを使えばもっと細かく色調補正ができます

今度はトーンカーブというのを見てみましょう。明るさ・コントラストで出来ることはレベル補正でできました。トーンカーブを使えば、同じことができるだけでなく、さらにもっと細かく補正することができます。

なので、明るさ・コントラスト という関係になりますねー。色調補正にチャレンジするならトーンカーブをぜひ覚えたい所です！

アドビシステムズ社のイメージの準備は何ですか

RGB各色ごとにカーブを調整できるし、レベル補正で使ったシャドウ、ハイライトのスライダーもあります。まずトーンカーブを開くと斜め45度の直線が描かれてます。直線上の任意の箇所をクリックするとポイントが追加されて、ポイントをドラッグすることでカーブを描いて行きます。

ポイントはひとつではなくていくつも作ることができます（14個までだったかな？）。command + クリックでポイントを削除、または枠の外にドラッグしても削除できます。alt + クリックで目盛りもでます。

試しにレベル補正でやってみたことをトーンカーブで再現してみましょう。

まずシャドウ、ハイライトのスライダーを真ん中の方に寄せて … これはレベル補正の時と同じ感覚ですね。レベル補正の時の中間調は、ちょうど真ん中辺をすこし左に …

こんな風にレベル補正でできることはトーンカーブでできちゃいます。でもこれではトーンカーブのいいところを全然使ってません w カーブを描けるからレベル補正よりもさらに細かく色調補正ができます。レベル補正では全体的な補正だけど、トーンカーブだとハイライトだけもっと明るくとか、一部分だけ補正できるという感じです。

トーンカーブのだいたいの目安となるカーブ

とてもざっくりですけど、こんな風なカーブだとこうなる、という目安です。

明るく

カーブを上へ持って行くと全体的に明るくなります。

暗く

カーブを下へ持って行くと全体的に暗くなります。

コントラストを強く

S字カーブ。明るい領域は上方向でさらに明るく。暗い領域は下方向でさらに暗くすればコントラストがはっきりとしてきます。

コントラストを弱く

さっきのとは逆のS字カーブですね。明るい領域を暗く、暗い領域を明るくすればコントラストは弱まります。

トーンカーブのもっと便利な使い方

トーンカーブで細かく色調補正ができるのはわかりましたが、実際にはカーブをいじるよりも、目に見えている画像を見ながら補正するほうが分かりやすいですよね。

トーンカーブでは画像の一部分をクリックすると、そこがカーブでどの辺りになるのか教えてくれる機能がついてます。これならここの部分をもうちょっと明るくしたいとか、直感的にわかるので使いやすいと思います。

まずはトーンカーブウインドウの指マークをクリックして、画像の修正したい色のところでクリック & 上下にドロップすると、トーンカーブが上下します。このままだと全体が動いてしまうので、暗い所はそのままにしたいんだけど … という場合は動かしたくない部分にはポイントを打って固定しておけばOKです。

画像の暗い所と明るい所をチェックしておく

ただ何となくトーンカーブをいじっていると明るい所、暗い所を潰しちゃう場合があります。（微妙な陰影がなくなって同じ色でベターっとしちゃう感じ）シャドウスライダーとハイライトスライダーを動かしたいときにはまずは画像のいちばん暗い所、明るい所を指でクリックしてチェックしておくと数字で確認できます。

上の丸で囲んだ部分を指でクリックしてみると …

いちばん明るい部分は225ですね。

いちばん暗い部分は 4 … サンプルがこんなだったから w ほとんど 0 みたいなものですけど w

例えばハイライトのスライダーを 210 まで移動した場合、210 から 225 までの部分は色がつぶれてしまうというか、飛んでしまうというか、そうなっちゃうので、これを目安にしておけば色潰れをさけることができます。もちろんわざと潰すのだってアリなんですからひとつの目安として考えてくださいね！

最終的にトーンカーブで補正してこんな感じになりました！

4. マスクを上手に使ってみよう

マスクって何でしょう … 。例えば写真の中の一部を選択したとします … 例えば人物だけとか。そのときに切り抜いて、切り抜いた部分をコピーして、新しいレイヤーにペーストして … とはあんまりしません。ではどうやってやるかというと、ここでマスクの出番です。

切り抜いた部分をコピー ＆ ペーストした場合は切り抜いた部分のエッジ、ぎりぎりの際（きわ）の修正が出来なくなってしまいます。でもマスクを使えばエッジをぼかしたりなどの修正が簡単にできます。実際にやってみるとこんな感じです。

ショッププロ7.04を描画するためにフォントを追加する方法

これが元画像です。これにマスクをかぶせます。

これが切り抜きで作ったマスクです。

マスクを画像にかぶせると …

マスクに覆われた部分は表示されないので、切り抜きしたのと同じように表示されます。マスクはさっきもいった通り、微妙な調整などもできるので切り抜きなど選択範囲を作る時はマスクが便利ですよ。選択範囲を作ってある状態で、レイヤーウィンドウの下の部分、レイヤーマスクを追加で簡単にマスクが作れます！

でも、合成写真とか作る訳じゃないからマスクは覚えなくていーやと思う人もいるかもしれませんが、1枚の写真を補正するときにもマスクは使ったりします。あとでちょっとご紹介しますが、マスクはちょっと便利な機能なので覚えておいてそんはないですよー。

5. ブレンドモードってなに？

レイヤーパネルの上の所、不透明度の横にあるブレンドモード … これって分かりにくいですよね …。不透明度は透過のレベルを調整するだけなので直感的に分かりやすいですけど、ブレンドモードって何でしょう …

これは下のレイヤーと上のレイヤーをどうやって重ねるかっていうことなんですが、そのモードの多さと乗算、オーバーレイなど普段聞き慣れない言葉が並んでいるのでどうやって使ったらいいのか分からないっていう人も多いと思います。

それに、2枚のレイヤーをブレンドするとどうなるの？っていう疑問もあると思うのでちょっとあとでサンプルを使って例をいくつかあげてみます。その前に各ブレンドモードを言葉で紹介するとどんな感じかちょっと見てみましょう。後々どのブレンドモードを使おうかなーと思いつかないときに、こういうのを知ってると知らないでは違うと思うので …

• 通常、ディザ合成
• 比較（暗）、乗算、焼き込みカラー、焼き込み（リニア）、カラー比較（暗）、 比較（明）、スクリーン、覆い焼きカラー、覆い焼き（リニア）- 加算、カラー比較（明）
• オーバーレイ、 ソフトライト、ハードライト、ビビットライト、リニアライト、ピンライト、ハードミックス
• 差の絶対値、除外、減算、除算
• 色相、彩度、カラー、輝度

いやぁ … いっぱいありますねー w この中のいくつかは私も使ってないものもあって分からないのも多いです …

通常

これは説明いらないですね w 直感的に分かると思います。通常です。

ディザ合成

全然使ったことないのでわかりません w でもディザってなんだろーという人もいると思うのでちょっと寄り道。

ディザっていうのは分かりやすいのは透過png と透過gif を例にしてみてみましょう。

まず、透過pngという形式の画像は向こう側が透けますよね。上のアイコンは丸い形の png です。それを緑の背景の上に乗せてもきれいに丸く表示されますよね。

そして透過gif も丸い形のアイコンとかを使っても背景の色を気にしなくても使えます。でも、上の png をそのまま gif に変換して同じように緑の背景に乗せるとこうなります。

よく見るときれいにならないで白くギザギザになってるのが分かると思います。これをディザ、誤差拡散法っていう方式で変換すると誤差を他の色に置き換えてくれます。

こんな感じで白かった部分が他の色に置き換わっています。これがディザ処理。ちょっと乱暴な説明ですけどなんとなく分かってくれたでしょうか？それではブレンドモードに戻ります w

乗算

これは直感的に分かりやすいモードですね w 下の色と上のいろを混ぜた色になります。RGBの光の三原色じゃなくて、色の三原色と同じように混ざるので、絵の具とかを想像してもらえば分かりやすいと思います。赤と青を混ぜれば紫だし、黄色と青を混ぜれば緑になりますよね！

スクリーン

これは乗算の逆というか、色の三原色じゃなくて光の三原色（RGBの方）でブレンドするモードです。なので直感的には分かりにくいんですけど、慣れれば簡単に色が想像できるようになりますよー。

色の三原色はたくさん色を重ねれば黒に近づきますが、光の三原色は色を重ねれば明るくなりますからね！

オーバーレイ

これは基本的には乗算とスクリーンを混ぜた感じのモード（で合ってるかしら w）。明るい所はスクリーンの効果でより明るくなって、暗い所は乗算の効果でより暗くなるという感じ … メリハリがついて鮮やかになる感じ？

基本的には代表的なのはこんな感じです。すこし乱暴かもしれませんが、他のはそのグループの仲間的な感じで少しずつ効果が違います。

でも基本的に上の3つがどういう理屈でブレンドされてるのかが分かれば使うときに何を使うとどうなるのかってことが予想しやすくなりますね！

ブレンドモードについては下記リンクでとても詳しく紹介されています！

実際にはどうやって使うの？どーいうときにブレンドモードをどんな風に使うかっていうのはもう、いろんな例をみて、自分の好きな感じとかをやってみてテクニックのひとつとして身につけていくしかないかもしれません …。こういうテクニックはいろんなサイトで具体例が紹介されているのでいろいろ挑戦してみてくださいね！

• Photoshop Lady
  毎日Photoshopを使った加工写真などのチュートリアルが配信されています。
  こういうので少しずつ練習してみるのもいいかもしれませんね

マスク、ブレンドモードなどを使って画像を加工してみる

せっかく切り抜いたのでちょっと合成写真を作ってみます（無理やりな展開ですいません）。こんな背景を用意。

この背景の上にさっきマスクを作った画像を置いてみます。

あちゃー … まず、切り抜いた周りに元画像の背景の色、ベージュがエッジ部分が残っています。髪の毛の部分をみるとよくわかりますねー。なので、ブレンドモードを工夫してちょっと背景になじませてみましょう。

切り抜きの画像を1枚複製してブレンドモードを乗算にしてみると、こんな風になります。乗算では色がかさなると濃くなるのでベージュの部分も黒く影っぽくなりました。これなら背景にうまく馴染んでますよね。

乗算レイヤーの上に元の画像を表示します。そして消しゴムツールを使ってベージュのエッジの部分を注意深く消していきました。

そーすれば乗算でブレンドした部分が表示されますよね。（ここで右手の脇のところ、切り抜くの忘れたことに気付きました w）

もう1枚切り抜きを複製してフィルタ → ぼかし → ぼかし（ガウス）ですこし切り抜きをぼかします。そしてブレンドモードをオーバーレイにしてみるとこんなレイヤーができます。

オーバーレイは明るい所はより明るく、暗い所はより暗くなりますからちょっと陰影がつくような感じですね。（参考のため、元画像は非表示にしている状態です。）あ、遠近感を出すために背景もぼかしています。

さっきのオーバーレイしたレイヤーの不透明度を調整。最後にちょっと切り抜きをシャープにして背景を肌の色に合わせる形で夕焼けっぽくしてみました。（これはトーンカーブで赤を少し明るくします。）もともと室内で撮った写真との組み合わせなので、不自然さは否めませんが w

今回は背景画像との組み合わせますが、ひとつの切り抜きにいくつかの画像をブレンドしていくテクニックはいろんなところで活用できます。

たとえばショートケーキのいちごだけ鮮やかにするとか、そんな風に応用できます。こんな事例はさっき紹介したサイトなどでたくさん紹介されているのでいろいろ試してみてくださいね！

6. 最後にシャープフィルター

とーっても長くなってしまったので最後にします …

もうちょっとシャープに撮れてればよかったのにーという惜しい写真、結構ありますよね。また、一見よく撮れてるように見える画像でももうちょっとシャープにしたいときもあります。そんな時はシャープフィルターを使ってみましょう。文章で説明するより見てもらった方が早いので …

シャープフィルターにもアンシャープマスクなど数種類ありますが、今回はスマートシャープを使用しました。

やり過ぎには注意が必要ですけど、こんな風に簡単にシャープになります！（上のサンプルはやりすぎてます w）

フィルターの補足：スマートフィルターが便利！

Photoshop で画像にフィルターを使うときはレイヤーにそのままフィルターをかけてしまうと、あとでやり直したいときに変更できなくなってしまいます。あとで変更する可能性がある場合はレイヤーをスマートフィルター用に変換しておくと便利です。

フィルター → スマートフィルター用に変換 をすると下の画像のようにレイヤーにアイコンがくっついてスマートフィルターが使えるようになります。フィルターの横の目アイコンをクリックすればいつでもフィルターをかける前に戻せるので便利ですよー。用途に合わせて使い分けてください！

まだまだ多機能でいろんなことができる Photoshop。今回は色調補正、レタッチ、写真加工を中心にまとめてみました。
下手っぴなサンプルでごめんなさいっ！最後まで読んでくれた方、本当にありがとうございました！