グラフィックデザイン基礎④

Photoshop基本操作

【本日のテーマ】

トリミングをして合成写真を作る。

ファイルの作成方法

Photoshop(拡張子：.psd)・Illustrator(拡張子：.ai)共にファイルの作成は

新規作成(Ctrl or command + N)
開く(Ctrl or command + O)
読み込む

で出来ている。

写真加工のおすすめルール：「非破壊データで作業を進める（非破壊編集）」

加工したい写真を取り込む（≒ファイルを開く）
レイヤーパネルで複製
スマートオブジェクトに変換（右クリック）※ 劣化予防
背景レイヤーを非表示（ロックかける）
保存

画像保存形式

カラーモードはIllustratorの CMYK（印刷用）とは異なり、光の三原色に基づくRGB。

JPG/JPEG（ジェイペグ）

拡張子	.jpg or .jpeg
色数	1,677万7,216色（フルカラー）
圧縮方法	不可逆圧縮（＝圧縮前の状態に戻せない圧縮方法）
透過	不可
データ容量	圧縮率の設定で任意に設定できる

一般的な画像形式の１つで、WEB黎明期から存在している。OSやブラウザに依らず表示サポートされているので画像形式の選択肢として間違いなし。

フルカラー対応で写真やグラデーション表示に向いている。圧縮率も柔軟に変更可能という特徴があるものの、容量を軽くしようと（＝高圧縮）すると、画像が荒れるので要注意。

GIF（ジフ）

拡張子	.gif
色数	256色
圧縮方法	可逆圧縮（＝圧縮前の状態に戻せる）
透過	１色のみ可
データ容量	軽め
その他	アニメーション可能

JPEGと並んでポピュラーな画像形式の一つ。こちらもOSやブラウザに依らない。

特徴は色数は少ないが、透過（１色のみ）とアニメーションができる。

圧縮方法は可逆圧縮。でも圧縮率は高くない。

静止画用途としてはレスポンシブデザイン主流の現在では、ボタンはCSSで装飾した方が手間がなかったり、WEBフォントの登場や後継として開発されたPNGの使い勝手が良いため使い所が限定されてきている説もあるが、アニメーションは現在でもよく利用されている。

PNG（ピング）

拡張子	.png
色数	256色 or 1,677万7,216色
圧縮方法	可逆圧縮
透過	1色 or 256色
データ容量	重め

GIFの後継として開発された画像形式。規格は下記３種類。

GIF同様256色を扱う(PNG8)
JPEGフルカラーを扱える(PNG24)
フルカラー＋256色の透明色を扱える(PNG32)

但し、拡張子は全て.pngを使用するので、画像を書き出し時以外は気にしなくてもいい。
※ Photoshopでは透明を使ったデータでもPNG24のまま書き出し操作を行うが、実際にはPNG32で書き出されている。

PNGは色数の少ないイラストから写真まで対応できる高い汎用性があり、アニメーション不可である点を除けばGIFのほぼ上位互換と言って良い画像形式。

注意点

データがやや重め
WEB用途で開発されているため、CMYK保存不可。印刷用データには他の形式へ要変換。

WebP（ウェッピー）

拡張子	.webp
色数	1,677万7,216色（フルカラー）
圧縮方法	非可逆圧縮
透過	可
データ容量	軽め

WebPはGoogleが開発した画像形式で、JPEGやPNGよりも2〜3割程度データサイズが軽くなると言われている。非可逆圧縮でありながら透過も可能な所が特徴的。データ容量が軽い点は非常に魅力的だが、表示できるOSやブラウザが限定的である点や書き出しに手間が掛かるなど問題点もあるので導入の際は要検討の必要がある（ブラウザの種類に合わせて自動的にWebPを使い分けてくれるWordPressプラグインなども登場してはいる）。