2020年1月18日こんにちは、mito(@mito_works)です!今回は、デザイン初心者がPhotoshopとIllstratorでバナートレースを30本続けた結果、どうなったのか?何がわかったのか?どのようにモチベーションを維持して30本のトレースを達成したのか?という内容をお届けします。「バナートレースをやろうと思っていても継続的にできない」という方の参考になれば嬉しいです。結局バナートレースで何を学べるか?バナートレースだけでは学べないことまとめバナートレースで学べることあまりに学んだことが多く、これ以降の文章がとても長いので結論から書きます。「デザインに対してどのようなツールや手法を使って実現するか理解でき、自分で再現できること」です。mito料理で例えるのであれば、カレーを食べてこれは人参とジャガイモと豚肉を使っていて、無水調理で作っているな・・と分かり同じ味を作れるイメージです。momoそこまでできるようになると、もっと甘くしたいから、ジャガイモをさつまいもに変えて、黒糖を入れてみようなど自分なりのアレンジができるようになるね!つまり、目で見たデザインを自分の手で再現できるだけではなく、アレンジして自分のデザインに使えるようになります。バナートレースとは?「トレース」とは日本語で「模写、真似する」という意味です。今回はバナー(広告)に絞って模写をしました。背景単色もしくは1枚の写真+文字1+文字+簡単なオブジェクト背景グラデーションやストライプや切り抜き写真+2mitoまず文字の余白の取り方、フォントサイズの強弱、フォントの種類を重点的に学び、徐々にイラスト入りや切り抜き写真入りなど要素を増やしていくイメージでやりました。バナートレースをするときの手順(取り組み方)Pintarestでトレースするバナーを見つける近しいフォント、素材を探すガイドを引いて配置場所やサイズ感を把握するPhotoshopとIllustratorを使い分けてトレースするフォント、カラーその他気づいたことをまとめるやりっぱなしではなく、5の気づきをまとめるということは後から見返して学びが深まるので、やってよかったなと思います。宣言するやる結果報告+インプットしたことを即アウトプットすること上記のことを繰り返すことが継続的に続ける秘訣です。mito私の場合、twitterやコミュニティで「やります!」と宣言して自分なりのまとめをつぶやいていました。#20>シンプルなバナーほど難しい。パスを変形させて、文字の流れるような加工にすること、背景に沈まないように背景の色と文字色のバランスを考えること。文字が見えずらくなって残念><。イラレは文字をアウトライン化すると元に戻せないから断念してしまいました。2019バナートレースのペース配分と内容2019年3月にPhotoshopだけを使い10本トレースをしました。この時に、やればやるだけどんどんトレースのスピードが上がり、Photoshopの使える手法も増えることを実感。mitoちなみにこの時、デザインはもちろん、Photoshopも触ったことがない初心者でした。出産&その後1ヶ月の休養を経て、2019年5月にトレースを再開。Photoshopは、ある程度使えるようになったと思ったので、次はIllstratorを使えるようになりたいと思い、PhotshopとIllastratorを併用して取り組みました。平日毎日(60~90分)1回目のトレースの時は、2時間くらいかかっていたので、かけすぎかなと思い、2回目のトレースの時は特に時間を気にしました。具体的に、バナートレースを通して成長した点PhotshopとIllastratorを併用することで再現できないデザインが減ったPhotshopだけの時は花びらや傘などオブジェクトの再現ができていませんでした。使う手法もわかってツールを使うスキルとデザインの幅が格段に上がったと思います。見本と近しい素材(画像やイラスト)を探せるようになった最初は、画像選びだけでもすごく時間を費やしていましたが、徐々にバナーの雰囲気にあった無料の写真やイラストを探せるようになりました。mitoトレースでよく使った無料素材はこちらの2つです。Unsplash高品質な素材が無料で提供されています。UnsplashイラストAC素材数が多く、目的にあったイラストが必ず見つかります。イラストAC見本により近いフォントを探せるようになった最初は、明朝体、ゴシック体という大きなくくりでの区別はつきますが、明朝体の中での違いがよくわかっていませんでした。mito「たづがね角ゴシック」と「ヒラギノ角ゴシック」って何が違うか見分けがつかない!!という感じです。トレースした際にフォントがしっくりこなくて違和感がありましたが、徐々に「これだ!」というフォントを探せるように。イタリック体だと王道感にプラスしておしゃれに見えるというようなフォントの考察もできるようになりました。Fon...バナーを見てどういう手法を組み合わせているのか分かるようになった結果、大体どれくらい時間がかかるか見積もりが立てられるように。mitoただ、シンプルで余白があるものほど目に見えない工夫や技が潜んでいて想定以上の時間がかかるということも・・。シンプルほど奥が深いということも同時に学びました。意識して観察できるようになったただなんとなく見本に合わせて文字やオブジェクトを配置することが少なくなりました。いう効果を狙っているのかわかるようになってきたような気がします。mitoこんな風に考察しています。illu...「ポップ」「スポーティー」など抽象的な言葉をデザインで表現するためにどのような手法を使うのかわかるようになってきたまだまだだとは思うのですが、トレースをして少しわかりかけてきました。デザインの引き出しを増やすってこういうことなんだと思います。mitoこんな風に考察しました。背景は、写真以外にものグラデーション、ストライプ、パターンで表現の幅が広がるということがわかりましたが、まだ使いこなせていません。...mito特にブラシ効果がまだ使えていません。文字をそのまま使うのではなく、加工することで随分見え方が変わるということがわかりました。p...mito届けたいターゲットやデザインコンセプトに合わせて、思い通りに文字を加工するまでには至っていません。こおでもない」と時間がかったけれど見本に近づけず・・。やり直したいものの一つです。ph...結局バナートレースで何を学べるか?一言で言うと、「ツールの使い方」と「デザインを見る目が養われる」ことだと思います。mito「このデザインいいな」とただストックしているだけでは得られるものは少ない。手を動かさなければ習得できないなと思いました。バナートレースだけでは学べないことトレースは誰かが作ったものをあくまで模写するということ。コンセプト、ターゲットなどを考える部分が抜けています。トレースで身につけたものを実際の案件で使うというように「練習」と「実践」を行き来するのが良いなと思いました。まとめトレースはあくまで手段!ですが、トレースを通して自分のデザインスキルを上げるためにこれからも使いたいです。バナートレースからデザイントレースへ。すきま時間に続けていたバナートレースも気づけば50個になりました。MEmitoこんにちは!mitoです。現在は複業でWebデザイナーをしています。2019年1月からWebデザインの勉強を始めました。子育てをする中で、自分の生活に働き方を合わせたいと思うようになり、フリーランスを模索しています。好奇心旺盛でやりたいこと多め、ワクワクすると止まれない性格です。同じように一緒にチャレンジする人の背中そっと押せたり、励ましあえるようなブログになるといいなと思っています。ミトラボスポンサーリンク初心者におすすめ、Wordpress有料テーマ「JIN」。その理由とすご...【2019年5月】生活リズムを整え、とにかく量をこなし、デザインをがんば...Webデザイナーmito好奇心旺盛でやりたいこと多め。2019年1月からデザインの勉強を始め、複業Webデザイナーです。忘れっぽいのでブログを書いてます。