RGBとCMYKの違いを教えてください。

Question

こんにちは。
webデザインなどの学校を卒業したわけでもないのに、HPを作成する担当になってしまいました。画像等はイラストレーターを使用して作成していますが、その際の色の設定とか、いい書き出し方法とか、全くといっていいほど分かってない状態です。イラストレーターで作成した画像を、HP用にするにはJPEGやGIFで書き出せばよい、ということと、色の設定にはRGBとCMYKというものがあるらしい、ということくらいは分かりますが、どのような画像をどのように処理する、というのが分からないのです。
そんなの自分で本でも見て勉強しろよ、って感じですが、上からとにかく急いで、といわれているので、調べながら作成する時間がないんです（言い訳）。
また、デザイン関係のことを勉強するのに、良い本などがありましたら教えてください。
我ながら図々しいですが、よろしくお願いします。

noname#3077 · Accepted Answer

時間ができたときに、また見に来られるかな？

＞写真以外でも、グラデーションなどの画像なら…
そのとおりですね。

基本的にＧＩＦは256色までの画像の場合有効な形式です。
（ロゴや、簡単なイラストなどに有効です。逆に色数の少ない写真とかなら、ＧＩＦの方が効率がいい場合もあります…。）

それ以上の色数がある場合（グラデーションや、精巧なイラストなどもこの場合に含まれます）はＪＰＥＧの方がよいと思います。

どちらが良いかな？という場合はとりあえず両方で出力してみて、『より綺麗に見えるほう・容量の軽い方』を選んでください。（どこまで汚くて許せるか、どこまで重くて許せるか…と考える必要がありますね）

基本的に印刷を目的としていないのなら、全てＲＧＢモードで作成しておくのが吉かと思います。

と、前回の補足も兼ねて書き込みにきました。

noname#3077 · Answer

補足です。

カラーパレット（色を選択するためのパレットです）の上右側にある▲（実際は左向きの三角ですね）をクリックすると、カラーモードの選択ができると思います。ここで「ＲＧＢ」を選択してください。

Ver9以降限定かもしれませんが、
新規ファイルの作成にどうやら「ＲＧＢモード」を指定するオプションもあるようです。

グラデーションがCMYKモードになってしまうというのは…ちょっと判りません。
＃ もしかしたら、一部ＲＧＢになっていない色を使用している、とか。
＃ もしくはそういう仕様なのかもしれません…。（いい加減なアドバイスでごめんなさい…。）

イラストレーターが手元に無いので詳しく回答できないのです…（古い記憶とネット検索に頼ってのアドバイスで申し訳ないです）。
応援しかできませんが、頑張ってくださいね～。

mat-21 · Answer

こんにちは(^o^)/~
ウェブデザインの仕事をしている者です。
デザインはIllustratorで行って、
Web用の処理はPhotoshopに一緒に付いてきた、
Imageleady(スペル違ったかも)で処理すると、
あっとゆうまに、Web用の画像ができちゃいますよ！
WEBにしたときのプレビューも見られるし、
解像度もRGBだのとかぜんぜん心配しなくても大丈夫だし、
illustratorでのレイヤー分けもそのまま開けるし、
などなど…。
画像ボタンなどのロールオーバー効果なんかも
簡単(?)にできるよ～。
ちなみにMacromediaのFireworksってのもあるよ。
僕の場合はAdobeの方が使いやすいからImageLeadyを使ってます。
使い方はPhotoshopとほぼ同じだけど、
Web用だったらImageLadyの方が使いかってがいいと思う。
ではでは

kenkenkent · Answer

まず、画像の形式からですね。
ホームページに使える画像は、JPEG、GIF、PNGの3つ
です（まぁ、SWFっつーテもありますが、今回は除外）。
それぞれに特色があります。
まず、JPEGは、フルカラーが扱えるのが特徴です。
したがって、微妙な色彩の違いを要求される、写真などの
表現に向いています。ただし、欠点としては、画像を
圧縮する際に（JPEGは非可逆圧縮技術）、JPEG偽色と
呼ばれるノイズが出たりしてしまう点が挙げられます。
画質を高く（圧縮率を低く）設定すると、それほど容量が
小さくならないのも弱点でしょうか。

