30日バナートレース No.7 ストライプ・立体図形

f:id:shimuo:20200509221244j:plain

7日目の題材

 ファッション、イラスト、セール、ポップのバナー | SHIPS FAMILY SALE | BANNER LIBRARY

トレース結果

f:id:shimuo:20200509221558p:plain

トレース結果

実績

35分

Good

  • ストライプをスウォッチに追加・間隔調整
  • テキストの傾き調整
  • 立体的な家の作成

Motto

  • 立体化の方法を忘れ記事を見返した(そして下記の記事以外にもあるはず)
  • 書体を合わせる

立体化の方法はこちら

shimuo.hateblo.jp

デザイン考察

  • FAMILYと家をかけ合わせているが、それ以外の情報がなく何のセールかわからない。家のシルエットが強いため、不動産の広告のようにも見える。服など販売するものの要素を取り入れると良さそう。
  • 色が少なく、トーンも「FAMILYらしさ」を感じない。多様さ・にぎやかさを感じる配色の方が適切では。
  • 余白が多い・図形がシンプル・コントラストが強いため、目を引きやすい。

学んだこと

  • 効果>パスの変形>変形でオブジェクトの拡大・移動ができる。繰り返しコピーもできて便利。
  • 文字を立体的に傾けるには、効果>3D>押し出し・ベベルを使う。
  • ストライプの幅を縮めるには、効果>パスの変形>変形を選び、拡大縮小の数値を変更する。※「オブジェクトの変形」のチェックを外し、「パターンの変形」のチェックを入れることで、図形の大きさはそのままでストライプの幅だけ変えられる。

f:id:shimuo:20200509224928p:plain

「パスの変形」を使うとストライプの幅を変えられる

課題

  • まだ図形・文字の装飾はよくよく考えないと手が動かない。同じ課題を復習し、考えなくても手が動くようにする。

おわりに

事前にテーマを決めたら、注力箇所以外で時間を浪費することがなくなった。
目標が複数あると時間を浪費しやすいので、今後のバナートレースではツールに慣れることを第一目標とし、それ以外については一旦問わないことにする。

30日バナートレース No.6 ストライプ柄

f:id:shimuo:20200508065047p:plain

6日目の題材

美容・コスメ、カジュアル、シンプル、スタイリッシュ・おしゃれ、ポップのバナー | SEA BREEZE | BANNER LIBRARY

トレース結果

f:id:shimuo:20200508075615p:plain

トレース結果

実績

60分

できた点

  • 長方形の3分割
  • 多角形ツールとダイレクト選択ツールで不規則な7角形を作成
  • スウォッチパネルにストライプ柄を追加

できなかった点

  • 細いストライプ柄の作成
  • 写真にも影を追加

など

デザイン考察

  • 3つの製品に合わせた背景色で香りのバリエーションを印象づける
  • 不規則な図形やストライプ柄を使うことでポップに
  • 影に白を使うことで楽しさ・新しさ・若々しさが出る

学んだこと

  • 不規則な図形を作るには、多角形ツールで図形を描いた後にダイレクト選択ツールで調整すると速い
  • 図形の分割はオブジェクト>パス>グリッドに分割を使うと速い

課題

  • スウォッチパネルにストライプ柄を追加できたが、細いパターンを追加したらなぜか反映されなかった。制限時間があったので焦って手順を飛ばしたのかもしれない。改めて試すことにする。

creator-hey.com

  • 写真にも影をつけようと思ったが、写真の形通りに塗りつぶす方法がわからなかった。マスクを試したがうまく行かなかったので、再度やり方を調べて挑戦する。

おわりに

マスクやアピアランスに慣れていないことが露呈した回だった。

考えなくても手が動くように、一度やった課題を何も見ずに短時間でできるように毎日練習する。

30日バナートレース No.5 パスツール・マスク・縦書テキスト

f:id:shimuo:20200507072818p:plain

5日目の題材

インテリア・雑貨、ファッション、カジュアル、シンプル、スタイリッシュ・おしゃれ、メンズライクのバナー | PICK UP EXCLUSIVES vol.3 「やっぱり“グラミチ”が良い」 | BANNER LIBRARY

 

