WEBデザイン

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

バナートレースのやり方とは

どうもユウマです。

WEBデザイナーとして働く時、必ず必要となるスキルの一つにPhotoshopがあります。

しかし学校やスクールに通わないと技術を習得するのはなかなか困難です。

しかし技術を2倍3倍に上げる方法があることを発見しました。

 

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

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

 

この記事では

・バナートレースとは

・バナートレースのやり方

・実際にやってみた

の3点について書いていきます。

バナートレースとは

文字通りバナー(WEB上での広告)をトレース(すでにあるものをなぞること)します。

よくWEBサイトやアプリを閲覧している時、広告が出てきますよね、それがバナーです。

 

なぜトレースをするのか、理由は簡単で技術だけでなく、デザインスキルも身につくから。

有名な企業だとバナー作成に数万円、もしくはそれ以上のお金をかけてバナーを作成します。

トレースすることでPhotoshopの技術、デザインスキルを身につけることができる。

無料なのにも関わらず、とても勉強になる。

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

 

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

バナートレースのやり方

①トレース材料を探す

まずはトレース材料を探します。

おすすめなのはBannerDesignArchiveと言うサイト。

数多くの有名なバナーが集まっているサイトで、僕がバナートレースをする時に使ったサイトです。

 

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

②Photoshopで作成

トレースするバナーが決まったら早速Photoshopを開きましょう。

どのように作成するのか、最初はなかなか分からないですよね…。

 

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

実際にやってみた

1, Photoshopを開く

まずはPhotoshopを開きます。

この時、アートボードの大きさはあまり気にしなくて良いです。(後々大きさ変更できるから)

トレース材がしっかり入るように、ここではWEBのWEB一般サイズで作成していきましょう。

1366px × 768pxです。

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

今回は例として、とても綺麗だったFANCL化粧品のバナーをトレースします。

ダウンロードしたトレース画像を開きます。

・画像の開き方について

画像を開くにはPhotoshopを起動させている状態でFinderを開きます。

そこのダウンロードボックスの中の先ほどダウンロードした画像をドラッグしてアートボードまで持っていくと開くことができます。(Macの場合)

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

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

3,トレースしていく

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

・文字は極力同じフォント、全く同じでなくてもよい

・画像は同じ画像を使うより、自分で似た画像を探す。

・図形などは1pxのズレも生じないように。

です。

バナートレースの目的はトレースを通して技術&デザイン知識を得るというものなのです。

なので文字や画像は全く同じものを使用しなくても大丈夫です。

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

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

バナートレースを行っていくうちに様々な疑問が出てくると思います。

その都度ググりまくりましょう。そうすることでどんどんPhotoshopの知識が上がっていきます。

5,完成

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

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

まとめ

デザインを勉強しようと思っている人にとってバナートレースは本当におすすめです。

今回はFANCLのバナーを作成しましたが過去には30ほどのバナーをトレースしています。

30個程バナーをトレースすればPhotoshopの知識もある程度つきます。

まずは30個を目標に作成していきましょう。

 

読んでいただきありがとうございました。

何か質問等あればTwitterの方で受け付けております!