Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CSS Nite Vol.39 - komori -

2,332 views

Published on

Published in: Education
  • Be the first to comment

CSS Nite Vol.39 - komori -

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

×