WEBデザインの勉強だニャー

Photoshop・Illustratorのウェブデザインを勉強中!その他htmlやcss・javascriptの備忘録

超かんたん!市松模様でキーワードを目立たせるバナーデザイン

アドビIllusutratorを使ったバナーデザインの紹介。
ふだんスマホやPCで表示されるバナー広告。
広告だとわかっているから余程のことでない限りクリックしませんが、気になる商品の比較サイトのバナー広告はどう違うのか気になってクリックしてしまいます。

商品の特徴やキャッチコピーの売り言葉より「徹底比較」や「初回無料」などより見込み客のメリットの方が注目しやすいのかもしれません。

今回は徹底比較の文字をバナーデザインします。
↓完成デザイン
f:id:h__n:20160107232509p:plain

市松模様でキーワードを目立たせる方法

まずは長方形ツールで徹底比較がおさまる枠を作ります。(例:wide275px/height75px)

このときカラーは特にデフォルト指定で構いませんが、作業効率を上げるなら線が黒で塗りは白を設定しましょう。

そしてメニューバー→オブジェクトツール→パス→段組設定で列を4で間隔を0にすると一文字がおさまる枠が4つ並びます。

あとは枠内に一文字目の「徹」を入れて調整し、枠に対して垂直方向中央に合わせ微調整。そのまま文字を3回コピーして徹底比較の文字を完成させます。
(水平方向中央寄せは文字のバランスをみてそれぞれ調整します)
今回フォントは小塚ゴシックProにしました。文字と枠で記号やアイコン装飾のような一つの視点となるのが狙いです。
f:id:h__n:20160107234219p:plain
↓ちなみに小塚明朝Pr6Nだと枠内の余白が目立ち、文字のインパクトが弱いことがわかります。
f:id:h__n:20160107234307p:plain

小塚ゴシックProのフォントでさらび注目してもらうために市松模様で際立たせます。
こちらも簡単で一つ目の「徹」と三つ目の「比」を選んで塗りを黒に変更、同様に文字を白に変更。
これで市松模様の徹底比較文字が完成です!
f:id:h__n:20160107232509p:plain
慣れれば1分もかからないぐらいの作業ですので、Illustrator初心者の方はステップアップでチャレンジしてみるといいかもしれませんね。
(ちなみにわたしは10分以上かかりました...まだまだです)
バナーやチラシでよく見かける定番デザインですので、クラウドソーシングでバナーデザインをされている方は技の引き出しに入れておくといいかもです。