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

デザイン

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

まずは基礎を固める

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

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

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

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

トレース&模写で学ぶ デザインのドリル | Power Design Inc. | 彫刻・工芸 | Kindleストア | Amazon
AmazonでPower Design Inc.のトレース&模写で学ぶ デザインのドリル。アマゾンならポイント還元本が多数。一度購入いただいた電子書籍は、KindleおよびFire端末、スマートフォンやタブレットなど、様々な端末でもお楽しみいただけます。

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

応用する

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

手順

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

素材サイト例

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

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

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

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

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

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

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

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

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