【photoshop】バナートレース第28回目 ソイプロテインのバナーにチャレンジ

 
こんにちは!
今回は「ソイプロテイン」のバナートレースにチャレンジしました!

とても動きのあるデザイン性のあるバナーですよね(●´ω`●)
とても難しそうだと思ったのですが、時間をかけてやってみようと今回チャレンジしてみました!

フルーツも背景のデザインもすべておしゃれでとてもかっこいいですよね…
今回のバナートレースでの学びを書いていますので、ぜひ参考にしてみてください♪

トレース画像

バナーサイズ(幅×高さ): 1040 x 1040
使用ソフト:Photoshop
使用カラー:#f62042 #fda591 #ffffff
使用フォント: Kinto Sans Black / HGSゴシックE
参照:バナー広場

振り返り

知識・スキル

背景のミルクの再現

背景のミルクは2つの素材を使用しています!
メインの大きなミルクの素材と、動きを演出しているミルクの跳ねの素材2つAdobe Stockからダウンロードをして使用しています。

ミルクの素材を探してみるとたくさんありますが、画質が良く、見本バナーと似た画像はAdobe Stockにしかありませんでした!
このバナートレースをしようと考えている方は、リンクを貼っておきますので是非参考にしてみてください♪

背景の水しぶき

背景の水しぶきはとても躍動感があって素敵ですよね(*^^*)

背景の素材もAdobe Stockで見つけてダウンロードをしました!
水しぶきの画像はたくさんの形があり同じような画像を探すのがとても大変だったのですが、同じような画像を見つけました!
リンクを貼っておきますので是非参考にしてみてください。

背景の水しぶきの再現!

  1. Photoshopに画像を反映
  2. 反映した画像の大きさ、向きを調整
  3. 反映した画像を「通常」から「スクリーン」に設定

ベリーの使用素材

商品周りに使用されているベリーの種類が多く同じような色合い、形のものを探すのにとても時間がかかりました(>_<)

本当だったら、同じセットの画像を使用したかったのですが、なかなか見つかりませんでしたので各フルーツの画像を探して使用しています。

 
こちらも使用をした素材のリンクを貼っておきますので是非参考にしてみてください!

“New”の再現

“New”のフォントは「Freestyle Script Regular」で、下線はブラシツールの「丸筆(アングル)やや硬毛」のブラシを使用して再現しています!

コピースタンプツールで画像を修正

 
コピースタンプツールで元画像の写真を修正しました!
コピースタンプツールとは?
サンプリングした画像をコピーして修正したいオリジナル画像レイヤーに直接修正をおこなうことができる機能
元画像の商品写真にテキストの「ew」の表記があったので、商品の画像の商品の色をコピーして文字を消しました!

気づき

多くのイメージ画像を使用すると全体の立体感が出る

今回は、商品パッケージ以外にベリー、ミルク、水しぶきと多くの画像を使用していました!

加工がとても大変でしたが、画像をたくさん使用することで奥行きが出て全体の立体感とイメージ付けをすることができると学びました。
ミルク、水しぶきの背景は元画像が立体感があるので、ベリーを商品の上下に重ねることでより奥行きが増していると思いました。

丸い水しぶきとベリーの配置が工夫されていて、視点が自然と中心の商品パッケージに行くようにデザインされているのがとてもすごいと思いました。

商品を打ち出しするバナーを作成するときは、奥行きや立体感を演出するデザインも頭の引き出しに入れておきたいと思います(*^^*)

まとめ

今回のバナートレースは、使用素材が多くあり、選定と加工にとても時間がかかりました(>_<)

素材をダウンロードして反映してみても色合いがマッチしなかったりと何度もやり直しをしたのでとても大変でした。
Adobe Stockの無料素材はダウンロード回数が限られているので、数日に分けてダウンロードをして試したりと試行錯誤しました…。

何とかイメージ通りのデザインでトレースをすることができて達成感があります(*^^*)

細かなデザインが工夫されており、時間がかかるデザインはとても魅力的になるなと思いました。
ありがとうございました!


HerTech

 

HerTechといえば、完全初心者でもたった4か月でWebデザインスキルを習得できる女性限定スクールです♪

また、なんといってもオンライン勉強会・チャットサポート・グループコーチングで挫折・不安をゼロにする仕組みがあるので継続して勉強することができます
短期間でWebデザインスキルを学びたい!」「挫折せずスキルを身に着けたい!」方には、HerTechがおすすめです♪

でも、結構高い金額かかるんじゃないの…?
はじめは無料の説明会があるから、自分にあっている内容なのか確認できるから安心だよ!
しかも、60分少人数だから受講内容を詳しく知れるよ♪
ほんと!?
じゃあ、試しにHerTechの無料説明会に参加してようかな!
あと、補足で未経験でも分かりやすいオンライン動画講義と、実践課題があるから着実にスキルアップできるよ♪

 疑問や不安をすべて解消!
HerTech無料説明会を実施中(60分)

WEBCOACH

WEBCOACHといえば、副業・フリーランスを目指す幅広い年代(20代 ~ 40代)の方が学習できるオンラインWebデザインスクールです♪

また、なんとコーチは採用率5%を潜り抜けた現役のフリーランスコーチだから、プロ目線の指導を受けることができます。
質の高いWebデザインスキルを学びたい!」方には、WEBCOACHがおすすめです♪

でも、結構高い金額かかるんじゃないの…?
まずは無料カウンセリングがあるから、学習内容やコースがあっているか確認できるから安心だよ!
ほんと!?
じゃあ試しにWEBCOACHの無料カウンセリングに参加してようかな!
あと、完全マンツーマンで24時間担当コーチに質問をしたり、定期的なコーチングで学習計画やモチベーション管理があるから挫折せず続けられるよ♪

東京デザインプレックス研究所

東京デザインプレックス研究所といえば、2012年1月に開校し、急成長している「プロフェッショナル養成」のためのWebデザインの学校です♪

また、社会人・学生を中心に20代の方に人気で、未経験からキャリアチェンジしたい人におすすめの学校です。
プロのWebデザイナーになりたい!」方には、東京デザインプレックス研究所がおすすめです♪

でも、結構高い金額かかるんじゃないの…?
まずは無料で資料請求できるから、自分の方針にあっている学校なのか確認できるから安心だよ!
ほんと!?
資料請求ならすぐできるね!まずは、東京デザインプレックス研究所の資料請求してみるよ!
あと補足で、次世代のクリエイター/デザイナーに求められる志向性やスキルを学べるプログラムがあるから未経験からキャリアチェンジしたい人にはぴったりだよ♪