トレース結果

f:id:shimuo:20200507083626p:plain

トレース結果

実績

45分

できた点

できなかった点

  • 縦書の時にクォーテーションマークを回転させる
  • 写真の切り抜き時に境界線を入れない
  • フォントを合わせる

など

デザイン考察

  • 服に合わせた背景色でまとまりがある
  • 縦書き・横書きを混ぜることで面白みが生まれる
  • 写真をメインにして文字を少なくし、服の雰囲気を引き出す
  • 背景はベタ塗りではなくグラデーションがかかっている→服の雰囲気をサポート?

学んだこと

  • パスツールを使って写真を切り抜くときは境界線よりも内側をとるようにすることで余計な線が残らないようにできる
  • 縦書テキスト専用のツールがある
  • Photoshopはアートボードツールではなくトリミングでリサイズできる


課題

  • マスクのやり方は色々あるが、いつどれを使うのが良いのかわからず、なんとなくできたものを使っている→マスクを使う課題を色々こなして判断力をつける

おわりに

Photoshopを使えるとトレースの幅が一気に広がる。Photoshopも色々な機能を触りながらできることを増やしたい。

 

30日バナートレース No.4 飛び出す文字

 

編集

f:id:shimuo:20200506085551p:plain

4日目の題材

ファッション、カジュアル、文字組み・文字だけのバナー | CAZI FES | BANNER LIBRARY

 

トレース結果

f:id:shimuo:20200506102308p:plain

トレース結果

実績

60分

できた点

できなかった点

  • 影の連続
  • フォントの選定(時間をかけすぎた上に見つからず断念)

など

デザイン考察

  • 高いジャンプ率、飛び出す文字の装飾によって視線を誘導・わくわく感がある
  • 3色使いで、フェスにしてはシンプルな印象
  • フォントや色使いでアメカジ感が出ている

学んだこと

後で調べたところ、影の連続は、パスのコピーでできるとわかった。
0.1mmずつ右下に移動した線を30回コピー。
あまりきれいな方法ではない気がするので、他のやり方もこれから学びたい。


課題

  • フォントの選定に時間がかかる
  • 複数行のダミーテキストを一瞬で入れられると良い

フォントの選定に注力する回以外は妥協して手近なフォントを使う。トレースとは別の時間に、よく使われるフォントを一通り覚えておく。

ダミーテキストの挿入はIllustratorスクリプトが使えるらしいので、こちらの書籍で調べてみる。
https://www.amazon.co.jp/dp/B00R5MZ1PA/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1

おわりに

フォントにこだわりすぎて時間を消費してしまった。
当面は毎回テーマを決めて、そのポイント以外には時間をかけすぎないようにする。

30日バナートレース No.3 グラデーション・落書き

f:id:shimuo:20200505204448p:plain

3日目の題材

おしゃれなバナーデザインの見本86選:制作の参考に

トレース結果

f:id:shimuo:20200505204804p:plain

トレース結果

実績

40分

できた点

  • 背景と車の影のグラデーション
  • 落書き風の塗りつぶし

できなかった点

  • えんぴつ右側の黒い影
  • 車の塗りつぶしの色ムラ(よりえんぴつ風に)
  • 車の塗りが雑

などなど

 

※今日はグラデーションと落書き効果の練習のため、重ねてトレース

デザイン考察

  • 円状グラデーションによって中央に視線が集まる
  • ただし、色のメリハリはあまりないので、主役の色に変化を加えたい
  • 塗りムラ・グラデーションなどで変化を出している→減らして意図を明確にしたい
  • えんぴつと車の関係がピンと来ない→より明確なメッセージを伝える図にしたい

学んだこと

  • グラデーション・落書きなどの効果は使う箇所を絞る
  • グラデーションは色や変化の度合いによって印象が大きく変わる
  • えんぴつの芯の元がカッターで削った風になっておりこだわりを感じた
  • 拡大ばかりではなく、縮小して見たほうがわかることもある。色々な拡大率で都度確認する。

