2025年9月19日 本日は、フォトショップを使ってサムネイル画像作成実習を行いました。
本日のアジェンダ
1限目
実技 ECサイトデザイン実習①
Photoshopの機能について
2限目
実技 ECサイトデザイン実習①
Photoshopの機能について
3限目
実技 ECサイトデザイン実習①
サムネイル画像 作成
4限目
実技 ECサイトデザイン実習①
サムネイル画像 作成
5限目
実技 ECサイトデザイン実習①
サムネイル画像 講評
フォトショップ操作おさらい
スマートオブジェクトにする
編集を非破壊にするために、まずはレイヤーをスマートオブジェクトに変換する。
一部の操作（フィルターの一部、ブラシ描画など）はスマートオブジェクトではできない場合がある。→ その時はラスタライズして編集を行う！
マスクの基本操作
1. レイヤーマスクを追加する
2. マスクを選択した状態で、ペンツールでパスを作成＆塗りつぶし（またはブラシでもOK）
3. 色の意味：
- 黒で描画 → マスク範囲が「増える」＝見えなくなる部分が増える
- 白で描画 → マスク範囲が「減る」＝見える部分が増える
グラデーションマスク（レイヤーマスク）
- マスクを追加する
マスクをかけたい画像のレイヤーを選択し、「レイヤーマスクを追加」アイコン（日本国旗みたいなマーク）をクリック。 - グラデーションマスクを適用する
マスクを選択した状態で、グラデーションツールを選択。
- ツールバーで、グラデーションの色（黒→白など）を選ぶ
- グラデーションの種類（線形、円形など）を選ぶ
- アートボード上でドラッグして、グラデーションの方向や位置を調整すると、
→ なめらかに透明になっていくマスク効果が作れる！
黒の部分：画像が完全に隠れる（透明）
白の部分：画像が完全に見える
グレーの部分：半透明（グラデーションでなめらかに変化）
クリッピングマスク
くり抜きたい形のオブジェクトを画像レイヤーの下に配置する
画像レイヤーを選択した状態で、右クリック →「クリッピングマスクを作成」を選ぶ
→ 画像がオブジェクトの形にくり抜かれる
くり抜いた後に形を調整したい場合は、パス選択ツール（白いカーソルアイコン）で操作できるェクトの調整はパス選択ツール（カーソルアイコンの白）でできる
色調補正
範囲選択
オブジェクト選択ツールで自動的に範囲を選択
→足りない／余分な部分は、選択ブラシツールを使い、Altキーを押しながらドラッグすると選択範囲を削れる
調整レイヤーの作成
範囲が決まったら、レイヤーパネル下の「塗りつぶしまたは調整レイヤーを新規作成」ボタンをクリック
→「べた塗り」を選択
色調補正の適用
画像のレイヤーを選択した状態で、描画モードを「通常」にすると、選択範囲内の色調を自由に変えられる
カーニング
文字の間隔を調整したいときは、Altキーを押しながら矢印キー（← →）を押す。
→ 押した方向に文字を詰めたり、離したりできる。
サムネイル画像作成してみた！
ということで、サムネイル画像作成してみました。
先生からの講評
・ぼかしを入れると良い
・文字のピクセルは16ピクセル以上にしましょう！（それより小さいと見えない）
・写真と文字の色がかぶらないようにした方が良い
・文字のカーニングもきちんとしよう！
・食べ物は色調補正でビカビカにして強調しても良い
・背景の色と文字の色が同じになってしまう場合はドロップシャドウや光彩を入れると良い
・お役所仕事っぽさを出すためにあえてダサいフォントを選んで親しみを出すというテクニックもある
コメント