バナートレース #03

おはこんばんちは！既卒生のちぇすです！👹🌾

バナートレース第三弾！

少し時間が空いてしまいました😂
イラレへの拒否感はまだぬぐい切れていません…(Photoshop使いたい…‼)
めげずにググりながらイラレ特訓です！😤

今回は、前回の２枚より少し複雑なものを選びました！テキストをアーチにしたり、アピアランスを使用してテキスト背景をつけることができるようになったかなと思います。アピアランスはPhotoshopには無い機能ですよね！また一歩前進した気がして嬉しいです😊

分からない機能をググりながら制作したので、なんと３時間もかかってしまいました･･早く操作に慣れたいです🤢

今回トレースしたのはこちら！

Pixabayよりこちらの素材をお借りしました！

そして、一部フリーフォントの「しあさって」を使用しました！

フリーフォントのMODI工場　http://modi.jpn.org/

時間 : 3h
ツール : illustrator, Photoshop
・背景は単色ブルーではなく、爽やかな緑や紫を交えている。
・ワンフレーズずつフォントをすべて変えている。

このバナーは文字や情報量が多めですが、要素ごとにフォントを使い分けているため、自然と読むことができます。使われているフォントのほとんどが手書き風フォントのため、文字量のわりに圧が少なく感じます。情報の優先順位でフォントのウェイトや色を変え、テキスト要素をすべて右に集めていることで、ユーザーが混乱することはありません。

導線は、写真→「#LOVE Frappe」→「ラ･フランス」→「8月22日デビュー」→「詳しくはこちら」のクリックボタンとなっています。

これは前回のJ!NSと同様ですが、視線の起点にロゴを配置しています。競合他社が多いため、どこの会社の商品なのかがぱっと見で分かるデザインにしているのかなと思いました。

制作する際、参考にしたサイト
・Illustrator(イラストレーター/イラレ)で角丸を維持したまま、オブジェクトを変形させる方法　https://www.go-next.co.jp/blog/web/illustrator/911/
・文字をアーチにする方法と文字間隔を調整するプロ技テクニック http://illustrator-design.com/technique/text-arch/

バナートレース第三弾は以上です！
今回は新しいツール「アピアランス」を使用できたことが一番の成果です。これからも、簡単なバナーから少しずつ難易度を上げていきます！挫折するのが怖いので、小さな壁を少しずつ超えていきます（笑）