css nite vol.39 - komori -
TRANSCRIPT
![Page 1: CSS Nite Vol.39 - komori -](https://reader038.vdocuments.site/reader038/viewer/2022102815/554a0083b4c905557a8b4f9c/html5/thumbnails/1.jpg)
Photoshopの使い方間違ってませんか?教科書では教えてくれないPhotoshop
こもりまさあき
![Page 2: CSS Nite Vol.39 - komori -](https://reader038.vdocuments.site/reader038/viewer/2022102815/554a0083b4c905557a8b4f9c/html5/thumbnails/2.jpg)
1972年生まれ。フリーランス
大学時代から都内制作会社で5年ほど入出力からデザイン、サーバやネットワーク管理などに並行しながら従事するも、自分だけ社員旅行に行けなかったため退職
現在は、Webや携帯などインターネットに関わる業務全般、テクニカルライティングや講師での活動が中心。呼ばれればミュージシャンのライブやタレントの撮影なども
写真撮影は、仕事のついでに始めたのがきっかけで独学。Flickrにアップしている写真は、wikipediaやwired、real simpleなど、海外のメディアでもたまに使われてます
こもりまさあき
自己紹介
http://flickr.com/h4ck
http://bit.ly/mynameis
![Page 3: CSS Nite Vol.39 - komori -](https://reader038.vdocuments.site/reader038/viewer/2022102815/554a0083b4c905557a8b4f9c/html5/thumbnails/3.jpg)
本日のアジェンダ
• 知っておきたいカラーマネジメント• Photoshopでの作業のポイント• 適材適所でツールを使い分ける色補正
![Page 4: CSS Nite Vol.39 - komori -](https://reader038.vdocuments.site/reader038/viewer/2022102815/554a0083b4c905557a8b4f9c/html5/thumbnails/4.jpg)
知っておきたいカラーマネジメント
![Page 5: CSS Nite Vol.39 - komori -](https://reader038.vdocuments.site/reader038/viewer/2022102815/554a0083b4c905557a8b4f9c/html5/thumbnails/5.jpg)
• 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 -](https://reader038.vdocuments.site/reader038/viewer/2022102815/554a0083b4c905557a8b4f9c/html5/thumbnails/6.jpg)
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 -](https://reader038.vdocuments.site/reader038/viewer/2022102815/554a0083b4c905557a8b4f9c/html5/thumbnails/7.jpg)
• モニタ、携帯電話• スキャナー、デジタルカメラ• 家庭用プリンタ、業務用プリンタ、テレビ
デジタルデータを取り扱うデバイスは、すべて統一された規格のもとに生産されているわけではない
デバイスは、それぞれ色の解釈がちがうもの
それぞれが異なるデバイス特性を持っている
![Page 8: CSS Nite Vol.39 - komori -](https://reader038.vdocuments.site/reader038/viewer/2022102815/554a0083b4c905557a8b4f9c/html5/thumbnails/8.jpg)
「色空間」はデバイスが再現できる色の範囲
「カラープロファイル」は、そのデバイスで異なる色空間や特性を定義したファイル
覚えておこう。色空間とカラープロファイル
プロファイルだけがあっても意味がない
そこで「カラーマネジメント」が必要
![Page 9: CSS Nite Vol.39 - komori -](https://reader038.vdocuments.site/reader038/viewer/2022102815/554a0083b4c905557a8b4f9c/html5/thumbnails/9.jpg)
デバイス毎の色の特性を定義して、異なるデバイスであっても適切に変換できれば、「色が違う!」という問題は起こりにくい
カラーマネジメントとは「色の翻訳作業」
![Page 10: CSS Nite Vol.39 - komori -](https://reader038.vdocuments.site/reader038/viewer/2022102815/554a0083b4c905557a8b4f9c/html5/thumbnails/10.jpg)
sRGBで保存すればいいんでしょ?一般にRGBは「sRGB」の色空間でやりとりすれば安全とされている
• 事実上、sRGBがインターネットの標準色空間• sRGBでの色表示を標準としたデバイスや環境が多い• カラーマネジメントできない環境があるなら、sRGBにしてやりとりするのが、現時点で最善の方法
だから、sRGBにしておくのはある意味正しい
![Page 11: CSS Nite Vol.39 - komori -](https://reader038.vdocuments.site/reader038/viewer/2022102815/554a0083b4c905557a8b4f9c/html5/thumbnails/11.jpg)
• カメラマンが、Adobe RGBやProPhoto RGB使ったり• コンパクトデジカメも一部でAdobe RGBが利用できたり• 液晶は、Adobe RGBの色再現率を売りにしていたり
データのカラープロファイルを意識しなければならない時代に
しかし、世の中も徐々に変わり始めている
必ずしも元ファイルがsRGBでない可能性がある
![Page 12: CSS Nite Vol.39 - komori -](https://reader038.vdocuments.site/reader038/viewer/2022102815/554a0083b4c905557a8b4f9c/html5/thumbnails/12.jpg)
ちなみに。こんなに違う色の再現領域sRGBとAdobe RGBの再現領域を比べるとこのような違いがある
sRGBの色空間 Adobe RGBの色空間。sRGBと比べると緑の色域が広い
![Page 13: CSS Nite Vol.39 - komori -](https://reader038.vdocuments.site/reader038/viewer/2022102815/554a0083b4c905557a8b4f9c/html5/thumbnails/13.jpg)
違いを知らずに処理してしまうと…
プロファイルを無視して適当に開いた場合 プロファイルを適切に処理して開いた場合
送った写真の色と全然違うんじゃない?
ということが起きる
![Page 14: CSS Nite Vol.39 - komori -](https://reader038.vdocuments.site/reader038/viewer/2022102815/554a0083b4c905557a8b4f9c/html5/thumbnails/14.jpg)
だから、適切に処理しないとまずい
![Page 15: CSS Nite Vol.39 - komori -](https://reader038.vdocuments.site/reader038/viewer/2022102815/554a0083b4c905557a8b4f9c/html5/thumbnails/15.jpg)
でも大丈夫。ぼくらにはPhotoshopがある
![Page 16: CSS Nite Vol.39 - komori -](https://reader038.vdocuments.site/reader038/viewer/2022102815/554a0083b4c905557a8b4f9c/html5/thumbnails/16.jpg)
Photoshopでの作業のポイント
![Page 17: CSS Nite Vol.39 - komori -](https://reader038.vdocuments.site/reader038/viewer/2022102815/554a0083b4c905557a8b4f9c/html5/thumbnails/17.jpg)
1. 入力時(ファイルを開く際)の処理
2.色校正機能を活用、そして用途に合わせた変換処理
3.保存や書き出し時のプロファイルの取り扱い
非常に優秀なカラーマネジメントシステムが搭載されている
作業時のポイントは3つ
Photoshopでのカラーマネジメント
![Page 18: CSS Nite Vol.39 - komori -](https://reader038.vdocuments.site/reader038/viewer/2022102815/554a0083b4c905557a8b4f9c/html5/thumbnails/18.jpg)
プロファイルを無視(上)すると全然違う色
• 自分の作業環境をきちんと認識• プロファイルを無視しない!• 埋め込まれたプロファイルで開く(または作業スペースに変換)
画像にプロファイルが含まれている場合、その取り扱いを間違えると悲惨なことに!
開く時には、プロファイルを無視しない!
Photoshopのプロファイル選択ダイアログPhotoshopのカラー設定やBridgeのCreative Suiteのカラー設定。作業環境+プロファイルの処理を確認
![Page 19: CSS Nite Vol.39 - komori -](https://reader038.vdocuments.site/reader038/viewer/2022102815/554a0083b4c905557a8b4f9c/html5/thumbnails/19.jpg)
作業用の色空間が異なる場合は、「色の校正」でプレビューしながら作業すれば、大体のイメージはつかめる
• 「色の校正」でプレビュー• 「プロファイル変換...」で変換!• 「プロファイルの指定」ではない!
作業用の色空間が異なる場合は、校正機能でプレビューしながら作業を進める
最終的に「対象となる色空間」に変換
色の校正でプレビュー、最後は適切に変換
最終的に編集メニューの「プロファイル変換...」で適切な色空間に変換する
![Page 20: CSS Nite Vol.39 - komori -](https://reader038.vdocuments.site/reader038/viewer/2022102815/554a0083b4c905557a8b4f9c/html5/thumbnails/20.jpg)
CS 3は「sRGBに変換」のオンオフのチェックが矢印の先に隠れている。設定を確認しよう
• CS 2までは、前工程で変換必須• CS 3 / CS 4は、「Webおよびデバイス用に保存」でsRGBに変換可能
JPG / TIFF / PSDで保存時は、ファイル中にカラープロファイルを埋め込み可能。
Webおよびデバイスに保存時は注意が必要
保存や書き出し時も一応チェックを
最終的な色空間に変換する
![Page 21: CSS Nite Vol.39 - komori -](https://reader038.vdocuments.site/reader038/viewer/2022102815/554a0083b4c905557a8b4f9c/html5/thumbnails/21.jpg)
ということで、ここまでの流れをおさらいをしましょう
DEMO
![Page 22: CSS Nite Vol.39 - komori -](https://reader038.vdocuments.site/reader038/viewer/2022102815/554a0083b4c905557a8b4f9c/html5/thumbnails/22.jpg)
適材適所でツールを使い分ける色補正
![Page 23: CSS Nite Vol.39 - komori -](https://reader038.vdocuments.site/reader038/viewer/2022102815/554a0083b4c905557a8b4f9c/html5/thumbnails/23.jpg)
OS Xはシステム環境設定の「ディスプレイ」で
• Windowsは「Calibrize」
• OS Xは、システム環境設定の「ディスプレイ→カラー→補正」
• 市販のツールという選択肢も
モニタは買ってそのまま使うものじゃない。本来、数週間に一回ぐらい調整が必要なもの
その前に。簡易的でもモニタの調整を
http://calibrize.comWindowsは「Calibrize」で簡易調整
こもりのブログ(http://blog.gaspanik.com)にて、双方のOSでの設定の流れをフォローアップします。
![Page 24: CSS Nite Vol.39 - komori -](https://reader038.vdocuments.site/reader038/viewer/2022102815/554a0083b4c905557a8b4f9c/html5/thumbnails/24.jpg)
トーンカーブは、色補正に関わる作業を一度にできる優れた機能であることは事実。だが、「自動補正」だけで終わるほど、世の中甘くはない
• 慣れないとかえって時間がかかる• 自動補正で処理できない写真も多い• あのラッセル・ブラウン曰く「トーンカーブはデータを壊す」
「トーンカーブ」は、一つのダイアログだけで一度に補正処理のできる優れた機能。決して、使うことが悪いわけではない
とりあえずトーンカーブ? いやいや
※10何年前に都内でおこなわれたイベントでの発言
![Page 25: CSS Nite Vol.39 - komori -](https://reader038.vdocuments.site/reader038/viewer/2022102815/554a0083b4c905557a8b4f9c/html5/thumbnails/25.jpg)
ヒストグラムを見れば、写真の色の成分が視覚的に確認できる
• RGB(CMYK)のデータを視覚化• ハイライトとシャドウの本当の状態• 画面よりヒストグラムの状態を見る
ヒストグラム = 色のデータ分布図。色の割合を見ながら補正するクセをつけよう
補正の友達、ヒストグラム
![Page 26: CSS Nite Vol.39 - komori -](https://reader038.vdocuments.site/reader038/viewer/2022102815/554a0083b4c905557a8b4f9c/html5/thumbnails/26.jpg)
必ずしも適正が良いとも限らない。被写体によっては、ハイキーやローキーにもなる
• シャドウからハイライトの範囲に満遍なくデータがある状態が適正
• 適正露出が良いとも言い切れない• カメラは、適正露出にしたがる
適正露出はデータとして正しい状態のこと。しかし、必ずしも適正である必要はない
適正露出。こだわる?こだわらない?
明るい場所で明るいまま撮るなら露出補正を「+」に。暗い場所を暗いままなら「ー」方向に補正して撮影する
![Page 27: CSS Nite Vol.39 - komori -](https://reader038.vdocuments.site/reader038/viewer/2022102815/554a0083b4c905557a8b4f9c/html5/thumbnails/27.jpg)
• ハイライトとシャドーの位置を修正• 全体のレベルを適正に補正するか、各チャンネルを個別に補正するか
「レベル補正」の機能を使えば、ハイライトとシャドーを調整するだけで終わることも
まず、レベル補正。それだけで終わるかも
![Page 28: CSS Nite Vol.39 - komori -](https://reader038.vdocuments.site/reader038/viewer/2022102815/554a0083b4c905557a8b4f9c/html5/thumbnails/28.jpg)
レベル補正だけでこう変わる
レベル補正前 RGBのチャンネルを補正 RGB各色のチャンネルを個別に補正
![Page 29: CSS Nite Vol.39 - komori -](https://reader038.vdocuments.site/reader038/viewer/2022102815/554a0083b4c905557a8b4f9c/html5/thumbnails/29.jpg)
• 全体の明るさを調整したい → 明るさ・コントラスト• 被っている色を除去したい → カラーバランス• 全体の色相がおかしい、彩度をあげたい → 色相・彩度• 特定色を調整したい → 特定色域の変換、色の置き換え…
明るさやコントラスト調整、色被りの除去や特定色の変換など、補正したい目的に合わせて最適な機能をチョイスする
微調整は、目的にあわせて機能を選ぶ
![Page 30: CSS Nite Vol.39 - komori -](https://reader038.vdocuments.site/reader038/viewer/2022102815/554a0083b4c905557a8b4f9c/html5/thumbnails/30.jpg)
「S字カーブ」の曲線にすれば、コントラストがあがる
• 特定のレベルやコントラストの調整• すべてをわかってる人はご自由に w
特定の部分だけ色を強くしたい、全体のコントラストを微調整したい時などに使う
トーンカーブは、最後の最後に
![Page 31: CSS Nite Vol.39 - komori -](https://reader038.vdocuments.site/reader038/viewer/2022102815/554a0083b4c905557a8b4f9c/html5/thumbnails/31.jpg)
では、色補正をステップ・バイ・ステップでやってみます
DEMO
![Page 32: CSS Nite Vol.39 - komori -](https://reader038.vdocuments.site/reader038/viewer/2022102815/554a0083b4c905557a8b4f9c/html5/thumbnails/32.jpg)
本日のまとめ
• カラーマネジメント理解すれば、間違いは起きにくい• ファイルを開くときは、プロファイルを無視しない• 補正は手数を少なく、目的にあわせて機能を選ぶ• 保存や書き出しの時は、用途にあわせて適切な変換を
![Page 33: CSS Nite Vol.39 - komori -](https://reader038.vdocuments.site/reader038/viewer/2022102815/554a0083b4c905557a8b4f9c/html5/thumbnails/33.jpg)
この先いつになるかわからないけど、豊かな色表現ができることを期待して
本日は、ありがとうございました