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

-本日のアジェンダ-

1限目
実技 ECサイトデザイン実習⑤
コンペ結果の発表

2限目
実技 ECサイトデザイン実習⑤
ポートフォリオ用作品の整備

3限目
実技 ECサイトデザイン実習⑤
ポートフォリオ用作品の整備

4限目
実技 ECサイトデザイン実習⑤
ポートフォリオ用作品の整備

5限目
実技 ECサイトデザイン実習⑤
ポートフォリオ用作品の整備

本日のテーマ

これまでの作品をポートフォリオ用にブラッシュアップしましょう。

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

-本日のアジェンダ-

1限目
学科 ECサイトデザイン基礎③
課題発表

2限目
学科 ECサイトデザイン基礎③
バナー作成

3限目
学科 ECサイトデザイン基礎③
バナー作成

4限目
学科 ECサイトデザイン基礎③
バナー作成

5限目
学科 ECサイトデザイン基礎③
バナー発表

本日のテーマ

贈答品(食品)のバナーを作成してみましょう。

本日の課題

  • お題:贈答品(食品)。 『敬老の日』に贈り物をする人がクリックしたくなるバナーを作成しましょう
  • リンク先:実在する商品購入ページ(楽天以外でも良いです。写真画像はリンク先ページから取得しましょう)
  • サイズは不問です。
  • 2商品以上作りましょう。
  • 提出先:【作品】バナー④敬老の日バナー_200831
  • 4限目途中13:40修了時に提出

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

①作成したバナー: task_〇〇〇〇_yymmdd_1.jpg
 ※ 〇〇〇〇はお名前です。
 ※複数作成するので末尾に数値を付けてください。
②遷移先のURL: task_〇〇〇〇_yymmdd.txt
 ※terapadで作成して提出してください。

画像取得時の留意点

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

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

Photoshopの操作

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