どうもYumaです。

WEBデザイナーとして働く際、PhotoshopやFigma等のツールは必須スキルですよね。
独学での学習は難しい...そんな中技術を2倍3倍に上げる方法があること教わりました。

それはバナートレース。

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

バナートレースとは

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

無料なのにも関わらず、とても勉強になる。
それがバナートレースです。

では、実際にどのような流れでトレースをするのかを書いていきます。
（自分がPhotoshopで行ったやり方をご紹介します。）

バナートレースのやり方

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

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

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

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

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

1366px × 768pxです。

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

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

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

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

です。

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

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

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

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

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

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

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

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

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

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

では!