育児休暇中に、自分とは異色のスキルをつけたいと始めたWebデザイン。
オンラインWebデザイン講座を1ヶ月みっちり受けてからバナーデザインとphothospの使い方の自己学習のため、バナートレース30本ノックをやりました。
10本目まで終えることができ、結果とても学びがありましたのでどうやってやったかと学んだことについて発信します。
特に未経験からWebデザイナーを目指している方など、参考になればと思います！
そもそも、バナートレースとは？
バナートレースは、お手本バナーをレイヤーの下に引き、その上から模写をしていく作業です。
Photoshopの操作に慣れたり多くのデザインに触れ、手を動かすことで、デザイン初心者にとって手っ取り早く良質なデザインの基礎を学ぶことができます。
ツールはPhotoshopを使って行いました。
Photoshopの使い方についてはfammのWebデザイナーコース受講中と応用コースにて学びました！
小さい赤ちゃんがいるのでガッツリ時間とるの難しいなと思っていましたが、なんとfammはシッター派遣サービスが付いているので安心して講座を受けることができました！
また、より深く学びたいところについては本も使いました〜！
これとってもわかりやすいのでおすすめです。
やり方
1. 素材を選ぶ
まずは自分がお手本にしたいバナー素材を選びます！
良質なバナー素材を集めてくれているサイトがあるので私が実際に使っているサイトを紹介します。
BANNER LIBRARY
Webサイト：https://design-library.jp/
最新のバナーも多く揃っていて、一番使えたサイトでした。
業種、カテゴリ、サイズ、テイストから扱いたいバナーを検索することができるのでとても使いやすいです。
バナーデザインアーカイブ
Webサイト：https://design-library.jp/
最新のバナーも多く揃っていて、一番使えたサイトでした。
業種、カテゴリ、サイズ、テイストから扱いたいバナーを検索することができるのでとても使いやすいです。
バナーデザイン | レトロバナー
Webサイト：http://banner.keizine.net/
こちらも業種やサイズから検索することができて便利なサイトです。
少し古いものも含まれているので最新のデザインにだけ触れたいという方には微妙だと思います。
その他、Pinterestで探すのも一気にいろんなサイトを網羅して探せるのでおすすめです。
2. Photoshopでトレースしていく
①素材を選んだら画像をPCに保存してファイル保存しておきます。
Macの場合、「情報を見る」からサイズをチェック。
②新規ファイルをクリックし、チェックしたサイズを入力。
③選んだバナーをコピー、アートボードにペースト。
④見やすいように隣にもバナーお手本を置いておく。
⑤アートボードにある1枚は不透明度を20〜30%にして、その上からトレースしていく。
3. SNSで発信
できたものはCanvaでまとめ画像を作ってTwitterに投稿していきました。
Twitter上でもバナートレース30本ノックやってます宣言をして毎日投稿していきました。
自分が作ったものにいいねを押してもらえたり、たまに温かいメッセージをくださる方もいて、モチベーションが上がるきっかけにもなったのでおすすめです。
近々インスタグラムも創設予定！
実際行ったバナートレース一覧
#1 URBAN RESEARCH様 キャンペーン
記念すべき第一回目。
良かった点
マッチフォントという機能で、似たフォントを検索できることを知ることができたのが大きな収穫でした。
（フォントマッチって書いているけどw）
反省点
フォント探しに時間がかかった。
#2 サントリー様 ビアボール
気持ちの良いイエローとブルーが印象的なビアボールのバナー。
良かった点
文字の傾け方Adibeフォントの追加、登録方法がわかった。
反省点
・時間がかかった割にクオリティが低くて泣ける。
・Adobeフォントの追加方法がわかったのは良かったが、探し方が下手すぎてフォントが全然違う。
・画像をクイック選択ツールで選択しているが境界線の選択が甘すぎる。
・自動選択ツールのオプション（許容値とアンチエイリアス）を調整したらもっとうまく切り抜けたと思う。
#3 旅行代理店さま ハワイ旅行キャンペーン
これも初めてのことばかりで時間がかかったバナー。
良かった点
・フリーイラストを切り取って貼り付ける方法を習得。
レイヤーがぐちゃぐちゃになるので、グループ化することで、めちゃくちゃ作業効率が上がることを実感した。
反省点
・フリー素材から写真とイラストを探すのに一苦労。
・もっと写真の色味とかカーニングとか再現性にこだわりたかったがこの時は時間切れで断念。
#4 ラサーナさま シャンプートリートメント
良かった点
・レイヤー効果からテキストの装飾を学べた！
反省点
・小さいバナーの中に情報量が多めだったからカーニングなどもう少しこだわりたいところ。
#5 hummelさま 新作紹介
良かった点
・パターンオーバーレイのやり方を習得できた。
・テキスト装飾の練習がたくさんできた。
反省点
・なぜかカラーf000のレイヤー効果がうまくいかなくて時間がかかった。
原因は不明。。
・良い感じのカーブのリボンの形が見つからなかった。
#6 フェリシモさま サマーセール
良かった点
・パターンオーバーレイ×パターンオーバーレイと、新たに波線の作り方を学んだ。また、多角形ツールの使い方が理解できた！
反省点
・ファッション系の女性のフリー素材が全然なく、お手本から切り取り。
イラストは可愛いの結構あるけどね。
#7 URBAN RESEARCH 浴衣
良かった点
・マスク系、全然わかっていなかったことが発覚し、動画や本を読み漁りなんとかレイヤーマスクとクリッピングマスクが理解できた。
反省点
・お手本の写真の枠の再現はできなかった。。（ペンツール使うしかない？）
#8 健栄製薬さま ワセリン
レトロ配色なバナー。
でもワセリンの世界観がよく再現できており良いバナーだと思う。
良かった点
トレースの方の写真の方が目に止まりそうな気がするのは私だけ？
赤ちゃんと目が合っちゃうしねw
この回から特に、作業時速がグンと上がって、ほぼ1時間以内に終わるようになってくる。
反省点
「クリック」の四角内のちょうど上下半分ずつのカラーチェンジがうまくいかなかった。
多分グラデーションを使うんだと思うんだけど。。
#9 メルカリさま キャンペーン
良かった点
素材探しも含め1時間以内にできた点。
反省点
レイアウト変えてみたけど、バランスの悪さが気になる。
早くできたからやった！じゃなくて。カーニング、もっと頑張ろう。
#10 アクアレーベルさま 化粧水のバナー
良かった点
髪の毛など細かい部分の切り抜きがうまくできた。
反省点
これ系はもっと数こなしたい。
もっとクリアな感じの背景にしたかったな。
背景の編集が楽しくてたくさん遊んでしまった。
が、おそらく最初に選んだ画像がよくない。白系が入る海の画像を選ぶべきだった。
まとめ
以上、最初の10本でした。
まだまだクオリティの低さは否めませんが、始めた頃に比べたら作業スピードが2倍くらいになりました。
最初、１バナー3時間くらい余裕でかけてましたが今は1時間以内で終えられるように。
11本目からはクオリティこだわっていきます。特にカーニング。
また、お手本通りを目指すのではなくちょっとずつオリジナル色出していこうと思います。
よければ（できたら）毎日投稿しているので良かったらフォローしてください！励みになります！
ちよん Webデザイナー勉強中アカウント▶︎https://twitter.com/home