本日のアジェンダ
1限目
実技 ECサイトデザイン実習①
Photoshopの機能について
2限目
実技 ECサイトデザイン実習①
Photoshopの機能について
3限目
実技 ECサイトデザイン実習①
サムネイル画像 作成
4限目
実技 ECサイトデザイン実習①
サムネイル画像 作成
5限目
実技 ECサイトデザイン実習①
サムネイル画像 講評
本日のテーマ
サムネイル画像 について
本日のレポート
サムネイル画像について
サムネイル画像は、親指(サム)の爪(ネイル)のように小さい画像という意味で、実際に撮影した画像から解像度を下げたり、圧縮したりするなどの手法で、ファイルサイズを小さくしたデータです。
情報量が少ないので読み込みが早く、一覧表示で多くの画像を素早く見ることができます。
【例】楽天のサムネイル画像ガイドライン
- テキスト要素占有率は「20％」以内
- 画像に枠線をつけない
- 背景は「白基調」か「写真背景」のみ
- 写真の合成は不可
MEMO
オブジェクト選択ツールで選択範囲を増減させる
オブジェクト選択ツールで全体の選択範囲を取った後、
減らす：「Alt」押しながら選択範囲を取る
増やす：「Alt＋Shift」を押しながら選択範囲を取る
選択範囲の色変更
- 選択範囲を選んだ状態で空の「新規グループを作成」＝グループ1ができる
- グループ1に対して空のレイヤーマスクを作る
- 「塗りつぶしまたは調整レイヤーを新規作成」を長押し
- 「べた塗り」を選択
- 「通常」を「乗算」「焼きこみカラー」などに変更
本日の作品
楽天市場掲載を想定（サイズ 700×700）
ジェルネイルのサムネイル
作業時間 2時間
使用ソフト Photoshop
ブラッシュアップしたい点
・「winter gel nail」がもっと冬らしいイメージを出したいのでのフォント、効果の変更。
・背景の左側の部分の白い部分をニットっぽい質感の背景に変えたい。
Tシャツのサムネイル
作業時間 1時間
使用ソフト Photoshop
ブラッシュアップしたい点
・バランスを考えすぎてパッと見て印象に残る部分がないのでポイントとなる箇所を新たに作る
感想
今日は初めてサムネイルを作成した。
普段よく見ている楽天市場への掲載を想定して作成してみたが、同じ題材で他のECサイト用にも作成してみたい。
Photoshopの忘れている機能が多いのでしっかり復習をする。
