Web design

GWバナーフェス〜バナートレース前半 5本〜

GWバナーフェス〜バナートレース前半 5本〜のバナー

GWバナートレース!〜9日間のまとめ〜

GWはいつも音楽フェスに行っていましたが、今年は外出自粛 ;  ;
代わりに「GWバナーフェス」ということで、毎日1本バナーのトレースをすることにしました!
合計9本トレースしたので、1本ずつ学びをまとめてみました。

まずは前編5本分!

1日目 仕事探しのバナー

作業時間:60分?
ツール:Photoshop

カラー:ピンク色のグラデーションがきれいな女子向けのバナー。
フォント:ロゴタイプゴシックを使用。
◎不透明な三角形を重ねて枠を作っている。

#反省
左側の三角形の枠の色が薄くなっていた。
不透明度を下げると色が薄くなるので、その分濃い色を選択するべきだった。

 

2日目 フェリシモのファッション系バナー

作業時間:約60分?
ツール:Photoshop

カラー:洋服の色を使っているデザインなので統一感がある。秋っぽいカラー。
フォント:ロゴタイプゴシックを使用。
◎「時短」は時計を使って作字されていて、自担であることが伝わりやすい。
◎写真に合わせたイラストがかわいい雰囲気を出している。

#反省
「パパッと完成」の文字が見にくくなってしまっている。

フェリシモhacoのWEBサイトは手書き風でかわいいし、好みな服がたくさん販売しているので、たまに見に行ってしまいます❋

3日目 ビオレさらさらパウダーシートのバナー

\3日目から1枚の画像として学んだことなどをまとめるようにしました。/

作業時間:60分
ツール:Photoshop

カラー:爽やかなブルーから薄いピンクへのグラデーション
フォント:女子が書いたようなきれいな手書き文字
色の変化 矢印 髪の毛のなびき
のデザインによって、左から右に香りが変化していることを分かりやすく伝えている!
◎ふくとき・ふいたあとの文字と楕円形の背景の余白が少ない。
#難しかった
周りの柄の枠の部分を再現するのが難しかった。青系・ピンク系の柄を選んだけど、それだけじゃ左右の違いが分かりずらかったので、上から色の付いたレイヤーをのせました。

#反省
見本に比べて文字が細くて読みにくいので、太くすれば良かった。

 

わたし
わたし
女子向けのバナーが続いたので、次回から雰囲気の違うバナーをトレースします!

 

4日目 万葉の湯のバナー

作業時間:90分
ツール:Photoshop

カラー:和を感じさせる渋みのあるカラー
フォント:手書き風文字(あんず文字を使用)
◎模様やカラーから和の雰囲気を感じられる
◎放射状の背景とアーチ状の文字がマッチしてる
◎いろんなデザインが盛り込まれていて、新年会のような賑やかな印象を与えている
#難しかった
放射状の背景を作るまでに試行錯誤しました。
コロさんの動画を参考に作りました。
https://www.youtube.com/watch?v=ohUmx591rVY

#反省
1.「4名様からOK!」はもっと文字を詰める。
2. なかなか同じようなフォントが探せない( ; ; )

5日目 KITTEのバナー

作業時間:60分
ツール:Photoshop

カラー:深めの赤と緑の組み合わせが印象的
フォント:Motiva Sans , 游ゴシック体
◎縦の部分が赤になっている文字のデザインが印象的で、一度見たら覚えてしまうようなデザイン。
◎「THANKS」より「KITTE」の方が文字間が広い。
◎「KITTE」の2つ目のTと FRIが縦に揃っている。
他にも揃っている箇所が多く、安定感がある。

#反省
こうして比べると、私がトレースした方は、太かったり力強い感じが出てしまって、上品さに欠けるな〜と思いました。特に日付けの部分。

わたし
わたし
個人的には背景の薄い緑が好き!
文字だけのバナーでこれだけおしゃれでまとまっていて、素敵だと思って選びました^^❋

 

 

前編はここまで!

後編はこちらの記事に・・・

 

バナートレースに関する記事はこちら

 

 

webデザイナー|Canva公式クリエイター
shio
webデザイナーshioのアイコン
*月7000人が読んでるデザインブログ運営 *ナチュラルな婚姻届を心を込めて制作 webデザイナーを目指したい方向けに、 【勉強方法|転職活動|ポートフォリオ制作|制作会社で働いてからのこと|webサイト制作 etc... 】について発信しています。 このブログとともにwebデザイナーとして成長していきます!
\ Follow me /
webデザイナーの就職活動で使うポートフォリオのバナー