1限目
学科 ECサイトデザイン基礎①
ECサイトとは？
EC（eコマース）＝Electronic Commerce
モール系ＥＣ＝楽天・Amazon Yahoo!ショッピング
バナー作成
バナー＝広告や宣伝のために使う画像
クリックしてもらって、あらかじめ設定しておいた
リンク先のページを見せることが目的
・メッセージ（端的な文書やコピー）
・イメージ（雰囲気を持つ写真やイラスト）
・アテンド（ご案内の内容）
2限目
学科 ECサイトデザイン基礎①
ECのお仕事とバナー作成について
サムネイル画像 正確な商品情報を表現するのがサムネイル
作業のポイントは、正確な「トリミング」
成績考査 サイズ違い5個制作
素材は集めてトリミングしておく
同一商品 説明文や値段を書く。
世界観・色は同じもの
3限目・4限目
学科 ECサイトデザイン基礎①
マスクについて 理屈（仕組みの理解、特長の理解、使いどころの理解）
マスク機能＝画像や図形などのオブジェクトを自由な形に切り抜くことができる機能
オブジェクトを消しているわけではなく、不要な部分を覆い隠しているようなイメージが近い
Illustratorのマスク＝オブジェクトを抜き型（マスク）で切り抜いて、部分的に非表示にし（隠し）印刷しないようにする機能
Photoshopのマスク＝画像を直接修正・編集することなく余分な箇所を覆い隠す機能
直接いじらなくとも表示、非表示ができるので後からの修正したい時に非常に便利な機能
＊商業デザイナーはリテイクに強くならなければならない＊
リテイク＝撮影や録音など収録をやり直すこと・また撮り直した作品
仕事をする上でリテイクが多い。リテイクできる状態でデータを取っておくことが大切。
非破壊データで行う
・スマートオブジェクト化（Photoshop） データ複製してコピーを使っていく。→スマートオブジェクト化する。別名保存。
画質をキープ CTRL+D 拡大縮小 元画像は大きめの写真を用意しておく。
レタッチはスマートオブジェクトのままではできない。（ラスタライズ化）
※必要に応じた大きな写真（ビットマップデータ）を利用
拡大縮小が出来る形式を利用
Illustrator→ベクターデータなのでそのまま利用
Photoshop→シェイプの利用または上記のスマートオブジェクト化
イメージはイラレのパスと同じ。 シェイプで書いた円は拡大縮小に耐えられる。（通常シェイプにしておく）
バックアップと復元する方法を徹底的に！
・元データのバックアップ CTRL+SHIFT+Z
・戻る機能をしっかりと活用
・「ヒストリーパネル（Photoshop）」今までの作業を管理。
レイヤーをしっかり管理する
・マスク機能の確認は（レイヤーパネルで把握） ＊レイヤーパネルは常に出しておく。
固定するには右側押し付けてブルーになったところで離す。
レイヤープロパティパネルが並ぶ
Illustrator ヒストリーパネルはない
Photoshop
マスクは仕事によって使い方は違う。
お預かりしたデータのレイヤーの把握は大切
ガイド 表示→定規 新規から数字指定可能 定規ショートカットキー CTRL+R
消すときは選択してDEL つかんで定規に押し戻す
マスク機能 その1
〇レイヤーマスク＝選択範囲から取るマスク トリミングの基本！自在に扱えるようにしましょう。
Photoshop
特長
選択範囲からマスクをする為、奇麗に選択範囲が取れれば自在にマスクできる。
またグラデーション、濃淡を利用してぼかすことも可能。
逆に、奇麗な曲線や直線には不向きかも。
使いどころ
・とにかく多岐にわたる
・髪の毛などの毛並みには最適
・「被写体から選択」等のAI（Adobe Sensei：マシンラーニング）の機能からは最適
チェーンをつけておくと選択範囲を移動
外すとしたの画像はそのまま選択範囲が移動
選択範囲を反転 額縁のようになる。
マスク機能 その2
〇ベクトルマスク パスから取るマスク。ペンツールまたはシェイプツールを使用して作成。
レイヤー→ベクトルマスク→現在のパス 確認する
イラレで型を作るような感じ
Photoshop
特長
パスからマスクをする為、奇麗なラインが欲しいマスクに最適。
モデルさん等の体のラインをベジェ曲線で引いた箇所に最適で、修正・調整も簡単。
逆に、淡い描画部分（髪の毛などの毛並み）には不向きかも。
使いどころ
・とにかく多岐にわたる
・モデルさんの身体のライン等で最適
・電化製品・商品画像等のアンカーポイントの少ない直線や曲線に最適
マスク機能
〇パスパネル 選択範囲とパスを保存しておける。
Photoshop
特長
パスを保存できるので、「パスから選択範囲」「選択範囲からパス」を作成することが出来る
レイヤーマスクとベクトルマスクの使い分けとセットで理解しておきましょう。
使いどころ
・パスを保存して2次利用
・パスから選択範囲の作成
・選択範囲からパスの作成
マスク機能 その3
〇クリッピングマスク 図形から取るマスク
クリッピングマスクとは、あるレイヤーの透明部分を使用して下のレイヤーの形に切り抜かれる。
illustratorは上のレイヤーにマスクを適用する機能
Photoshop
特長
既に決まった形の所に画像を当て込んだりして使える為、仮の写真部分等に利用する事が多い。
後から写真の入れ替えが必要な箇所の利用が多いのでレイヤー管理に注意。
テクニックとして、文字をクリッピングマスクして装飾した文字表現が出来たりもする。
使いどころ
・とにかく多岐にわたる
・仮デザインや入れ替えのある画像箇所
・調整レイヤーでの利用
＊PhotoshopとIllustratorでレイヤーの順番が逆になる。使いどころは同じ
レイヤー動かしたいときに思うように動かない時 ・動かしたくないほうをロックする
・自動選択のチェックを外す
・バウンディングボックスにチェックがあるか確認する
マスク機能 番外編その1
〇クイックマスクモード ブラシを使ってトリミングをする機能
ちょっと使い道が違うマスク
Photoshop
特長
後にレイヤーマスクをする為、細かな選択範囲を取りたい時に利用する事が多い
色を変えられるので視覚的に見やすく作業が出来る場合がある
使いどころ
・奇麗な選択範囲を取る為の作業
・色味の解りにくい写真
＊トリミングの多い職場環境では必須の技術？必要な方はしっかり理解しておくこと！
マスク機能 番外編その2
〇シェイプマスク 画像をドラック＆ドロップするだけのマスク ←これでしかできない
XD ←これでしかできない↵
特長
XDのマスク機能でクリッピングマスクと考え方は同じ
使いどころ
・とにかく多岐にわたる
・仮デザインや入れ替えのある画像箇所
・XDには「レイヤーマスク」と「ベクトルマスク」が無いので重宝
＊簡単！でもXDではそれしかできないという事を念頭に置いておくこと
5限目
学科 ECサイトデザイン基礎①
サムネイル制作に向けての情報収集