f:id:shimuo:20200505210657p:plain

遠くから比較した図


課題

  • えんぴつ的な塗りムラを出す方法
  • えんぴつ右側の黒い影をつける方法

→どちらも知っておきたい。30日間で調べておく。

おわりに

 今日はグラデーションや落書きなどの効果のつけ方を知ったため、試してみた。

一つの効果でも色々な部分を調整できるため、正確に効果を真似るのが難しい。

 これから少しずつ勘所をつけていきたい。

30日バナートレース No.2 ガイドラインのコピー

f:id:shimuo:20200504090442p:plain

2日目の題材・BEAMS LIGHTS 10%OFF Campaign

ファッション、カジュアル、シンプル、セール、文字組み・文字だけのバナー | BEAMS LIGHTS 10%OFF Campaign | BANNER LIBRARY

トレース結果

f:id:shimuo:20200504090725p:plain

トレース結果

実績

40分

できた点

できなかった点

  • フォントの統一
  • ガイドラインの開始位置を揃える
  •  ロゴ・図形の挿入

などなど

f:id:shimuo:20200504090949p:plain

重ねてみたらガイドラインのズレがわかった

デザイン考察

  • ブランドカラーを全面に出し、ひと目で「BEAMSだ」とわかるように
  • 白文字ではなく黒文字を使い、落ち着き・格好良さを表現
  • フォントウェイトにメリハリをつけ、言いたいことを明確に伝える
  • 余白を多め+文字を太く大きく→文字に視線を誘導

学んだこと


課題

  • 標準で入っているフォントかどうかわからない
  • 文字位置の調整・フォントの選定だけで時間を使い果たしロゴ・図形を作る時間がない

→30日でフォントを見る目を養い、毎回トレースの効率化を図る。

おわりに

 

昨日に引き続き文字がメインのバナーをお題にしたが、昨日よりは字間の調整ができた。

はじめにすべてのガイドラインを引くのに10分近く使ったものの、逆に線が多すぎて迷うという結果になったので、次は必要最低限のガイドラインのみ最初に引くようにする。

30日バナートレース No.1 ガイドライン・パスツール

f:id:shimuo:20200503163111p:plain

1日目の題材・TOKYO MIDTOWN SALE

商業施設・店舗、スタイリッシュ・おしゃれ、セール、文字組み・文字だけのバナー | TOKYO MIDTOWN SALE | BANNER LIBRARY

 

トレース結果

f:id:shimuo:20200503163300p:plain

トレース結果

実績

35分

できた点

  • 行頭を揃える
  • OとNを画像の裏に回し込む
  • 図形の色の統一(文字色は統一し忘れ・・・)

できなかった点

  • 字間の調整
  • フォントの統一(Tw Cen MTというフォントが近いが少し違う)
  • 2020の図形のバランス 

などなど

f:id:shimuo:20200503165505p:plain

重ねると大分ずれていた

デザイン考察

  • お正月らしい紅白カラー、生成りの白を使うことで柔らかさを出す
  • O・Mなどは幅をもたせ、T・Lなどは細身にする→ユーモア・遊び心
  • 直角と曲線のメリハリ→モダンな印象

学んだこと

f:id:shimuo:20200503162359p:plain

ガイドラインを引いて位置を揃える
  • ものによってはパスツールと図形ツールを組み合わせると速い

f:id:shimuo:20200503165832p:plain

図形下部は長方形ツールを使った


課題

  • 見本を上に置いた時、縦のガイドラインは正確に引けるが横のガイドラインは目見でしか引けていない
  • 何のフォントか想像がつかないのでIllustratorに入っているものを一つずつ探している
  • フォントが違うのか、縦横比などを意図的に変えているのかがわからない

→30日続ける中で、解決策を探す&目を養う。

おわりに

文字がメインのこのデザインは、フォント・字幅・字間に強いこだわりを感じた。

まだそれらを読み取る力がないので、30日間で養っていきたい。

 

Special Thanks

バナートレースの振り返りは、こちらの記事を参考にさせていただいた。

mito-lab.com