33
Photoshopの使い方間違ってませんか? 教科書では教えてくれないPhotoshop こもりまさあき

CSS Nite Vol.39 - komori -

Embed Size (px)

Citation preview

Page 1: CSS Nite Vol.39 - komori -

Photoshopの使い方間違ってませんか?教科書では教えてくれないPhotoshop

こもりまさあき

Page 2: CSS Nite Vol.39 - komori -

1972年生まれ。フリーランス

大学時代から都内制作会社で5年ほど入出力からデザイン、サーバやネットワーク管理などに並行しながら従事するも、自分だけ社員旅行に行けなかったため退職

現在は、Webや携帯などインターネットに関わる業務全般、テクニカルライティングや講師での活動が中心。呼ばれればミュージシャンのライブやタレントの撮影なども

写真撮影は、仕事のついでに始めたのがきっかけで独学。Flickrにアップしている写真は、wikipediaやwired、real simpleなど、海外のメディアでもたまに使われてます

こもりまさあき

自己紹介

http://flickr.com/h4ck

http://bit.ly/mynameis

Page 3: CSS Nite Vol.39 - komori -

本日のアジェンダ

• 知っておきたいカラーマネジメント• Photoshopでの作業のポイント• 適材適所でツールを使い分ける色補正

Page 4: CSS Nite Vol.39 - komori -

知っておきたいカラーマネジメント

Page 5: CSS Nite Vol.39 - komori -

• Safariは、以前から「有効」• Firefoxは、最新版の3.5.x以降はデフォルト「有効」3.0.xは、ユーザーが手動で有効にできる

• Internet Explorerは、現時点で「未対応」

カラーマネジメントできるようになると、意図した色が出せるように

ブラウザでのカラーマネジメント時代到来?

自身の環境が対応しているかは、ICCのWebサイトでチェック可能。http://www.color.org/version4html.xalter

Page 6: CSS Nite Vol.39 - komori -

OSやブラウザの色の扱いやカラーマネジメント特性を理解すれば、自分が意図した「正しい色味」に近い状態で見せることができる

裏を返せば、既に「違う色味」が表示されている可能性も…

カラーマネジメントの知識は必要?

OS X Safari 4 / Adobe RGBの表示例 OS X Firefox 3.5 / Adobe RGBの表示例 Windows Vista IE 8 / Adobe RGBの表示例

カラーマネジメント有効 カラーマネジメント有効 カラーマネジメント無効

Page 7: CSS Nite Vol.39 - komori -

• モニタ、携帯電話• スキャナー、デジタルカメラ• 家庭用プリンタ、業務用プリンタ、テレビ

デジタルデータを取り扱うデバイスは、すべて統一された規格のもとに生産されているわけではない

デバイスは、それぞれ色の解釈がちがうもの

それぞれが異なるデバイス特性を持っている

Page 8: CSS Nite Vol.39 - komori -

「色空間」はデバイスが再現できる色の範囲

「カラープロファイル」は、そのデバイスで異なる色空間や特性を定義したファイル

覚えておこう。色空間とカラープロファイル

プロファイルだけがあっても意味がない

そこで「カラーマネジメント」が必要

Page 9: CSS Nite Vol.39 - komori -

デバイス毎の色の特性を定義して、異なるデバイスであっても適切に変換できれば、「色が違う!」という問題は起こりにくい

カラーマネジメントとは「色の翻訳作業」

Page 10: CSS Nite Vol.39 - komori -

sRGBで保存すればいいんでしょ?一般にRGBは「sRGB」の色空間でやりとりすれば安全とされている

• 事実上、sRGBがインターネットの標準色空間• sRGBでの色表示を標準としたデバイスや環境が多い• カラーマネジメントできない環境があるなら、sRGBにしてやりとりするのが、現時点で最善の方法

だから、sRGBにしておくのはある意味正しい

Page 11: CSS Nite Vol.39 - komori -

• カメラマンが、Adobe RGBやProPhoto RGB使ったり• コンパクトデジカメも一部でAdobe RGBが利用できたり• 液晶は、Adobe RGBの色再現率を売りにしていたり

データのカラープロファイルを意識しなければならない時代に

しかし、世の中も徐々に変わり始めている

必ずしも元ファイルがsRGBでない可能性がある

Page 12: CSS Nite Vol.39 - komori -

ちなみに。こんなに違う色の再現領域sRGBとAdobe RGBの再現領域を比べるとこのような違いがある

sRGBの色空間 Adobe RGBの色空間。sRGBと比べると緑の色域が広い

Page 13: CSS Nite Vol.39 - komori -

違いを知らずに処理してしまうと…

プロファイルを無視して適当に開いた場合 プロファイルを適切に処理して開いた場合

送った写真の色と全然違うんじゃない?

ということが起きる

Page 14: CSS Nite Vol.39 - komori -

だから、適切に処理しないとまずい

Page 15: CSS Nite Vol.39 - komori -

でも大丈夫。ぼくらにはPhotoshopがある

Page 16: CSS Nite Vol.39 - komori -

Photoshopでの作業のポイント

Page 17: CSS Nite Vol.39 - komori -

1. 入力時(ファイルを開く際)の処理

2.色校正機能を活用、そして用途に合わせた変換処理

3.保存や書き出し時のプロファイルの取り扱い

非常に優秀なカラーマネジメントシステムが搭載されている

作業時のポイントは3つ

Photoshopでのカラーマネジメント

Page 18: CSS Nite Vol.39 - komori -

プロファイルを無視(上)すると全然違う色

• 自分の作業環境をきちんと認識• プロファイルを無視しない!• 埋め込まれたプロファイルで開く(または作業スペースに変換)

