Webデザイン

【デザインレベル爆速UP】Webデザインのバナートレースやり方と手順

【デザインレベル爆速UP】Webデザインのバナートレースやり方と手順

この記事ではデザインレベルを爆速でUPさせることのできる『バナーのトレース(模写)』について解説します。

デザイナーを目指す方でなくても、デザインレベルを上げたいならぜひ挑戦してみてください。

 

こんな内容を解説します
  • バナーのトレースとは?
  • トレースするバナーの探し方
  • 具体的な手順
  • トレースする時の注意点

 

バナートレースとは?そのメリット

トレースとは「模写」とも呼ばれますが、要は見本そっくりに同じように作っていく練習のことです。

例えば以下のような感じ。

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

 

左がネットで見つけてきたバナーで、右が私がPhotoshopでトレースしたバナーになります。

配置や色はもちろん、フォントやグラデーション、影の付け方など、とにかく見本そっくりを目指して作っていきます。

 

トレース練習をするメリット
  1. 効率よくPhotoshopで使えるツールを増やしていける
  2. バナー制作のレベル、素材探しのレベルが上がる

 

例えばギターや絵、ビジネスなどデザイン以外の分野においてもそうですが、「いいものを真似る作業は、その分野で成功するため近道」ともいいますよね。

私も初心者の頃一日1つのバナートレースを続けたことで、日に日にレベルが上がっていくのを実感しました。

 

また実際にネット上で使用されているバナーを題材にすることで「本当に実務で使えるツール・機能だけ」を効率よく学んでいくことができます。

というのもPhotoshop入門書などで解説されるツールには、実務ではあまり使わない、初心者が無理に覚える必要のないツールも混じっているからです。

 

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

ここからは「トレースのやり方・手順」をステップに沿って解説していきます。

  1. 見本のバナーを探す
  2. Photoshopでトレースする
  3. そっくりを極める

 

ステップ1:見本のバナーを探す

見本にするバナーは下記サイトから調達するのがおすすめです。

 

作れるデザインの幅を広げるためにも、あまり同じようなテイストのバナーばかりを選ばないようにするといいでしょう。

慣れてきたらバナー以外にも、サムネイルやヘッダー、LPのヘッダー画像などにも幅を広げてみると良いと思います。

 

見本選びの注意点

選ぶ時に気をつけてほしいのは「凝ったデザインのものを選ばないこと」です。

凝ったデザインというのは、そのバナーで紹介されてる商品やサービスにしか適さないデザインのことです。

 

以下の画像2枚の場合、ゲームのバナーはそのゲームという商品にしか適さないデザインになります(=応用ができない)。

 

一方でPaypal決済のバナーは、金融系やWebサービス、男性向け事務のバナーなど他のテーマにも応用できそうなデザインですね。

こういった基準でトレースするバナーを選ぶといいでしょう。

 

ステップ2:Photoshopでトレースする

見本を選び終わったら、次はPhotoshopを開いてトレースをします。

トレースしたいバナーを下敷きに置き、その上から同じように文字や素材を配置していきましょう。

 

作る手順は人それぞれですが、私は文字や素材を全て配置した後で色や装飾をやっています。

トレースを繰り返す中で、自分にしっくりくる手順を確立できるのが良いかと思います。

 

トレースする際に出てくる「この加工どうやるんだろう...」という疑問は、その都度グーグル検索して調べましょう。そうしていく中で、徐々に使えるツール・機能が増えていきます。

 

▼Photoshopの機能はこちらの記事もぜひ参考にしてください。

【しましま・キラキラ・かすれ文字など】便利なPhotoshopの機能を動画解説
【しましま・キラキラ・かすれ文字など】便利なPhotoshopの機能を動画解説

この記事では『知っていると便利なPhotoshopのツール・機能』を解説します。 ネットでバナーなどを見ていると「あ、この加工やってみたい!でもどうやるんだろう...」と疑問に思うことがありませんか。 ...

続きを見る

 

ステップ3:そっくりを極める

トレースで大事なことは何といっても「妥協せずにいかに見本に真似られるか」です。

【こんな妥協には要注意】

  • ちょっとフォントの形が違うけど、まぁいいか
  • 他にいい素材が見つからないから、これでいいや
  • この加工は難しそうだから、やめよう

 

せっかく良いバナーを参考にしても、見本には劣るクオリティで作ってしまってはバナー制作のレベルは一向に上がりません。

確かにバナーに使われている素材などは、まったく同じものを探すことが困難です。

しかしそんな時でも、できるだけ見本に近い雰囲気やイメージを持つ素材を見つけ出す努力が必要ですね。

 

▼こちらも参考にしてみてください。

【優良サイト厳選】商用利用可かつ無料で使える素材サイト一覧

この記事では『商用利用可かつ無料で使える優良素材サイト』をまとめています。 一部クレジット表記が必要なものや有料のものも含まれるため、各サイトの利用規約を確認の上でご利用ください。   イラ ...

続きを見る

 

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