バナートレース

こんにちは、ナカガワです。

みなさん、トレースってしたことございますか？
特にデザイン初学者の方、いきなり何か作品を作るようにいわれても、困りますよね。

理由は単純で、引き出しがないからです。

私も含めデザインを学び始めた方というのは、多かれ少なかれそうなのではないでしょうか。
前職で何かしらデザインの勉強をしていないとなかなか目なんて肥えないものです。

そこで大事となるのが”真似”です。

多分、どんなに優れたクリエーターもこの過程を経ずして成長された方はいらっしゃらないと思います。
真似て、真似て、真似ていくうちにおのずと実力がついていくんだと思います。
みなさんも、小さい頃”ひらがな”を練習したとき、横にお手本を並べて真似たり、下に引かれた点線をなぞった経験はあるんじゃないでしょうか。
このデザインの世界も同様のことをします。

それがトレースです。

トレースをするメリット

では、具体的にトレースをするとどんないいことがあるのでしょうか。
それはおよそ次の3つだと思います。

1.デザインの決まりやルールを知る
「デザインはロジック」訓練校で先生がおっしゃった言葉です。
デザインは感覚だけでなく一定の決まりごとや踏まなければならない手順のようなものがあります。なかなか学校の授業や本だけでは理解しきれない部分を
トレースによって補うことができます。

2.審美眼を磨く
「デザインは好き嫌いじゃない、あくまで良いか悪いか」これもまた訓練校の先生がおっしゃったことです。今まで好き嫌いで眺めていた人の作品を
真似てみることで新たな気づきがうまれて、それが良いか悪いかを見極めること能力につながるわけです。

3.プロの技術を学ぶ
教科書で学ぶような手法というのは基礎力としてとても大事なのですが、多分欠点としてあげられるのが現場でそれらがどう使われているかが見えてこないということだとおもいます。
材料はあるけど、料理の仕方がわからない。そんな時、プロの仕事を真似てみることで次の一歩に進めるのではないでしょうか。
トレースもその1つで、現場にいなくても実践を知ることができるとても素晴らしい行為といえるはずです。

トレースのやり方とルール

長くなるので、ここではそのルールと準備の部分だけご紹介します。

ルール

1.文字の大きさ、幅・高さは守るが、フォントは深追いしない。
位置取りは大事なので、1pxにこだわるべきですが、フォントにつきましては環境によっては用意できないので似たものを用意しましょう。太さは守るべきですが。

2.色は極力同じ物を使う
私が紹介したレトロバナーではどんな色を使っているか、分解して載せてありますので、カラーパネルからその数値を打ち込めばそのとおりの色がでます。
スクリーンショットからでは難しいですが、似せる努力をしましょう。

3.始めはガイドをたくさん引く
後述しますが、トレースはガイドが必要不可欠です。何をどこに配置するのか、その位置取りを正確にするためにガイドを引くわけですが、最初はもう気になったら
片っ端から引きましょう。じゃまになれば消せばいいだけなので、いくらだって引いてOKです。

素材を用意する

お手本となるバナーは、スクリーンショットやバナーを紹介しているサイトでダウンロードしてきます。
私は、レトロバナー（https://retrobanner.net）を使っています。サイズ、色、テイスト、業種など色々なカテゴリーでまとまって探しやすいです。

あとはトレースするときに、お手本の代わりに使う画像を同じように用意しましょう。こちらは、テイストさえ同じなら良いでしょう。

Photoshopにはりつける

さっそくPhotoshopを開いてお手本を画像を貼り付けて見ましょう。

新規ファイルをweb用に作成します。カンバスサイズはお手本の倍は用意しましょう。並べて作業するためです。
ファイルを作成したら、「ファイル」から「開く」をクリックしてお手本をはりつけます。位置を調整したいときは移動ツールで。

 

トレースの枠をつくる

長方形ツールを持ったら、お手本の上をなぞって枠をつくって、それを横に並べます。このとき shift を押しながら移動すると真横、真上に置くことができます。

ガイドを引く

トレースをする上で大事なのはガイドを引くことです。どこにどれぐらいの大きさで文字や画像を置けばいいのかを正確に知るためにガイドが必要です。
引き方は2つあります。

一つは、「表示」から「新規ガイド」をクリックして引く方法
もう一つは、カンバスの上と左に目盛りがあります。そこの枠の中をクリックしてどのままドラッグするとガイドが引けます。

ガイドを引くところはそれぞれ違うと思いますが、おおむね、文字や画像の幅や高さに合わせて引きます。
ガイドを引くときは、alt や option キーを押して拡大するとピッタリと引くことが出来ます。

あとはガイドに合わせて文字や画像を配置して、色を変えるわけです。

さて、これで最低限の下準備は終わりましたが、実際にトレースするとこれが大変なんです。
それについてはまた別の機会にお話できたらいいですね。

それにしても改めて自分のを見てみると、雑すぎますね。本当にお恥ずかしい。

長くなってしまいましたが、ここまでお読みいただいて本当にありがとうございます。

それではまた明日。