– 本日のアジェンダ –
1限目
学科 ECサイトデザイン基礎①
ECサイトとは？
2限目
学科 ECサイトデザイン基礎①
ECのお仕事とバナー作成について
3限目
学科 ECサイトデザイン基礎①
マスクについて
4限目
学科 ECサイトデザイン基礎①
サムネイル制作に向けての情報収集
5限目
学科 ECサイトデザイン基礎①
サムネイル制作に向けての情報収集
【講師用カリキュラム情報】
※このブロックは公開時は非表示になります。削除しないでください。
※講師用の情報（注記）を追記して頂いても大丈夫です。
ストーリー：ECとマスクについて
内容1：ECの説明 （動画総再生時間：約56分）
内容2：マスクの説明 （動画総再生時間：約95分）
内容3：情報収集の時間
課題：なし ※サムネイル制作に向けての情報収集
★初回の制作テーマは、「サムネイル」です
【注釈】
・動画ボリュームが多いです。配分バランスにご注意ください。
本日のテーマ
ECのお仕事を理解しましょう
ECサイト
ECサイトとは、自社の商品やサービスを、インターネット上に置いた独自運営のウェブサイトで販売するサイトのことである。ECとは英語: electronic commerceの略。 複数の企業や個人商店がインターネット上の1か所で出店する形態のウェブサイトは、電子商店街の項目を参照。 ウィキペディア
参考サイト
【資料】
カリキュラム資料 ダウンロード用サイト
https://cu-doc.deau-ac.com/
下記のファイルをダウンロードしましょう。
1.「デザインの考え方」の教科書⑤.pdf
2. マスクについて.pdf
【動画①】「デザインの考え方」の教科書⑤
- ECとは？
https://youtu.be/FT7g0ruH7Eg（7:44） - EC業界のお仕事ってどんなもの？ (前半)
https://youtu.be/tdqsIO8IKuk（15:01） - EC業界のお仕事ってどんなもの？ (後半)
https://youtu.be/Lv6acH3zGZs（9:35） - バナー作成のポイント①
https://youtu.be/5ESkln7ceXg（10:59） - バナー作成のポイント②
https://youtu.be/Awu6KiqlzoI（12:48）
ワンポイントアドバイス
まずは様々な作品を見て見ましょう。
見て真似をしてまた見るの繰り返しが上達のコツです！
【動画②】マスクについて
- マスク機能とは・リテイクとは (8:25)
https://youtu.be/ZAZOw42bqvY - 非破壊データで行う(7:20)
https://youtu.be/T6YueLz5Hc8 - 拡大縮小ができる形式を利用 (7:10)
https://youtu.be/IlIEM44mIxY - バックアップと復元する方法を徹底的に！(5:01)
https://youtu.be/TGiKZecEnL4 - レイヤーをしっかり管理する(6:59)
https://youtu.be/TK41xPqYxPE - ワンポイントアドバイス「マスクは理屈で覚える」(2:51)
https://youtu.be/AVwmTlCWuc4 - マスク機能① レイヤーマスク(10:19)
https://youtu.be/tJ7KVhu4LJo - マスク機能② ベクトルマスク(11:02)
https://youtu.be/E4Qh5n3X95k - おまけ パスパネル(12:09)
https://youtu.be/RQeJA0YGSQs - マスク機能③ クリッピングマスク(11:17)
https://youtu.be/w745LFgkB_Q - 番外編1 クイックマスクモード(5:23)
https://youtu.be/nN1UmZ5ZgNw - 番外編2 シェイプマスク(3:01)
https://youtu.be/eTbKK82BWrs - まとめ(3:58)
https://youtu.be/zHGAQscV69A
参考サイト
- Photoshopのレイヤーマスクとは？使い方を総まとめ
- 【Photoshop】レイヤーマスクにグラデーション：画像を徐々に …
- ベクトルマスクによるレイヤーのマスク
- パスの操作に慣れよう！Photoshopでのパスとパスの基本 …
- クリッピングマスクの違いを理解して作業効率をアップしよう！
- イラレのクリッピングマスクを即理解！作成方法から…
- 一時的なクイックマスクの作成
- シェイプでマスクを作成
- Photoshopの4つのマスク基礎講座を解説！
- Photoshopの3種類のマスクを使い分けて画像を切り抜く方法
- Photoshopの調整レイヤーとは？使い方まとめ（コピーや結合 …
- 調整レイヤーとは？ Photoshopに欠かせない必須機能を解説
- 色選び、配色に利用したいHSB｜DTP Transit 別館
マスクについて
Photoshopのマスクのかけ方は、大きく分けて『レイヤーマスク』、『ベクトルマスク』と『クリッピングマスク』の3種類があります。
それと選択ツールの調整で使うクイックマスクモードがあります。
参考サイト
レイヤーマスクについて
レイヤーマスクは、レイヤーに追加する機能です。画像の一部を隠したい場合に使用します。白黒に塗り分けられた画像から、表示する部分と、隠す部分の「マスク領域」を指定します。レイヤーマスク自体が、ドキュメントに表示されることはありません。対象となる画像の一部が、切り抜いた型紙を通り抜けて、背景に投影されるようなイメージです。
特長と使い方
- 選択範囲からのマスク
- 白から黒の領域（中間色は半透明）
- 曖昧なトリミングに有効
参考サイト
ベクトルマスクについて
ベクトルマスクは、ペンツールやシェイプを使用して作成するマスクです。ベクトルマスクは、画像の拡大や収縮を繰り返しても、マスクが劣化しないので、解像度を気にすることなく編集できます。
特長と使い方
- パスからのマスク
- シェイプ（Illustratorと同じイメージ）を使う
- 奇麗な曲線を描く時に有効
参考サイト
パスパネル
パスパネル（ウィンドウ／パス）には、保存されたパスごとの名前とサムネール画像、現在の作業用パスおよび現在のベクトルマスクが一覧表示されます。サムネールの表示をオフにすると、パフォーマンスが向上します。パスを表示するには、まずそのパスをパスパネルで選択する必要があります。
参考サイト
クリッピングマスクについて
クリッピングマスクとは、マスクが適用されるレイヤーをグループ化したものです。一番下のレイヤー（ベースレイヤー）がグループ全体の表示範囲を定義します。例えば、ベースレイヤーにシェイプがあり、その上のレイヤーに写真があり、一番上のレイヤーにテキストがあるとします。写真とテキストは、ベースレイヤー上のシェイプのアウトラインを通してだけ表示されると、ベースレイヤーの不透明度を継承します。
特長と使い方
- 図形（文字も可能）からのマスク
- 他のレイヤーに影響する
- Illustratorにもあるので注意
参考サイト
ワンポイントアドバイス
マスクはデータを維持したまま作業を進める方法として、最も使われる手法です。逆に他人が作成したデータを編集しなければならない時に、「わからない」が発生するポイントがここです。しっかりと理解を高めておきましょう。
スマートオブジェクト
スマートオブジェクトとは、「縮小と拡大を繰り返しても、劣化をしない画像データ形式」のことです。Photoshopで画像を扱うときにスマートオブジェクト化していない場合、1度でも縮小すると画像が劣化してしまいます。画像の質を保ったまま縮小・拡大をしたいときは、スマートオブジェクトに変換する必要があります。
スマートオブジェクトの解除方法「ラスタライズ」
スマートオブジェクトは画像を劣化させずに保つ形式なので、多用するとデータが重くなりがちです。スマートオブジェクトを解除することを「ラスタライズ」といいます。スマートオブジェクトをラスタライズすると、元のビットマップ画像に戻ります。
本日の課題
本日の課題提出はありません。
サムネイル制作に向けて、集めた参考サイトや素材のリンクをメモしておきましょう。