画像にプロファイルが含まれている場合、その取り扱いを間違えると悲惨なことに!

開く時には、プロファイルを無視しない!

Photoshopのプロファイル選択ダイアログPhotoshopのカラー設定やBridgeのCreative Suiteのカラー設定。作業環境+プロファイルの処理を確認

Page 19: CSS Nite Vol.39 - komori -

作業用の色空間が異なる場合は、「色の校正」でプレビューしながら作業すれば、大体のイメージはつかめる

• 「色の校正」でプレビュー• 「プロファイル変換...」で変換!• 「プロファイルの指定」ではない!

作業用の色空間が異なる場合は、校正機能でプレビューしながら作業を進める

最終的に「対象となる色空間」に変換

色の校正でプレビュー、最後は適切に変換

最終的に編集メニューの「プロファイル変換...」で適切な色空間に変換する

Page 20: CSS Nite Vol.39 - komori -

CS 3は「sRGBに変換」のオンオフのチェックが矢印の先に隠れている。設定を確認しよう

• CS 2までは、前工程で変換必須• CS 3 / CS 4は、「Webおよびデバイス用に保存」でsRGBに変換可能

JPG / TIFF / PSDで保存時は、ファイル中にカラープロファイルを埋め込み可能。

Webおよびデバイスに保存時は注意が必要

保存や書き出し時も一応チェックを

最終的な色空間に変換する

Page 21: CSS Nite Vol.39 - komori -

ということで、ここまでの流れをおさらいをしましょう

DEMO

Page 22: CSS Nite Vol.39 - komori -

適材適所でツールを使い分ける色補正

Page 23: CSS Nite Vol.39 - komori -

OS Xはシステム環境設定の「ディスプレイ」で

• Windowsは「Calibrize」

• OS Xは、システム環境設定の「ディスプレイ→カラー→補正」

• 市販のツールという選択肢も

モニタは買ってそのまま使うものじゃない。本来、数週間に一回ぐらい調整が必要なもの

その前に。簡易的でもモニタの調整を

http://calibrize.comWindowsは「Calibrize」で簡易調整

こもりのブログ(http://blog.gaspanik.com)にて、双方のOSでの設定の流れをフォローアップします。

Page 24: CSS Nite Vol.39 - komori -

トーンカーブは、色補正に関わる作業を一度にできる優れた機能であることは事実。だが、「自動補正」だけで終わるほど、世の中甘くはない

• 慣れないとかえって時間がかかる• 自動補正で処理できない写真も多い• あのラッセル・ブラウン曰く「トーンカーブはデータを壊す」

「トーンカーブ」は、一つのダイアログだけで一度に補正処理のできる優れた機能。決して、使うことが悪いわけではない

とりあえずトーンカーブ? いやいや

※10何年前に都内でおこなわれたイベントでの発言

Page 25: CSS Nite Vol.39 - komori -

ヒストグラムを見れば、写真の色の成分が視覚的に確認できる

• RGB(CMYK)のデータを視覚化• ハイライトとシャドウの本当の状態• 画面よりヒストグラムの状態を見る

ヒストグラム = 色のデータ分布図。色の割合を見ながら補正するクセをつけよう

補正の友達、ヒストグラム

Page 26: CSS Nite Vol.39 - komori -

必ずしも適正が良いとも限らない。被写体によっては、ハイキーやローキーにもなる

• シャドウからハイライトの範囲に満遍なくデータがある状態が適正

• 適正露出が良いとも言い切れない• カメラは、適正露出にしたがる

適正露出はデータとして正しい状態のこと。しかし、必ずしも適正である必要はない

適正露出。こだわる?こだわらない?

明るい場所で明るいまま撮るなら露出補正を「+」に。暗い場所を暗いままなら「ー」方向に補正して撮影する

Page 27: CSS Nite Vol.39 - komori -

• ハイライトとシャドーの位置を修正• 全体のレベルを適正に補正するか、各チャンネルを個別に補正するか

「レベル補正」の機能を使えば、ハイライトとシャドーを調整するだけで終わることも

まず、レベル補正。それだけで終わるかも

Page 28: CSS Nite Vol.39 - komori -

レベル補正だけでこう変わる

レベル補正前 RGBのチャンネルを補正 RGB各色のチャンネルを個別に補正

Page 29: CSS Nite Vol.39 - komori -

• 全体の明るさを調整したい → 明るさ・コントラスト• 被っている色を除去したい → カラーバランス• 全体の色相がおかしい、彩度をあげたい → 色相・彩度• 特定色を調整したい → 特定色域の変換、色の置き換え…

明るさやコントラスト調整、色被りの除去や特定色の変換など、補正したい目的に合わせて最適な機能をチョイスする

微調整は、目的にあわせて機能を選ぶ

Page 30: CSS Nite Vol.39 - komori -

「S字カーブ」の曲線にすれば、コントラストがあがる

• 特定のレベルやコントラストの調整• すべてをわかってる人はご自由に w

特定の部分だけ色を強くしたい、全体のコントラストを微調整したい時などに使う

トーンカーブは、最後の最後に

Page 31: CSS Nite Vol.39 - komori -

では、色補正をステップ・バイ・ステップでやってみます

DEMO

Page 32: CSS Nite Vol.39 - komori -

本日のまとめ

• カラーマネジメント理解すれば、間違いは起きにくい• ファイルを開くときは、プロファイルを無視しない• 補正は手数を少なく、目的にあわせて機能を選ぶ• 保存や書き出しの時は、用途にあわせて適切な変換を

Page 33: CSS Nite Vol.39 - komori -

この先いつになるかわからないけど、豊かな色表現ができることを期待して

本日は、ありがとうございました