こんにちは、デザインを独学で勉強中のこら（@korasampo）です。
バナートレースをはじめます、と宣言してから2ヶ月。
全部で25のバナーをトレースしました。
初心者の私が2ヶ月間、バナートレースをやってみた方法や
学んだこと、感想をまとめてみたいと思います。
バナートレースとは
世間にあるWEBのバナー広告を見て、自分でトレース（模写）する、ということです。
アプリケーションの操作に慣れる
デザインのルールが学べる
デザインの技術が学べる
デザインの引き出しが増える
等たくさんあるそうです。
つまり、
デザイナーがお仕事として作ったバナーを、自分で手を動かして真似することで、
先輩の技術や知識を学び、自分のものにしていこう、ということです。
バナートレースのやり方（手順）
やり方の詳細は１ヶ月目の記事をご覧ください。↓
２ヶ月目にやった方法（概要）
- サイトで素敵だな、と思うバナーを選ぶ（※1
- フォトショップに①のバナーを持ってくる
- 上からなぞるようにしながらトレースしていく
- 気がついたことや感想を都度まとめる
- Twitterで公開する（※2
※1）私が主に活用したサイトは、ピンタレストです。
↓↓
※2）こんな感じで毎回Twitterに報告していました。
7/25《今日のバナートレース》24
涼しげなバナーです。#webデザイン勉強中 #バナートレース #今日のバナトレ pic.twitter.com/79rofQanFL— こら🌱未経験からデザイン独学中 (@korasampo) July 25, 2020
バナーの分析
以上のやりかた（途中で少しやり方も変わりましたが）
1ヶ月目で13本、2ヶ月目で12本のバナーをトレースしました。
せっかくトレースしたので、配置や配色をまとめ、分析してみました。
配置
配色
バナートレース中に学んだこと（箇条書き）
アプリケーション操作編
- レイヤーパネルでoptionを押しながら瞳マークをクリック→クリックしている以外の箇所の表示/非表示が入れ替わる
- 複雑なオブジェクト（リボンなど）はIllustratorで作っておくとスムーズ
- 文字部分が切り抜かれて背景が見えるバナーの作り方
→切り抜きたいものを全部作成してから選択範囲を作り、マスクする - 一色のアイコンの色を変えるには、「色の置き換えツール」が便利。ブラシツールのところにある。
- (下記画像参照）光のつくりかた
- (下記画像参照）全体に色調補正を加えたくないとき
- (下記画像参照）数字だけ縦にしたい時
（75→縦中横・300→縦組み中の欧文回転 を使用）
https://www.korasampo.com/photoshop-howto-ststripe/
https://www.korasampo.com/photoshop-howto-anchorpoint/
など
デザインルール編
- ・背景色など、薄くグラデーションにすることで立体感がでる
- 「の」や「￥」「円」「総計」などの表記は小さく、数字は大きく表現することが多い
- 柔らかいイメージ＝明度が高い色の明朝体が使用される
- 硬いイメージ＝明度が低く、太めのゴシック体が使用される
- スマホなど、平面的な商品でも、影や反射をつけたり、背景にグラデーションをつけたりして立体的にし、高級感を表現している
など
2ヶ月やってみてのまとめ
マイペースながらも、2ヶ月間やってみましたが、
かなりアプリケーションの操作に慣れました。
とくにphotoshopに対してはやや苦手意識を持っていたのですが、
気軽に開いて作業できるようになったのが大きい進歩だと思います。
また、様々な形のバナーを、自分の手を動かして「見る」ことで、
デザインを「見ること」の理解ができるようになってきたと思います。
一旦、今回分でバナートレースは終了しますが、
また、行き止まった時などに、原点に戻ってトレースを続けるかもしれません。
かなり収穫の大きかったバナートレース、おすすめなので
デザイン初学車の皆さんもぜひやってみてください。
7/30《今日のバナートレース》25
ここで一旦バナートレース終了します！
マイペースでしたが２ヶ月で25本トレースできました😊#webデザイン勉強中 #バナートレース #今日のバナトレ pic.twitter.com/RA1hNWPAvh— こら🌱未経験からデザイン独学中 (@korasampo) July 30, 2020
