サムネイル（作品紹介）

バナーとサムネイルの違い

バナー：パット見て理解できる。サムネイルよりも情報量が多い
サムネイル：コンテンツを要約した小さな画像。簡潔で目立つデザイン。（130×130ピクセル、700×700ピクセルなど）

作成時にデザインに規定がある場合も。（ex.楽天⇩）

• テキスト要素は20％以下にする
• 枠線使用不可（4辺枠線、帯状枠線、L型枠線）
• GIF不可など

求められるスキル

• サムネイル：トリミングの技術。マスク機能を上手に使おう
• バナー：制限時間50分程度で一作品仕上げる（30分で作成し、残り時間で調整を行う）
• バナーの当て込み：クライアントのページに当て込んで、違和感が無いか確認する。クライアントの世界観を理解できているかの指標になる
• サイズ違いのバナー作成：いろいろなwebページに対応して、作り替えていく適応能力があるかの指標になる

Photoshop – マスク機能

リテイクに強いデザイナーの作業方法

• 非破壊データで作業する：スマートオブジェクト化、大きめの画像を使用する
• 拡大縮小ができる形式を使用する：スマートオブジェクト化、シェイプ（図形）の使用
  ※シェイプ：ピクセルではなく、シェイプで図形を作る
• バックアップと復元方法の明確化：元データを残しておく、ヒストリーパネルの使用、スナップショットの使用
• レイヤー管理：レイヤーパネルは常に出しておく

マスク機能をしっかり理解しよう

マスク機能とは見せたくない部分を非表示にして隠す機能のこと。画像を破壊しないのでリテイクに対応できる。
レイヤーマスクとベクトルマスクの使い分けが重要。『被写体の選択』も便利な機能なので、活用しながら。

• レイヤーマスク：選択範囲から取るマスクのこと。
  長所：淡い描画部分（髪の毛の毛並みの選択）に最適
  短所：きれいな曲線や直線の選択に不向き
• ベクトルマスク：パスから取るマスクのこと。（レイヤーマスクでできないところをカバー）
  パス選択ツール（Illustratorのダイレクト選択ツールと同じ機能）でパスの形状を変更できる。
  長所：きれいな曲線や直線がほしいとき（体のラインなど）に最適
  短所：淡い描画部分（髪の毛の毛並みなど）は不向き
  
  ※使い方例：ベクトルマスクで最初にきれいなラインを取り、パスパネルに保存。パスパネルで保存したところから選択範囲を取り直して、髪の毛などの淡いラインをレイヤーマスクで取り直す。
  
• グラデーションでマスク：選択範囲を作らず真っ白なマスクを作成。マスクに白黒グラデーションをかける。
• クリッピングマスク：図形から取るマスクのこと。下の図形の形状に切り抜く。（Illustratorと逆なので注意）
• クイックマスクモード：マスクのプレビュー。
• シェイプマスク (Xd)：Xdにはレイヤーマスクとベクトルマスクが無いので重宝する。ドラッグアンドドロップだけで、図形でマスクできる。

作品紹介

作品①　タイトル『ローストビーフのサムネイル』

• 制作時間：45分
• 使用ツール：Photoshop
• サイズ：700×700ピクセル

作品②　タイトル『ダイニングチェアのサムネイル』

• 制作時間：45分
• 使用ツール：Photoshop
• サイズ：700×700ピクセル

作品③　タイトル『化粧品のサムネイル』

• 制作時間：1時間
• 使用ツール：Photoshop
• サイズ：700×700ピクセル

作品④　タイトル『清涼飲料水のサムネイル』

• 制作時間：1.5時間
• 使用ツール：Photoshop
• サイズ：700×700ピクセル