-本日のアジェンダ-
1限目
学科 ECサイトデザイン基礎②
昨日の振り返り
2限目
学科 ECサイトデザイン基礎②
課題発表
3限目
学科 ECサイトデザイン基礎②
バナー作成
4限目
学科 ECサイトデザイン基礎②
バナー作成
5限目
学科 ECサイトデザイン基礎②
バナー作成
本日のテーマ
良いバナーのレイアウトや工夫を盗みましょう。
本日の課題
- お題：ECサイトに掲載するファッション系バナーを作成
- 楽天トップ＞レディースファッション の “ランキング” に表示されているバナーを参考にしてみましょう。
- 実在するリンク先：商品購入ページ（写真画像をリンク先の店舗から取得しましょう）
- 提出先：【作品】バナー③ファッション_200828
- 5限目修了時に提出
提出ファイルについて
①参考にしたバナー： task_〇〇〇〇_yymmdd_a1.jpg（またはpng）
②作成したバナー： task_〇〇〇〇_yymmdd_b1.jpg
※2個目の作成は、末尾にa2, b2 という名前を付けてください。
画像取得時の留意点
Chromeで、画像を右クリック＞「名前をつけて画像を保存」をしようとして、WebP形式のファイルだった場合
①画像を右クリック >「新しいタブで画像を開く」
②新しいタブのURLを画像の形式（JPG等）に変更する。
③ 「名前をつけて画像を保存」
拡張子「WebP（ウェッピー）」のファイルをJPEGやPNGなどに変換する方法
Photoshopの操作
- （横書き・縦書き）文字ツール
- 長方形ツール
- 整列ツール（〇〇揃え・〇〇方向に分布【New】）
- ガイド
- レイヤースタイル（境界線・ カラーオーバーレイ・ 光彩（外側）・ドロップシャドウ【New】）
- アートボードツール
- 書き出し形式…（①ファイル＞書き出し②レイヤー右クリック）
- グラデーションツール（レイヤーマスクへの適用）【New】
- レイヤーの不透明度と塗り（境界線の掛け方）【New】