特設ページのセール用商品バナーについて

Question

お世話になっております。

現在、１２月のセールに向けてセール用の特設ページを製作しております。

毎回スーパーセール用で製作したバナーはすべて一つずつ手作業でフォトショップを使い、
(キャッチコピー・〇％OFF・価格・セール期間)の入った商品バナーを製作しております。

バナーに期間や〇％OFFなどが記載されていると使い回しが効かなく毎回新しくバナー作る事になり、かなり時間をかけています。
使い回しが出来る様に下地テンプレートを作ってそこに商品写真を埋め込むことができるようなツールなどはありませんでしょか？やはりどこのショップさんも一つ一つセール用にフォトショップなどのソフトを使い手作業でつくってるのでしょか？

繁盛店さんの長い特設ページなどを見るとすごいなぁ。。どうやってつくってるんだろうと毎回疑問に思っております。
ご教授頂けると幸いです。

参考までにこのような写真のバナーです。###HR######IMG014655bcb34bd0f20251875ee2dbdcd76.jpegIMG0### ###IMG1ebff45244885c46d5ed30dd13b443a5a.jpegIMG1### ###IMG2a86f98fcbb53540e595be196a32982dd.jpegIMG2###

Accepted Answer

ECマスターズの田辺です。

フォトショップを有効活用することで１から作り直すことなく
バナーを作成することができますので、
まずはそちらの方法をご紹介させていただきます。

１：
右下の「レイヤー」機能をつかいます。
https://saruwakakun.com/design/photoshop/layer

上記URLを参考にベースのレイヤーと、
キャッチコピー・〇％OFF・価格・セール期間など
表示が変わりそうな部分ごとにレイヤーを作成することで
後ほど変更がしやすくなります。

２：
フォトショップ情報を
ファイル＞保存
フォーマット「Photoshop」(拡張子は.psd)で保存します。

〇〇.psdで保存することによって、
非表示にしてあるレイヤー情報も全て保存されるので
後ほど使いたいときに表示することで作り直す必要がなくなります。

３：
使いたい画像は
ファイル＞書き出し＞WEB用に保存　
で保存します。

例えば、
10%OFFと30%0FFの文字をそれぞれのレイヤーにご用意いただきます。
表示させたくない方を「目のマーク」をクリックして消していただき、
WEB用に保存していただくことで10%OFFか30%0FFを
クリックのみで切り替えてバナーを作成することが可能です。


またフォトショップの操作が難しい場合には
スケッチページでもテンプレートを保存することができますので
よろしければそちらもご利用くださいませ。

[SketchPage] 画像・バナーをつくる：
https://mainmenu.rms.rakuten.co.jp/auth/index.phtml?params=navi/service/08_201.html&s=&param2=0

Answer

田辺さん
分かりやすい説明ありがとうございます。

>例えば、
10%OFFと30%0FFの文字をそれぞれのレイヤーにご用意いただきます。
>表示させたくない方を「目のマーク」をクリックして消していただき、
>WEB用に保存していただくことで10%OFFか30%0FFを
>クリックのみで切り替えてバナーを作成することが可能です。

イラストレーターではよくレイヤーを使って分けていましたが、フォトショップでは何故か「目のマーク」と「ロックマーク」を使いこなせていませんでした。
さっそくその方法でテンプレートを作ってみます。