Suche senden
Hochladen
CSS Nite Vol.39 - komori -
•
4 gefällt mir
•
1,519 views
masaaki komori
Folgen
Bildung
Melden
Teilen
Melden
Teilen
1 von 33
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
WP Performance Optimization
WP Performance Optimization
masaaki komori
アジャイル開発の現在・過去・未来~今を知り、源流を訪ね、先を見据える~
アジャイル開発の現在・過去・未来~今を知り、源流を訪ね、先を見据える~
Kenji Hiranabe
レスポンシブ・ウェブデザイン基礎
レスポンシブ・ウェブデザイン基礎
masaaki komori
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
Satoru MURAKOSHI
UXのためのUIデザイン
UXのためのUIデザイン
Hironobu Aoki
[Slide]闇アジャイラーvs光アジャイラーforDevLOVE(EnergizedWorkLT祭)
[Slide]闇アジャイラーvs光アジャイラーforDevLOVE(EnergizedWorkLT祭)
masashi takehara
デザインのためのデザイン
デザインのためのデザイン
Masayuki Uetani
見やすいプレゼン資料の作り方 - リニューアル増量版
見やすいプレゼン資料の作り方 - リニューアル増量版
MOCKS | Yuta Morishige
Empfohlen
WP Performance Optimization
WP Performance Optimization
masaaki komori
アジャイル開発の現在・過去・未来~今を知り、源流を訪ね、先を見据える~
アジャイル開発の現在・過去・未来~今を知り、源流を訪ね、先を見据える~
Kenji Hiranabe
レスポンシブ・ウェブデザイン基礎
レスポンシブ・ウェブデザイン基礎
masaaki komori
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
Satoru MURAKOSHI
UXのためのUIデザイン
UXのためのUIデザイン
Hironobu Aoki
[Slide]闇アジャイラーvs光アジャイラーforDevLOVE(EnergizedWorkLT祭)
[Slide]闇アジャイラーvs光アジャイラーforDevLOVE(EnergizedWorkLT祭)
masashi takehara
デザインのためのデザイン
デザインのためのデザイン
Masayuki Uetani
見やすいプレゼン資料の作り方 - リニューアル増量版
見やすいプレゼン資料の作り方 - リニューアル増量版
MOCKS | Yuta Morishige
コアなエンジニアじゃなくてもできるよ #JP_Stripes Vol.3
コアなエンジニアじゃなくてもできるよ #JP_Stripes Vol.3
masaaki komori
InstaVR使ってみた
InstaVR使ってみた
masaaki komori
Framerで始めるプロトタイプコーディング
Framerで始めるプロトタイプコーディング
masaaki komori
Prototyping with Sketch
Prototyping with Sketch
masaaki komori
プロトタイピングツール戦国時代
プロトタイピングツール戦国時代
masaaki komori
Bootstrapではじめる、 Webサイト設計のモダンアプローチ
Bootstrapではじめる、 Webサイト設計のモダンアプローチ
masaaki komori
レスポンシブEメールを作ろう
レスポンシブEメールを作ろう
masaaki komori
Bootstrapはこう使う
Bootstrapはこう使う
masaaki komori
デバイス多様化の時代のWeb制作
デバイス多様化の時代のWeb制作
masaaki komori
2015年のWebサイトの作り方 at 67ws
2015年のWebサイトの作り方 at 67ws
masaaki komori
Webデザインと開発の未来
Webデザインと開発の未来
masaaki komori
Framerで動くモックアップを簡単作成
Framerで動くモックアップを簡単作成
masaaki komori
Sketch 3 Basics at kkmsz
Sketch 3 Basics at kkmsz
masaaki komori
Re:Cre Vol.14 | Web design process for the future
Re:Cre Vol.14 | Web design process for the future
masaaki komori
Web Design Process for The Future
Web Design Process for The Future
masaaki komori
Web Design Process for The Future
Web Design Process for The Future
masaaki komori
groundwork-pasona-tech
groundwork-pasona-tech
masaaki komori
インブラウザ勉強会 Vol.1
インブラウザ勉強会 Vol.1
masaaki komori
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化
masaaki komori
Sublime Text 2 Basics
Sublime Text 2 Basics
masaaki komori
My Inspire High Award 2024 「AIと仲良くなるには?」
My Inspire High Award 2024 「AIと仲良くなるには?」
inspirehighstaff03
What I did before opening my business..pdf
What I did before opening my business..pdf
oganekyokoi
Weitere ähnliche Inhalte
Mehr von masaaki komori
コアなエンジニアじゃなくてもできるよ #JP_Stripes Vol.3
コアなエンジニアじゃなくてもできるよ #JP_Stripes Vol.3
masaaki komori
InstaVR使ってみた
InstaVR使ってみた
masaaki komori
Framerで始めるプロトタイプコーディング
Framerで始めるプロトタイプコーディング
masaaki komori
Prototyping with Sketch
Prototyping with Sketch
masaaki komori
プロトタイピングツール戦国時代
プロトタイピングツール戦国時代
masaaki komori
Bootstrapではじめる、 Webサイト設計のモダンアプローチ
Bootstrapではじめる、 Webサイト設計のモダンアプローチ
masaaki komori
レスポンシブEメールを作ろう
レスポンシブEメールを作ろう
masaaki komori
Bootstrapはこう使う
Bootstrapはこう使う
masaaki komori
デバイス多様化の時代のWeb制作
デバイス多様化の時代のWeb制作
masaaki komori
2015年のWebサイトの作り方 at 67ws
2015年のWebサイトの作り方 at 67ws
masaaki komori
Webデザインと開発の未来
Webデザインと開発の未来
masaaki komori
Framerで動くモックアップを簡単作成
Framerで動くモックアップを簡単作成
masaaki komori
Sketch 3 Basics at kkmsz
Sketch 3 Basics at kkmsz
masaaki komori
Re:Cre Vol.14 | Web design process for the future
Re:Cre Vol.14 | Web design process for the future
masaaki komori
Web Design Process for The Future
Web Design Process for The Future
masaaki komori
Web Design Process for The Future
Web Design Process for The Future
masaaki komori
groundwork-pasona-tech
groundwork-pasona-tech
masaaki komori
インブラウザ勉強会 Vol.1
インブラウザ勉強会 Vol.1
masaaki komori
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化
masaaki komori
Sublime Text 2 Basics
Sublime Text 2 Basics
masaaki komori
Mehr von masaaki komori
(20)
コアなエンジニアじゃなくてもできるよ #JP_Stripes Vol.3
コアなエンジニアじゃなくてもできるよ #JP_Stripes Vol.3
InstaVR使ってみた
InstaVR使ってみた
Framerで始めるプロトタイプコーディング
Framerで始めるプロトタイプコーディング
Prototyping with Sketch
Prototyping with Sketch
プロトタイピングツール戦国時代
プロトタイピングツール戦国時代
Bootstrapではじめる、 Webサイト設計のモダンアプローチ
Bootstrapではじめる、 Webサイト設計のモダンアプローチ
レスポンシブEメールを作ろう
レスポンシブEメールを作ろう
Bootstrapはこう使う
Bootstrapはこう使う
デバイス多様化の時代のWeb制作
デバイス多様化の時代のWeb制作
2015年のWebサイトの作り方 at 67ws
2015年のWebサイトの作り方 at 67ws
Webデザインと開発の未来
Webデザインと開発の未来
Framerで動くモックアップを簡単作成
Framerで動くモックアップを簡単作成
Sketch 3 Basics at kkmsz
Sketch 3 Basics at kkmsz
Re:Cre Vol.14 | Web design process for the future
Re:Cre Vol.14 | Web design process for the future
Web Design Process for The Future
Web Design Process for The Future
Web Design Process for The Future
Web Design Process for The Future
groundwork-pasona-tech
groundwork-pasona-tech
インブラウザ勉強会 Vol.1
インブラウザ勉強会 Vol.1
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化
Sublime Text 2 Basics
Sublime Text 2 Basics
Kürzlich hochgeladen
My Inspire High Award 2024 「AIと仲良くなるには?」
My Inspire High Award 2024 「AIと仲良くなるには?」
inspirehighstaff03
What I did before opening my business..pdf
What I did before opening my business..pdf
oganekyokoi
3年前期 交通基盤工学 第一回 ガイダンス 交通基盤工学の概要 パワーポイント
3年前期 交通基盤工学 第一回 ガイダンス 交通基盤工学の概要 パワーポイント
shu1108hina1020
My Inspire High Award 2024 「家族とは何か」
My Inspire High Award 2024 「家族とは何か」
inspirehighstaff03
My Inspire High Award 2024 「孤独は敵なのか?」
My Inspire High Award 2024 「孤独は敵なのか?」
inspirehighstaff03
My Inspire High Award2024「外国人が日本のテーブルマナーに驚く理由は?」
My Inspire High Award2024「外国人が日本のテーブルマナーに驚く理由は?」
inspirehighstaff03
My Inspire High Award 2024「世の中の流行はどのようにして生まれるのか」
My Inspire High Award 2024「世の中の流行はどのようにして生まれるのか」
inspirehighstaff03
【ゲーム理論入門】ChatGPTが作成した ゲーム理論の問題を解く #3 Slide
【ゲーム理論入門】ChatGPTが作成した ゲーム理論の問題を解く #3 Slide
ssusere0a682
My Inspire High Award 2024「なぜ、好きなことにいつかは飽きるの」
My Inspire High Award 2024「なぜ、好きなことにいつかは飽きるの」
inspirehighstaff03
My Inspire High Award 2024 「本当の『悪者』って何?」
My Inspire High Award 2024 「本当の『悪者』って何?」
inspirehighstaff03
My Inspire High Award 2024「老いることは不幸なこと?」
My Inspire High Award 2024「老いることは不幸なこと?」
inspirehighstaff03
Divorce agreements in administrative work.pdf
Divorce agreements in administrative work.pdf
oganekyokoi
My Inspire High Award 2024「スーパーマーケットで回収されたキャベツ外葉は廃棄されているの?」
My Inspire High Award 2024「スーパーマーケットで回収されたキャベツ外葉は廃棄されているの?」
inspirehighstaff03
Establishment and operation of medical corporations.pdf
Establishment and operation of medical corporations.pdf
oganekyokoi
My Inspire High Award 2024「なぜ議会への関心が低いのか?」
My Inspire High Award 2024「なぜ議会への関心が低いのか?」
inspirehighstaff03
KARAPATANG PANTAO.pptxhrhrhrhrhrhrhrhrhr
KARAPATANG PANTAO.pptxhrhrhrhrhrhrhrhrhr
RodolfFernandez1
My Inspire High Award 2024「他者と自分、対立を防ぐには?」
My Inspire High Award 2024「他者と自分、対立を防ぐには?」
inspirehighstaff03
International Politics I - Lecture 1
International Politics I - Lecture 1
Toru Oga
My Inspire High Award 2024 「正義って存在するの?」
My Inspire High Award 2024 「正義って存在するの?」
inspirehighstaff03
My Inspire High Award 2024「Yakushima Islandってなんか変じゃない?」.pdf
My Inspire High Award 2024「Yakushima Islandってなんか変じゃない?」.pdf
inspirehighstaff03
Kürzlich hochgeladen
(20)
My Inspire High Award 2024 「AIと仲良くなるには?」
My Inspire High Award 2024 「AIと仲良くなるには?」
What I did before opening my business..pdf
What I did before opening my business..pdf
3年前期 交通基盤工学 第一回 ガイダンス 交通基盤工学の概要 パワーポイント
3年前期 交通基盤工学 第一回 ガイダンス 交通基盤工学の概要 パワーポイント
My Inspire High Award 2024 「家族とは何か」
My Inspire High Award 2024 「家族とは何か」
My Inspire High Award 2024 「孤独は敵なのか?」
My Inspire High Award 2024 「孤独は敵なのか?」
My Inspire High Award2024「外国人が日本のテーブルマナーに驚く理由は?」
My Inspire High Award2024「外国人が日本のテーブルマナーに驚く理由は?」
My Inspire High Award 2024「世の中の流行はどのようにして生まれるのか」
My Inspire High Award 2024「世の中の流行はどのようにして生まれるのか」
【ゲーム理論入門】ChatGPTが作成した ゲーム理論の問題を解く #3 Slide
【ゲーム理論入門】ChatGPTが作成した ゲーム理論の問題を解く #3 Slide
My Inspire High Award 2024「なぜ、好きなことにいつかは飽きるの」
My Inspire High Award 2024「なぜ、好きなことにいつかは飽きるの」
My Inspire High Award 2024 「本当の『悪者』って何?」
My Inspire High Award 2024 「本当の『悪者』って何?」
My Inspire High Award 2024「老いることは不幸なこと?」
My Inspire High Award 2024「老いることは不幸なこと?」
Divorce agreements in administrative work.pdf
Divorce agreements in administrative work.pdf
My Inspire High Award 2024「スーパーマーケットで回収されたキャベツ外葉は廃棄されているの?」
My Inspire High Award 2024「スーパーマーケットで回収されたキャベツ外葉は廃棄されているの?」
Establishment and operation of medical corporations.pdf
Establishment and operation of medical corporations.pdf
My Inspire High Award 2024「なぜ議会への関心が低いのか?」
My Inspire High Award 2024「なぜ議会への関心が低いのか?」
KARAPATANG PANTAO.pptxhrhrhrhrhrhrhrhrhr
KARAPATANG PANTAO.pptxhrhrhrhrhrhrhrhrhr
My Inspire High Award 2024「他者と自分、対立を防ぐには?」
My Inspire High Award 2024「他者と自分、対立を防ぐには?」
International Politics I - Lecture 1
International Politics I - Lecture 1
My Inspire High Award 2024 「正義って存在するの?」
My Inspire High Award 2024 「正義って存在するの?」
My Inspire High Award 2024「Yakushima Islandってなんか変じゃない?」.pdf
My Inspire High Award 2024「Yakushima Islandってなんか変じゃない?」.pdf
CSS Nite Vol.39 - komori -
1.
Photoshopの使い方間違ってませんか? 教科書では教えてくれないPhotoshop こもりまさあき
2.
1972年生まれ。フリーランス 大学時代から都内制作会社で5年ほど入出力からデザイン、 サーバやネットワーク管理などに並行しながら従事するも、 自分だけ社員旅行に行けなかったため退職 現在は、Webや携帯などインターネットに関わる業務全般、 テクニカルライティングや講師での活動が中心。 呼ばれればミュージシャンのライブやタレントの撮影なども 写真撮影は、仕事のついでに始めたのがきっかけで独学。 Flickrにアップしている写真は、wikipediaやwired、real simpleなど、海外のメディアでもたまに使われてます こもりまさあき 自己紹介 http://flickr.com/h4ck http://bit.ly/mynameis
3.
本日のアジェンダ • 知っておきたいカラーマネジメント • Photoshopでの作業のポイント •
適材適所でツールを使い分ける色補正
4.
知っておきたいカラーマネジメント
5.
• Safariは、以前から「有効」 • Firefoxは、最新版の3.5.x以降はデフォルト「有効」 3.0.xは、ユーザーが手動で有効にできる •
Internet Explorerは、現時点で「未対応」 カラーマネジメントできるようになると、意図した色が出せるように ブラウザでのカラーマネジメント時代到来? 自身の環境が対応しているかは、ICCのWebサイトでチェック可能。 http://www.color.org/version4html.xalter
6.
OSやブラウザの色の扱いやカラーマネジメント特性を理解すれば、 自分が意図した「正しい色味」に近い状態で見せることができる 裏を返せば、既に「違う色味」が表示されている可能性も… カラーマネジメントの知識は必要? OS X Safari
4 / Adobe RGBの表示例 OS X Firefox 3.5 / Adobe RGBの表示例 Windows Vista IE 8 / Adobe RGBの表示例 カラーマネジメント有効 カラーマネジメント有効 カラーマネジメント無効
7.
• モニタ、携帯電話 • スキャナー、デジタルカメラ •
家庭用プリンタ、業務用プリンタ、テレビ デジタルデータを取り扱うデバイスは、 すべて統一された規格のもとに生産されているわけではない デバイスは、それぞれ色の解釈がちがうもの それぞれが異なるデバイス特性を持っている
8.
「色空間」はデバイスが再現できる色の範囲 「カラープロファイル」は、そのデバイスで 異なる色空間や特性を定義したファイル 覚えておこう。色空間とカラープロファイル プロファイルだけがあっても意味がない そこで「カラーマネジメント」が必要
9.
デバイス毎の色の特性を定義して、異なるデバイスであっても適切に 変換できれば、「色が違う!」という問題は起こりにくい カラーマネジメントとは「色の翻訳作業」
10.
sRGBで保存すればいいんでしょ? 一般にRGBは「sRGB」の色空間でやりとりすれば安全とされている • 事実上、sRGBがインターネットの標準色空間 • sRGBでの色表示を標準としたデバイスや環境が多い •
カラーマネジメントできない環境があるなら、 sRGBにしてやりとりするのが、現時点で最善の方法 だから、sRGBにしておくのはある意味正しい
11.
• カメラマンが、Adobe RGBやProPhoto
RGB使ったり • コンパクトデジカメも一部でAdobe RGBが利用できたり • 液晶は、Adobe RGBの色再現率を売りにしていたり データのカラープロファイルを意識しなければならない時代に しかし、世の中も徐々に変わり始めている 必ずしも元ファイルがsRGBでない可能性がある
12.
ちなみに。こんなに違う色の再現領域 sRGBとAdobe RGBの再現領域を比べるとこのような違いがある sRGBの色空間 Adobe
RGBの色空間。sRGBと比べると緑の色域が広い
13.
違いを知らずに処理してしまうと… プロファイルを無視して適当に開いた場合 プロファイルを適切に処理して開いた場合 送った写真の色と 全然違うんじゃない? ということが起きる
14.
だから、適切に処理しないとまずい
15.
でも大丈夫。ぼくらにはPhotoshopがある
16.
Photoshopでの作業のポイント
17.
1. 入力時(ファイルを開く際)の処理 2. 色校正機能を活用、そして用途に合わせた変換処理 3.
保存や書き出し時のプロファイルの取り扱い 非常に優秀なカラーマネジメントシステムが搭載されている 作業時のポイントは3つ Photoshopでのカラーマネジメント
18.
プロファイルを無視(上)すると全然違う色 • 自分の作業環境をきちんと認識 • プロファイルを無視しない! •
埋め込まれたプロファイルで開く (または作業スペースに変換) 画像にプロファイルが含まれている場合、 その取り扱いを間違えると悲惨なことに! 開く時には、プロファイルを無視しない! Photoshopのプロファイル選択ダイアログ Photoshopのカラー設定やBridgeのCreative Suiteの カラー設定。作業環境+プロファイルの処理を確認
19.
作業用の色空間が異なる場合は、「色の校正」で プレビューしながら作業すれば、大体のイメージ はつかめる • 「色の校正」でプレビュー • 「プロファイル変換...」で変換! •
「プロファイルの指定」ではない! 作業用の色空間が異なる場合は、 校正機能でプレビューしながら作業を進める 最終的に「対象となる色空間」に変換 色の校正でプレビュー、最後は適切に変換 最終的に編集メニューの「プロファイル変換...」 で適切な色空間に変換する
20.
CS 3は「sRGBに変換」のオンオフのチェックが 矢印の先に隠れている。設定を確認しよう • CS
2までは、前工程で変換必須 • CS 3 / CS 4は、 「Webおよびデバイス用に保存」で sRGBに変換可能 JPG / TIFF / PSDで保存時は、ファイル中に カラープロファイルを埋め込み可能。 Webおよびデバイスに保存時は注意が必要 保存や書き出し時も一応チェックを 最終的な色空間に変換する
21.
ということで、ここまでの流れをおさらいをしましょう DEMO
22.
適材適所でツールを使い分ける色補正
23.
OS Xはシステム環境設定の「ディスプレイ」で • Windowsは「Calibrize」 •
OS Xは、システム環境設定の 「ディスプレイ→カラー→補正」 • 市販のツールという選択肢も モニタは買ってそのまま使うものじゃない。 本来、数週間に一回ぐらい調整が必要なもの その前に。簡易的でもモニタの調整を http://calibrize.com Windowsは「Calibrize」で簡易調整 こもりのブログ(http://blog.gaspanik.com)にて、 双方のOSでの設定の流れをフォローアップします。
24.
トーンカーブは、色補正に関わる作業を一度にで きる優れた機能であることは事実。だが、「自動 補正」だけで終わるほど、世の中甘くはない • 慣れないとかえって時間がかかる • 自動補正で処理できない写真も多い •
あのラッセル・ブラウン曰く 「トーンカーブはデータを壊す」 「トーンカーブ」は、一つのダイアログだけ で一度に補正処理のできる優れた機能。 決して、使うことが悪いわけではない とりあえずトーンカーブ? いやいや ※10何年前に都内でおこなわれたイベントでの発言
25.
ヒストグラムを見れば、写真の色の成分が視覚的 に確認できる • RGB(CMYK)のデータを視覚化 • ハイライトとシャドウの本当の状態 •
画面よりヒストグラムの状態を見る ヒストグラム = 色のデータ分布図。 色の割合を見ながら補正するクセをつけよう 補正の友達、ヒストグラム
26.
必ずしも適正が良いとも限らない。 被写体によっては、ハイキーやローキーにもなる • シャドウからハイライトの範囲に 満遍なくデータがある状態が適正 • 適正露出が良いとも言い切れない •
カメラは、適正露出にしたがる 適正露出はデータとして正しい状態のこと。 しかし、必ずしも適正である必要はない 適正露出。こだわる?こだわらない? 明るい場所で明るいまま撮るなら露出補正を「+」に。 暗い場所を暗いままなら「ー」方向に補正して撮影する
27.
• ハイライトとシャドーの位置を修正 • 全体のレベルを適正に補正するか、 各チャンネルを個別に補正するか 「レベル補正」の機能を使えば、ハイライト とシャドーを調整するだけで終わることも まず、レベル補正。それだけで終わるかも
28.
レベル補正だけでこう変わる レベル補正前 RGBのチャンネルを補正 RGB各色のチャンネルを個別に補正
29.
• 全体の明るさを調整したい →
明るさ・コントラスト • 被っている色を除去したい → カラーバランス • 全体の色相がおかしい、彩度をあげたい → 色相・彩度 • 特定色を調整したい → 特定色域の変換、色の置き換え… 明るさやコントラスト調整、色被りの除去や特定色の変換など、 補正したい目的に合わせて最適な機能をチョイスする 微調整は、目的にあわせて機能を選ぶ
30.
「S字カーブ」の曲線にすれば、コントラストが あがる • 特定のレベルやコントラストの調整 • すべてをわかってる人はご自由に
w 特定の部分だけ色を強くしたい、全体のコン トラストを微調整したい時などに使う トーンカーブは、最後の最後に
31.
では、色補正をステップ・バイ・ステップでやってみます DEMO
32.
本日のまとめ • カラーマネジメント理解すれば、間違いは起きにくい • ファイルを開くときは、プロファイルを無視しない •
補正は手数を少なく、目的にあわせて機能を選ぶ • 保存や書き出しの時は、用途にあわせて適切な変換を
33.
この先いつになるかわからないけど、 豊かな色表現ができることを期待して 本日は、ありがとうございました
Jetzt herunterladen