マーケティング部兼、制作部のKです。
弊社では、新人デザイナーのスキルアップのため、
バナートレース100本を実施しています。
何をするかというと、
クライアント様のサイトやWeb上に公開されているバナーと1pxのズレも無いようにトレースします。
↓バナーはこういうのです
僕が感じるバナートレースのメリット
まだ数回しかトレースをしていませんが、それでもいくつか感じるメリットがあります。
というかメリットしかありません。
・先輩たちのノウハウをもらえる
参考書を読んだりWEBで調べることもいいですが、
実際に実務で使っているノウハウを聞くことができるのでスキルアップのスピードが段違いです。
・編集ソフトの操作に慣れるので、実務で使うときに時間短縮につながる。
トレースを始めてから作業時間が初期の半分くらいになったので単純に効率が倍くらいになります。
・デザインの基本である「揃える」ということが無意識にできるようになってくる。
世に出回っているバナーは基本的に要素を「揃える」ことを徹底しているので、
自分の体にもそれを覚えさせることができます。
トレースしたバナーとやり取りを公開
1回目のトレースから余すことなく、公開いたしますので
長い記事になりますが、よろしくお願いいたします。
登場人物
<奥野> 弊社代表
<Ｕ> 先輩デザイナー
<Ｋ> 新人デザイナー ブログの執筆者
※画像は上がトレース元、下が僕が作成した画像です。
No.1 2016/11/08
かかった時間 32分
<奥野>
さすが。
No.2 2016/11/10
かかった時間 30分
<Ｋ>
フォントを探すのに時間を要してしまいました。
<奥野>
基本はいいけど、
・ストライプの濃さ → もう５％くらい薄く？
・フォントの濃さ → アンチエイリアスで調整
No.3 2016/11/13
かかった時間 24分
<Ｕ>
フォントは「ヒラギノ角ゴ」
トーレース元よりコントラストが低く、パッとしない印象になっています。
No.4 2016/11/13
かかった時間 17分
<Ｕ>
フォントは「ヒラギノ角ゴ」
トレース元より彩度が低く、見たときのキャッチーさが薄くなってます。
No.5 2016/11/13
かかった時間 21分
<Ｕ>
色のバランス的にはトレース元とあまり変わらないクオリティですが、
あくまでトレースなので、もう少し色の再現ができればと思います。
No.6 2016/11/14
かかった時間 44分
<Ｋ>
字間の調整に時間を要してしまいました。
【質問】
赤系統ならこの色コード、青系統ならこの色コードのように、
決まった色コードなどはあるのでしょうか？
スポイトツールで色をとると、どうしても色味が違うので、
直接色コードを指定するのが良いのかと思い、質問させていただきました。
<奥野>
いい感じ
文字のアンチエイリアス調整を頑張ればより良いかな
色は
赤はc00
青は06f
黄色はfc0
を使うことが多いかな
<Ｕ>
今回の分の小さい方のフォントは、MS Pゴシックです。
アンチエイリアスをなくすと、10pxまで綺麗に調整されているので、
一般的にはこちらが使用されます。
字間の調整は「Ctrl＋→」「Ctrl＋←」で調整可能です。
質問に関してですが、サイト制作時にキーカラーは設定してると思います。
カラーコードがわからない場合、
拡大して一番取りたい色が出ている箇所をスポイトで取れば、同じかかなり近い色になります。
思った色が取れるまで何度かやり直して見てください。
No.7 2016/11/15
かかった時間 36分
<Ｋ>
文字の立体感の出し方がうまくいかなかったかと思います。
<Ｕ>
ベベルは外にも付けれるんだぜ。
No.8 2016/11/16
かかった時間 24分
<Ｋ>
macにMSPゴシックが入っていなかったので、営業時間の数字のみ別のフォントで代用しています。
<奥野>
うん 良いやん
シャドウが濃いのがちょっと気になるけど って感じ
No.9 2016/11/17
かかった時間 15分
<Ｋ>
かなりスムーズにトレースできたと思います。
<奥野>
うん、いい感じ
８５点って感じで
残りの１５点は
・無料見積もり、の文字が若干濃い
・女性を別のフリー素材の写真で再現
かな
No.10 2016/11/20
かかった時間 50分
<Ｋ>
矩形の再現に苦労しました。
数字のフォントがわからず別フォントで代用しています。
<Ｕ>
縦位置のバランスが悪いです。
「初めてのお客さま…」と「もれなく…」は一つの情報なので近づけるという風に、情報のくくりを意識するとよりまとまったデザインができるようになります。
色味も彩度が低すぎて沈んでいるので、カラーパレットも使えるようにした方がいいです。
フォントは多分平仮名も数字もメイリオです。
<奥野>
・数字の字詰め
を意識してみようか。
まだまだ続きます！日々更新中
新人デザイナー育成 バナートレース100本への道①【1本目~10本目】
新人デザイナー育成 バナートレース100本への道②【11本目~20本目】
新人デザイナー育成 バナートレース100本への道③【21本目~30本目】
新人デザイナー育成 バナートレース100本への道④【31本目~40本目】
新人デザイナー育成 バナートレース100本への道⑤【41本目~50本目】
新人デザイナー育成 バナートレース100本への道⑥【51本目~60本目】
トレースしたバナーが100個になるまで、この記事は更新していきます。
毎日、新しいやり取りが増えていきますので、ぜひチェックしてみて下さい。
