🌅

WEBデザイナーになるための登龍門「バナートレース」やり方。

2022/10/10に公開約2,100字

どうもYumaです。

WEBデザイナーとして働く際、必ず必要となるスキルの一つにPhotoshopがあります。
独学も可能ですが、学校やスクールに通わないと技術を習得するのはなかなか困難です。
しかし技術を2倍3倍に上げる方法があること教わりました。

それはバナートレースです。

学校やスクールに一切通わないでPhotoshopの勉強を始めた僕ですが、バナートレースのおかげで技術の基礎を学ぶことができました。

バナートレースとは

文字通りバナー(WEB上での広告)をトレース(すでにあるものをなぞること)します。
よくWEBサイトやアプリを閲覧している時、広告が出てきますよね、それがバナーです。
なぜトレースをするのか、理由は簡単で技術だけでなく、デザインスキルも身につくから。

トレースすることでPhotoshopの技術、デザインスキルを身につけることができる。
無料なのにも関わらず、とても勉強になる。
それがバナートレースです。

では、実際にどのような流れでトレースをするのかを書いていきます。

バナートレースのやり方

①トレース材料を探す

まずはトレース材料を探します。
おすすめなのはBannerDesignArchive
数多くの有名なバナーが集まっているサイトで、僕がバナートレースをする時に使ったサイトです。

トップページでは正方形型のバナーしかありませんが、検索をかければよく見る横長のバナーも探せます。

②Photoshopで作成

トレースするバナーが決まったら早速Photoshopを開きましょう。
どのように作成するのか、最初はなかなか分からないですよね...。

実際に僕が行った手順を一から書いていきます。ぜひ参考にしてください。

実際にやってみた

1, Photoshopを開く

まずはPhotoshopを開きます。
この時、アートボードの大きさはあまり気にしなくて良いです。(後々大きさ変更できるから)
トレース材がしっかり入るように、ここではWEBのWEB一般サイズで作成していきましょう。

1366px × 768pxです。

2,トレースする画像を開く

今回は例として、とても綺麗だったFANCL化粧品のバナーをトレースします。
ダウンロードしたトレース画像を開きます。

開いたらこんな画面になります。

では早速トレースをしていきましょう。

3,トレースしていく

トレース時、注意するべきことは以下の3点です。

  • 文字は極力同じフォント、全く同じでなくてもよい
  • 画像は同じ画像を使うより、自分で似た画像を探す。
  • 図形などは1pxのズレも生じないように。

です。

バナートレースの目的はトレースを通して技術&デザイン知識を得るというものです。
なので文字や画像は全く同じものを使用しなくても大丈夫。

4,分からないことはググる。

文字幅どうやって変えるんだ?
グラデーションとか影とかどうやってつけるんだ!?

バナートレースを行っていくうちに様々な疑問が出てくると思います。
その都度ググりまくりましょう。そうすることでどんどんPhotoshopの知識が上がっていきます。

5,完成

そして完成したのがこちらになります。

最初は調べながらの作成なので1、2時間程かかりますが慣れれば30分ほどで作成できます。

まとめ

デザインを勉強しようと思っている人にとってバナートレースは本当におすすめです。
今回はFANCLのバナーを作成しましたが過去には30ほどのバナーをトレースしています。
30個程バナーをトレースすればPhotoshopの知識もある程度つきます。

バナートレースを行う前に作成した広告↓

バナートレースを行った後に作成した広告↓

見た目が全く違いますよね、バナートレースを経験するとバナーの型を勉強することができます。
まずは30個を目標に作成していきましょう!

読んでいただきありがとうございました。
何か質問等あればTwitterの方で受け付けております。

では!

Discussion

ログインするとコメントできます