勉強記録

バナートレース#1||はじめてのバナトレ

みなさまこんにちは。sakiです。

 

今日は初めてバナートレースにチャレンジしてみたので
その振り返りをブログに残したいと思います。

それではさっそくいきます・・!

 

today’s sample

 

今回は初めてなので文字だけのシンプルなものをチョイスしました。
おそらくアパレルのセール広告と思われます。

写真や画像がないので、難しい技術は必要なく
ペンツールとテキストを活用してひたすらもくもくと作業しました。

 

 

Trace

そんな感じで約45分程(テレビみながらやってた)

作業した結果がこちら。

 

なんとなく形になっただけで私としてはだいぶ満足してしましました。

 

気付いたこと・苦労したこと・他

最初透過してるところをレイヤースタイルのカラーオーバーレイでやろうとして
どうしても反映されず、結果レイヤー効果の不透明度を100%から下げることで簡単にできました。

 


  1. レイヤーを右クリック
  2. 「レイヤー効果」をクリック
  3. レイヤー効果>通常の描画>「塗りの不透明度」を100%から任意の値に変更

 

オレンジっぽいところ全体で透過かけてしまったので
サンプルより薄くなってしまいました。
透過しているところだけ別でつくればよかったんだなー、今になって気づきました。反省。

 

あとはフォント探すのにすごく時間かかりました・・
ただこればかりは色々なフォントをみて、使って、インプットして
自分の引き出しを増やすしかないかなー、と思います。

ここまで苦労して探して使ったフォントの種類を控えるの忘れました。
さらにいうと元のpsdファイルを保存しませんでした・・やってしまった。
次からちゃんと全部保存して、記録として残せるように、振り返りもできるようにしたいと思います。猛省。

 

バナーデザインを言語化してみる

よくデザインの基礎の本とか、webでみるのが
配色は基本3色でまとめる」でした。

今私が在籍しているオンラインスクールのウェブデザインコースでも
色は3色か4色でまとめるように、と教えてくださっています。

でもこのバナーをみると配色で使われているのはそれ以上あります。
背景の3色が同じような明度や彩度が似たような色味で纏められているからか、
ちゃんとまとまって見えます。

背景に透かしを入れていますが、
確かにベタ塗りにしてしまうと一番伝えたいであろう「SALE」の印象
薄くなってしまいそうです。

 

勉強になりますね・・感心です。

 

次回に向けて

次はもうちょっと画像が入っているもの、難易度をあげて挑戦したいと思います。

あとはデータは絶対保存する!

psdとpngをつくる!

こちらのブログにも
使用したフォントとカラーと
文字で残せるようにしたいところです。

 

ABOUT ME
saki
Web & Graphic フリーランスデザイナー。DTPがすき! 個人の方や小さいお店向けに Webロゴ紙媒体デザインしてます。 紙とお酒と音楽がすき