-本日のアジェンダ-
1限目
学科 ECサイトデザイン基礎②
パスパネルについて
2限目
学科 ECサイトデザイン基礎②
ベクトルマスクについて
3限目
学科 ECサイトデザイン基礎②
バナー制作
4限目
学科 ECサイトデザイン基礎②
バナー制作
5限目
学科 ECサイトデザイン基礎②
バナー制作
本日のテーマ
Photoshopのマスクを攻略しましょう
【Photoshop】マスクについて
Photoshopのマスクのかけ方は、大きく分けて、『クリッピングマスク』、『レイヤーマスク』、『ベクトルマスク』の3種類があります。
それと選択ツールの調整で使うクイックマスクモードがあります。
【Photoshop】ベクトルマスク
ベクトルマスクとは、その名のとおりベクトル画像のマスクを言います。 レイヤーマスクがペイントツールなどを使うのに対し、ベクトルマスクはペンツール、シェイプツールを使用して作成します。 マスクで塗りを適用した部分だけに画像を表示するという機能です。
https://ferret-plus.com/3466
【Photoshop】パスパネル
パスパネル. ペンツールやシェイプツールで作成したパス一覧を表示してくれます。パスで画像をくりぬく”クリッピングマスク”の設定もここでできます。
https://saruwakakun.com/design/photoshop/panel
- Photoshop のパス管理 – Adobe Help Center
- Adobe Photoshop でパスを編集 – Adobe Help Center
- Photoshopのパネルの使い方：ドッキングするには？消えてしまったら？
（本日の練習素材） ※【Photoshop】 ベクトルマスクとパスパネル
【Photoshop】被写体の選択
Adobe Sensei（人口知能）を使った選択範囲の作成で、1クリックで被写体をおおまかに選択できるので、かなりの時間短縮になります。
選択範囲＞被写体を選択
参考サイト
- Photoshopの選択範囲の作成が驚くほど簡単に！CC 19.1のアップデートで、Adobe Sensei（人工知能）が使える
- Adobe Senseiに手伝ってもらってカンタンに写真を切り抜いてみた
- 【photoshop】 Adobe senseiの「被写体を選択」は実際現場で使えるのか？
数字の見せ方を工夫しましょう
数値を強調したい場面で、単位が大きすぎると、数値のインパクトがなくなってしまい、数値を認識・記憶しにくくなります。数字に対して単位を一回り小さくすると、認識しやすさが向上しインパクトが出てきます。
本日の課題
ECのポータルサイトに実在する商品（家電や日曜雑貨等の）ページに遷移するバナーを作成します（JPEG形式）。
サイト内に存在する写真素材で練習してみましょう。
数値の見せ方（単位や記号）留意してみましょう。
サイズ違いで作ってみましょう。
～ バナーサイズ ～
横長1：「横幅：1000px × 縦：自由」
横長2：「横幅：750px × 縦：自由 」
正方形：「横幅：240px × 縦： 240px 」