見出し画像

価格.comプロバイダ | バナートレース【7】


かかった時間:3.5H(…)
使用ツール:Photoshop、Illustrator
使用フォント:A-OTF UD新ゴNT Pro、HGS創英角ゴシックUB
今回の学ぶところ:
・背景の集中線(参考サイト
・立体文字(参考サイト
・立体文字の上にかかっているドット(参考サイト
・背景前の吹き出し(参考サイト123

アートボード 2 のコピー

バナーの目的

価格.comの特徴である料金比較を大きく出し、検討層に向けて訴求。

バナーデザインの気付き

・背景、色使い共に価格.comのロゴに近い色を使用。
「料金比較」はジャンプ率を高く、上にドットを敷くことでより目立ち強調されている。また、背景に白い吹き出しを敷くことで文字の見やすさと、集中線→吹き出しで中央へ目線を集めている。

難しかったところ

・背景の集中線、フォトショで何とか作れないかと思い、ノイズ→(色調補正)2階調化→1PX伸ばし→(フィルター)変形>極座標 でやってみたがマンガっぽく作れない+どうしても黒が混ざり上手くいかなかったのでイラレでやったらすぐできた。

・吹き出しのイラストもイラレの方が早くできた。今まで全然イラレを触ってこなかったけど、飾りが多い文字やイラスト系はイラレの方が早いし綺麗。

・立体文字も無理くりPhotoshopで立体を作ったが、後から調べるとイラレの方が簡単だし綺麗に作れそう。今度試してみる。

・価格.comから申し込むと~の部分、文字を斜めにするとグラデーションは正位置の時のまま?になるのか、上手く文字に対して90度でかけれなかった…