こんにちは、WEBデザイナーのあおいです！
今回は初心者デザイナー向け『バナーのトレース方法』を解説します。
トレースとは「模写」という意味で、参考そっくりにバナー作っていく練習のことです。
トレースを繰り返すことで、バナー制作の腕は劇的に上がります。
しかし、トレースをする際の注意点を理解してやらなければ、その効果は半減してしまいます。
ぜひ本記事の解説を読んだ上で、トレースを始めてみてくださいね。
もくじ
バナートレース（模写）とは？そのメリット
トレースとは、参考そっくりに真似して作ることをいいます。
例えば、こちらは私がトレースしたバナーです↓
見本のバナー
トレースしたバナー
※商品の素材は、見本から切り抜いて持ってきました。
トレースをすることのメリットは、主に3つあります。
- Photoshopで使えるツールが増える
- バナー制作のレベルが上がる
- 素材探しが上達する
私はかつてスクールでデザインを学んだ後、3ヶ月ほどでバナー制作のお仕事を始めました。
毎日のトレースを欠かさなかったことで、日に日に上達していくのを自分でも実感しました。
トレースからは本当に多くのことを学べるので、特に初心者デザイナーさんは定期的に取り組むことをオススメします！
Photoshopを使ったバナートレースのやり方
ここからは、トレースのやり方を解説します。
簡単な流れ
- 参考探し
- Photoshopでトレース
- そっくりを極める
ステップ1：参考探し
参考にするバナーは、以下のサイトから調達するのがオススメです。
おすすめサイト
そして参考を選ぶときの注意点は、『凝ったデザインのものを選ばないこと』です。
凝ったデザインというのは、そのバナーで紹介されてる商品やサービスにしか適さないデザインのことです。
そうではなく、他のバナーを作る際にも使えそうな汎用性の高いデザインのバナーを選ぶようにしましょう。
ステップ2：Photoshopでトレース
次にPhotoshopを開き、トレースをします。
トレースしたいバナーを下敷きに置き、その上から同じように文字や素材を配置していきます。
作る手順は人それぞれですが、私は文字や素材を配置した後で、次に色や装飾をやっています。
トレースを繰り返す中で、自分にしっくりくる手順を確立できるといいですね。
Photoshopでトレースする時に役立つのが「スポイトツール」と「マッチフォント」の機能です。
・スポイトツール：参考と同じ色を抽出できる
・マッチフォント：参考と同じフォントを調べられる
こちらも参考に↓
ステップ3：そっくりを極める
トレースでは、妥協しないことが大事です。
こんな妥協には要注意
- ちょっとフォントの形が違うけど、まぁいいか
- 他にいい素材が見つからないから、これでいいや
- この加工難しいから、やめよう
せっかく良いバナーを参考にしても、見本には劣るクオリティで作ってしまっては、バナー制作のレベルは一向に上がりません。
確かに素材や写真は、まったく同じものを探すのが困難だと思います。
しかしそんな時でも、できるだけ参考に近い雰囲気やイメージを持つものを探す努力が必要です。
素材サイトには無料で使えるものがたくさんあります。
後述「おまけ：無料で使える素材サイト一覧」に載せているので、合わせてご覧ください。
また、トレースにおいて「加工のやり方がわからないもの」が出てきた時は、ググって検索しましょう。
グーグル検索で納得のいく解説が見つからない時は、YouTubeで再検索してみるのも一つの方法です。
もしくは「Photoshopのツール解説書」を一冊手元においておくと便利だと思います。
初心者向けオススメ書籍↓
トレースに慣れてきたら、スピードを早めよう
トレースに慣れてきたら、制作スピードも意識するようにしましょう。
仕事でバナー制作をするとなれば、作業時間で時給が変わってくるからです。
例えば「1枚3000円」のバナーを作るのに、2時間かかれば時給1500円ですが、1時間で作れたら時給3000円になります。
慣れてきたら時間を測って作ってみるのが良いですね。
ランディングページのトレースもおすすめ
バナーのトレースが習得できたら、次はランディングページのトレースがおすすめです。
ランティングページとは、化粧品やサプリといった商品でよく見かける「1枚の縦長ページ」のことです。
初心者はまず、その「トップ画像部分」のトレース練習をするといいと思います。
おまけ：無料で使える素材サイト一覧
・いらすとや
http://www.irasutoya.com/
・ぱくたそ
https://www.pakutaso.com/
・花イラスト素材
http://hanafree.seesaa.net/
・フード・フォト
http://food.foto.ne.jp/
・イラストAC
http://www.ac-illust.com/
・写真AC
http://www.photo-ac.com/
・シルエットAC
http://www.silhouette-ac.com/
・吹き出しデザイン
http://fukidesign.com/
・アイコン素材
https://icooon-mono.com/
・筆文字素材
https://brush-stock.com/
・pixaboy
https://pixabay.com/
・freepik
https://www.freepik.com/home
