Contents
1.はじめに
Photoshop初心者のEC担当者様向けPhotoshop講座第一弾。
「AdobeのPhotoshopを契約しているけど、うまく使いこなせない・・・。」
「使いこなしたいけど、何から始めたら良いのかわからない。」
「昔在籍していたデザイナーが作ったjpg画像があるけど、PSDデータがなくて編集を諦めてい る・・・。」
そんなECご担当者様は多いのではないでしょうか？
今回のコラムでは、簡単かつ効果的に施策を訴求ができる「サムネイルのjpgデータにアイコンを つける方法」をご紹介します！
2.作り方
Photoshopは、1つの画像を作るのに何通りもの作り方ができるツールです。
今回は初心者向けということで、まずアイコンのデータを作成し、作ったアイコンを既存のjpg画像（サムネイル）に合成するという方法をご紹介させていただきます。
2-1.まず、フォトショップを開きましょう。
「新規作成」をクリックして、制作したいアイコンの「サイズ」を設定します。
合成する画像にもよりますが、今回は①サイズを「300px × 300px」、カラーモードを「RGBカラー/8bit」、カンバスカラー「透明」に設定してください！
2-2.上部のウインドウを開きましょう。
今回使用したいウインドウは、
・プロパティ
・レイヤー
・文字
この3つです。
これらのウインドウを表示させてから作業を進めるとスムーズです。
（すでに該当のウインドウが表示されている場合は、割愛してください）
2-3.早速アイコンを作っていきましょう。
今回は、初級編ということでシンプルなポイント訴求のアイコンを既存のjpg画像に設置していきます。
2-3-1. 丸い図形を作る
アイコンの下地となる丸い図形を作りましょう。
ツール内にある円の書かれたボタンを長押しすると表示される「楕円形ツール」を選択してください。
「楕円形ツール」はその名の通り、楕円や円を描くツールです。
選択したのち、カンバスの上で１度クリックをすると、楕円のサイズを指定することができま す。今回は、280px × 280pxで設定しましょう。
◆図形の色を変えたいとき
プロパティウインドウから色を変更することができます。
これで土台となる図形を描くことができました！
2-3-2. テキストを入力しよう
今回は「ポイント 15倍」をよりわかりやすく伝えるために、3つのパーツに分けて文字を打っていきます！
まず「ポイント」というテキストを入力しましょう。
文字ツール選択後、カンバスの中でクリックすることでテキストを記載することができます。
同じ要領で、「15」と「倍」というパーツも作りましょう。
2-3-3. 文字を組んでみましょう
打ち終わった文字のサイズと位置を調整します。
◆文字を動かす・拡大縮小したいとき
「移動ツール」で該当する文字を選択しながら動かし調整します。
文字ウインドウからサイズを変更するかor移動ツールで文字を選択した後、シフトを押しながら マウスを動かすことで大きさを調整することができます。
◆フォントを変えたい時・色を変えたいとき
移動ツールで文字を選択した後、文字ウインドウから変更ができます。
◆背景の図形の色を変えたいとき
移動ツールで文字を選択した後、プロパティウインドウから変更ができます。
2-3-4. 完成したアイコンを保存します
「ファイル」から、「保存」を選択し、ファイル名を記入後psdデータを保存してください。
2-4.完成したアイコンをサムネイルに合成しよう
ここまできたら、あと一息！
サムネイルに作ったアイコンを合成していきましょう！
2-4-1.Photoshopで、サムネイルの画像を開きましょう。
Photoshopのアイコンに、サムネイルの画像データをドラック＆ドロップすることで簡単に表示 することができます！
2-4-2.アイコンを合成します！
開いたPhotoshop上のjpgデータに、先ほど作ったアイコンデータをドラック＆ドロップしてみま しょう。
2-4-3.アイコンのサイズ調整しましょう
移動ツールでアイコンを選択したのち、シフトを押しながらサイズを調整しましょう。 シフトを押さないとアイコンの比率が変わってしまうので要注意です！ そして、配置したい箇所にアイコンを移動させましょう。
2-5.保存方法
うまく配置できたら、アイコンを保存した時と同じ要領で、PSDデータを保存します。 PSDデータが保存できたら、jpgファイルも保存しましょう。
「ファイル」から「別名に保存」を選択して、ウインドウの下部にある拡張子を選ぶタブからjpg を選び、保存してください。
3.最後に
いかがでしたか？ 文章で読むとなかなか難しいのでは？と思う方もいるかもしれませんが、実際にPhotoshopで 作ってみると意外と簡単に作れたのではないでしょうか。
今回は、初心者講座としてシンプルなアイコンを設置しましたが、無料の素材サイトなどを駆使す るとバリエーション豊かなアイコンを簡単に制作することが可能です。
SALE実施する時など、「ポイント倍率」や「クーポン情報」等の訴求ポイントを、アイコンとし てサムネイルに追加するだけで、より多くの人にお得感を伝えることができ他社とも差別化ができ るのではないでしょうか。
ぜひ施策の一つとしてお試しください ！
