【photoshop】バナートレース第19回目 お月見際のバナーにチャレンジ

 
こんにちは!今回はコメダのお月見際のバナートレースにチャレンジしました!

カフェやハンバーガーのバナーはたくさんあるのですが、その中でも目に飛び込んできた印象的なこちらのバナーを見本にしてみました!
今回も気づいたことや学んだことをアウトプットできればと思っています(*^^*)

トレース画像

バナーサイズ(幅×高さ): 1200 x 675
使用ソフト:Photoshop
使用カラー:#071a44 #ffea00 #b9011b
使用フォント:TA風雅筆 / HGP明朝E
参照:バナー広場

振り返り

知識・スキル

使用素材

今回は、紅葉と月の素材を素材サイトからダウンロードをして使用しています!
紅葉はAdobe Stockから素材を見つけ、月はイラストACから素材を見つけて使用をしています。

紅葉は見本バナーと同じような形になるように、重ねたり消したり調整をしています。
は光彩や月の中の白が足りなかったので、光彩設定とブラシで白をつけ足しています。

紅葉の素材は元素材からもみじを選んでレイヤーマスクを設定したのですが、形が細かいため元画像の背景の黒が少し残ってしましまいました…(>_<)
背景が紺なので分かりづらいのですが、元画像から背景色が全く残らないようにレイヤーマスクができるようになりたいです。

NEWと再登場の背景

商品名の上にある「NEW」と「再登場」の背景はブラシを使用しました。
粗いブラシを使用して、見本バナーと似たデザインを再現しています!

粗いブラシもたくさんの種類があるため探すのが大変でしたが、もう少し見本に近いブラシを見つけることができたらよかったと思います。

バナートレースを続けていくうちに、直感的に見つけられるようになりたいです。

和風達筆フォント

「コメダの お月見祭」の文字はAdobe FontsのTA風雅筆を使用しました!

見本と比べるともう少し筆っぽいフォントのほうがよかったのですが、Adobe Fontsの中で一番近いフォントを選ぶことができたと思います!

気づき

使用カラー(赤・黄・紺)

赤・黄・紺を使用することで秋のイメージをより強めることができると思いました。

紅葉の赤月の黄色夜の紺をメインに使用をして、そのほかのデザインパーツもこの3色のいづれかを使用していました。
他の色をたくさん使わず使用カラーを統一することで、バナー全体のデザインの統一感が増した素敵なデザインになっているんだと勉強になりました!

影の演出

背景に月があるので、商品1つ1つに影がつけられていました。
5つの商品を奥行きがあるように並べ、影も円を描くようにデザインされていました。

奥行きのある商品の並べ方と、影の大きさ・方向を調整して商品全体の立体感が演出されていて商品に目が行くデザインになっていてとても勉強になりました。
商品を使用する際には、商品の立体感を出すようなデザインをすることがとても大切だと改めて感じました。

また、商品自体は元バナーの画像を使用しているため今回は設定できませんでしたが、1つ1つ商品に月の光が反射している細かなデザインもできるようになりたいです。

まとめ

始める前はシンプルなデザインかと思っていたのですが、実際にやってみると細かな工夫がされていて学べることが多くありました!

最近は商品を打ち出すバナートレースをしているので、商品をバナーに盛り込む際のポイントが日に日にわかってきたような気がします。
まだまだ分からないことや、気づけていないこと、覚えられていないことも多くありますので、これからも頑張っていきます!
ありがとうございました!


HerTech

 

HerTechといえば、完全初心者でもたった4か月でWebデザインスキルを習得できる女性限定スクールです♪

また、なんといってもオンライン勉強会・チャットサポート・グループコーチングで挫折・不安をゼロにする仕組みがあるので継続して勉強することができます
短期間でWebデザインスキルを学びたい!」「挫折せずスキルを身に着けたい!」方には、HerTechがおすすめです♪

でも、結構高い金額かかるんじゃないの…?
はじめは無料の説明会があるから、自分にあっている内容なのか確認できるから安心だよ!
しかも、60分少人数だから受講内容を詳しく知れるよ♪
ほんと!?
じゃあ、試しにHerTechの無料説明会に参加してようかな!
あと、補足で未経験でも分かりやすいオンライン動画講義と、実践課題があるから着実にスキルアップできるよ♪

 疑問や不安をすべて解消!
HerTech無料説明会を実施中(60分)

WEBCOACH

WEBCOACHといえば、副業・フリーランスを目指す幅広い年代(20代 ~ 40代)の方が学習できるオンラインWebデザインスクールです♪

また、なんとコーチは採用率5%を潜り抜けた現役のフリーランスコーチだから、プロ目線の指導を受けることができます。
質の高いWebデザインスキルを学びたい!」方には、WEBCOACHがおすすめです♪

でも、結構高い金額かかるんじゃないの…?
まずは無料カウンセリングがあるから、学習内容やコースがあっているか確認できるから安心だよ!
ほんと!?
じゃあ試しにWEBCOACHの無料カウンセリングに参加してようかな!
あと、完全マンツーマンで24時間担当コーチに質問をしたり、定期的なコーチングで学習計画やモチベーション管理があるから挫折せず続けられるよ♪

東京デザインプレックス研究所

東京デザインプレックス研究所といえば、2012年1月に開校し、急成長している「プロフェッショナル養成」のためのWebデザインの学校です♪

また、社会人・学生を中心に20代の方に人気で、未経験からキャリアチェンジしたい人におすすめの学校です。
プロのWebデザイナーになりたい!」方には、東京デザインプレックス研究所がおすすめです♪

でも、結構高い金額かかるんじゃないの…?
まずは無料で資料請求できるから、自分の方針にあっている学校なのか確認できるから安心だよ!
ほんと!?
資料請求ならすぐできるね!まずは、東京デザインプレックス研究所の資料請求してみるよ!
あと補足で、次世代のクリエイター/デザイナーに求められる志向性やスキルを学べるプログラムがあるから未経験からキャリアチェンジしたい人にはぴったりだよ♪