ウェブ制作で利用する「色」と「画像」の設定について

画像を作るためにPhotoshopを使うときに「Web用の画像を作るか・印刷用の画像を作るか」によって設定すべきことがあります。

目次

カラーモード・解像度

カラーモードにはRGBカラーとCMYKカラーの2種類があります。
おおざっぱに説明すると「画面で見る色(RGB)」「印刷する色(CMYK)」となります。

これを間違えて設定すると画面で思っていたピンク色にならない、印刷したときに思っていた緑ではない、などといった相違が起こります。

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

解像度とは画面上の 1インチの中にあるピクセルの数(画像の密度)となります。

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

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

画像はそれぞれの用途に応じて適切な種類をえらぶ必要があります。
Photoshopなどで画像を作成したときに、そのまま保存するとPhotoshopのファイル(.psd)となります。

編集用ファイルとしてpsdファイルは保存しておく必要がありますが、お客様に提出したり、Webサイトに読み込む画像は別途必要です。いったいどの形式で画像を書き出せばよいのでしょうか。

拡張子特徴
.psdPhotoshopを作成したときに保存すると生成されるファイル。
レイヤー情報を保持しており編集・修正が可能(つまりこの拡張子のファイルを保存しておかないと、文字や位置の調整は不可能)
.jpg写真やグラデーションの表現に適している
非可逆圧縮(保存の度に画質は劣化)
透過部分がない写真画像はJPGを選ぶのがおすすめ
.png透明背景の画像に適している
可逆圧縮(画質が劣化しない)
容量が大きくなりがち
.gif容量が小さいが256色しか表現できない
.svgベクター画像
Webに適している
.webp画像容量が軽い
透明背景が可能
非対応ブラウザがあるため、使用は注意が必要
WebPはウェッピーと読む

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

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

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

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

ベクター画像

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

Advertising

Photoshop以外も契約したいけど、高くて躊躇していませんか?
Adobe Creative Cloudを一番安く購入する方法 →1年:39,980円の詳細を見る


世界最大級のオンライン学習サイトUdemy  ※UdemyはよくSALEをしていますので、ひんぱんにチェックして、Webデザイン講座の動画をお得にGETしてくださいね♡2000〜3000円くらいで買えることも。


ロイヤリティフリーの写真素材【PIXTA】 ※画像素材は定額制プランのあるサイトを選ぶのがオススメです。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次
閉じる