投稿者: master

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

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

今後のバナーオリジナル制作に向けて情報収集をしましょう。

バナー広告とは？

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

参考サイト

ワンポイントアドバイス

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

本日の課題

Dropbox＞WEBデザイナー養成（木・金・土）科（短時間）＞オンライン授業用Zoom ID＞「task_xxxx_20211204.txt」を使って、集めた参考サイトや素材のリンクをメモしておきましょう。※提出はありません。

学科　ECサイト運用基礎②

-本日のアジェンダ-

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

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

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

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

5限目
学科　ECサイト運用基礎②
ECサイトについて

本日のテーマ

バナー「模写」で練習しましょう

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

  • シェイプ・パス・ピクセル
  • 描画ツール
  • パス選択ツール

シェイプ・パス・ピクセル

【シェイプ】 
ベクトルデータで図形を描画します。塗り、線色、線幅を設定することが出来て、後で形状や塗りを変更することが出来ます。また、描画後に自動でベクトルレイヤーが作成されます。
【パス】 
アウトラインデータだけのシェイプです。塗り、線色、線幅が設定されていません。主に選択範囲を作成する際に使用します。
【ピクセル】 
ラスターデータで図形を描画します。後で形状や塗りを変更することが出来ません。

参考サイト

描画ツール

複数のアンカーポイントという点を結んだ線（パス）で描かれた図形のことです。
矩形や円、五角形などの所謂、図形を描いたり、カスタムシェイプツールを使って複雑な図形を描くことができます。 

  • 長方形ツール
  • 角丸長方形ツール
  • 楕円形ツール
  • 多角形ツール
  • カスタムシェイプツール

参考サイト

パス選択ツール

【Photoshop基本操作】［パス選択ツール］とは、アンカーポイントの移動や方向線の調整など、主にパスの操作を行うツールです。 その活用範囲は広く、他のツールからキー操作で切り替えて使用することも多いです。 クリックして選択が基本！ パス選択ツールの操作は、「掴んで離す」ようなドラッグ＆ドロップがほとんどです。

参考サイト

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

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

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

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

本日の課題

「ファッション」をテーマにバナー（模写）を作成してみましょう。
レイアウトは正方形(250px×250px)です。
作成したバナーを5限目終了までにドロップボックスにUPしてください。
※提出先・・・提出＞【0266】バナー模写② 12月3日(金)
※ファイル名は、bnr_xxxx_20211203.jpg