今回は米粉のドーナツバナーをトレースしてみました♪
見本バナーを選ぶときに目に飛び込んできたのでチェレンジしてみました！
今回はびびっときたバナーをトレースしようと思っていたので楽しくトレースすることができました。
今後の参考になるように、使用素材やトレースのポイントをご紹介します。
トレース画像
バナーサイズ（幅×高さ）：1040×1040
使用ソフト：Photoshop
使用カラー：#de9900 #fad177 #995b0a
使用フォント：Pacifico Bold / HGP創英角ｺﾞｼｯｸUB
参照：BANNER LIBRARY
振り返り
知識・スキル
背景のパターンオーバーレイ
背景の四角はパターンオーバーレイで再現していることはわかったのですが、少しかすれたデザインだったのでどうしたらいいか最初は戸惑いました。
パターンオーバーレイの上から編集するやり方がわからなかったので、自分でかすれた四角のパターンを作成してみました。
パターンを作成する方法
①新規作成
②表示＞パターンプレビュー
パターンプレビューを表示させることで、実際に適用した時の状態がわかりやすく確認することができます！
③正方形を2つ作成
２つの正方形が同じ数値になるように、正確な場所に配置するようにしないと、パターンにしたときにずれてしまうので慎重に作業します。
④白ブラシでかさつきを演出
今回は、「Kyleの究極のパステルパルーザ」を使用して、不透明度と流量を下げて部分的にブラシでかさつきを付けました。
⑤編集＞パターンを定義
「パターンを定義」でパターン登録をして完了です。
いつも使用するパターンオーバーレイに登録したパターンが表示されます！
使用素材
お米の画像は、写真ACで似ている画像を見つけて使用しました！
写真ACは、無料でダウンロードできるのが魅力的です！クレジット表記やリンクは一切不要なので気軽に使用することができます。
稲穂の写真は、AdobeStockで似ている画像を見つけて使用しました！
AdobeStockは料金がかかる画像もあるのですが、検索窓のプルダウンで「無料素材」を選ぶと無料でダウンロードできる素材を探すことができます。
見本バナーと同じような稲穂の写真はなかなか見つけられませんでした。なので、AdobeStockの稲穂の写真の明るさを調整して何個か複製して再現してみました！
フォント
今回もフォント探しにはとても苦労しました。
「Hello! Komeco」のフォントはとてもデザイン性が高く見つけるのに苦戦しました。
今回もAdobe Fontsを使って似たデザインのフォントを選んで使用してみました！
今回使用したのは、「Pacifico Bold」というフォントになります。
気づき
商品写真を大きくメインにに打ち出している
前回のハンバーガーバナーの時と同様、商品写真がバナーの半分以上を占めていました。
商品の魅力を伝えるためには商品画像を大きく打ち出す方法が多く使われてると思いました。
メインのドーナツと、地方限定のドーナツが下に小さく並べられていて、とても商品に目が行くデザインだと思いました。
統一感のある配色
全体のカラーに統一感があり目に留まりやすいデザインになっていると思いました。
茶色と黄色を強弱つけて配色しているのがとても魅力的だと思いました。
すべての色が邪魔をせず、1つ1つの色が全体の統一感を出しているのがすごいと思いました。
バナー制作を行う際には、同系色の配色も参考にしてみようと思います！
商品の背景に色付け
商品の背景に強調したパターンのデザインが反映してあります。
まとめ
今回は色んなスキルと気づきを学ぶことができました！
画像探しとフォント探しが意外と時間かかってしまうことに気づきました…
妥協をしてしまうと全体のバランスがおかしくなってしまうので、これからも慎重に選んでいこうと思います。
もっと効率よく探せるようになるように、これからも繰り返しバナートレースを頑張っていきます！
ありがとうございました！