今回は「ソイプロテイン」のバナートレースにチャレンジしました！
とても動きのあるデザイン性のあるバナーですよね(●´ω｀●)
とても難しそうだと思ったのですが、時間をかけてやってみようと今回チャレンジしてみました！
フルーツも背景のデザインもすべておしゃれでとてもかっこいいですよね…
今回のバナートレースでの学びを書いていますので、ぜひ参考にしてみてください♪
トレース画像
バナーサイズ（幅×高さ）： 1040 x 1040
使用ソフト：Photoshop
使用カラー：#f62042 #fda591 #ffffff
使用フォント： Kinto Sans Black / HGSｺﾞｼｯｸE
参照：バナー広場
振り返り
知識・スキル
背景のミルクの再現
背景のミルクは2つの素材を使用しています！
メインの大きなミルクの素材と、動きを演出しているミルクの跳ねの素材2つAdobe Stockからダウンロードをして使用しています。
ミルクの素材を探してみるとたくさんありますが、画質が良く、見本バナーと似た画像はAdobe Stockにしかありませんでした！
このバナートレースをしようと考えている方は、リンクを貼っておきますので是非参考にしてみてください♪
背景の水しぶき
背景の水しぶきはとても躍動感があって素敵ですよね(*^^*)
背景の素材もAdobe Stockで見つけてダウンロードをしました！
水しぶきの画像はたくさんの形があり同じような画像を探すのがとても大変だったのですが、同じような画像を見つけました！
リンクを貼っておきますので是非参考にしてみてください。
背景の水しぶきの再現！
- Photoshopに画像を反映
- 反映した画像の大きさ、向きを調整
- 反映した画像を「通常」から「スクリーン」に設定
ベリーの使用素材
商品周りに使用されているベリーの種類が多く同じような色合い、形のものを探すのにとても時間がかかりました(>_<)
本当だったら、同じセットの画像を使用したかったのですが、なかなか見つかりませんでしたので各フルーツの画像を探して使用しています。
“New”の再現
“New”のフォントは「Freestyle Script Regular」で、下線はブラシツールの「丸筆（アングル）やや硬毛」のブラシを使用して再現しています！
コピースタンプツールで画像を修正
サンプリングした画像をコピーして修正したいオリジナル画像レイヤーに直接修正をおこなうことができる機能
気づき
多くのイメージ画像を使用すると全体の立体感が出る
今回は、商品パッケージ以外にベリー、ミルク、水しぶきと多くの画像を使用していました！
加工がとても大変でしたが、画像をたくさん使用することで奥行きが出て全体の立体感とイメージ付けをすることができると学びました。
ミルク、水しぶきの背景は元画像が立体感があるので、ベリーを商品の上下に重ねることでより奥行きが増していると思いました。
丸い水しぶきとベリーの配置が工夫されていて、視点が自然と中心の商品パッケージに行くようにデザインされているのがとてもすごいと思いました。
商品を打ち出しするバナーを作成するときは、奥行きや立体感を演出するデザインも頭の引き出しに入れておきたいと思います(*^^*)
まとめ
今回のバナートレースは、使用素材が多くあり、選定と加工にとても時間がかかりました(>_<)
素材をダウンロードして反映してみても色合いがマッチしなかったりと何度もやり直しをしたのでとても大変でした。
Adobe Stockの無料素材はダウンロード回数が限られているので、数日に分けてダウンロードをして試したりと試行錯誤しました…。
何とかイメージ通りのデザインでトレースをすることができて達成感があります(*^^*)
細かなデザインが工夫されており、時間がかかるデザインはとても魅力的になるなと思いました。
ありがとうございました！
HerTech
