画像を作るためにPhotoshopを使うときに「Web用の画像を作るか・印刷用の画像を作るか」によって設定すべきことがあります。
目次
カラーモード・解像度
カラーモードにはRGBカラーとCMYKカラーの２種類があります。
おおざっぱに説明すると「画面で見る色（RGB）」と「印刷する色（CMYK）」となります。
これを間違えて設定すると画面で思っていたピンク色にならない、印刷したときに思っていた緑ではない、などといった相違が起こります。
同じくPhotoshopでファイルを新規作成する際に出てくる解像度という欄があります。
これはWebのときは72ppiと設定します。
解像度とは画面上の 1インチの中にあるピクセルの数（画像の密度）となります。
Web用の画像の場合にはppiは72以上にしても画質が良くなることはありません（Retina対応の場合解像度を2倍にするのではなくて、画像のサイズを2倍にして、CSSでサイズのコントロールをしましょう）実際に画像をこちらのページで比較してください
画像のいろんな拡張子：JPEG、PNG、GIF、SVG
画像はそれぞれの用途に応じて適切な種類をえらぶ必要があります。
Photoshopなどで画像を作成したときに、そのまま保存するとPhotoshopのファイル（.psd）となります。
編集用ファイルとしてpsdファイルは保存しておく必要がありますが、お客様に提出したり、Webサイトに読み込む画像は別途必要です。いったいどの形式で画像を書き出せばよいのでしょうか。
| 拡張子 | 特徴 |
| .psd | Photoshopを作成したときに保存すると生成されるファイル。 レイヤー情報を保持しており編集・修正が可能（つまりこの拡張子のファイルを保存しておかないと、文字や位置の調整は不可能） |
| .jpg | 写真やグラデーションの表現に適している 非可逆圧縮（保存の度に画質は劣化） 透過部分がない写真画像はJPGを選ぶのがおすすめ |
| .png | 透明背景の画像に適している 可逆圧縮（画質が劣化しない） 容量が大きくなりがち |
| .gif | 容量が小さいが256色しか表現できない |
| .svg | ベクター画像 Webに適している |
| .webp | 画像容量が軽い 透明背景が可能 非対応ブラウザがあるため、使用は注意が必要 WebPはウェッピーと読む |
ビットマップ画像とベクター画像について
拡大した時の差は下記の通り
ビットマップ（ラスター）画像
- ソフト：Adobe Photoshop、他
- 画像は拡大すると荒れる
- 写真やグラデーションなど美しい色合いが表現できる
- スマホなどで撮った画像はこのラスター画像である
ベクター画像
- ソフト：Adobe Illustrator、他
- 拡大縮小してもクオリティは変わらない（ベクターデータは数値データをもとにして演算によって画像を表現するため）
- ロゴを作るときはこっち（看板にしてもウェブにしても同じクオリティ）
