-本日のアジェンダ-
1限目
実技 ECサイトデザイン実習①
課題発表
2限目
実技 ECサイトデザイン実習①
バナー作成
3限目
実技 ECサイトデザイン実習①
バナー作成
4限目
実技 ECサイトデザイン基礎①
バナー作成
5限目
実技 ECサイトデザイン基礎①
バナー発表
本日のテーマ
贈答品（食品）のバナーを作成してみましょう。
本日の課題
・お題：贈答品（食品）。
楽天トップ＞ジャンル（食品・スイーツ）＞スイーツ・お菓子
・リンク先：実在する商品購入ページ（楽天以外でも良いです。写真画像はリンク先ページから取得しましょう）
・ サイズは不問です。
・ 2商品以上作りましょう。
・提出先：【作品】バナー⑤_20210218
・ 作成したバナーのファイル名： work_〇〇〇〇_20210218_1.jpg
※ 〇〇〇〇はお名前です。
※複数作成するので末尾に数値を付けてください。
画像取得時の留意点
Chromeで、画像を右クリック＞「名前をつけて画像を保存」をしようとして、WebP形式のファイルだった場合
①画像を右クリック >「新しいタブで画像を開く」
②新しいタブのURLを画像の形式（JPG等）に変更する。
③ 「名前をつけて画像を保存」
拡張子「WebP（ウェッピー）」のファイルをJPEGやPNGなどに変換する方法
WEBPをJPGに変換
Photoshopの操作
- （横書き・縦書き）文字ツール
- 長方形ツール
- 整列ツール（等間隔に分布 ・〇〇方向に分布 ）
- レイヤースタイル（境界線・ カラーオーバーレイ・ 光彩（外側）・ドロップシャドウ）
- アートボードツール
- 書き出し形式…（①ファイル＞書き出し②レイヤー右クリック）
- グラデーションツール（レイヤーマスクへの適用）
- レイヤーの『不透明度』と『塗り』（境界線の掛け方）
- フィルター＞シャープ＞アンシャープマスク【New】
練習用素材
参考サイト
バナー集
- バナーデザイン専門ギャラリーサイト
- バナーデザインまとめサイト
- イケてるバナーをデザインするための「3つの秘訣」
- Pinterest ※アカウント登録が必要（学校の環境で閲覧しないでください）