30日バナートレース No.7 ストライプ・立体図形
ファッション、イラスト、セール、ポップのバナー | SHIPS FAMILY SALE | BANNER LIBRARY
トレース結果
実績
35分
Good
- ストライプをスウォッチに追加・間隔調整
- テキストの傾き調整
- 立体的な家の作成
Motto
- 立体化の方法を忘れ記事を見返した(そして下記の記事以外にもあるはず)
- 書体を合わせる
立体化の方法はこちら
デザイン考察
- FAMILYと家をかけ合わせているが、それ以外の情報がなく何のセールかわからない。家のシルエットが強いため、不動産の広告のようにも見える。服など販売するものの要素を取り入れると良さそう。
- 色が少なく、トーンも「FAMILYらしさ」を感じない。多様さ・にぎやかさを感じる配色の方が適切では。
- 余白が多い・図形がシンプル・コントラストが強いため、目を引きやすい。
学んだこと
- 効果>パスの変形>変形でオブジェクトの拡大・移動ができる。繰り返しコピーもできて便利。
- 文字を立体的に傾けるには、効果>3D>押し出し・ベベルを使う。
- ストライプの幅を縮めるには、効果>パスの変形>変形を選び、拡大縮小の数値を変更する。※「オブジェクトの変形」のチェックを外し、「パターンの変形」のチェックを入れることで、図形の大きさはそのままでストライプの幅だけ変えられる。
課題
- まだ図形・文字の装飾はよくよく考えないと手が動かない。同じ課題を復習し、考えなくても手が動くようにする。
おわりに
事前にテーマを決めたら、注力箇所以外で時間を浪費することがなくなった。30日バナートレース No.6 ストライプ柄
美容・コスメ、カジュアル、シンプル、スタイリッシュ・おしゃれ、ポップのバナー | SEA BREEZE | BANNER LIBRARY
トレース結果
実績
60分
できた点
- 長方形の3分割
- 多角形ツールとダイレクト選択ツールで不規則な7角形を作成
- スウォッチパネルにストライプ柄を追加
できなかった点
- 細いストライプ柄の作成
- 写真にも影を追加
など
デザイン考察
- 3つの製品に合わせた背景色で香りのバリエーションを印象づける
- 不規則な図形やストライプ柄を使うことでポップに
- 影に白を使うことで楽しさ・新しさ・若々しさが出る
学んだこと
- 不規則な図形を作るには、多角形ツールで図形を描いた後にダイレクト選択ツールで調整すると速い
- 図形の分割はオブジェクト>パス>グリッドに分割を使うと速い
課題
- スウォッチパネルにストライプ柄を追加できたが、細いパターンを追加したらなぜか反映されなかった。制限時間があったので焦って手順を飛ばしたのかもしれない。改めて試すことにする。
- 写真にも影をつけようと思ったが、写真の形通りに塗りつぶす方法がわからなかった。マスクを試したがうまく行かなかったので、再度やり方を調べて挑戦する。
おわりに
マスクやアピアランスに慣れていないことが露呈した回だった。
考えなくても手が動くように、一度やった課題を何も見ずに短時間でできるように毎日練習する。
30日バナートレース No.5 パスツール・マスク・縦書テキスト
トレース結果
実績
45分
できた点
できなかった点
- 縦書の時にクォーテーションマークを回転させる
- 写真の切り抜き時に境界線を入れない
- フォントを合わせる
など
デザイン考察
- 服に合わせた背景色でまとまりがある
- 縦書き・横書きを混ぜることで面白みが生まれる
- 写真をメインにして文字を少なくし、服の雰囲気を引き出す
- 背景はベタ塗りではなくグラデーションがかかっている→服の雰囲気をサポート?
学んだこと
- パスツールを使って写真を切り抜くときは境界線よりも内側をとるようにすることで余計な線が残らないようにできる
- 縦書テキスト専用のツールがある
- Photoshopはアートボードツールではなくトリミングでリサイズできる
課題
- マスクのやり方は色々あるが、いつどれを使うのが良いのかわからず、なんとなくできたものを使っている→マスクを使う課題を色々こなして判断力をつける
おわりに
Photoshopを使えるとトレースの幅が一気に広がる。Photoshopも色々な機能を触りながらできることを増やしたい。
30日バナートレース No.4 飛び出す文字
ファッション、カジュアル、文字組み・文字だけのバナー | CAZI FES | BANNER LIBRARY
トレース結果
実績
60分
できた点
- アピアランスを使って影をつける
できなかった点
- 影の連続
- フォントの選定(時間をかけすぎた上に見つからず断念)
など
デザイン考察
- 高いジャンプ率、飛び出す文字の装飾によって視線を誘導・わくわく感がある
- 3色使いで、フェスにしてはシンプルな印象
- フォントや色使いでアメカジ感が出ている
学んだこと
後で調べたところ、影の連続は、パスのコピーでできるとわかった。
課題
- フォントの選定に時間がかかる
- 複数行のダミーテキストを一瞬で入れられると良い
フォントの選定に注力する回以外は妥協して手近なフォントを使う。トレースとは別の時間に、よく使われるフォントを一通り覚えておく。
ダミーテキストの挿入はIllustratorのスクリプトが使えるらしいので、こちらの書籍で調べてみる。
https://www.amazon.co.jp/dp/B00R5MZ1PA/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1
おわりに
フォントにこだわりすぎて時間を消費してしまった。30日バナートレース No.3 グラデーション・落書き
トレース結果
実績
40分
できた点
- 背景と車の影のグラデーション
- 落書き風の塗りつぶし
できなかった点
- えんぴつ右側の黒い影
- 車の塗りつぶしの色ムラ(よりえんぴつ風に)
- 車の塗りが雑
などなど
※今日はグラデーションと落書き効果の練習のため、重ねてトレース
デザイン考察
- 円状グラデーションによって中央に視線が集まる
- ただし、色のメリハリはあまりないので、主役の色に変化を加えたい
- 塗りムラ・グラデーションなどで変化を出している→減らして意図を明確にしたい
- えんぴつと車の関係がピンと来ない→より明確なメッセージを伝える図にしたい
学んだこと
- グラデーション・落書きなどの効果は使う箇所を絞る
- グラデーションは色や変化の度合いによって印象が大きく変わる
- えんぴつの芯の元がカッターで削った風になっておりこだわりを感じた
- 拡大ばかりではなく、縮小して見たほうがわかることもある。色々な拡大率で都度確認する。
課題
- えんぴつ的な塗りムラを出す方法
- えんぴつ右側の黒い影をつける方法
→どちらも知っておきたい。30日間で調べておく。
おわりに
今日はグラデーションや落書きなどの効果のつけ方を知ったため、試してみた。
一つの効果でも色々な部分を調整できるため、正確に効果を真似るのが難しい。
これから少しずつ勘所をつけていきたい。
30日バナートレース No.2 ガイドラインのコピー
ファッション、カジュアル、シンプル、セール、文字組み・文字だけのバナー | BEAMS LIGHTS 10%OFF Campaign | BANNER LIBRARY
トレース結果
実績
40分
できた点
- 縦横のガイドラインを見本通りの間隔に設定
- 字間の調整
できなかった点
- フォントの統一
- 横ガイドラインの開始位置を揃える
- ロゴ・図形の挿入
などなど
デザイン考察
- ブランドカラーを全面に出し、ひと目で「BEAMSだ」とわかるように
- 白文字ではなく黒文字を使い、落ち着き・格好良さを表現
- フォントウェイトにメリハリをつけ、言いたいことを明確に伝える
- 余白を多め+文字を太く大きく→文字に視線を誘導
学んだこと
- ガイドラインを最初にすべて引くと、要素との対応がわかりにくくなるので必要なときに引くのが良い
- ガイドラインもコピペできることを発見→ガイドラインの開始位置のズレを防ぐため、枠とガイドラインだけは見本と重ねて作るのが良さそう
- ガイドライン通りに線を引いたつもりでも微妙に長さが違ったため、拡大ツールを使ってガイドラインの位置とズレを確認する必要あり
課題
- 標準で入っているフォントかどうかわからない
- 文字位置の調整・フォントの選定だけで時間を使い果たしロゴ・図形を作る時間がない
→30日でフォントを見る目を養い、毎回トレースの効率化を図る。
おわりに
昨日に引き続き文字がメインのバナーをお題にしたが、昨日よりは字間の調整ができた。
はじめにすべてのガイドラインを引くのに10分近く使ったものの、逆に線が多すぎて迷うという結果になったので、次は必要最低限のガイドラインのみ最初に引くようにする。
30日バナートレース No.1 ガイドライン・パスツール
商業施設・店舗、スタイリッシュ・おしゃれ、セール、文字組み・文字だけのバナー | TOKYO MIDTOWN SALE | BANNER LIBRARY
トレース結果
実績
35分
できた点
- 行頭を揃える
- OとNを画像の裏に回し込む
- 図形の色の統一(文字色は統一し忘れ・・・)
できなかった点
- 字間の調整
- フォントの統一(Tw Cen MTというフォントが近いが少し違う)
- 2020の図形のバランス
などなど
デザイン考察
- お正月らしい紅白カラー、生成りの白を使うことで柔らかさを出す
- O・Mなどは幅をもたせ、T・Lなどは細身にする→ユーモア・遊び心
- 直角と曲線のメリハリ→モダンな印象
学んだこと
- ガイドラインを細かく引くと差異がわかりやすい
- ものによってはパスツールと図形ツールを組み合わせると速い
課題
- 見本を上に置いた時、縦のガイドラインは正確に引けるが横のガイドラインは目見でしか引けていない
- 何のフォントか想像がつかないのでIllustratorに入っているものを一つずつ探している
- フォントが違うのか、縦横比などを意図的に変えているのかがわからない
→30日続ける中で、解決策を探す&目を養う。
おわりに
文字がメインのこのデザインは、フォント・字幅・字間に強いこだわりを感じた。
まだそれらを読み取る力がないので、30日間で養っていきたい。
Special Thanks
バナートレースの振り返りは、こちらの記事を参考にさせていただいた。