【photoshop】バナートレース第30回目 プレゼント企画バナーにチャレンジ

 
今回は、マイクレ商品のプレゼント企画バナーのトレースにチャレンジしました!

さまざま色や素材が使われていますが、全体に統一感のあるバナーデザインですよね!

配色が邪魔をせず、メッセージや商品、イメージ写真が強調されていてとても訴求力のあるバナーですよね(*^^*)
今回チャレンジしたトレースについて、参考素材やデザイン方法を書いていますので、ぜひチェックしてみてください♪

トレース画像

バナーサイズ(幅×高さ): 994 x 994
使用ソフト:Photoshop
使用カラー:#fc5e15 #ffd7cd #fff6e5
使用フォント: HGP創英角ゴシックUB / BIZ UDPゴシック Bold
参照:BANNER LIBRARY

振り返り

知識・スキル

使用素材

精油の種類の写真はすべて「写真AC」から素材をダウンロードしました!

バナートレースをしているときは似ている写真を探そうと必死だったのでそれぞれの精油の名称は後から知りました(>_<)
同じ種類の商品を調べてみると精油の種類が書かれていました!

精油の種類に応じた写真ではないのですが、似たような写真を使用しましたのでリンクを貼っておきます
今回のバナーをトレースしようと考えている方は是非ダウンロードしてトレースしてみてください(*^^*)

商品の背景にあるオレンジのイラストと、下部にあるリボンの素材は、「イラストAC」からダウンロードをして使用しています!

同じデザインのイラストではないのですが、全体のデザインが似たイラストを素材として選んでいます。
全体のデザインができるだけ見本に近づく素材を選んでみました!

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

商品を鏡面に反射させる

 
商品画像の影は2種類ありましたので、2つの方法で見本バナーのデザインを再現しています!

楕円形の影

1つ目の影は右下に小さくある楕円の影です!
こちらは楕円形ツールで見本のバナーと同じ大きさに調整をして、商品の色の濃い色を設定して再現しています。

鏡面に反射させる

もう1つは、真下に反射する商品デザインです!
垂直に鏡面反射させるため、商品画像を複製し商品の垂直に下に配置させます。
そのあとに、複製した商品画像の不透明度を下げれば完成です★

鏡面反射については、今回は垂直でしたが、デザインによっては斜めの反射の方があっていたりする場合もあります。
細かな調整方法はまだ習得できていないので、今後挑戦していきたいです。

クリッピングマスクで、画像を配置

クリッピングマスクとは配置した画像やオブジェクトを、上に重ねたオブジェクトの形状にマスクする機能

精油の種類を説明する画像は、クリッピングマスクを使用して再現しています!

クリッピングマスクの手順

  1. 画像を適用したい形を作る
  2. 写真を反映するして、①で作成した画像にはまるように調整する
  3. クリッピングマスクをする
  4. 画像を適切な配置に調整をして完成!

気づき

商品背景にイメージ素材を活用することでイメージ強化

商品の背景に、オレンジのイラスト素材が使用されています。

精油の種類画像でもイメージ付けができますが、商品の背景にイラストを反映させることでより一層商品がどのような香りがするのかイメージできるデザインになっていると思いました!

香りをイメージさせる方法はいろいろあると思いますが、目に届く商品背景にイメージ素材を使用する工夫はとても勉強になりました。バナー作成をする際にはぜひ参考にさせていただきたいです(*^^*)

リボンのデザインで特別感を演出

プレゼント訴求のテキスト「対象のマイクレをご購入でプレゼント」の背景にリボンのデザインが使用されています!

ゴールドの線が入ったグラデーションのリボンで、特別感が演出されていると思いました。
リボンのデザインもさまざまありますが、動きのあるデザインを採用しているため、全体を見た時に目につくデザインになっていると思いました!

「プレゼント」「キャンペーン」などのバナーを作成する際には、特別感のある動きのあるリボンを採用したいとおもいます。

まとめ

今回は画像とイラストとさまざまなデザイン素材が使われていて、見た方にとてもイメージしやすいデザインのバナーだと思いました。

やはりイラストを使用するときは、そのまま使用するとデザインとマッチしなかったりと加工が必要になるので、とても時間がかかりました。
その分、完成した時に全体が華やかになったり、イメージ付けできるデザインになっていたり必要な要素だと実感しました。

 
今回でバナートレース30本を迎えました!

どのバナートレースもとても勉強になり、始めた時と比べてPhotoshopの使い方や、デザインの学びが深まりとても充実した学習ができました。

一旦バナートレースはここまでにして、今後はPhotoshopのスキル磨き、他のデザインツールの勉強、LP作成などもやっていこうと思っています!

随時アップしていきますので、これからWEBデザインの勉強を始めようと考えている方は一緒に頑張っていきましょう(●´ω`●)
今回もありがとうございました!


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デザイナーになりたい!」方には、東京デザインプレックス研究所がおすすめです♪

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