Photoshop 色かぶりを取り除く
色かぶりを取り除く
◆「色かぶり」とは・・・
撮影時の光源の影響で、画像全体に特定の色が重なって見えること。例えば、蛍光灯の下で撮影すると、緑っぽい画像になる。色かぶりの補正は、色の性質「補色」を利用する。
◆「補色」とは・・・
色相環で、お互いに反対側の位置関係にある色のこと。補色の関係にある色はお互いに打ち消しあう。
「カラーバランス」で表示されている[シアン／レッド］「マゼンダ／グリーン］[イエロー／ブルー]の各スライダーが補色の関係になっている。つまり、イエローを強くするとブルーは弱くなるといった関係。
【補正方法１】カラーバランスで補正
Before After
- 色調補正パネルの｢カラーバランス｣ボタン
をクリックして、｢階調｣で補正対象の階調を選択する。
2. 画像を見ながらスライダーをスライドして色調を補正する。今回は[シアン／レッド］をシアン側にスライドし、赤色を弱く補正した。
※「輝度を保持」はカラーバランスの変更で生じる輝度の変化を防ぎ、色の調和を保つ
【補正方法２】トーンカーブで補正
Before After
- 色調パネルの「トーンカーブ」ボタン
をクリックする。 - 「画像内でサンプルして黒点を設定」をクリックし、画像内で一番暗いを思われるところをクリックする。また、「画像内でサンプルして白色点を設定」をクリックし、画像内で一番明るいを思われるところをクリックする。
3. 「画像内でサンプルしてグレー点を設定」をクリックし、画像内で「グレーではないだろうか」、と思われるところを何ヶ所かクリックし、自然な色合いになったらOKする。
Photoshop 複数の画像で色調をそろえる
複数の画像で色調をそろえる（カラーの適用）
Photo1 Photo2 After
【作成方法】 Photo1をPhoto2の色調にする
カラーの適用では、複数の画像の色調を一度にまとめてそろえることができる。
- 色調の元にする画像（Photo2）と補正する画像（Photo1）をアクティブな状態にする
- イメージメニュー→色調補正→「カラーの適用」を選択し、「ソース」で色調の元になる画像を選択、OKする。
（フェードでそろえる色調の濃さを調整できる）
Photoshop 中間調を整える
中間調を整える（トーンカーブまたはレベル補正で調整する）
【調整方法】
画像のグレー（中間色）にしたい部分にグレー点を設定して、自動的にホワイトバランスを整える。
Before After
- 色調補正パネルの「トーンカーブ」ボタン
または「レベル補正」ボタン 
をクリックする。 - 「画像内のサンプルしてグレー点を設定」ボタンをクリックする。
3. 画像のグレーにしたい部分をクリックすると、自動的に補正される。
※「ホワイトバランス」とは・・・
目で見た際に真っ白に見える物でも、室内で撮影した画像が真っ白にならないことを「ホワイトバランスが整っていない」という。これは室内の照明の影響で、白熱電球の元で撮影すると黄色っぽい画像になり、蛍光灯の元では緑っぽい画像になるなどの現象。デジタルカメラには自動補正機能「オートホワイトバランス」があるが、撮影条件によりうまく機能せず、偏った色調になる場合がある。この場合、色調に偏りのないグレーを基準にしてホワイトバランスを整えると正確な色調の補正できる。
※「画像内でサンプルしてグレー点を設定」ボタンはクリックした地点のピクセルの濃度を中間色（グレー）に設定する機能。このボタンをダブルクリックすると、カラーピッカーが開き、設定値を確認できる。
※「画像内でサンプルしてグレー点を設定」ボタンを使うと、それ以前に設定したレベル補正やトーンカーブの設定が取り消されるので、最初に「グレー点を設定」ボタンで調整してからレベル補正およびトーンカーブを設定するとよい。
サイト作成練習
サイト作成練習（既存サイト）
既存サイトをお借りして、作成練習
作成時間：約8〜9時間
もっと時間を短縮できるようにしたい。
http://miimon.chu.jp/site1/index.html
※「ホーム」と「事業内容」のみ作成。フラッシュは作成せず、コーディングのみ。
【メモ】
「ホーム」の疑似インラインフレーム
width，heightを設定し、overflow:autoを指定する。
.inbox1{
width: 438px;
height: 200px;
border-top: 1px solid #ababab;
border-bottom: 1px solid #ababab;
overflow: auto;
margin-bottom: 20px;
}
◎参考サイト
http://www.co-ad.co.jp/
架空サイト
練習をかねて、簡単な架空サイトを作成。
写真はフリーの画像をお借りした。
作って見直してみると、内容がわかりづらい。
もっと色々なサイトをみてコーディングをする必要性をあらためて感じた。
http://miimon.chu.jp/bread/index.html （作成時間：約4日）
