← Web制作 へ戻る
第1回

Photoshopの基本・レイヤー

ビットマップとは 解像度の考え方 RGB・CMYK ツールバー レイヤーパネル レイヤーグループ 切り抜きツール

ビットマップと解像度・カラーモード

解像度用途理由
72 dpiWeb・画面表示ディスプレイの表示解像度が72〜96dpiのため
150 dpi家庭用プリンター出力一般的な家庭用プリンターの印刷品質に対応
300 dpi商業印刷・名刺・チラシ印刷会社が要求する標準解像度
カラーモード用途特徴
RGBWeb・ディスプレイ表示光の三原色。表現できる色域が広い
CMYK商業印刷インクの4色。RGBより色域が狭い
グレースケール白黒印刷・マスク用途白〜黒の256段階
注意

制作途中でカラーモードを変換すると色がずれる

RGBからCMYKに変換すると、鮮やかな色が印刷範囲外(色域外)として変換されくすんだ色になる。印刷物はCMYKで新規作成してから制作を始めること。

Photoshopの画面構成

ツールバー(左)

移動・選択・ブラシ・消しゴム・テキスト・切り抜きなど。Vで移動ツール、Bでブラシ

オプションバー(上)

選択中ツールの設定(ブラシサイズ・不透明度・ブレンドモードなど)

ドキュメント(中央)

実際に作業するキャンバスエリア

レイヤーパネル(右下)

重ね順・表示/非表示・ロック・ブレンドモード・不透明度を管理

レイヤーの概念と操作

レイヤーは透明なフィルムの重ね合わせをイメージします。各レイヤーを独立して編集できるため、他の要素に影響を与えずに作業できます。

操作方法
新規レイヤー作成レイヤーパネル下部の「+」アイコンをクリック
レイヤーの複製レイヤーを右クリック → レイヤーを複製
表示/非表示の切替レイヤー左の目のアイコンをクリック
グループ化複数レイヤー選択 → Cmd+G(Mac)/ Ctrl+G(Win)
Point

レイヤー名は必ず付ける

「レイヤー1」のような自動名称のままにしない。「背景」「ロゴ」「ヒーロー写真」など最初からわかりやすい名前をつける習慣が重要。後から何のレイヤーかわからなくなる。

基本ツール

ツールショートカット主な用途
移動ツールVレイヤーを移動・位置を変更
自由変形Cmd+T拡大縮小・回転・変形
切り抜きツールCキャンバスのトリミング・比率変更
スポイトツールI画像から色を抽出してカラーに設定
Tip

自由変形のShift制約はPhotoshop 2020以降で変わった

Photoshop 2020以降は自由変形(Cmd+T)後にドラッグするだけで縦横比が固定される。旧バージョンはShiftが必要だったが、2020以降はShiftを押すと縦横比が崩れるので注意。

第1回まとめ
  • Web用は72dpi・RGB、商業印刷は300dpi・CMYKで新規作成する
  • 制作途中でRGB→CMYKに変換すると色がずれるため最初から設定を合わせる
  • レイヤーは透明フィルムの重ね合わせ。各レイヤーが独立して編集できる
  • レイヤーには最初からわかりやすい名前をつける習慣をつける
第2回

選択・切り抜き・マスク

選択ツール各種 クイック選択 被写体を選択 レイヤーマスク 切り抜き合成

選択ツール各種

ツールショートカット向いている場面
長方形・楕円形選択M単純な形の範囲選択
なげなわツールLフリーハンドで不規則な形を選択
クイック選択ツールWブラシでなぞって自動的に範囲を拡張
被写体を選択(上部バー)AIが自動で人物・物体を選択
空を選択(上部バー)AIが空の範囲を自動選択

レイヤーマスクと切り抜き合成

レイヤーマスクは白黒の「マスク画像」で表示・非表示を制御します。黒で塗ると非表示、白で塗ると表示。元の画像を破壊せずに切り抜き・合成ができます。

Point

マスクは白=表示、黒=非表示

この原則を覚えるだけでレイヤーマスクの操作が直感的になる。「選択とマスク」(Properties)では髪の毛など細かい部分を精密にマスク処理できる。

第2回まとめ
  • 「被写体を選択」でAIが人物・物体を自動選択。細部はクイック選択で調整する
  • レイヤーマスクで元画像を破壊せずに切り抜き合成ができる
  • マスクは白=表示、黒=非表示の原則を覚える
第3回

色調補正・レタッチ・フィルター

明るさ・コントラスト 色相・彩度 トーンカーブ 肌レタッチ フィルターギャラリー

色調補正

  • 明るさ・コントラスト — 全体的な明るさとメリハリを調整
  • トーンカーブ — シャドウ・中間調・ハイライトを独立して精密に制御
  • 色相・彩度 — 特定の色だけを選んで色を変えたり、全体の彩度を調整
  • カラーバランス — シャドウ・中間調・ハイライトの色かぶりを修正
Point

色調補正は「調整レイヤー」を使う

色調補正は調整レイヤーとして追加すると非破壊で編集できる。元の画像を直接変更しないため、いつでも修正・削除が可能。「イメージ → 色調補正」は避けること。

肌レタッチとフィルター

  • スポット修復ブラシJ)— ニキビ・シミをクリックするだけで除去。AIがテクスチャを読んで自動補正
  • パッチツール — 広い範囲を別の部分のテクスチャで置き換え
  • フィルターギャラリー — 60種類以上のアーティスティック・テクスチャ・スケッチ系フィルターを適用
第3回まとめ
  • 色調補正は調整レイヤーで非破壊的に行う
  • トーンカーブはシャドウ〜ハイライトを精密にコントロールできる最重要ツール
  • スポット修復ブラシは余計な部分をAIがテクスチャを読んで自動補正する
第4回

バナー制作・書き出し

テキストレイヤー スマートオブジェクト バナーデザイン Web用書き出し アクション・バッチ処理

テキストレイヤーとスマートオブジェクト

  • テキストレイヤー — ベクターベースのため拡大しても劣化しない。ダブルクリックで編集モード
  • スマートオブジェクト — 元データを保持したまま変形。拡大縮小しても品質が落ちない
Tip

IllustratorファイルをスマートオブジェクトとしてPhotoshopに配置

AIファイルをスマートオブジェクトとして配置すると、Illustratorで更新が即反映される。ロゴや複雑なベクター素材はこの方法で使うと編集しやすい。

バナー制作の流れ

  1. 新規ドキュメント作成(サイズ例:728×90px、300×250px)
  2. 背景レイヤーにカラーまたは画像を配置
  3. テキストレイヤーでキャッチコピーを配置
  4. CTAボタン(長方形レイヤー+テキストレイヤーでグループ化)を作成
  5. 調整レイヤーで全体の色調を整える

Web用書き出しとアクション

書き出し方法説明
書き出し形式(Cmd+Option+WPNG・JPEG・GIFを選んで書き出し。品質・サイズを調整
アクション複数の操作を記録・再生して繰り返し作業を自動化
バッチ処理アクションをフォルダ内の全ファイルに一括適用
第4回まとめ
  • スマートオブジェクトを使うと元データを保持したまま変形・編集できる
  • バナー制作は新規ドキュメントのサイズ設定から始める
  • アクションで繰り返し作業を自動化し、バッチ処理で一括実行できる