実技 ECサイトデザイン実習①

-本日のアジェンダ-

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】

練習用素材


参考サイト

バナー集