新型コロナウイルス拡大防止策による在宅勤務のご案内

誠に勝手ながら、新型コロナウイルスの拡大防止策の一環として3月27日より在宅勤務とさせていただいております。
そのため、代表番号(03-6416-5195)にお掛けいただいた場合、誠に申し訳ございませんが、お電話が繋がりません。お問い合わせをご希望のお客様に関しては 当サイトの問い合わせフォームよりご連絡を下さいますようお願い申し上げます。

問い合わせフォームはこちら

【Photoshop初心者必見】 サムネイルのjpgデータにアイコンをつける方法!

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. 丸い図形を作る 

アイコンの下地となる丸い図形を作りましょう。

ツール内にある円の書かれたボタンを長押しすると表示される「楕円形ツール」を選択してください。

「楕円形ツール」はその名の通り、楕円や円を描くツールです。 

選択したのち、カンバスの上で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実施する時など、「ポイント倍率」や「クーポン情報」等の訴求ポイントを、アイコンとし てサムネイルに追加するだけで、より多くの人にお得感を伝えることができ他社とも差別化ができ るのではないでしょうか。

ぜひ施策の一つとしてお試しください !

お取引先様一覧(一部) -多くのお客様に弊社サービスを導入頂いております-

楽天 Amazon Yahoo

ユーグレナ・オンライン様

運営代行、コンサル、各種製作をさせて頂いております。

楽天 Amazon Yahoo Qoo10 Wowma!

チャップアップ様

運営代行、コンサル、各種製作をさせて頂いております。

楽天 Amazon Yahoo Qoo10 Wowma!

クリアネオ様

運営代行、コンサル、各種製作をさせて頂いております。

楽天 Amazon Yahoo

ベルタ様

運営代行、コンサル、各種製作をさせて頂いております。

楽天 Amazon Yahoo Qoo10 Wowma!

ブレスマイル様

運営代行、コンサル、各種製作をさせて頂いております。

楽天 Amazon Yahoo Qoo10

アクセサリー ジュエルVOX 様

運営代行、コンサルをさせて頂いております。

楽天 Yahoo Qoo10

セレクトショップMOMO様

運営代行、コンサル、各種製作をさせて頂いております。

楽天 Amazon Yahoo Qoo10

美マルシェ様

運営代行、コンサル、各種製作をさせて頂いております。

楽天 Yahoo Qoo10

プロ愛用ジェルネイル通販ジェルネ様

運営代行、コンサル、各種製作をさせて頂いております。

楽天

出島オンライン様

運営代行、コンサルをさせて頂いております。

楽天

スタイリンカー様

運営代行、コンサルをさせて頂いております。

Qoo10

ル・フタール様

運営代行、コンサル、各種製作をさせて頂いております。

楽天 Amazon Yahoo Qoo10

Smart Beam Laser正規代理店 MONCHUA様

運営代行、コンサル、各種製作をさせて頂いております。

楽天 Yahoo 製作

ヘアケアラボ様

コンサル、各種制作をさせて頂いております。

自社サイト

VENOSAN SHOP様

運営代行、コンサル、各種製作をさせて頂いております。

オウンドメディア

MUKUMI 様

オウンドメディアの構築、コンサルをさせて頂いております。

Qoo10

弾性ストッキングファクトリー様

運営代行、コンサル、各種製作をさせて頂いております。

制作 広告運用

東京血管外科クリニック様・ハンドベイン(手の血管)手術

広告運用代行、コンサル、各種製作をさせて頂いております。

制作

メンズスタイル様

同梱冊子の製作をさせて頂きました。

製作 広告運用

東京血管外科クリニック様・下肢静脈瘤手術

広告運用代行、コンサル、各種製作をさせて頂いております。

楽天 Yahoo 製作

ヘアケアプラス様

コンサル、各種制作をさせて頂いております。

楽天 Qoo10

Hera-Witch様

運営代行、コンサルをさせて頂いております。

楽天 Yahoo

フラコスメ様

運営代行、コンサル、各種製作をさせて頂いております。

オウンドメディア

beauty air様

オウンドメディアの構築、コンサルをさせて頂きました。

制作

株式会社ペンギントレード様

コーポレートサイトの制作をさせて頂きました。

オウンドメディア

ブランド図鑑.com 様

オウンドメディアの構築、コンサルをさせて頂きました。

製作

こころ卓球様

商品ページの製作をさせて頂きました。

制作

株式会社メディソリーゾ様

商品ページの製作をさせて頂きました。

オウンドメディア

住宅ローンSOS様

オウンドメディアの構築、コンサルをさせて頂いております。

制作

マハロネイルサロン 様

HPや販促チラシなどの製作をさせて頂きました。

制作

マハロヌイロア 様

HPや販促チラシなどの製作をさせて頂きました。

製作

アトリエKT-2様

HPや販促チラシなどの製作をさせて頂きました。

制作 Qoo10

海外ブランドならサウスコースト 様

運営代行、コンサル、各種制作をさせて頂いております。

Amazon Yahoo 制作 Qoo10

レディースシューズ ALETTA(アレッタ)様

運営代行、コンサル、各種制作をさせて頂いております。

楽天 制作

美甘麗茶 楽天市場支店様

運営代行、コンサル、各種制作をさせて頂いております。

楽天 制作

palclair楽天市場支店様

運営代行、コンサル、各種制作をさせて頂いております。

楽天

靴ネット通販コア様

コンサルティングをさせていただいております。

SNS

SHOEZOO様

インスタグラムの運用をさせて頂いております。

楽天 Yahoo 製作

ヘアケアフェスタ様

コンサル、各種制作をさせて頂いております。

製作

カジヤ様

各種制作をさせて頂いております。

楽天 制作

ブルービーセレクト 様

運営代行、コンサル、各種制作をさせて頂いております。

楽天 制作

Rifle楽天市場店 様

運営代行、コンサル、各種制作をさせて頂いております。

Yahoo コンサル

PARFUM 様

コンサルティングをさせて頂いております

楽天 制作

カルトラーレ 様

運営代行、コンサル、各種制作をさせて頂いております。

楽天 制作

きらりセレクション 様

運営代行、コンサル、各種制作をさせて頂いております。

楽天 Yahoo 製作 コンサル

ブリッサリットル 様

コンサル、制作をさせていただいております。

楽天 Yahoo 製作 コンサル

インテローグ様

コンサル、制作をさせていただいております。

楽天

PENGUIN VINTAGE様

運営代行、コンサルをさせて頂いております。

その他サービス