さまざま色や素材が使われていますが、全体に統一感のあるバナーデザインですよね！
配色が邪魔をせず、メッセージや商品、イメージ写真が強調されていてとても訴求力のあるバナーですよね(*^^*)
今回チャレンジしたトレースについて、参考素材やデザイン方法を書いていますので、ぜひチェックしてみてください♪
トレース画像
バナーサイズ（幅×高さ）： 994 x 994
使用ソフト：Photoshop
使用カラー：#fc5e15 #ffd7cd #fff6e5
使用フォント： HGP創英角ｺﾞｼｯｸUB / BIZ UDPゴシック Bold
参照：BANNER LIBRARY
振り返り
知識・スキル
使用素材
精油の種類の写真はすべて「写真AC」から素材をダウンロードしました！
バナートレースをしているときは似ている写真を探そうと必死だったのでそれぞれの精油の名称は後から知りました(>_<)
同じ種類の商品を調べてみると精油の種類が書かれていました！
精油の種類に応じた写真ではないのですが、似たような写真を使用しましたのでリンクを貼っておきます。
今回のバナーをトレースしようと考えている方は是非ダウンロードしてトレースしてみてください(*^^*)
商品の背景にあるオレンジのイラストと、下部にあるリボンの素材は、「イラストAC」からダウンロードをして使用しています！
同じデザインのイラストではないのですが、全体のデザインが似たイラストを素材として選んでいます。
全体のデザインができるだけ見本に近づく素材を選んでみました！
こちらもリンクを貼っておきますので是非参考にしてみてください♪
商品を鏡面に反射させる
楕円形の影
1つ目の影は右下に小さくある楕円の影です！
こちらは楕円形ツールで見本のバナーと同じ大きさに調整をして、商品の色の濃い色を設定して再現しています。
鏡面に反射させる
もう1つは、真下に反射する商品デザインです！
垂直に鏡面反射させるため、商品画像を複製し商品の垂直に下に配置させます。
そのあとに、複製した商品画像の不透明度を下げれば完成です★
鏡面反射については、今回は垂直でしたが、デザインによっては斜めの反射の方があっていたりする場合もあります。
細かな調整方法はまだ習得できていないので、今後挑戦していきたいです。
クリッピングマスクで、画像を配置
クリッピングマスクとは…配置した画像やオブジェクトを、上に重ねたオブジェクトの形状にマスクする機能
精油の種類を説明する画像は、クリッピングマスクを使用して再現しています！
クリッピングマスクの手順
- 画像を適用したい形を作る
- 写真を反映するして、①で作成した画像にはまるように調整する
- クリッピングマスクをする
- 画像を適切な配置に調整をして完成！
気づき
商品背景にイメージ素材を活用することでイメージ強化
商品の背景に、オレンジのイラスト素材が使用されています。
精油の種類画像でもイメージ付けができますが、商品の背景にイラストを反映させることでより一層商品がどのような香りがするのかイメージできるデザインになっていると思いました！
香りをイメージさせる方法はいろいろあると思いますが、目に届く商品背景にイメージ素材を使用する工夫はとても勉強になりました。バナー作成をする際にはぜひ参考にさせていただきたいです(*^^*)
リボンのデザインで特別感を演出
プレゼント訴求のテキスト「対象のマイクレをご購入でプレゼント」の背景にリボンのデザインが使用されています！
ゴールドの線が入ったグラデーションのリボンで、特別感が演出されていると思いました。
リボンのデザインもさまざまありますが、動きのあるデザインを採用しているため、全体を見た時に目につくデザインになっていると思いました！
「プレゼント」「キャンペーン」などのバナーを作成する際には、特別感のある動きのあるリボンを採用したいとおもいます。
まとめ
今回は画像とイラストとさまざまなデザイン素材が使われていて、見た方にとてもイメージしやすいデザインのバナーだと思いました。
やはりイラストを使用するときは、そのまま使用するとデザインとマッチしなかったりと加工が必要になるので、とても時間がかかりました。
その分、完成した時に全体が華やかになったり、イメージ付けできるデザインになっていたり必要な要素だと実感しました。
どのバナートレースもとても勉強になり、始めた時と比べてPhotoshopの使い方や、デザインの学びが深まりとても充実した学習ができました。
一旦バナートレースはここまでにして、今後はPhotoshopのスキル磨き、他のデザインツールの勉強、LP作成などもやっていこうと思っています！
随時アップしていきますので、これからWEBデザインの勉強を始めようと考えている方は一緒に頑張っていきましょう(●´ω｀●)
今回もありがとうございました！
HerTech
