こんにちは！

ななふ@na2factoryです。

バナートレース5回目になります。

過去4回はテキスト中心のバナーをお手本にしていました。

そろそろ画像を使ったバナーもやってみたいな…と。

5回目はいよいよ画像ありバナーに取り組みたいと思います。

お手本として、バナーデザインアーカイブさんのサイトより、

『アウトレットモール BRANDELIのバナーデザイン』を使用させて頂きます。

今回、お手本の色違いサンダルの画像を切り抜いて使用させて頂きます。（切り抜きの練習！）

#5 トレース

【トレースした画像】

#5 制作の振り返り

参考バナータイトル：アウトレットモール BRANDELIのバナーデザイン

参考バナーのサイズ (幅 x 高さ)(px)：200 x 200

制作にかかった時間：3.5時間

使用したフォント

• ￥1,900の部分　：　数字はJost（Bold), ￥はHGP創英角ﾎﾟｯﾌﾟ体
• 均一セール、アウトレットセール、BLANDELI　：　HGP創英角ｺﾞｼｯｸUB

考察

苦労した点

￥1,900のフォントを見本と似た角度で並べる部分

フォントはGoogleFontで探して、Jostが一番近いと思って決めたのですが

その後の角度変更で迷走しました。

単純にテキストを角度つけただけでは、なんか違うのです。

特に数字の向きが見本と全然違う。

今回はテキストを変形（ゆがみ）で無理やり見本に近づけて終了にしました。

もっとスマートな方法がきっとあるんだろうけど…

￥1,900を囲むギザギザ円の作り方

見本のギザギザ円に似たシェイプを発見。

（カスタムシェイプツール→従来のすべてのデフォルトシェイプ→バナーと賞→記章）

しかし、見本と比べるとギザギザの数が合わない。合わせ方も分からない。

なのでカスタムシェイプを使うのはやめて、自分で作ることに。

以下のサイトを参考にして、自分で数えたギザギザの数28で多角形シェイプで作ることができました！（辺のくぼみを10％に設定）

ギザギザ円の色

見本の色は濃いブルーからやや薄いブルーに変わっている感じに見えたので

グラデーションを使ったのです。しかし出来上がりを見るとトレースはのっぺりと平面的！

見本はもっとひと手間かかっている！

後ひと手間が必要なんだと分かったのですがここで力尽きたのでした。

今後の課題

photoshopの小技をもっと覚えること、フォントを探すスピードアップ！

今回は見本から画像を切り抜いて使ったので、次回は素材を探して使うこと、ですね！

---

今回は以上になります。

最後まで読んでいただき、ありがとうございました！