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

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

バナーの制作に向けて情報収集をしましょう。

おすすめのジャンル

  • キャンペーン
  • ファッション
  • その他自由テーマ

参考資料

ドロップボックス
資料>【2】デザインに必要な素材の作成> デザインの考え方の教科書⑤ >「「デザインの考え方」の教科書⑤.pdf」をダウンロードしましょう。
作品制作のポイントをまとめた資料です。

インターネット広告とは?

インターネット広告とは、インターネットのウェブサイトやメールを使用し、企業が製品やサービスのマーケティングのために行う宣伝活動のことである。携帯電話などのモバイル端末に表示される広告も含まれる。「ネット広告」と略されるほか、「オンライン広告」「ウェブ広告」とも呼ばれる。 ウィキペディア

インターネット広告主な種類

  • インターネット広告
  • リスティング広告(検索連動型広告)
  • 純広告
  • アフィリエイト広告
  • ネイティブ広告
  • SNS広告
  • 動画広告
  • メール広告

参考サイト

ECサイトについて

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

参考サイト

バナー広告とは?

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

参考サイト

ワンポイントアドバイス

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

本日の課題

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

学科 ECサイト運用基礎②

-本日のアジェンダ-

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

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

3限目
学科 ECサイト運用基礎②
バナー模写練習

4限目
学科 ECサイト運用基礎②
バナー模写練習

5限目
学科 ECサイト運用基礎②
バナー模写練習

本日のテーマ

まずはバナー「模写」で表現のコピーを目指しましょう。

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

  • レイヤースタイル
  • ブレンドモード
  • 塗りつぶしツール

レイヤースタイル

Photoshop では、シャドウ、光彩、ベベルなどの様々な効果を使用して、レイヤーの内容の外観を非破壊的な方法ですばやく変更できます。レイヤー効果は、レイヤーの内容にリンクされています。レイヤーの内容を移動または編集すると、変更された内容にも同じ効果が適用されます。例えば、テキストレイヤーにドロップシャドウを適用した後、新しいテキストを追加した場合、新しいテキストにも自動的にシャドウが追加されます。

  • ドロップシャドウ・シャドウ(内側)
  • 光彩(外側)
  • 光彩(内側)
  • べベルとエンボス「輪郭」「テクスチャ」
  • サテン
  • カラーオーバーレイ
  • グラデーションオーバーレイ
  • パターンオーバーレイ
  • 境界線
  • レイヤースタイルのコピー
  • レイヤースタイルのペースト

参考サイト

ブレンドモード

Photoshopブレンド描画モードの効果まとめ1【乗算・スクリーンなど】 フォトショップにはブレンドモード描画モード)といって、下にあるレイヤーに対してどういった合成をするかを設定できる機能があります。 イラストレーターにも透明パネルの中に同じような機能があるので、覚えておくと色々と使えます。

参考サイト

塗りつぶしツール

[塗りつぶし]ツールは、指定された領域を塗りつぶすためのツールです。 クリックした場所が[白]であれば、白い部分をすべて範囲として塗りつぶします。

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

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

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

  • レイアウト/文字/配色
  • カンバスサイズ
  • Web用に書き出し( jpg gif png )

本日の課題

バナー「模写」を作成してみましょう。
サイズは自由です。
作成したバナーを5限目終了までにドロップボックスにUPしてください。
※提出先・・・提出>【0009】バナー模写 6月4日(土)
※ファイル名は、bnr_xxxx_20220604.jpg