バナーをトレースしてみました
こんにちは、ソラです😊
山田秀平さんのWEBデザインスクールDLLで勉強して2ヶ月半になりました。
今はバナーの作成方法を学び終わって、ワークブックで実践を重ねているところです！
どうしたらもっとデザインができるようになるんだろう…と思いながらTwitterやネットを見ているとWEBデザインの勉強をしている方々が「バナートレース」をしているのがよく目に入りました。
ということで、私もバナートレースなるものをやってみたいと思います。
バナートレースってなに？
トレースとは、上からなぞり書きをすることです。
つまり、バナートレースとはお手本のバナーをそのまま上からなぞったようにそっくりそのまま作ってみることです！
既存のバナーのデザインをそのまま再現することで、配置のしかたやデザインの工夫がよくわかるようになるみたいです。
まずはシンプルなものからトレースする
バナートレースの初心者はデザイン的に凝ったものをトレースしようとするとかなり大変のようです。
私は今回初めてバナートレースをするので、いきなり凝ったデザインに挑戦せず、まずは文字だけのシンプルなバナーをトレースしてみます！
トレースするバナーを選ぶ
今回はバナーアーカイブから見つけた超シンプルなバナーをトレースします！
ただ文字入力しただけに見えますが、果たして簡単にできるのでしょうか？
バナートレース開始！！
Illustratorでバナーのトレースをしていきます。
バナーのトレースのやり方は
- お手本のバナーを隣に置く
- 隣にお手本バナーをコピーする
- コピーしたバナーを半透明にする
- 半透明のバナーの上に要素を置いていく
- 調整と配色をする
という手順です！
トレース前の画面がこちら
ここで疑問が出てきます。
どのフォントを使えばいいの？
まだフォント感がない😭
今回はたまたま「明朝体かな？」と思って選んだ「ヒラギノ明朝」が当たりだったようでラッキーです。
- アウター
- ニット
- カーディガン
の部分は「ヒラギノ丸ゴ」がぴったり合いました。
かなりシンプルなフォントで構成されているバナーですね。
「Mens＆Ladies ファッション通販サイト」という文字も「ヒラギノ丸ゴ」にしました。
ロゴは仕事でもクライアントから提供してもらえる部分かと思うので、フォトショップで切りぬいたものを使いました。
配置をしたものがこちら。
簡単に見えますが、実は文字と文字の間を詰めたり離したり…
「SALE」の部分はアウトライン化してAを少し変形させたり…
ただ文字を入力しただけじゃトレースにならなかった！！
ここまでシンプルなバナーもデザインされているんだなぁ〜〜✨✨
色をつけて完成です。
憧れのバナートレースができた…
う、うれしい🥺
まとめ
トレースしてわかったバナーの情報をまとめます😊
今回使ったフォント
- ヒラギノ明朝ProN
- ヒラギノ丸ゴProN
今回の優先順位
- SALE
- 全品40%OFF
- アウター/ニット/カーディガン
- Mens＆Ladies ファッション通販サイト/企業ロゴ
反省
「40%」のところはもっとギュッとまとめた方がよかった
気づき
とってもシンプルに見えるバナーなのに、文字間の距離や文字の大きさ、文字幅などかなり調整が必要でした。
画像やイラストやあしらいがないバナーも簡単だとは限らないということが最大の気づきです。
色使いについては、赤白の組み合わせは視認性が良くて、セールだということも分かりやすい！
赤は温度を感じる色なので、夏より冬のセールの方がハマる色合いかもしれません。
DLLは卒業課題で合格しないと卒業できないのですが、課題のバナーを作る前にたっぷりバナートレースして腕を磨こうと思います💪