こんにちは、mito（@mito_works）です！
すきま時間に続けていたバナートレースも気づけば50個になりました。
（途中からバナーだけでなく、アイキャッチやサイトの一部など色々なデザインをトレースするようになったのでバナートレースからデザイントレースとしています。）
バナートレースが途中から何でもデザイントレースになったけど、50個意識的にトレースしました！
並べると達成感ある！！でもイラレファイルがすごく重くなる。。 pic.twitter.com/YWYIF3GHEb— mito@ひよっこwebデザイナー (@mito_works) September 10, 2019
この記事は、今からトレースを始めようとしている人。特にトレースするとどんな効果や学びが得られるのか予習したい人におすすめです！
トレースの目的
こちらの記事にも書いていますが、デザインの引き出しを増やすことと、ツールを使いこなせるようになるために始めました。
段階ごとの学び
必ずしも10個区切りではないのですが、段階ごとの学びの変化としてわかりやすいので、数で区切って振り返ってみます。
1~10個
Photshopのみでトレース。
やればやるだけどんどんトレースのスピードが上がり、使える手法も増えることを実感。
フォント選びや素材選びなど本来の手を動かす以外の探す作業に時間が取られていました。
11~20個
illustratorのみでトレース。
illustratorの操作を覚えつつ、雰囲気にあった素材、見本に近いフォント選びなどが早くなってきました。
illustoratorがまだまだ不慣れで、1つの小さなオブジェクトを作るだけでもかなり時間がかかっていました。
21~30個
illustratorとphotshop両方でトレース。
再現できないデザインが減りました。
時間も1時間以内でそれっぽいものに再現できるようになりました。
写真加工、文字の変形など細かい部分の再現力がまだまだ。
30~39個
illustratorとphotoshop両方でトレース。
バナーにとらわれず、気になったデザインを自由にトレース。
トレースの目的を決めて30~1時間以内に終わりそうなものをトレースしました。
40~50個
応用して使うことを念頭に置いて、本にまとめられているようなデザインのパターンを意識しながらトレース。
デザイン自体を、フォントの種類やサイズ、背景デザイン、オブジェクトの配置場所、色味など色々な角度からみられるようになりました。
トレースで気づいたTips
フォント編
- ヒラギノ角ゴはフォントスタイルがたくさんあり、表現の幅が広い
- 手書きフォントは線が太くなくてもスタイルが違うというだけで強調になる
- ただまっすぐに並べるだけでなく、斜体にしたり、アーチ状にしたり、上下にずらして配置させることで印象がかなり変わる
- 文字の加工にはillustratorが向いている
背景
- 目立たせたいもの（人物）と背景は別々に加工して背景をぼかすと雰囲気が出る
- 文字の色を意識して背景選びをすると余分な加工が減る
- グラデーションやパターン模様、素材感を出すような背景など場合によって使い分けられるようになると良い
原則・規則性
- 文字やオブジェクトの配置はいくつかパターンを理解しておくと応用できる
- 文字の強調もパターンを理解しておくとよい
次のステップ
できる幅は広がったものの、illustratorとphotoshopの操作自体はまだまだ遅いなと実感しています。
