東京都府中市、渋谷区のWEB制作会社Maromaroのブログです

2015.11.20

agawa

ちょこっと注意!RGB&CMYK

ちょこっと注意!RGB&CMYK

皆々様方こんにちは!
Maromaroの阿川です。近頃めっきり寒くなってきましたね…
皆さんも風邪にはご注意ください!

さて今回のテーマは『色』です。
色について追求することはたくさんありますが、PCと紙印刷の色の違いをお話しようと思います。
最近送られてきた画像がCMYKになっていることに気が付かないままサイト用の写真として書き出してしまったことがありました。
そうしたら写真の色が変わってしまったのです…!

同じミスをしないようWeb初心者の皆さんに注意をしてほしいことのうちのひとつとしてお話します!

思った通りの色が出ない!?

写真をPCに撮りこんで画面上で見たときや、逆にPCから写真を印刷したら色が変わっていて「あれ?」と思ったことはありませんか?
さっそく例を見てみましょう!

agawa_blog03_img01

我が家の愛犬、ビションフリーゼのざらめの写真が2枚あります。
左がRGBのjpgで書き出したもので右がCMYKのjpgで書き出したものです。
色の違いは一目瞭然です!
画面上で見るのでRGBでは普通に見えますがCMYKのほうだと何かがおかしい…!妙に色が濃い様な、そんな感じがします。

なんでこんなことが起こるのでしょう?
この理由はPCなどの液晶上と、印刷するインクの色を混ぜる方法が異なるからなのです!

光の三原色・加法混色

主に液晶上で色を表すのは光になります。
使用する色はR(赤)・G(緑)・B(青)の3色です。これらを重ね合わせて色を作るようです。
光の三原色だけ合って加法混色は足していくと色に明るみが出てきます。重ね合わせていくことで明るい色味を出していく方法なんですね!
正確に言えば赤ではなく「黄みの赤」、青ではなく「紫みの青」だそうです^^

agawa_blog03_img02

WEB上で写す場合はこちらの設定にしましょう!

色の三原色・減法混色

印刷物は画面上で光を駆使してみるものではないのでインクでの着色になります。インクはいくら重ねても色は明るくなりません。だんだんと濃くなっていきます。
普通の絵の具と同じ仕組みです!これを減方混色と言います。
色の三原色はC(シアン)M(マゼンタ)Y(イエロー)の3色です。そこにK(ブラック)を加えたものが基本的な色の指定になります。シアンは「緑みの青」、マゼンタは「赤紫」の色です。
CMYKはすべてを重ねると黒くなる仕組みです!

agawa_blog03_img03
印刷する場合はこちらの設定にしましょう!

まとめ

色をきちんと出したいのであれば一度その画像がCMYKなのかRGBなのかを調べたほうが良いと思います!
Fireworksなどでデザインをしている最中でも色味が変化してしまうので、最初に調べることをオススメします。

確認方法は簡単で、PhotoshopやIllustratorで開いたときに上のタブで確認することができます!
イメージ>カラーモードで検索すると途中で変更できたり、新規作成や保存のときに調整することができます!
また、jpgではCMYKもRGBも色の指定ができるのですが、pngはCMYK非対応なので気をつけてください^^

うっかり忘れてしまうこともあるので私も今後注意していきたいと思います…
それでは今回はこれにて。
阿川でした~(・ω・)ノシ