こんにちは。めんだこです☆
シーライクス体験談２記事目は「バナートレース」への挑戦です!!
WEBデザイナーの必要スキルに「Photoshopを使いこなせるようになる」
というのがありますが、バナートレースは初心者がフォトショの使い方になれるためにはとっても効率のいい勉強方法なんだそうです。
わたしもフォトショを使うのははじめてなので、今回は初めてのバナートレースでつまづいたところをまとめました。
これからWEBデザイナーを目指す方への参考になれば幸いです(*^^*)
この記事を読み終える頃には、バナートレースってなんなのか、どんなカンジですすめるのかがわかります。
【シーライクス体験談Part２】バナートレースとは??
バナートレースとは、見本のバナーを模写(トレース)した上で、
そのバナーがどんなターゲットに向けて訴求しているのか、何を目的としているのか、何を意識して作られているのかまとめて
自分のデザインの引き出しを増やしていくWEBデザインのスキルを上達させるのにとってもいい練習になるそうです☆
実際やってみるとわかりますが、普段何気なく見ているバナーやデザインでも、狙ったターゲットに向けて伝えたいことがしっかり伝わるようによく考えてデザインされているんだなってことがよくわかります。
簡単そうに見えるバナーでも、実はフォントのデザインや配置、配色、大きさ、ひとつひとつ考えられてデザインされているんです。
バナートレースの流れ
まずは見本にするバナーを選びます。
見本にするバナーは↓↓のサイトにたくさんあるので、この中から選びました。
今回わたしが選んだバナーはこれです。
引用：初見で、「あ…自分でもトレースしやすそう。」って思ったのが選んだ理由です(笑)
あんまり難しそうなやつを選んで心が折れたら意味ないですからね(笑)
個人的には、最初は自分でできそうと思うやつを選んで、そこから徐々にステップアップしていくのがいいと思います。
バナートレースにチャレンジ
じゃあここからバナートレースをやってみます。
Photoshopを立ち上げて…、トレースをするためには「背景」から「レイヤー」に変更して…とのことだったので言われたとおりに操作します。
でも…!!
ここでもまたつまづきました(笑)
なぜか「インデックス」になっていてレイヤーモードに変換できません…。
動画でもこの部分については解説がないので仕方がないので調べることにしました。
調べると、どうやら「メニューバー」→「イメージ」→「モード」→「RGBモード」に変更することで解決するようです。
わからないところはまず自分で調べて、自分で解決できないと講義の内容についていくのが大変ですね(笑)
このあとはカラーパレットを作って、色の構成を分析して、見本のバナーを固定して、不透明度を下げてトレースしていくって流れです。
不透明度をさげた見本に沿って近いフォントを選び、文字間(カーニング)を調整していきます。
これが、以外に大変でした(笑)
普段パワポを使ってる人だと、
って思いますよね。わたしも思ってました。
やってみるとわかるんですが、パワポとPhotoshopの操作って全然違います。
なんなら、フォントの変更や文字の大きさの変え方ってなんとなく頭でわかってるんで、そのままの感覚でフォトショを使うと難しいって感じるかもです。
しかも動画の講義を見たときは「わかった!!」「慣れれば操作は簡単じゃん!!」
って思っていましたけど、自分でトレースしてみると細かいところで操作がわかなかったり、講義に出てこなかった操作で対応しないといけなかったりとなかなか苦労しました^^;
わからないところはその都度自分で調べながらやっていくもんですからまぁ時間がかかって仕方がない…^^;
そんなこんなでフォトショの操作に苦戦しながら2時間くらい操作してできあがったトレースがコチラです↓↓
どうでしょうか??
なるべく見本と近いフォントを選ぶようにしましたが、部妙に違ったりと、やっぱりどうしても細かな差が出ていますね^^;
「トレースしやすそう」で選んだ見本でしたがやってみると想像以上に大変でした(笑)
最後に、バナートレースはただ見本を模写するのではなくて、そのバナーがどういう人にどんな内容を伝えたくて構成されているのかまとめる必要があります!!
わたしもこのバナーがどんなことを意識して作られているのかまとめてみました☆
- UQのイメージカラーの「ピンク」「ブルー」が基調
- 「900円」の金額が大きく強調されている
- 幅広い層に向けて作られている
- 金額と文字でフォントが分けられて金額が強調されている
バナートレースをやってみて
バナートレースをやってみると、普段何気なく目にしているネット上の広告バナーや街の中の広告も、文字と文字の間や、フォントに差をつけるなど
細かいところまで意識してつくられていることがよくわかります!!
他にも、色の種類を増やしすぎないなど、伝えたい内容が狙ったターゲットに刺さるように配色も工夫されていることがわかります。
WEBデザイナーを目指すなら、とにかくたくさんのデザインのパターンの引き出しを持っておくことが大切だとのことなので、
バナートレースは最低でも15～20個はやったほうが良さそうです…!!
それに、WEBデザイナーに必要なPhotoshopの操作は作業を積まないと上達しません…。
最初はわからないことだらけでツライかもしれませんが、数をこなすことでフォトショを使いこなせていけるようになると思います^^;
エラそうに言ってますがわたしも始めたばかりでフォトショはまだまだ全然使えません(笑)
それから、たまにネット上で、WEBデザイナーを独学で習得しようとしてる人を見かけますが、メチャクチャ優秀な人なら無理じゃないと思いますが相当大変だと思います…。
そもそもフォトショの基本的な使い方を習得するなら動画解説のほうがわかりやすいし、躓いたときは詳しい人に聞くのが一番効率がいいです。
その点、シーライクスだとまず自分で動画で学んで、実践して、わからないことはコーチング会や、スラックで質問できる環境ができあがっているので
WEBデザイナーへの転身を目指しているなら独学よりも遥かに効率がいいんじゃないかと思います☆
＼＼バナートレースの方法はコチラで勉強しました☆／／
まとめ
- バナートレースはWEBデザイン初心者がフォトショの操作になれるのに効果的
- パワポとフォトショの操作はぜんぜん違う!!
- いろいろなバナートレースをすることでデザインの引き出しが増える
- ただ模写するだけじゃなくバナーの構成を考察することが大事!!
１つ目のトレースは操作になかなかなれなくて作業が進まないと思いますが、２つ、３つとトレースするごとに技術は上がっていくと思います(*^^*)
わたしもまだまだ全然なのでこれからトレースを積み上げていこうと思います^^;
WEBデザイナーを目指す皆さん、一緒に頑張りましょう!!
https://mendakonoheya.com/shelikes-ayashi-shukyo
