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

-本日のアジェンダ-

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

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

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

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

5限目
学科 ECサイトデザイン基礎②
作品講評

本日のテーマ

サムネイル画像 について

サムネイル画像とは?

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

参考サイト

ワンポイントアドバイス

トリミングを制するものはバナーを制します!
いま一度、基本の切り抜きを確認しましょう。

マスクについて

Photoshopのマスクのかけ方は、大きく分けて、『クリッピングマスク』、『レイヤーマスク』、『ベクトルマスク』の3種類があります。
それと選択ツールの調整で使うクイックマスクモードがあります。

参考サイト

本日の基本操作と復習

  • 被写体を選択(Ps)
  • 消しゴムツール (Ps)
  • クイックマスクモード(Ps)
  • パスパネル (Ps)
  • ベクトルマスク(Ps)
  • 選択範囲の反転 (Ps)
  • 境界線をぼかす (Ps)
  • フィルター(Ps)

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

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

被写体を選択(Ps)

人工知能を使ってパッと出来ます。

参考サイト

クイックマスクモード (消しゴムツール )

クイックマスクモードは一時的なマスクを作成するモードで、アルファチャンネルのように保存はできませんが、選択範囲を編集する場合に便利です。 画像に選択範囲を作成します。 ツールボックスの下のほうにある、[クイックマスクモードで編集]ボタンをクリックします。 選択範囲の外がうす赤色で表示されます。

参考サイト

パスパネル (Ps)

パスパネル. ペンツールやシェイプツールで作成したパス一覧を表示してくれます。また、パスで画像をくりぬく”クリッピングマスク”の設定もここでできます。 アクションパネル. Photoshop CC、CS6でこのパネルを使って動画を編集できます。

参考サイト

パス選択ツール

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

参考サイト

ベクトルマスク(Ps)

ベクトルマスクとは Photoshoのペンツールまたはシェイプツールで作成したベクトル画像を使い、画像全部または、画像の一部を隠す(マスクする)方法です。

参考サイト

選択範囲の反転 (Ps)

選択範囲の反転は、「選択している状態の選択範囲」と「選択していない範囲」を置き換える機能です。 こちらの写真を例に、選択範囲の反転を活用してリンゴを残して背景を切り抜きます。 選択ツールを使い、リンゴを選択します。 … リンゴの範囲選択を終えたら、選択範囲から「選択範囲の反転」をクリックして、選択範囲反転します。

参考サイト

境界線をぼかす (Ps)

フォトショップで境界線をぼかして画像を切り抜く方法があります。また、ぼかした状態でマスクをする事も可能です。

参考サイト

フィルター(Ps)

hotoshopの機能にフィルターギャラリーというものがあります。 この機能を使うと、1クリックで手元の画像を印象絵画風にしたり、ガラス越しでみた様な形にしたりすることができます。 フィルターギャラリーにある様々なフィルターは、デフォルトでアドビが用意しているものです。

参考サイト

シェイプ・パス・ピクセル(Ps)

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

参考サイト

描画ツール(Ps)

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

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

参考サイト

パス選択ツール(Ps)

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

参考サイト

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

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

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

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

本日の課題

サムネイルを作成してみましょう。
作成したバナーを4限目終了までにドロップボックスにUPしてください。
5限目に講評を行います。
※提出先・・・提出>【0266】サムネイル 6月7日(火)
※ファイル名は、bnr_xxxx_20220607.jpg

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

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

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

おすすめのジャンル

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

参考資料

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

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

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

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

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

参考サイト

ECサイトについて

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

参考サイト

バナー広告とは?

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

参考サイト

ワンポイントアドバイス

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

本日の課題

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