こんにちは、トモシゲです。(４日目)
本日は午前中面接を受けて、午後から出勤させて頂きました。
そして本日させて頂いたのは、バナーのトレースです。
What is banner ?
バナー（banner）とはそのままの意味では「旗」や「のぼり」の意味だそうです。
「のぼり」とはパン屋さんや喫茶店の店先に出すあれです。道行く人にお店の存在を知ってもらうためのものですね。
ウェブのバナーも同じで、ネットを見ている人に自分達のお店やサービスを知ってもらい、クリックする事で設定しておいたページを見せる事が目的です。
トレースで学ぶ
バナーはデザインのポイントがたくさん詰まったものであり、簡単に見えて簡単には作れません。
まずはトレースをしてみることにしました。
トレースとは既にあるものをそっくりそのままに作る事です。
どのバナーを作るかネットでいろいろ検索します。
今回作るのはこちらのDAIHATSUの自動車のバナーにしてみます。
良く見てみよう
いきなり作り始めるのではなく、細部をよく見てみましょう。
一番目立っているのはグットサインを出している女性ですね。
そして白い文字でコピーと商品名があります。
左揃えになっています。
商品名の文字は他よりも太いですね。
自動車の正面写真があり、その下で踊る3人の女性。
その下に「詳しくはこちら！」の誘導部分があります。
「すこぶる目を引く！」のコピーは小さ目ですが、このバナーの場合、
メインの女性の顔の次にこのコピーに視線が行くでしょう。
その次に、メインのコピー、自動車、詳しくはこちら。この順番かと思います。
自動車の下と詳しくは・・の下には影が入れてありますね。またメインコピーは女性の肌にも掛かっていますので、少し影を入れて見やすくしてある様です。
写真素材を探そう
こちらのバナーをトレースする訳ですが、肝心の主役の女性は代役を探す必要がありそうです。
フリーの素材写真を探して、同じようなポーズの写真が無いか探します。
写真素材を探すのは「photo AC」というサイトです。
無料でも使える素材が用意されています。（一日の中で検索回数やダウンロード回数に上限があるので注意）
当然同じ画像はありませんので、グットサインをしている女性を探します。
うーん。
髪や服の色が違いすぎますが、一旦こちらでやってみましょう。
写真をダウンロードして、Photoshopで開きます。
そして女性だけを切り抜いていきますよ。
髪の毛の切り抜きが毎回大変なのですが、髪の毛の上手な切り抜き方の記事が
あちこちにありますので様々試していい方法をまた報告したいと思います。（過去の訓練生ブログにもありましたね）
切り抜いた画像がこちら
挙げている手が見本と反対なので反転して使いましょう。
車、ロゴ、踊る三人は見本からコピーして使いましょう。
では作っていきます
Photoshopで作っていきます。
見本となるバナーを置き、その隣に作成する場所を設けます。
そしてガイドを引いて、見本と同じ場所に配置できるようにします。
ガイドの引き方ですが、Photoshop のショートカットキー（cmd+R winの場合はctrl+R）で
作業場所の周りに定規が表示されます。定規の上にカーソルを持っていき、ドラッグする事で
ガイドを引くことができます。消す時はドラッグして画面外に捨てましょう。
見本をよく見て組み立てます。
そして完成へ
やっぱり本物は綺麗だと改めて思いますね。文字や写真との隙間やフォントの選び方、大きさ太さなど、1ピクセル単位で調節が必要な世界です。
バナーを見た人が、クリックするかしないかを判断するのは一瞬の事だと思います。その一瞬に心を動かすデザインなのですから難しいのは当然ですね。
バナー作成はデザインのスキルが上がりそうなのでこれからも挑戦していきたいと思います。
それではまた明日！