Global Information site~siruzou

Photoshopの設定でくすんだ画像を鮮やかに見せる小技

image editing

私が初めてWEB制作の現場に携わったときのこと、そこでのWEB制作は多分にもれずポスターやチラシを元にWEBページを作るというものでした。

就業当初、クライアントの役員さんが事あるごとに「うちの会社のサイトは色が暗い。くすんでいる」と気にされていたのです。

実際サイトを拝見した印象は、全体的にパーツの色がくすんでいるし、写真画像はぼやけているような気がする……。本来なら色指定があるロゴの色までもなんとなく違って見えました。

どうしてそんなことになってしまっていたのでしょうか。それは紙媒体のデータとWEBブラウザでのカラーモードが違っているからなのです。

紙媒体~印刷物では、CMYKというカラーモードが使われています

これは簡単に言うと、色を分解して4色のインクを混ぜ合わせることで印刷時に再現するというものです。

スポンサーリンク

CMYKは、シアン(C/青系)、マゼンダ(M/ピンク系)、イエロー(Y)、キー・プレート(K/輪郭を引くための色~通常は黒)のことを言います。

一方、ブラウザ、モニター上で表現されるカラーモードはRGBというものが使われています。R(赤)、G(緑)、B(青)の3色で、いわゆる光の三原色と呼ばれるものです。

カラーモードをRGBに変更しておく

CMYK と RGBのイメージの違い
スポンサーリンク

CMYKでは色を重ねていくとくすんで行き、やがて黒に近づいていきます。RGBでは色を重ねていくと白に近づいていくという性質があります。まるで正反対ですよね。

CMYKで作られたパーツは、印刷物では鮮やかな発色をする割合でも、ブラウザ上ではやや暗く沈んで見えてしまいます。

それを少しでも解消するために、CMYKで作られたデータはWEBパーツとして書き出す前に、Photoshopなどを使ってRGBにカラーモードを変更しておくと、色が沈みません。

Photoshopでのカラーモードの変更は、ツールバー>イメージ>モード から、RGBとCMYKが選べるようになっています。

また、カラーモードを変更した場合は、カラーのダイアログもCMYKからRGBに変更しておきましょう。

こちらはカラーモードのパネルの右上部分から設定ができるようになっています。

スポンサーリンク

Pocket
LINEで送る

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

知る蔵のTwitter~フォーローをお願います

知る蔵グループ関連専門サイト

ページ上部へ戻る