入門) 画像編集講座(c) 2013 estore corporation 本講座の目的 #...
TRANSCRIPT
![Page 1: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/1.jpg)
(C) 2013 Estore Corporation
専門(入門) 画像編集講座
![Page 2: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/2.jpg)
(C) 2013 Estore Corporation
内容 1.はじめに
2.画像編集ソフトについて
3.画像の補正
4.画像のトリミング
5.画像のリサイズ
6.画像に文字をのせる
7.画像の境界線
8.バナーの作成
![Page 3: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/3.jpg)
(C) 2013 Estore Corporation
1. はじめに
![Page 4: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/4.jpg)
(C) 2013 Estore Corporation
本講座の目的
1
基本的な画像の編集方法を学び、より魅力的なお店づくりが出来るようになる。
![Page 5: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/5.jpg)
(C) 2013 Estore Corporation
ネットショップで買い物をする際 役立つ情報
2
出典:株式会社Jストリーム
商品写真 約7割が「商品写真」
の充実が大切と回答
![Page 6: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/6.jpg)
(C) 2013 Estore Corporation
売上の方程式
3
売上 = 来店数 × 転換率 × 受注単価
来店数 ・・・ お店に来店されたお客様の数
転換率 ・・・ 来店されたお客様のうち、
実際に購入にいたった割合
受注単価・・ ・1受注当たりの平均金額
![Page 7: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/7.jpg)
(C) 2013 Estore Corporation
売上の方程式
4
売上 = 来店数 × 転換率 × 受注単価
5万円 = 1,000人 × 0.5% ×1万円
10万円 = 1,000人 × 1.0% ×1万円
15万円 = 1,000人 × 1.5% ×1万円
魅力的な商品画像やバナーを掲載し 転換率を上げる
![Page 8: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/8.jpg)
(C) 2013 Estore Corporation
受講後できるようになること
5
・商品本来のイメージが伝わる画像補正
・商品を魅力的に見せるトリミングとリサイズ
・文字をのせたバナーの作成
![Page 9: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/9.jpg)
(C) 2013 Estore Corporation 6
2. 画像編集ソフトについて
![Page 10: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/10.jpg)
(C) 2013 Estore Corporation
2. 画像編集ソフトについて
7
■画像加工ソフト
無料
Adobe Photoshop Elements
GIMP
14,490円
有償
PhotoScape
![Page 11: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/11.jpg)
(C) 2013 Estore Corporation
2. 画像編集ソフトについて
8
■PhotoScape(無料)をダウンロードする
http://photoscape.softonic.jp/
![Page 12: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/12.jpg)
(C) 2013 Estore Corporation
2. 画像編集ソフトについて
9
■画像編集を開く
どちらからをクリックし 「画像編集」を開く。
![Page 13: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/13.jpg)
(C) 2013 Estore Corporation
2. 画像編集ソフトについて
10
■編集する画像を開く
① 任意のフォルダをクリックし選択。
② 編集したい画像をクリックして 開く。
編集画面
1
2 ① で選択したフォルダ内の画像のみが表示される。
![Page 14: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/14.jpg)
(C) 2013 Estore Corporation 11
3. 画像の補正
![Page 15: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/15.jpg)
(C) 2013 Estore Corporation
3. 画像の補正
12
■画像の回転 撮影時についた傾斜は、画像を回転させて修正する
![Page 16: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/16.jpg)
(C) 2013 Estore Corporation
3. 画像の補正
13
■明るさとコントラストの調整 撮影で暗くなった画像は、明るく修正し見栄えよくする
![Page 17: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/17.jpg)
(C) 2013 Estore Corporation
3. 画像の補正
14
■色味の調整 写真が極端に色味がかっている場合は調整する
赤み 黄み 青み
本来の色
![Page 18: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/18.jpg)
(C) 2013 Estore Corporation
3. 画像の補正
15
■画像の回転
撮影時についた傾斜は、画像を回転させて修正する
![Page 19: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/19.jpg)
(C) 2013 Estore Corporation
3. 画像の補正
16
■画像の回転方法
1
2
「ホーム」のタブをクリック
「任意の角度に回転」を クリック
![Page 20: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/20.jpg)
(C) 2013 Estore Corporation
3. 画像の補正
17
■画像の回転方法 編集画面が開いたら「つまみ」を左右に移動、もしくは、回転したい角度を数字で入力し、画像を水平に修正する。
調整が終ったら「OK」ボタンをクリックして編集画面を閉じる。
3
4
![Page 21: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/21.jpg)
(C) 2013 Estore Corporation
3. 画像の補正
18
明るさとコントラストの調整
■明るさを調整し見ばえを整える
![Page 22: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/22.jpg)
(C) 2013 Estore Corporation
3. 画像の補正
19
■明るさとコントラストの調整方法
「明るさ,カラー」のボタンをクリック ※右端の「▼ボタン」をクリックしないよう注意する。
1
2
![Page 23: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/23.jpg)
(C) 2013 Estore Corporation
3. 画像の補正
20
明るさとコントラストの調整
■明るさとコントラストの調整方法
3
4
調整が済んだら「OK」ボタンをクリックして終了。
「明るさ」と「コントラスト」のつまみを動かし調整する。両方のつまみを同量で動かし調整をすると、比較的簡単に見ばえを整えることができる。
![Page 24: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/24.jpg)
(C) 2013 Estore Corporation
3. 画像の補正
21
■色味の調整 写真が極端に色味がかっている場合は調整する
赤み 黄み 青み
本来の色
![Page 25: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/25.jpg)
(C) 2013 Estore Corporation
3. 画像の補正
22
■色味の調整方法
補正したい画像を開き ①「ホーム」のタブをクリック ②「明るさ,カラー」ボタン右端の「▼ボタン」をクリック ③「カラーバランス」を選択
1
2
3
![Page 26: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/26.jpg)
(C) 2013 Estore Corporation
3. 画像の補正
23
色味の調整
■色味の調整方法
目立つ色味 つまみの調整
赤み つまみを「Green」と「Blue」側に移動
黄み つまみを「Blue」側に移動、必要な場合は「Green」と「Red」側にも移動
青み つまみを「Red」「Green」側に移動
④編集画面が開いたら、下部の表を参考につまみを移動し色味を調整する。
⑤調整完了後「OKボタン」をクリックして終了する。
4 5
![Page 27: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/27.jpg)
(C) 2013 Estore Corporation 24
4. 画像のトリミング
![Page 28: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/28.jpg)
(C) 2013 Estore Corporation
4. 画像のトリミング
25
トリミングの注意点
■訴求ポイントとなる部分を切り出して見せる
どの部分の画像か分かるよう、見せたい事が伝わるようにする
イメージ
イメージ
襟元UP
ウエスト部分リボンUP
レディースファッション通販
「リアルキューブ」
http://realcube.jp/
![Page 29: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/29.jpg)
(C) 2013 Estore Corporation
4. 画像のトリミング
26
■例)商材別のトリミング箇所
商材 トリミング箇所
洋服 襟元、袖口、裾、ファスナーなどの空き部分、生地、ボタンやステッチ、ネームタグ、洗濯表示 etc
果物 切り分けた部分、盛り付け例、木に なっている状態、生産者の顔入り、盛り付け例 etc
食べ物 外装、外装から取り出した中身、付属調味料、調理例 etc
家具 人やサイズ比較できる物が一緒に写っている etc
![Page 30: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/30.jpg)
(C) 2013 Estore Corporation
4. 画像のトリミング
27
用意する画像の例
全体(正面)
全体(側面)
全体(背面)
中身
細部
大きさ
カラー バリエーション
利用イメージ
![Page 31: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/31.jpg)
(C) 2013 Estore Corporation
4. 画像のトリミング
28
画像のサイズ
■トリミングは画像のサイズを統一して見やすくする
商品ページ
ショッピングカート部分
商品一覧ページ
![Page 32: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/32.jpg)
(C) 2013 Estore Corporation
4. 画像のトリミング
29
画像のサイズ
■トリミングは画像のサイズを統一して見やすくする
商品ページ
ショッピングカート部分
商品一覧ページ
![Page 33: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/33.jpg)
(C) 2013 Estore Corporation
4. 画像のトリミング
30
画像のサイズ
■画像の推奨サイズ
商品ページ ショッピングカート部分
画像のサイズは、横640pix ×縦任意で統一
拡大表示
拡大表示の最大サイズ
横 640pix ×縦任意
![Page 34: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/34.jpg)
(C) 2013 Estore Corporation
4. 画像のトリミング
31
トリミングの方法
■トリミングの比率を決める
トリミングをする画像を開いたら、 ①「トリミング」のタブをクリック ②「自由トリミング」をクリックし 「比率の選択画面」を開く
1
2
![Page 35: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/35.jpg)
(C) 2013 Estore Corporation
4. 画像のトリミング
32
トリミングの方法
■トリミングの比率を決める
予め設定された比率を使う場合は、希望の比率ををクリック。
予め設定されている比率以外に、任意で縦横の比率やサイズを決める場合に選択。
画像比率が 横(幅)×縦(高さ)の比率 = 3:4 横(幅)×縦(高さ)の比率 = 4:3
どちらも「3:4」の比率を選択
3
4
![Page 36: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/36.jpg)
(C) 2013 Estore Corporation
4. 画像のトリミング
33
トリミングの方法
■トリミングの比率を決める
任意でトリミングの比率を設定したい場合、 ⑤「比率の設定」にチェックを入れ、値を入力 ⑥「OKボタン」をクリックし、ウインドウを閉じる
6
5
後の工程でサイズの調整が行えるので、ここでは⑤の「比率の設定」を使用する
![Page 37: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/37.jpg)
(C) 2013 Estore Corporation
4. 画像のトリミング
34
トリミングの方法
■トリミングの範囲を決める(横×縦=4:3の場合)
マウスを右に移動
1 画像の上でマウスを左クリックしながら右側に移動し選択枠をつくり、マウスから指を離す。 ※マウスを下方向に移動した場合、 比率が反転し「横×縦=4:3」になるので注意する。
2
選択範囲が、横×縦でpix表示される。 画像の推奨サイズ「横640pix」以上になるようにする。
マウスを下に移動
![Page 38: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/38.jpg)
(C) 2013 Estore Corporation
4. 画像のトリミング
35
トリミングの方法
■トリミングの範囲を決める(横×縦=3:4の場合)
マウスを右に移動
1
マウスを下に移動
画像の上でマウスを左クリックしながら下側に移動し選択枠をつくり、マウスから指を離す。 ※マウスを右方向に移動した場合、 比率が反転し「横×縦=4:3」になるので注意する。
選択範囲が、横×縦でpix表示される。 画像の推奨サイズ「横640pix」以上になるようにする。
2
![Page 39: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/39.jpg)
(C) 2013 Estore Corporation
4. 画像のトリミング
36
トリミングの方法
■トリミングの範囲を決める
3
選択範囲内にマウスを合わせると、カーソルが現れる。
カーソルを表示させたまま、マウスを左クリックしてトリミング範囲を動かし、切り出す範囲を微調整する。
![Page 40: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/40.jpg)
(C) 2013 Estore Corporation
4. 画像のトリミング
37
トリミングの方法
■トリミングした画像を保存する
5
④トリミングする範囲が確定したら「トリミング」ボタンをクリックし画像を切りだす。 ⑤トリミングをやり直したい場合は⑤のボタンで修正する。 「元に戻す」・・・クリックするたびに、直前の状態に戻る。 「やり直す」・・・元に戻したものを取りやめる。 「すべて元に戻す」・・・最初に編集画像を開いた時の状態。
4
![Page 41: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/41.jpg)
(C) 2013 Estore Corporation 38
5.画像のリサイズ
![Page 42: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/42.jpg)
(C) 2013 Estore Corporation
5.画像のリサイズ
39
■リサイズとは 画像を拡大縮小してサイズを変えること
1920 x 2560(縦横比 3:4)
480 x 640 (縦横比 3:4)
![Page 43: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/43.jpg)
(C) 2013 Estore Corporation
5.画像のリサイズ
40
■リサイズの方法
リサイズする画像を開きます。 ①ホームのタブをクリック ②「リサイズ」ボタンの右端の「▼」マークを クリックし、リサイズする寸法の一覧を出す
1
2
![Page 44: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/44.jpg)
(C) 2013 Estore Corporation
5.画像のリサイズ
41
リサイズする時の注意点やポイント
■リサイズの方法
3
リサイズ寸法の選択一覧から、 「幅の調整」を選択し、編集画面を開く。
4 5
横幅のリサイズしたい寸法を入力する。画質が粗くなるのを防ぐため、リサイズ前の画像より大きな寸法は入力しない。 ※ショップサーブの商品画像は、横幅640pixを推奨。 入力後、「OK」ボタンをクリックで、リサイズ完了。
![Page 45: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/45.jpg)
(C) 2013 Estore Corporation 42
6.画像に文字をのせる
![Page 46: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/46.jpg)
(C) 2013 Estore Corporation
6.画像に文字をのせる
43
■画像だけでは伝わらない情報は文字にする
味噌ラーメン??
・カレー味噌ラーメン
・4食入で1,480円
・36%OFF ・送料無料
![Page 47: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/47.jpg)
(C) 2013 Estore Corporation
6.画像に文字をのせる
44
■例)文字で追加された情報
文字は短く端的に、読みやすく入れる
![Page 48: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/48.jpg)
(C) 2013 Estore Corporation
6.画像に文字をのせる
45
■文字の入力
1
2
①「オブジェクト」のタブをクリック。 ②テキスト入力ボタン「T」の文字をクリックし、テキスト編集画面を開く。
![Page 49: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/49.jpg)
(C) 2013 Estore Corporation
■文字の入力
6.画像に文字をのせる
46
別ウインドウの「テキスト入力画面」が開いたら、枠内に文字を入力する。改行したい場合は、予め、枠内で改行しておく。 ※入力した文字は、そのまま画像の上に反映される。
3
![Page 50: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/50.jpg)
(C) 2013 Estore Corporation
■フォント、文字の大きさや色の選択
6.画像に文字をのせる
47
フォントの選択
文字サイズの変更
文字色の変更
パレットから、変更したい文字色を選択しクリックします。
それ以外の色に変更したい場合は、「More Colors」をクリックし「色の設定」画面を開きます。
6 5 4
![Page 51: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/51.jpg)
(C) 2013 Estore Corporation
■フォント、文字の大きさや色の選択
6.画像に文字をのせる
48
文字の入れ方
色が確定したら「色の追加」ボタンをクリックし、「作成した色」のパレットに保存する。
文字を基本色以外に変更したい場合、囲みの中をクリックし好きな色を選択する。
右サイドの矢印を上下に移動し「明るさ」を決める。 作成中の色が小窓に表示されるので、確認しながら調整する。
⑩の保存された色をクリックで選択し、「OK」ボタンをクリックすると画面が閉じ、文字色の変更が完了する。
7
9
8
10
11
![Page 52: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/52.jpg)
(C) 2013 Estore Corporation
6.画像に文字をのせる
49
■フォント、文字の大きさや色の選択
文字の色が変更されたのを確認し、「OK」ボタンをクリックし、テキスト編集画面を閉じる。
![Page 53: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/53.jpg)
(C) 2013 Estore Corporation
6.画像に文字をのせる
50
■文字位置の移動 文字をクリックしテキストの囲み線を表示させる。囲み線の中で左クリックし、そのまま状態のままマウスを動かし文字を移動する。 テキストの囲み線の外で、クリックをすると囲み線が消え文字の移動が完了となる。
![Page 54: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/54.jpg)
(C) 2013 Estore Corporation
6.画像に文字をのせる
51
■文字の装飾
文字の上でダブルクリックをすると、「テキスト編集画面」が開く。
1 2
3
各項左から順に ①太文字、傾斜をつける、アンダーラインを入れる ②文字の左寄せ、センター寄せ、右寄せ ③文字の透明度の調整(スケルトン)
![Page 55: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/55.jpg)
(C) 2013 Estore Corporation
6.画像に文字をのせる
52
4 5 7
6
文字にアウトライン(縁取り)を入れる場合は、 ④「適用」にチェックを入れる ⑤アウトラインの色を選択する ⑥アウトラインの太さを決める ⑦アウトラインの種類を決める
■文字の装飾
![Page 56: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/56.jpg)
(C) 2013 Estore Corporation
6.画像に文字をのせる
53
シャドウ(影)の調整をします。 ⑧シャドウを付ける場合はチェックを入れる ⑨シャドウの色を選択 ⑩シャドウの透明度を調整 ⑪シャドウの方向を調整
8 9 11
10
■文字の装飾
![Page 57: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/57.jpg)
(C) 2013 Estore Corporation 54
7.画像の境界線
![Page 58: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/58.jpg)
(C) 2013 Estore Corporation
7.画像の境界線
55
■境界線の設定
境界線なし 細い境界線 太い境界線
ナチュラル ポップ
グレーなどの淡い色で1pix程度の細い線がおすすめ
![Page 59: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/59.jpg)
(C) 2013 Estore Corporation
7.画像の境界線
56
■境界線のメリット、デメリット
メリット 画像を強調できる、デザイン性や個性が出せる
デメリット サイトに窮屈さが出ることがある 画像サイズが統一されていない場合、目立ってしまう
![Page 60: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/60.jpg)
(C) 2013 Estore Corporation
7.画像の境界線
57
■境界線の入れ方
1
2
3
4
①ホームのタブを選択 ②「フレームライン」のボタンをクリックし 編集画面を開く
③境界線の色を選択 ④境界線の太さを選択 編集が済んだら 「OK」ボタンを押して終了する
![Page 61: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/61.jpg)
(C) 2013 Estore Corporation 58
8.バナーの作成
![Page 62: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/62.jpg)
(C) 2013 Estore Corporation
8.バナーの作成
59
■バナーの役割 購入者の注目を引き、売りたい商品へダイレクトに誘導する
商品ページ
商品ページ
商品ページ
![Page 63: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/63.jpg)
(C) 2013 Estore Corporation
8.バナーの作成
60
バナーのポイント
■興味をひく企画
訴求内容 購入者の意識
季節のイベント 必要性が大きい
送料無料・ポイント○倍、セール お得感
売れ筋、人気商品 売れているという安心感
雑誌、テレビで紹介 メディアに対する信頼感、安心感
数量限定、期間限定 今しか買えないという焦り
お試し価格・商品・セット 安価で商品を試せるお得感、安心感
![Page 64: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/64.jpg)
(C) 2013 Estore Corporation
8.バナーの作成
61
バナーのポイント
■キャッチコピーは短く分かりやすく 内容を端的にストレートに伝える
■文字は見やすく大きめに 一目で内容がわかるよう大きめの文字にする。
■クリック感を出す 今すぐクリック、購入はこちらなどの文字を入れる
■何のバナーか一目でわかる画像 使用する画像から、内容が連想できるようにする。
![Page 65: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/65.jpg)
(C) 2013 Estore Corporation
2-5.バナーの作成
■バナーの作成方法 トップページのセンター用フリーエリアにバナーを掲載する場合
左サイドバー
右サイドバー
ヘッダ
左サイドバー
ヘッダ
横:480pix 縦:任意
横:650pix 縦:任意
センター用バナーエリアのバナーサイズは、レイアウトによって異なります トップページ
62
![Page 66: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/66.jpg)
(C) 2013 Estore Corporation
8.バナーの作成
63
■バナーの作成方法
V ③別ウインドウが開いたら、トリミングの「比率の設定」にチェックを入れ、作成するバナーのサイズを入力する
1
2
3
バナーに使用する画像を開き、 ①「トリミング」のタブをクリック ② 「比率の選択画面」から「比率/サイズの割り当て」を選択
![Page 67: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/67.jpg)
(C) 2013 Estore Corporation
8.バナーの作成
64
■バナーの作成方法
マウスを右に移動
画像の上でマウスを左クリックしながら右側に移動し選択枠をつくり、マウスから指を離す。 ※マウスを下方向に移動した場合、 比率が反転するので注意する。
4
選択範囲の大きさがpixで表示される
ので、トリミングする範囲がバナーの作成サイズ以上の大きさになるようにする。
5
6 トリミングする範囲が決まったら「トリミング」ボタンをクリック
![Page 68: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/68.jpg)
(C) 2013 Estore Corporation
8.バナーの作成
65
■バナーの作成方法
V
V
7
8
9 トリミングが完了したら、 ⑦「ホーム」のタブをクリック。 ⑧「リサイズ」ボタンをクリックし編集画面を開く。
バナーの作成サイズを入力し、「OK 」ボタンをクリックしリサイズする。
![Page 69: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/69.jpg)
(C) 2013 Estore Corporation
8.バナーの作成
66
■バナーの作成方法
V 11
10
V
12
次に画像に文字をのせていきます。 ⑩「オブジェクト」のタブをクリック ⑪テキスト入力の「T」ボタンをクリック ⑫編集画面が開いたら、テキストを入力し、文字の大きさやアウトラインを設定する。
![Page 70: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/70.jpg)
(C) 2013 Estore Corporation
8.バナーの作成
67
■バナーの作成方法
V
13
14
V
15
最後は、境界線(枠)の設定です。 ⑬「ホーム」のタブをクリック ⑭「フレームライン」のボタンをクリック ⑮編集画面が開いたら、境界線の色と太さを選択
![Page 71: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/71.jpg)
(C) 2013 Estore Corporation
8.バナーの作成
68
■バナーの作成方法
V
V
15
16
⑮「保存」ボタンをクリックし設定画面を開く。 ⑯「名前をつけて保存」をクリックし、パソコンに保存する
![Page 72: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/72.jpg)
(C) 2013 Estore Corporation
8.バナーの作成
69
・バナーの設置場所別のサイズ トップページレイアウト(右サイドバーあり、なし)
詳しくは、DVDのメニューからセミナー資料を確認ください
■バナーの設置方法、設置場所別のバナーサイズ
・バナーをセンターエリアに設置する方法
![Page 73: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/73.jpg)
(C) 2013 Estore Corporation
8.バナーの作成
70
■素材集やフォントの活用 Yahoo!やGoogleで素材やフォントを検索。
【 無料の素材やフォントの検索キーワード例 】
無料素材 SALE / 無料素材 バナー / フリーフォント / 無料フォント 日本語…etc
有料の素材サイトや素材集を使えばデザインの幅が広がります。
![Page 74: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/74.jpg)
(C) 2013 Estore Corporation
セミナー
71
テーマにあわせて、詳しくノウハウを身につける
http://www.ebs.estore.jp/
売れる商品撮影に必要な基本が身につく!
![Page 75: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/75.jpg)
(C) 2013 Estore Corporation
セミナー
72
http://www.ebs.estore.jp/
![Page 76: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/76.jpg)
(C) 2013 Estore Corporation
代行サービス
73
各種代行サービス http://clubestore.jp/service/index.html
![Page 77: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/77.jpg)
(C) 2013 Estore Corporation
ストアーデスク
74
困ったときは電話サポート
専門スタッフがお答えします
Eストアー ストアーデスク
TEL :0570-05-1210/03-3595-1251(IP電話のみ)
FAX :03-3595-2938
MAIL:[email protected]
電話受付時間:平日10時~18時
※お問い合わせの際は「ショップID 」をお知らせください
![Page 78: 入門) 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)](https://reader033.vdocument.in/reader033/viewer/2022043016/5f392c8c6e569901de5e2cdc/html5/thumbnails/78.jpg)
(C) 2013 Estore Corporation 75
ありがとうございました