学科 ECサイト運用基礎

By 学科　ECサイト運用基礎

-本日のアジェンダ-

1限目
学科 ECサイト運用基礎
バナーについて

2限目
学科 ECサイト運用基礎
レイヤースタイルについて

3限目
学科 ECサイト運用基礎
バナー作成

4限目
学科 ECサイト運用基礎
バナー作成

5限目
学科 ECサイト運用基礎
発表会

本日のテーマ

バナーのサイズに慣れましょう

バナーについて

バナー (banner) はウェブページ上で他のウェブサイトを紹介する役割をもつ画像（アイコンの一種）のこと。
本来、旗印を意味し、ウェブページ上で広告が目立つように使われたことから、この通名で呼ばれ定着した。
主に広告・宣伝用に作られ、ウェブサイトへのハイパーリンク用にも利用される。画像にはリンクを張り、クリックするとそのバナーが紹介するサイトを表示するようになっている。

ウィキペディア

Photoshop　レイヤースタイルについて

レイヤーに対して手軽に様々な表現が可能になる必須テクニックです。
私は本業がUIデザイナーですが、これがないと仕事にならない！っていうくらいに大事な機能となってます。

Photoshop　アンシャープマスクフィルター

おススメ！色調補正の手順

  1. 「レベル補正」「トーンカーブ」で白から黒の領域を広げる
  2. 「明るさコントラスト」で明るさと鮮明度の調整
  3. 「色相・彩度」「カラーバランス」「白黒」で色味の変更」
  4. 「アンシャープマスク」で最後に画像を引き締める　←最後！

（本日の練習素材）※【Photoshop】レイヤースタイルについて

本日の課題

昨日作成したフライヤーを元にバナーを作成しましょう。
まずは横長サイズで作成してみましょう。
提出は、JPEG形式です。
～　バナーサイズ　～
横長：「縦150px × 横300px」
縦長：「縦300px × 横150px」
正方形：「縦250px × 横250px」

※ フライヤー（A4サイズ）に比べ、情報の掲載スペースがグッと小さくなるので、実寸（ブラウザ100％表示）での文字の視認性やレイアウトに留意しながら作成してみましょう。