GIFは、可逆性圧縮の為、JPEGのようなノイズは出ません。
が、256色までしか使えないという弱点がある為、写真を
256色に変換する際に、グラデーション部分などが汚く
なってしまう事が考えられます。特徴としては、ノイズが
出ない為、単色の塗りつぶしが多いロゴやイラストなど
では、JPEGよりもキレイに表現できたりします。また、
使用している色の内、任意の色を透明として扱う事が
できる為、例えば、ホームページの背景にロゴだけを
切り抜きで乗せたい、というような場合に有効です。
また、パラパラマンガのようなアニメーションGIFという
物も作る事ができます。

PNGは、GIFに代わるフォーマットとして開発されました。
が、対応していないブラウザーもあり、採用には注意が
必要です（Mac版のネットスケープ4.7では表示されない）。


次に、色の話です。
RGBは、光の3原色とも呼ばれ、赤(Red)、緑(Green)、
青(Blue)の3色の光で全ての色を表現します。まぁ、
簡単に言うと自然界の色は、全部RGBな訳ですわ。
ただ、困った事に、印刷物で全ての色を表現するのに、
全部の色のインクを作る訳にはいかないので、なんとか
少ない数のインクで表現できるようにと作られたのが
CMYKです。本来は青(Cyan)、赤(Magenta)、黄(Yellow)
の3色のハズだったのですが、どうしても、真っ黒を表現
するのに、都合が良かったんで、黒(Kuro,人によっては
blacKとも言う)を加えた4色のインクで色を表現します。
ひらたく言ってしまうと、CMYKはRGBの中に含まれます。
基本的に、印刷に使う画像でもなければ、CMYKにする
メリットはほとんど無いでしょう。単に、色がくすんで
データが重くなってしまうだけで。ついでに言うと、
CMYKのGIFと言うのは存在しませんし、CMYKのJPEGも
表示がコケる可能性があるのでお薦めしません。
ホームページに使うのであれば、まず絶対的にRGBか
インデックスカラー（RGBの内の256色、GIFで使うカラー）
です。

画像の解像度については、基本的に原寸で72dpi（Dot
Per Inchの略で、1インチの間にいくつ点が打てるか。
数字が大きい程、きめ細かい画像と言える）ですね。
Winでは96dpi表示のマシンもあるようですが、全体的に
パソコンでは72dpi表示が多いと思いますので。

a-sato · Answer

補足ですが、簡潔に説明しますと、Jpegは主に写真の保存形式。
gifは主に写真以外の画像の保存形式と考えれば良いと思います。

設定はRGBでOKです。解像度をかなり甘め(72pix/inchぐらい)にして
作成するとイイと思います。（ネット上での表示速度の関係で。）

専門家ではありませんが、わたしはこんなカンジで作ってますよ。

noname#3077 · Answer

では、簡単に。

RGB…コンピュータ画面に表示する目的のもの。
■R…赤/G…緑/B…青
光の三原色です。（全部が100％だと真っ白になります）

CMYK…印刷出力が目的ものも。
■C…シアン（水色の濃い色 Cyan）/M…マゼンタ（濃い赤 Magenta）/ Y…イエロー（Yellow 黄色）/K…ブラック（黒 blacK）
色の三原色＋黒です。（全部が100％だと真っ黒になります。絵の具と同じ方式ですね）

ウェブ用ということなので、RGBでよいのではないでしょうか。

RGBとCMYKの違いを教えてください。

時間ができたときに、また見に来られるかな？

補足です。

こんにちは(^o^)/~

まず、画像の形式からですね。

補足ですが、簡潔に説明しますと、Jpegは主に写真の保存形式。

では、簡単に。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング