HOW TO STUDY

バナートレースからデザイントレースへ。50個トレースしてわかったこと&Tips

こんにちは、mito@mito_works)です!

すきま時間に続けていたバナートレースも気づけば50個になりました。
(途中からバナーだけでなく、アイキャッチやサイトの一部など色々なデザインをトレースするようになったのでバナートレースからデザイントレースとしています。)

mito
mito
一つの区切りとして50個のトレースで得た学びとTipsをまとめたいと思います。

この記事は、今からトレースを始めようとしている人。特にトレースするとどんな効果や学びが得られるのか予習したい人におすすめです!

トレースの目的

こちらの記事にも書いていますが、デザインの引き出しを増やすことと、ツールを使いこなせるようになるために始めました。

デザイン力アップを目指して、バナートレースはじめます!こんにちは。mito(@mito_works)です。 デザイン力アップのためにバナートレースを始めることにしました。 ここでは、私な...

段階ごとの学び

必ずしも10個区切りではないのですが、段階ごとの学びの変化としてわかりやすいので、数で区切って振り返ってみます。

1~10個

Photshopのみでトレース。
やればやるだけどんどんトレースのスピードが上がり、使える手法も増えることを実感。

課題

フォント選びや素材選びなど本来の手を動かす以外の探す作業に時間が取られていました

11~20個

illustratorのみでトレース。
illustratorの操作を覚えつつ、雰囲気にあった素材、見本に近いフォント選びなどが早くなってきました。

課題

illustoratorがまだまだ不慣れで、1つの小さなオブジェクトを作るだけでもかなり時間がかかっていました。

21~30個

illustratorとphotshop両方でトレース。
再現できないデザインが減りました。
時間も1時間以内でそれっぽいものに再現できるようになりました。

課題

写真加工、文字の変形など細かい部分の再現力がまだまだ。

【バナートレース30本達成の秘訣】デザイン初心者がPhotoshopとIllstratorでやってみたこんにちは、mito(@mito_works)です! 今回は、デザイン初心者がPhotoshopとIllstratorでバナートレース...

30~39個

illustratorとphotoshop両方でトレース。
バナーにとらわれず、気になったデザインを自由にトレース。

トレースの目的を決めて30~1時間以内に終わりそうなものをトレースしました。

mito
mito
「アイキャッチのヒントになりそう、今作っているデザインのヒントになりそう」などトレースするだけでなく、極力すぐに自分で実践で使えそうなものを選びました。

40~50個

応用して使うことを念頭に置いて、本にまとめられているようなデザインのパターンを意識しながらトレース。

かけだしWebデザイナーが実務で何度も繰り返し使っている本当にためになるデザイン本こんにちは、mito(@mito_works)です! 今回は、最近、使用頻度が高い、デザイン参考書のご紹介です。 ここで紹介する...

デザイン自体を、フォントの種類やサイズ、背景デザイン、オブジェクトの配置場所、色味など色々な角度からみられるようになりました。

mito
mito
自分がデザインを作るときに「あのトレースのパターン」というように応用して使えるようになってきました。

トレースで気づいたTips

フォント編

  • ヒラギノ角ゴはフォントスタイルがたくさんあり、表現の幅が広い
  • 手書きフォントは線が太くなくてもスタイルが違うというだけで強調になる
  • ただまっすぐに並べるだけでなく、斜体にしたり、アーチ状にしたり、上下にずらして配置させることで印象がかなり変わる
  • 文字の加工にはillustratorが向いている
mito
mito
ヒラギノ角ゴはオーソドックスすぎて使っていなかったのですが、文字間を広げたり太さを変えると随分印象が変わるので使いやすい書体なんだなと学びました!
momo
momo
いいなと思うフォントはどんどんインストールして、トレース以外でも使ってみると、フォントの引き出しも増えるよ!
mito
mito
自分の好みのフォントもわかってきます!

背景

  • 目立たせたいもの(人物)と背景は別々に加工して背景をぼかすと雰囲気が出る
  • 文字の色を意識して背景選びをすると余分な加工が減る
  • グラデーションやパターン模様、素材感を出すような背景など場合によって使い分けられるようになると良い
mito
mito
一色だと思っていた背景。実はグラデーションがかかっていたり、微妙に色を変えたストライプだということに気付けたりしました。

原則・規則性

  • 文字やオブジェクトの配置はいくつかパターンを理解しておくと応用できる
  • 文字の強調もパターンを理解しておくとよい
mito
mito
本を片手に、「これはこのパターンに近いかな」と分類分けも意識しながらやっていました。

次のステップ

できる幅は広がったものの、illustratorとphotoshopの操作自体はまだまだ遅いなと実感しています。

mito
mito
次はショートカットキーを使いこなすなど効率的にツールを使いこなす目線でトレースを続けようと思います!

 

ABOUT ME
mito
こんにちは!mitoです。 2児の母で、会社員。 現在は複業でWebデザイナーをしています。 2019年1月からWebデザインの勉強を始めました。 子育てをする中で、自分の生活に働き方を合わせたいと思うようになり、フリーランスを模索しています。 好奇心旺盛でやりたいこと多め、ワクワクすると止まれない性格です。 同じように一緒にチャレンジする人の背中そっと押せたり、励ましあえるようなブログになるといいなと思っています。