Web design

GWバナーフェス〜バナートレース後半 4本〜

GWバナーフェス〜バナートレース後半 4本〜のバナー

GWバナーフェス〜後半バナートレース 4本〜

「GWバナーフェス」ということで、毎日1本バナーのトレースをすることにしました!
合計9本トレースしたので、1本ずつ学びをまとめてみました。
この記事では、後半の4本分をまとめました。

前編はこちら・・・

 

6日目 オロナミンCのバナー

 

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

カラー:濁りの無い赤と黄色で元気な印象のカラー。とっても目立つ!
フォント:凸版文久ゴシック
◎右から左に広がっていて、元気で迫力のあるデザイン。
◎「元気を差し入れ!」の部分は文字の上下が横一直線に揃っている。

#学び
1. ウニみたいなギザギザのまるの作り方を覚えた。
参考サイト http://blog.idea-clippin.com/?p=662
2. レイヤーを変形(遠近法を使って)することも学んだ。
編集 → 変形 → 遠近法

#反省
今回はスピードを重視してトレースしてみました。
結果、メインの文字が不自然。
さらに時間をかけるとしたら、もっと似てるフォントを見つけて編集する。

わたし
わたし
力強いデザインの経験が少ないのでこのバナーを選びました。
この頃からトレースしたいバナーがたくさん見つかるようになりました。
トレースが楽しくなってきたのだと思います。

7日目 リプトンのバナー

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

カラー:赤とオレンジよりの黄色を使用。 温かみのある色。
フォント:コーポレート・ロゴ ,  Galvji , Balqis
◎「good in tea」がおしゃれ。文字が斜めに揃っている。
◎背景は右から左に薄くなっている。
◎ドリンクが美味しそうに見えて、惹きつける。
◎温かい印象を与えるバナー
暖色を使用して、湯気のデザインを入れている。(写真の湯気は目立つようになっていて、イラストの湯気も取り入れている)

#学び
湯気の作り方を覚えた。
参考サイト https://youknow.jp/design/photoshop_make_yuge

#反省
もっと近いフォントを探せるようになりたい!
湯気はPhotoshopで作ってみたけれど、あまり目立ってない。参考にした作り方はぼやーっとした湯気を作る方法だったから、他の湯気の作り方も調べてみよう!
 

わたし
わたし
時間がかかったのに、再現できてなくて実力不足を感じました( ; ; )

8日目 コペルのバナー

作業時間:40分
ツール:Photoshop / illustrator

カラー:ブルーをメインに使い、webサイトと同じ雰囲気にしている。 黄色がアクセントに効いている。
フォント:ロゴタイプゴシック etc
◎音符を入れたり、文字をカーブさせたり、音楽教育を取り入れていることがデザインから分かる。
◎まるの外枠をラフにすることで優しさを感じさせている。
ぷかぷか浮かんでいる透明度の高い丸・音符のイラスト・文字の湾曲
統一感があり、優しく柔らかい印象を与えるデザインになっている。
◎「心」の部分の黄色がアクセントになり、強調されている。

#反省
メインの画像薄くしすぎた。

わたし
わたし
子ども向けサービスの優しいデザインのテイスト、好きだな^^

 

9日目 ドリップコーヒーのバナー

作業時間:30分
ツール:Photoshop / illustrator

カラー:コーヒー色の茶色とナチュラルな緑
フォント:小塚ゴシック , Domus Titling , Rockville Solid
◎文字はかすれていて手書き感が出ている。
◎文字エリアの上の方はロゴのようなデザインで、筆記体を使用することでよりおしゃれな雰囲気を出せている。
◎ボタンの背景は若干透明になっていたので 、圧迫感がない。
◎植物の画像を入れていて、ナチュラルな印象のバナー。

背景のせいで文字が目立たなくなってしまっていたので、左の方から白から透明になるレイヤーを入れて読みやすくしました。

#学び
文字をガサガサにした方法
参考サイト http://blog.idealgrace.com/2011/07/photoshop.html

#反省
左に花瓶の画像を入れたけれど、この背景だと浮かんでいるように見えてちょっと不自然。

 

おわりに

9つのバナートレース が終わりました!!!

・デザインのテクニックが身につき、
・使ったことのなかったPhotoshopのツールを発見し、
・作業スピードが上がった
と実感しています。

今回のバナートレースで思いのほか得るものが多かったです!
バナートレース について、やり方やメリット・感じたことなどは別の記事にまとめようと思います。
ㅤㅤ
バナートレースで得たことは忘れないように、今後の活動に活かしていきたいと思います^^
そして、素敵なバナーがあったらまたトレースをしたいと思います。

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