-本日のアジェンダ-
1限目
学科 ECサイトデザイン基礎②
ECサイトのファッション系バナー
2限目
学科 ECサイトデザイン基礎②
レイヤースタイルについて
3限目
学科 ECサイトデザイン基礎②
バナー作成
4限目
学科 ECサイトデザイン基礎②
バナー作成
5限目
学科 ECサイトデザイン基礎②
バナー作成
本日のテーマ
良いバナーのレイアウトや工夫を参考にしましょう。
本日の課題１
ドロップボックスにある『見本の素材』をダウンロードし、模写したバナーをJPEG形式（低画質）で提出してください。
サイズ：350px × 350px（正方形）
提出先：【作品】バナー③_20210216-1
ファイル名： work _〇〇〇〇_ 20210216-1.jpg
※ 『見本の素材』は、上記フォルダに格納しています。
本日の課題２
・お題：ECサイトに掲載するファッション系バナーを作成
・”楽天ランキング2020″ に表示されているバナーデザイン（レイアウト・配色）を参考につくりましょう。
楽天市場トップ > 楽天年間ランキング2020 > レディースファッション
楽天市場トップ > 楽天年間ランキング2020 > メンズファッション
・リンク先：各商品購入ページ（写真画像を取得しましょう）
・提出先：【作品】バナー③_20210216-2
・ 5限目修了時に提出
■提出ファイル
デザインを参考にするバナー：
work _〇〇〇〇_ 20210216-2-before.jpg （またはpng）
作成したバナー：
work _〇〇〇〇_ 20210216-2-after.jpg
Photoshopの操作
- （横書き・縦書き）文字ツール
- 長方形ツール
- 整列ツール（〇〇揃え・〇〇方向に分布【New】）
- ガイド
- レイヤースタイル（境界線・ カラーオーバーレイ・ 光彩（外側）・ドロップシャドウ【New】）
- アートボードツール
- 書き出し形式…（①ファイル＞書き出し②レイヤー右クリック）
- グラデーションツール（レイヤーマスクへの適用）【New】
- レイヤーの不透明度と塗り（境界線の掛け方）【New】
画像取得時の留意点
Chromeで、画像を右クリック＞「名前をつけて画像を保存」をしようとして、WebP形式のファイルだった場合
①画像を右クリック >「新しいタブで画像を開く」
②新しいタブのURLを画像の形式（JPG等）に変更する。
③ 「名前をつけて画像を保存」
拡張子「WebP（ウェッピー）」のファイルをJPEGやPNGなどに変換する方法
WEBP JPG 変換 – 画像ファイルをオンラインで変換する
WEBPをJPGに変換