どうもYumaです。
WEBデザイナーとして働く際、PhotoshopやFigma等のツールは必須スキルですよね。
独学での学習は難しい...そんな中技術を2倍3倍に上げる方法があること教わりました。
それはバナートレース。
学校やスクールに一切通わないでPhotoshop,Figmaの学習を始めた僕ですが、バナートレースのおかげで技術の基礎を学ぶことができました。
バナートレースとは
文字通りバナー(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の方で受け付けております。
では!