新型コロナウイルス感染症(COVID-19)対策のため、教室ではマンツーマンレッスンのみを受付。※オンライン講座は随時受け付けております。

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

目次

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

RGBとCMYK

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

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

解像度とは

同じくPhotoshopでファイルを新規作成する際に出てくる解像度という欄があります。
これはWebのときは72と設定します。解像度は画面上にあるピクセルの数となります。

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

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

画像はそれぞれの用途に応じて適切な種類をえらぶ必要があります。
Photoshopなどで画像を作成したときに、いったいどの形式で画像を書き出せばよいのでしょうか。

JPEGPNGGIFSVG
写真やグラデーションの表現に適しているCMYK不可
印刷には適さない
アニメーションが可能
CMYK不可、印刷には適さない
ベクター画像
ウェブに適している
透明不可
容量比較的軽い場合によってはだいぶ重い軽い軽い
劣化非可逆圧縮可逆圧縮可逆圧縮

結局何を使えばいいのか!と迷った場合のために端的にまとめますと、
JPEGは写真などに適している。
PNGは透過させたい時に適している。
※JPEGよりもサイズが重くなりやすいので、場合によって使い分けが必要
となります。

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

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

ビットマップ(ラスター)画像

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

ベクター画像

  • ソフト:Adobe Illustrator、他
  • 拡大縮小してもクオリティは変わらない(ベクターデータは数値データをもとにして演算によって画像を表現するため)
  • ロゴを作るときはこっち(看板にしてもウェブにしても同じクオリティ)

この記事を書いた人

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

目次
閉じる