DESIGN

デザイン初心者がPhotoshopとIllstratorでバナートレースを30本してわかったこと

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

今回は、デザイン初心者がPhotoshopとIllstratorでバナートレースを30本続けた結果、どうなったのか?何がわかったのか?という内容をお届けします。

「独学でデザイナーを目指したい」

「デザインスキルをあげたいけれど何から始めたら良いかわからない」

「デザインの勉強法がわからない」

という方の参考になれば嬉しいです。

momo
momo
バナートレースって何?どんな目的でトレースをしたの?と気になる方はこちらの記事を読んでね。
デザイン力アップを目指して、バナートレースはじめます!こんにちは。mito(@mito_works)です。 デザイン力アップのためにバナートレースを始めることにしました。 ここでは、私な...

トレースのペース配分と内容

20193月にPhotoshopだけを使い10本トレースをしました。

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

mito
mito
ちなみにこの時、デザインはもちろん、Photoshopも触ったことがない初心者でした。

出産&その後1ヶ月の休養を経て、20195月にトレースを再開。
Photoshopは、ある程度使えるようになったと思ったので、次はIllstratorを使えるようになりたいと思い、PhotshopとIllastratorを併用して取り組みました。

 

期間 ツール ペース配分
1ヶ月 Photshop 10本 平日隔日(60~120分)
1ヶ月 Illastrator&Photshop 20本 平日毎日(60~90分)

 

1回目のトレースの時は、2時間くらいかかっていたので、かけすぎかなと思い、2回目のトレースの時は特に時間を気にしました。

トレースを通して成長した点

PhotshopとIllastratorを併用することで再現できないデザインが減った

Photshopだけの時は花びらや傘などオブジェクトの再現ができていませんでした。
よく使う手法もわかってツールを使うスキルとデザインの幅が格段に上がったと思います。

見本と近しい素材(画像やイラスト)を探せるようになった

最初は、画像選びだけでもすごく時間を費やしていましたが、徐々にバナーの雰囲気にあった無料の写真やイラストを探せるようになりました。

mito
mito
トレースでよく使った無料素材はこちらの2つです。

Unsplash
高品質な素材が無料で提供されています。

イラストAC
素材数が多く、目的にあったイラストが必ず見つかります。

 

見本により近いフォントを探せるようになった

最初は、明朝体、ゴシック体という大きなくくりでの区別はつきますが、明朝体の中での違いがよくわかっていませんでした。

mito
mito
「たづがね角ゴシック」と「ヒラギノ角ゴシック」って何が違うか見分けがつかない!!という感じです。

そしてトレースした際にフォントがしっくりこなくて違和感がありましたが、徐々に「これだ!」というフォントを探せるように。


セリフをさらにくづしたSnell Roundhand。イタリック体だと王道感にプラスしておしゃれに見える

というようなフォントの考察もできるようになりました。

バナートレース #04 -Snell Roundhandで高貴におしゃれに-トレース結果 ※左:Sample  右:Trace Time 50min Tool illustrator Fon...

バナーを見てどういう手法を組み合わせているのか分かるようになった

結果、大体どれくらい時間がかかるか見積もりが立てられるように。

mito
mito
ただ、シンプルで余白があるものほど目に見えない工夫や技が潜んでいて想定以上の時間がかかるということも・・。 シンプルほど奥が深いということも同時に学びました。

デザインの4原則「近接」「強弱」「整列」「反復」を意識して観察できるようになった

ただなんとなく見本に合わせて文字やオブジェクトを配置することが少なくなりました。どういう効果を狙っているのかわかるようになってきたような気がします。

mito
mito
こんな風に考察しています。
バナートレース #13 - スポーティーの作り方 -トレース結果   ※左:Sample  右:Trace Size 300×250 Time 60min Tool illu...

「ポップ」「スポーティー」など抽象的な言葉をデザインで表現するためにどのような手法を使うのかわかるようになってきた

まだまだだとは思うのですが、トレースをして少しわかりかけてきました。
デザインの引き出しを増やすってこういうことなんだと思います。

mito
mito
こんな風に考察しました。

ユーモアの表現

バナートレース #09 - ユーモアの表現方法 -トレース結果   ※左:Sample  右:Trace Size 300×250 Time 35min Tool ph...

若者向けの可愛さ、ポップ

