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

-本日のアジェンダ-

1限目
実技 ECサイトデザイン実習①
課題発表

2限目
実技  ECサイトデザイン実習①
バナー作成

3限目
実技 ECサイトデザイン実習①
バナー作成

4限目
実技 ECサイトデザイン基礎①
バナー作成

5限目
実技 ECサイトデザイン基礎①
バナー発表

本日のテーマ

サイズ違いでバナーを作成してみましょう。

デザインはまず真似をする事が上達の近道です。
「参考にするバナー」を読み解き、デザインの3要素を真似しましょう。

【1】文字デザイン
【2】配色デザイン
【3】レイアウトデザイン

本日の課題(1つ目)

  • お題:まずは、真似をすることで昨日テーマのブラッシュアップしましょう。
  • サイズ:自由です。
  • 1個作りましょう。
  • 提出先:【作品】バナー⑤
  • 3限目修了迄に提出

提出ファイルの形式について

①参考にしたバナー: task_(お名前)_(日付)_a1.jpg(またはpng)
②作成したバナー: task_(お名前)_(日付)_b1.jpg
※2個目の作成は、末尾にa2, b2 という名前を付けてください。

画像取得時の留意点

Chromeで、画像を右クリック>「名前をつけて画像を保存」をしようとして、WebP形式のファイルだった場合
①画像を右クリック >「新しいタブで画像を開く」
②新しいタブのURLを画像の形式(JPG等)に変更する。
③ 「名前をつけて画像を保存」

拡張子「WebP(ウェッピー)」のファイルをJPEGやPNGなどに変換する方法

Photoshopの操作

  • (横書き・縦書き)文字ツール
  • 長方形ツール
  • 整列ツール(等間隔に分布 ・〇〇方向に分布 )
  • レイヤースタイル(境界線・ カラーオーバーレイ・ 光彩(外側)・ドロップシャドウ)
  • アートボードツール
  • 書き出し形式…(①ファイル>書き出し②レイヤー右クリック)
  • グラデーションツール(レイヤーマスクへの適用)
  • レイヤーの『不透明度』と『塗り』(境界線の掛け方)