学科 ECサイトデザイン基礎②

-本日のアジェンダ-

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】

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です