バナートレース #10- パターンの色と大きさを変える & アートボードからはみ出した部分を無視して書き出す-トレース結果   ※左:Sample  右:Trace Size 360×240 Time 90min Tool il...

大人向けの可愛い、シンプル

バナートレース #12 - かわいさの作り方、簡単!波オブジェクトの作り方 -トレース結果 ※左:Sample  右:Trace Size 1964×900 Time 90min Tool Ph...

スポーティー

バナートレース #13 - スポーティーの作り方 -トレース結果   ※左:Sample  右:Trace Size 300×250 Time 60min Tool illu...

ファッショナブルな女性らしさ

バナートレース #15 - 現代的、ファッショナブルな女性らしいデザインとは -トレース結果   ※左:Sample  右:Trace Size  360×214 Time 60min Tool i...

ここからフォントの考察もできるように

見えてきた課題

背景の効果的なデザイン手法

背景は、写真以外にものグラデーション、ストライプ、パターンで表現の幅が広がるということがわかりましたが、まだ使いこなせていません。

バナートレース #05 -グラデーションとオブジェクトで春らしく-トレース結果 ※左:Sample  右:Trace Size 300×250 Time 90min Tool il...
バナートレース #06 -リボン作成&ワープで変形 -トレース結果 ※左:Sample  右:Trace Size 978×330 Time 60min Tool il...
バナートレース #11 -雨の作り方、シアーで平行四辺形、パスファインダーの分割で可愛らしく、アートボードに中心線を引く -トレース結果   ※左:Sample  右:Trace Size 400×600 Time 120min Tool ...

mito
mito
特にブラシ効果がまだ使えていません。

バナートレース #14 -ゴールドの作り方 -トレース結果   ※左:Sample  右:Trace Size 980×250 Time 60min Tool il...

適切な文字の加工

文字をそのまま使うのではなく、加工することで随分見え方が変わるということがわかりました。

ネオン風

バナートレース #07 - 文字の縁取りと切り取り、一部回転方法 -トレース結果   ※左:Sample  右:Trace Size 440×270 Time 60min Tool il...

象形文字っぽく

バナートレース #11 -雨の作り方、シアーで平行四辺形、パスファインダーの分割で可愛らしく、アートボードに中心線を引く -トレース結果   ※左:Sample  右:Trace Size 400×600 Time 120min Tool ...

可愛らしく
バナートレース #12 - かわいさの作り方、簡単!波オブジェクトの作り方 -トレース結果 ※左:Sample  右:Trace Size 1964×900 Time 90min Tool Ph...

爽やかに

バナートレース #20 - photoshopで背景の余分な部分を消す、illustratorで文字の変形 -トレース結果   ※左:Sample  右:Trace Size 1238×536 Time 70min Tool p...
mito
mito
届けたいターゲットやデザインコンセプトに合わせて、思い通りに文字を加工するまでには至っていません。

写真の効果的な加工

「ああでもない。こおでもない」と時間がかったけれど見本に近づけず・・。

もっともやり直したいものの一つです。

バナートレース #18 -文字の均等配置・両端揃え、背景透過の効果、自然体なたづがね角ゴシック -トレース結果 ※左:Sample  右:Trace Size 300×210 Time 60min Tool ph...

結局トレースで何を学べるか?

一言で言うと、「ツールの使い方」と「デザインを見る目が養われる」ことだと思います。

mito
mito
「このデザインいいな」とただストックしているだけでは得られるものは少ない。とにかく手を動かさなければ習得できないなと思いました。

トレースだけでは学べないこと

トレースは誰かが作ったものをあくまで模写するということ。なのでコンセプト、ターゲットなどを考える部分が抜けています。

トレースで身につけたものを実際の案件で使うというように「練習」と「実践」を行き来するのが良いなと思いました。

まとめ

トレースはあくまで手段!ですが、トレースを通して自分のデザインスキルを上げるためにこれからも使いたいです。

ABOUT ME
mito
こんにちは!mitoです。 2児の母で、会社員。 現在は複業でWebデザイナーをしています。 2019年1月からWebデザインの勉強を始め、2020年11月までに完全フリーランスを目指しています。 チャレンジすることに、年齢とか経験とかママとか関係ない! 同じように一緒にチャレンジする人の背中そっと押せたり、励ましあえるようなブログになるといいなと思っています。