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

-本日のアジェンダ-

1限目
学科 ECサイトデザイン基礎②
Photoshopの機能について

2限目
学科 ECサイトデザイン基礎②
Photoshopの機能について

3限目
学科 ECサイトデザイン基礎②
サムネイル画像 作成

4限目
学科 ECサイトデザイン基礎②
サムネイル画像 作成

5限目
学科 ECサイトデザイン基礎②
サムネイル画像 作成

本日のテーマ

サムネイル画像 について

サムネイル画像とは?

サムネイル画像は、親指(サム)の爪(ネイル)のように小さい画像という意味で、実際に撮影した画像から解像度を下げたり、圧縮したりするなどの手法で、ファイルサイズを小さくしたデータです。 情報量が少ないので読み込みが早く、一覧表示で多くの画像を素早く見ることができます。

参考サイト

本日の課題

-サムネイル画像 作成練習 ①-

サムネイル画像の作成をして下 さい。
作成したバナーを5限目終了までにドロップボックスにUPしてください。
※ファイル名は、img001_xxxx_20221220.jpg

-サムネイル画像 作成練習 ②-

サムネイル画像の作成をして下さい。
作成したバナーを5限目終了までにドロップボックスにUPしてください。
※ファイル名は、img002_xxxx_20221220.jpg

昨日までの基本知識

ECサイトについて

ECサイトとは、自社の商品やサービスを、インターネット上に置いた独自運営のウェブサイトで販売するサイトのことである。ECとは英語: electronic commerceの略。 複数の企業や個人商店がインターネット上の1か所で出店する形態のウェブサイトは、電子商店街の項目を参照。 ウィキペディア

参考サイト

バナー広告とは?

バナー はウェブページ上で他のウェブサイトを紹介する役割をもつ画像のこと。本来、旗印を意味し、ウェブページ上で広告が目立つように使われたことから、この通名で呼ばれ定着した。 主に広告・宣伝用に作られ、ウェブサイトへのハイパーリンク用にも利用される。 ウィキペディア

参考サイト

ワンポイントアドバイス

バナー作成はデザインの全ての要素が詰まっている作品です。
ポートフォリオに掲載する最も効果的なアイテムとなりますので、しっかりと良い作品作りが出来るように進めていきましょう。

覚えておくと良い基本操作

Photoshop基本操作まとめページ 基本操作⑦

バナー制作で覚えておきたい復習

  • スマートオブジェクト
  • 調整レイヤー
  • トリミング復習
  • レタッチ復習
  • クリッピングマスク
  • レイヤーマスク
  • ベクトルマスク

バナー制作で覚えておきたい技術

  • 枠作成(レイヤースタイル)
  • グラデーション(レイヤースタイル)
  • 境界線(レイヤースタイル)
  • 光と影(レイヤースタイル)
  • レイアウト/文字/配色
  • カンバスサイズ
  • Web用に書き出し( jpg gif png )

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

-本日のアジェンダ-

1限目
学科 ECサイトデザイン基礎①
ECサイトとは?

2限目
学科 ECサイトデザイン基礎
ECのお仕事について

3限目
学科 ECサイトデザイン基礎
バナー作成について

4限目
学科 ECサイトデザイン基礎
バナー制作に向けての情報収集

5限目
学科 ECサイトデザイン基礎
バナー制作に向けての情報収集

本日のテーマ

ECのお仕事を理解しましょう

ECサイト

ECサイトとは、自社の商品やサービスを、インターネット上に置いた独自運営のウェブサイトで販売するサイトのことである。ECとは英語: electronic commerceの略。 複数の企業や個人商店がインターネット上の1か所で出店する形態のウェブサイトは、電子商店街の項目を参照。 ウィキペディア

参考サイト

【資料】

Dropboxにある資料をダウンロードしましょう。
作品制作のポイントをまとめた資料です。

[保存場所]
Dropbox / DEAUアカデミー WEBデザイナー養成科 (短時間) / 資料 / 【STEP2】デザインの理解・・・「デザインの考え方」の教科書⑤.pdf

【動画】「デザインの考え方」の教科書

ワンポイントアドバイス

まずは様々な作品を見て見ましょう。
見て真似をしてまた見るの繰り返しが上達のコツです!

本日の課題

(課題提出はありません)
バナーのオリジナル制作に向けて、
集めた参考サイトや素材のリンクをメモしておきましょう。