【WEBデザイン】学習が捗るバナートレース方法
デザイン力を上げるには、プロの作品を真似して作ってみると良いです。
写経とも言われていますね。
特にバナーは小さな面積にプロの技術をぎゅっと詰めていますので、
制作の要点を掴むのに適しています。
今回は、わたしなりのやり方で、バナートレース法をご紹介します。
バナートレースは、効率的な学習方法
わたしはDTP（紙面）デザインから始めましたが、
紙面の世界でも、まずは面積の小さい名刺からデザインを始めました。
バナートレースは、WEB/DTPともにデザイン力を向上させるのに効率的な学習方法です。
基礎的なやり方を身に付けて、どんどん作っていきましょう。
１.バナーのお手本を決める
ますは良いデザインのバナーを見つけましょう。
今回はこちらのバナーをトレースしていきます。
2.写真素材をあつめて加工
必要素材をつくる
このバナーに必要な写真素材は、
①自転車（エクササイズマシン）に乗ってるお姉さん
②後走車
になります。
お手本のバナーは前方の女性と後ろの人を合成して合わせていると思うので二枚用意しました。
フリー写真素材「ぱくたそ」さんから借りています。
お姉さんがお兄さんになり、フィットネスバイクが競輪になりましたが、細かいことは気にしない。
背景は自転車に乗るお姉さん。
素材を加工する
お兄さん→photoshopでパスを切り取り。
背景のお姉さん→「フィルター」→「ばかし（レンズ）」でぼかして背景に
２つの写真を合成するとこんな感じ。一緒に運転してる感出てますね。
3.文言を枠の中に収める
バナーの文章をサイズ枠の中に書いていきます。
いきなり細かな文字の色や大きさを作ったりするのは良くないです。
①全部の文字を枠におさめる（文字がちゃんと入るかアタリを取る）
②全体の配置を決める
③文字の大きさ調整
④色味やグラデーションの調整
全体の調整から徐々に細かな調整に入るようにしましょう。
この辺の作り方はデザイン学校時代の現役デザイナーの先生の直伝です。
このバナー、和欧混植してるか分からないのですが、ひとまずひらがなと数字や英語をわけて入れます。
例：2ヶ月→「2」「ヶ月」
4.文字を組む
サイズや文字間に気を使いながら、文字組をしていきます。
文字に傾きをつける
画面下記の金額や月会費のゾーンは少し傾いてる感じだったので、
「オブジェクト」→「変形」→「シアー」で１５度の傾きをつけています。
文字影にグラデーションをつける
すいません、グラデーションのかかったキャッチコピーだけ、photoshopで作り直してます。
文字下の影（光彩）をグラデーションにするやり方、イラストレーターでググっても出でこなかったのよ。
Photoshopで文字下のグラデーションの作り方はこちらの記事を参照ください。
5.細かな装飾や調整をして完成
四角と三角の図形は15度の角度でずらしています。
あと自転車に乗る男の人の画像が暗かったので調整しました。
使用したフォントは以下
- 小塚ゴシック Pr6N
- 小塚明朝 Pr6N
- Arial Black
- DIN 2014
バナートレースをするにあたって
背景のぼかし方と文字の背景（光彩）のグラデーションの付け方をものすごくググって勉強しました。
人のデザインをお手本にすると、普段使わない機能を使わなくちゃいけなかったりして勉強になりますね。
これからも時間を見つけてはバナートレースをしていきたいと思います。
その他にデザイン上達する方法
デザインスキルを高めるには、他の人のデザインを見ることも大事です。
わたしがこの業界に入って、いろいろな人に教えてもらった上達方法をまとめていますので、
下記の記事もぜひ読んでみてください。
爆速でデザインレベルが上がります。
デザインスキルを上げていくことは確かに大事ですが、
同時にプログラミング出来るアピールをしておくと就職の手助けになります。
wordpressのテーマデザインは簡単に覚えられますので、こちらの記事もぜひ。