商品のモックアップ画像を10分で作る最も簡単な方法と素材サイトの紹介
ECショップやらなんやらのバナーを作るときに、商品画像はあるけど背景が白だったり、切り抜かれていたりする。
場合によってはスマホのカメラで撮っただけ、というものもある。
ただ、そういった場合にでも「なんとかして」いい感じにバナーを作る必要がある場面が、デザイナーには数多くある。
たとえばこんな感じにしたい
たとえば、よく見る、台座に商品が載っているようなバナーが作りたい。
これであればそのままWebサイトやバナーに使用することもできるし、楽天やAmazonの商品ページで使うこともできる。
視覚的にもなんとなく「プロ」な感じがするし、商品を目立たせる方法としてもとてもいい。
余白を十分にとっているので、文字入れもしやすい。完璧だ。
素材はこのサイトから
まずは台座の背景となる画像を探す必要がある。
もちろん、画像生成AIを使いこなせる人であれば自ら作ってもいい。
画像生成AI のおすすめツールは こちら
しかし僕の場合はめんどくさいので画像素材サイト「Freepik」から取ってくる。
Freepik の紹介ページは こちら
検索する際は、「OO stage」や「OO display」と入れれば大抵は見つかるだろう。OOの部分には「blue white」や「red」など色を指定することが多い。
また左カラムの「License」のところをfreeに設定しておけば有料素材は省くことができる。
実際に作ってみる
今回はこんな感じのステージ素材を使って作ってみる。
実際、「形はこれが一番いいのだけれど色は青がいいな〜」「サイズもう少し大きければな」などの惜しい！がよくある。なので今回は上記の画像をベースに以下で作成してみる。
１）商品画像の切り抜き
２）ステージ背景の色彩調整
３）サイズの調整
３）合成
そして実際にできたものがこれだ
実際に作ってみたものが以下である。
影の落ち方、色の明瞭や影など、調整しようと思えばまだまだではあるが、パッと5分10分もかからずにできるなら撮影するよりは遥かにコストも時間もかからない。
こんな感じで、痒いところに手が届くWebツールをまとめたサイトを運営してますので、ぜひお立ち寄りください。
１歩１歩の作成方法（Photoshop）
ここからは、一歩一歩の作り方を参考にしたい人向けです！
もちろん、この作業自体はCanvaでも他の画像編集ツールでも可能ではあるが、今回はPhotoshopでの作り方を紹介する。
ここから先は
拙作ではありますが、また書きたいと思います。 サポートしてくれたらヤる気を出すゲンキンな奴ですので、何卒。