デザイナーのなり方

【最速でレベルアップ】Webデザインのバナートレースやり方と手順

Webデザインのバナートレースのやり方と手順。最速でレベルアップするコツ

こんにちは、WEBデザイナーのあおいです!

今回は初心者デザイナー向け『バナーのトレース方法』を解説します。

 

トレースとは「模写」という意味で、参考そっくりにバナー作っていく練習のことです。

トレースを繰り返すことで、バナー制作の腕は劇的に上がります。

 

しかし、トレースをする際の注意点を理解してやらなければ、その効果は半減してしまいます。

ぜひ本記事の解説を読んだ上で、トレースを始めてみてくださいね。

バナートレース(模写)とは?そのメリット

バナートレース(模写)とは?そのメリット

トレースとは、参考そっくりに真似して作ることをいいます。

例えば、こちらは私がトレースしたバナーです↓

 

見本のバナー

 

トレースしたバナー

※商品の素材は、見本から切り抜いて持ってきました。

 

トレースをすることのメリットは、主に3つあります。

  1. Photoshopで使えるツールが増える
  2. バナー制作のレベルが上がる
  3. 素材探しが上達する

 

私はかつてスクールでデザインを学んだ後、3ヶ月ほどでバナー制作のお仕事を始めました。

毎日のトレースを欠かさなかったことで、日に日に上達していくのを自分でも実感しました。

 

トレースからは本当に多くのことを学べるので、特に初心者デザイナーさんは定期的に取り組むことをオススメします!

Photoshopを使ったバナートレースのやり方

Photoshopを使ったバナートレースのやり方

ここからは、トレースのやり方を解説します。

簡単な流れ

  1. 参考探し
  2. Photoshopでトレース
  3. そっくりを極める

ステップ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

© 2021 デザインノウハウ倉庫 Powered by AFFINGER5