ウェブ制作に関係する「色」と「画像」のおはなし

Photoshopで新規作成する時のRGBとCMYK?解像度?

RGBとCMYK

ウェブで使う画像を作るためにPhotoshopを使うときには必ずカラーモードを「RGB」にします。
Photoshopでファイルを新規作成する際は、最初の画面で「カラーモード」が「RGBカラー」となっている状態で「作成」です。

Photoshopの新規作成画面

ここではRGBカラーとCMYKカラーという2種類からカラーモードを選ぶのですが、このカラーモードとはなんでしょうか。

この2種類から選ぶ理由をおおざっぱに言うと「画面で見る色」「印刷する色」とわけることができます。RGBカラーは画面で見る色、CMYKカラーは印刷する色、とおぼえましょう。

解像度とは

同じくPhotoshopでファイルを新規作成する際に出てくる解像度という欄がありますね。
これはWebのときは72、印刷のときには300〜350dpiです(解像度はdpi、1インチの中にドット(点)がどれだけあるか)

Web用の画像の場合にはdpiは72以上にしても画質が良くなることはありません、Web用の解像度というと単純にピクセルの数をさすと思っておいてください。(Retina対応の場合、解像度を2倍にするのではなくて、画像のサイズを倍にする)

実際に画像をこちらのページで比較してください

ビットマップ画像とベクトル画像について

拡大した時の差は下記の通り

ラスター画像

  • ソフト:Adobe Photoshop、他
  • 画像は拡大すると荒れる
  • 写真やグラデーションなど美しい色合いが表現できる
  • スマホなどで撮った画像はこのラスター画像である

ベクター画像

  • ソフト:Adobe Illustrator、他
  • 拡大縮小してもクオリティは変わらない
  • ロゴを作るときはこっち(看板にしてもウェブにしても同じクオリティで見える)

画像のいろんな拡張子:JPEG、PNG、GIF

JPEG PNG GIF
色の数 約1677万色 約1677万色 256色
透明 不可
容量 比較的軽い 場合によってはだいぶ重い 軽い
劣化 非可逆圧縮(上書き保存の度に劣化する) 可逆圧縮 可逆圧縮
使いどころ 写真やグラデーションが入ったものに最適 写真やグラデーション、ベタ塗りなど両方OK、写真と透明を同時に実現したいときなど 単色・ベタ塗りのアイコンなど、アニメーション画像も可

SVGという拡張子もありますが、それはまた別のおはなしで。

ウェブ担当者向けHTML/CSS講座
ウェブサイト解析基礎コース(解析・改善)
デザインソフト基礎コース

この記事を書いた人

Matsuo

Matsuo

[経験]
・制作(Photoshop・Illustrator/HTML・CSS・jQuery・WordPress)
・アクセス解析/SEOライティング/運用改善/企画提案
・講師(職業訓練校/スクール/企業出向)
[活動]
大阪・東京でWeb制作を中心に活動。
また「拡げるキッカケを共創する」を活動指針として
①未来を切り開くスキル習得サポート、②自立したウェブサイト運用のアシスト、を行う。