Photoshopの基本・レイヤー
ビットマップと解像度・カラーモード
| 解像度 | 用途 | 理由 |
|---|---|---|
| 72 dpi | Web・画面表示 | ディスプレイの表示解像度が72〜96dpiのため |
| 150 dpi | 家庭用プリンター出力 | 一般的な家庭用プリンターの印刷品質に対応 |
| 300 dpi | 商業印刷・名刺・チラシ | 印刷会社が要求する標準解像度 |
| カラーモード | 用途 | 特徴 |
|---|---|---|
| RGB | Web・ディスプレイ表示 | 光の三原色。表現できる色域が広い |
| CMYK | 商業印刷 | インクの4色。RGBより色域が狭い |
| グレースケール | 白黒印刷・マスク用途 | 白〜黒の256段階 |
制作途中でカラーモードを変換すると色がずれる
RGBからCMYKに変換すると、鮮やかな色が印刷範囲外(色域外)として変換されくすんだ色になる。印刷物はCMYKで新規作成してから制作を始めること。
Photoshopの画面構成
ツールバー(左)
移動・選択・ブラシ・消しゴム・テキスト・切り抜きなど。Vで移動ツール、Bでブラシ
オプションバー(上)
選択中ツールの設定(ブラシサイズ・不透明度・ブレンドモードなど)
ドキュメント(中央)
実際に作業するキャンバスエリア
レイヤーパネル(右下)
重ね順・表示/非表示・ロック・ブレンドモード・不透明度を管理
レイヤーの概念と操作
レイヤーは透明なフィルムの重ね合わせをイメージします。各レイヤーを独立して編集できるため、他の要素に影響を与えずに作業できます。
| 操作 | 方法 |
|---|---|
| 新規レイヤー作成 | レイヤーパネル下部の「+」アイコンをクリック |
| レイヤーの複製 | レイヤーを右クリック → レイヤーを複製 |
| 表示/非表示の切替 | レイヤー左の目のアイコンをクリック |
| グループ化 | 複数レイヤー選択 → Cmd+G(Mac)/ Ctrl+G(Win) |
レイヤー名は必ず付ける
「レイヤー1」のような自動名称のままにしない。「背景」「ロゴ」「ヒーロー写真」など最初からわかりやすい名前をつける習慣が重要。後から何のレイヤーかわからなくなる。
基本ツール
| ツール | ショートカット | 主な用途 |
|---|---|---|
| 移動ツール | V | レイヤーを移動・位置を変更 |
| 自由変形 | Cmd+T | 拡大縮小・回転・変形 |
| 切り抜きツール | C | キャンバスのトリミング・比率変更 |
| スポイトツール | I | 画像から色を抽出してカラーに設定 |
自由変形のShift制約はPhotoshop 2020以降で変わった
Photoshop 2020以降は自由変形(Cmd+T)後にドラッグするだけで縦横比が固定される。旧バージョンはShiftが必要だったが、2020以降はShiftを押すと縦横比が崩れるので注意。
- Web用は72dpi・RGB、商業印刷は300dpi・CMYKで新規作成する
- 制作途中でRGB→CMYKに変換すると色がずれるため最初から設定を合わせる
- レイヤーは透明フィルムの重ね合わせ。各レイヤーが独立して編集できる
- レイヤーには最初からわかりやすい名前をつける習慣をつける
選択・切り抜き・マスク
選択ツール各種
| ツール | ショートカット | 向いている場面 |
|---|---|---|
| 長方形・楕円形選択 | M | 単純な形の範囲選択 |
| なげなわツール | L | フリーハンドで不規則な形を選択 |
| クイック選択ツール | W | ブラシでなぞって自動的に範囲を拡張 |
| 被写体を選択 | (上部バー) | AIが自動で人物・物体を選択 |
| 空を選択 | (上部バー) | AIが空の範囲を自動選択 |
レイヤーマスクと切り抜き合成
レイヤーマスクは白黒の「マスク画像」で表示・非表示を制御します。黒で塗ると非表示、白で塗ると表示。元の画像を破壊せずに切り抜き・合成ができます。
マスクは白=表示、黒=非表示
この原則を覚えるだけでレイヤーマスクの操作が直感的になる。「選択とマスク」(Properties)では髪の毛など細かい部分を精密にマスク処理できる。
- 「被写体を選択」でAIが人物・物体を自動選択。細部はクイック選択で調整する
- レイヤーマスクで元画像を破壊せずに切り抜き合成ができる
- マスクは白=表示、黒=非表示の原則を覚える
色調補正・レタッチ・フィルター
色調補正
- 明るさ・コントラスト — 全体的な明るさとメリハリを調整
- トーンカーブ — シャドウ・中間調・ハイライトを独立して精密に制御
- 色相・彩度 — 特定の色だけを選んで色を変えたり、全体の彩度を調整
- カラーバランス — シャドウ・中間調・ハイライトの色かぶりを修正
色調補正は「調整レイヤー」を使う
色調補正は調整レイヤーとして追加すると非破壊で編集できる。元の画像を直接変更しないため、いつでも修正・削除が可能。「イメージ → 色調補正」は避けること。
肌レタッチとフィルター
- スポット修復ブラシ(
J)— ニキビ・シミをクリックするだけで除去。AIがテクスチャを読んで自動補正 - パッチツール — 広い範囲を別の部分のテクスチャで置き換え
- フィルターギャラリー — 60種類以上のアーティスティック・テクスチャ・スケッチ系フィルターを適用
- 色調補正は調整レイヤーで非破壊的に行う
- トーンカーブはシャドウ〜ハイライトを精密にコントロールできる最重要ツール
- スポット修復ブラシは余計な部分をAIがテクスチャを読んで自動補正する
バナー制作・書き出し
テキストレイヤーとスマートオブジェクト
- テキストレイヤー — ベクターベースのため拡大しても劣化しない。ダブルクリックで編集モード
- スマートオブジェクト — 元データを保持したまま変形。拡大縮小しても品質が落ちない
IllustratorファイルをスマートオブジェクトとしてPhotoshopに配置
AIファイルをスマートオブジェクトとして配置すると、Illustratorで更新が即反映される。ロゴや複雑なベクター素材はこの方法で使うと編集しやすい。
バナー制作の流れ
- 新規ドキュメント作成(サイズ例:728×90px、300×250px)
- 背景レイヤーにカラーまたは画像を配置
- テキストレイヤーでキャッチコピーを配置
- CTAボタン(長方形レイヤー+テキストレイヤーでグループ化)を作成
- 調整レイヤーで全体の色調を整える
Web用書き出しとアクション
| 書き出し方法 | 説明 |
|---|---|
書き出し形式(Cmd+Option+W) | PNG・JPEG・GIFを選んで書き出し。品質・サイズを調整 |
| アクション | 複数の操作を記録・再生して繰り返し作業を自動化 |
| バッチ処理 | アクションをフォルダ内の全ファイルに一括適用 |
- スマートオブジェクトを使うと元データを保持したまま変形・編集できる
- バナー制作は新規ドキュメントのサイズ設定から始める
- アクションで繰り返し作業を自動化し、バッチ処理で一括実行できる