実技 写真合成・補正加工実習 2025年10月1日
講師:夏目先生
-本日のアジェンダ-
1限目
実技 写真合成・補正加工実習
画像解像度とカラーモードについて
2限目
実技 写真合成・補正加工実習
DM制作
3限目
実技 写真合成・補正加工実習
DM制作
4限目
実技 写真合成・補正加工実習
DM制作
5限目
実技 写真合成・補正加工実習
DM講評
本日のテーマ
DM・ポストカードを作ってみましょう。
定型(郵便)はがきサイズ:100×148mm
DM・ポストカード制作のポイント
可視性と配色を意識してみましょう。
写真に文字を乗せる時はとにかく可視性に気を付けましょう。
配色のバランスや影を付けたり、ぼかしやオーバレイなどの工夫を考え、写真の世界観を壊さないように表現してみましょう。
参考サイト
本日の基本操作
- 画像解像度
- モード
- 配置
画像解像度
ピクセル寸法は、画像の幅と高さのピクセル総数を示します。解像度はビットマップ画像の細かさで、1 インチあたりのピクセル数(ppi)で示されます。1 インチあたりのピクセル数が増加すると、解像度は高くなります。一般的に、画像の解像度が高いほど、プリントした画像の品質が高くなります。
参考サイト
モード
Adobe Photoshop を使って、1 つのカラーモードから別のカラーモードに変換する(CMYK から RGB、カラーからグレースケールなど)方法を説明します。
参考サイト
- Photoshop でのカラーモードの変換 – Adobe Help Center
- カラーモードはCMYKで作成|Photoshop入稿・印刷データ作成方法/注意 …
- PhotoshopのCMYK変換は「モード」より「プロファイル変換」が望ましい …
配置
Illustratorの画像配置 リンク画像と埋め込み画像の違いと正しい使い方. Illustratorに画像を配置する場合、「リンク配置」と「埋め込み」配置の、二つの方法があります。
参考サイト
- 画像(埋め込み画像とリンク画像)の配置方法
- 配置画像(リンク画像)設定:Illustrator
- ベテランほど知らずに損してるIllustratorの新常識(7)埋め込み?リンク?ビットマップ画像の配置と、配置した画像の二次利用
デザインの基本 「配色デザイン」
印刷物には「色」を欠かすことができません。白黒の単調なものよりも、いくつかの色を使ったものの方が魅力的ですし、理解を助けてくれることもしばしばあります。ですが、適当に色を選んだり、むやみにたくさんの色を使うことはよくありません。色の正しい使い方を覚えておくと、快適で見やすい発表資料ができます。
参考サイト
本日の課題
DMを作成しご自身のポートフォリオサイトに投稿してください。
5限目に講評を行います。
【MEMO】
✉️ IllustratorでハガキサイズDMを作成する手順
① 新規ドキュメント作成
- サイズ:幅100mm × 高さ148mm
- カラー:CMYKカラー(印刷用)
- 線なし(塗りのみ)
② トリムマークの作成
線あり、色なしで四角を
メニュー:オブジェクト → トリムマーク
印刷範囲を明確にするための目印
③ パスのオフセット(塗り足し・安全領域の設定)
- メニュー:オブジェクト → パス → パスのオフセット
- +3mm(外側):塗り足し領域(裁断ズレ対策)
- -3mm(内側):安全領域(文字や重要情報が切れないように)
④ ガイドの作成
作業中に領域を意識しやすくなる
オフセットしたパスを選択 → 右クリック → ガイドを作成
レイヤー分けの目的:
- 背景、テキスト、画像などを整理・管理しやすくする
- 修正や差し替えがスムーズになる
🧩 レイヤー分けのポイント
- レイヤーパネルを開く(F7キー)
- 必要に応じて「新規レイヤー」を追加
- オブジェクトを選択 → ドラッグしてレイヤーに移動
- 名前をつけておくと管理しやすい(例:背景、文字、写真)
※後からでもレイヤー分けは可能なので、まずは1枚で作っておいて、整理したくなったら分けるのもアリ!
🖼️ Photoshopで写真の両脇を生成AIで補完する方法
- 写真の左右に余白を作りたい
- トリミングされた画像を自然に広げたい
手順(Photoshop)
① キャンバスサイズを広げる
1️⃣写真を開く
2️⃣メニュー:イメージ → キャンバスサイズ
3️⃣幅を左右に広げる(例:元が1000pxなら1500pxなど)
「基準位置」を中央に設定すると、左右均等に広がる
② 生成AIで写真の左右を補完する(生成拡張)
1️⃣拡張した左右の空白部分を選択ツール(長方形選択ツールなどで選ぶ)
2️⃣メニュー:右クリック → 生成拡張(Generative Expand)
3️⃣プロンプト(指示)を入力するか、空欄で自然な補完を選ぶ
4️⃣候補が複数表示されるので、気に入ったものを選択
※Adobe Fireflyが使われているので、著作権的にも安心して商用利用できる。
🌫️ ガウスぼかしをかける方法(背景になじませる)
ぼかしたい部分を選択
1️⃣選択ツールでぼかしたい範囲(生成された部分など)を選ぶ
2️⃣必要なら「選択範囲 → 境界をぼかす」で自然なグラデーションに
ガウスぼかしを適用
1️⃣メニュー:フィルター → ぼかし → ガウスぼかし
2️⃣半径を調整(例:10〜50pxなど、画像サイズに応じて)
3️⃣OKを押して適用
<補足>
生成AIで補完した部分をスマートオブジェクトに変換しておくと、後から編集しやすい
ぼかしをレイヤーマスクで調整すると、より自然な仕上がりになる
💧マークの使い方(Illustrator)
方法①:絵文字として使う
テキストツールで「💧」を入力(Macなら⌘+Ctrl+Spaceで絵文字パネル)
フォントによって見え方が変わるので注意
方法②:図形として使う
または「シンボル」や「SVG素材」を使って配置
楕円ツール+アンカーポイントの編集で水滴型を作る
⚫️ 白黒の反転方法(Illustrator)
黒ベースのアクセスマップを白ベースに変換
方法①:背景色の変更
1️⃣黒背景を選択 → 塗りを白に変更
2️⃣他のオブジェクトの色も調整(白→黒など)
方法②:全体の色を反転
1️⃣メニュー:編集 → 編集内容を選択 → すべて選択
2️⃣メニュー:編集 → カラーを編集 → 再配色
3️⃣「カラーを反転」または手動で白黒を入れ替える
※地図の線や文字が白になってしまう場合は、個別に色を調整するのが確実
🔠 カーニングのやり方(Illustrator)
カーニングとは、文字と文字の間隔を調整すること。
1️⃣テキストを選択
2️⃣メニュー:ウィンドウ → 書式 → 文字
3️⃣「カーニング」欄で数値を調整(例:オプティカル、自動、数値指定)
数値指定:細かく手動で調整(例:-50〜100)
オプティカル:文字の形に応じて自動調整
📏 ベースラインシフトとは
文字の上下位置を微調整する機能。
使い方:
1️⃣テキストを選択
2️⃣「文字」パネルで「ベースラインシフト」の欄を調整
プラス値:上に移動
マイナス値:下に移動
よく使う場面:
小さな記号(™や®)を上にずらす
縦組みで文字の位置を揃える
デザイン的に文字を上下にずらしたいとき
参考ページ
https://gmo-miyazaki-creators.com
1️⃣メニュー:フィルター → ぼかし → ガウスぼかし
2️⃣半径を調整(例:10〜50pxなど、画像サイズに応じて)
OKを押して適用
1️⃣メニュー:フィルター → ぼかし → ガウスぼかし
2️⃣半径を調整(例:10〜50pxなど、画像サイズに応じて)
OKを押して適用
DM制作
「Cafe UP RIVER 」 OPEN DM
家の近くにある川沿いのカフェで写真は実際にカフェに行った時に撮影したものを使用しました。背景写真の両端はphotoshopの生成AIで作成し、文字を入れるためにぼかしを入れています。カフェのOPENを想定し、お店の名前やキャッチフレーズはChatGPTと相談して決めました。

