【Webデザイン初心者向け】バナートレースのやり方・進め方

デザイン

私がWebデザインの勉強を始めた頃、最初に始めたのがバナートレースでした。色々試した中で、いいな!と思ったやり方をお伝えします。

まずは基礎を固める

最初は、本などで基礎を固めるのがおすすめです。デザインを見る観点、手法の分析、醸成されている効果などの観点を習得した方が良いです。

私は基礎を固めないまま、トレースを始めてしまったため、正しいデザイン分析が出来ているのか、学ぶ方向性が正しいのかが全く分かりませんでした…。

基本を身に着けるのにおすすめの本!

トレースに悩んでいた私が出会った本で、私が抱えていた悩みを解消してくれました!

Bitly

  • そのデザインにおいて、見るべきポイントが分かる
  • その手法を取ることによって、どんな効果が生まれているか分かる
  • トレースする素材が用意されている(質の高いデザインが選ばれている)

応用する

次は、バナーやデザインを自分で選んで、トレースしていくのが良いと思います。基礎は、デザインのドリルで大体できると思うので、そこで養った観点を活かしながら、トレースしていきましょう。

手順

  1. 素材サイトで見本となるバナーを決める
  2. イラストレーターかフォトショップでトレース
  3. 気づいたことや、学んだことをメモする

素材サイト例

バナーデザインの参考に!選りすぐりのバナー画像だけを集めたバナーデザインギャラリー|Bannnner.com
Bannnner.comは、バナー制作者の見本になるような、優れたバナーを集めたバナーデザインギャラリーです。バナーデザインの参考にご活用ください。
Pinterest
Discover recipes, home ideas, style inspiration and other ideas to try.
【総数6178件】BANNER LIBRARY | デザインの参考に!おしゃれなバナーだけを集めたギャラリーサイト
バナーデザインの参考になる、おしゃれで良質なバナーデザインをまとめたギャラリーサイト、BANNER LIBRARYです。バナー広告から特集バナーまで、幅広いジャンルから収集しています。バナー作成の練習やWebサイトデザインのアイデアに繋がる...
SANKOU! | Webデザインギャラリー・参考サイト集
Webデザイン制作の参考になるステキなWebサイト・LPを集めたギャラリー。業種・テイストなどで絞込検索可能。最新トレンドをチェック!

おまけ:トレースのやり方

原本に重ねていくトレース

原本を透過率20%程度にして薄くして、その上にトレースを重ねていくやり方です。これから始めるのが良いと思います。

原本を横においてトレース

トレースを描いていくカンバスの隣に原本を置いて、トレースしていくやり方です。

原本のテイストを真似たトレース

原本デザインのポイントやテイストを抜き出して、それを元に別のデザインを作る感じです。色を変えてみたり、配色やコンセプトを少し変えてみたりします。ただ、あくまでトレースなので、原本のポイントは外さないようにトレースします。

タイトルとURLをコピーしました