photoshop バナートレース #16『キットカット』やり直しました!

Design

バナトレ16回目になります。

今回選んだお手本は、BANNER LIBRARYさんで見つけたコチラ!

配色がかわいいし、ドットの加工やザラザラ感とか、今までやった事のない要素にも惹かれて選びました。
スポンサーリンク

オリジナルとトレース画像(1回目:インスタ発表版)

色が、、、色が全然ちがう!!Σ(゚д゚lll)ガーン

作業している時はこんなに違っているのが分からなかったです…なんでだ!?疲れていたのか!?

インスタにも#バナートレースのタグで投稿しているのですが、その投稿用画像を見て自分でもびっくりがっかり!!でもインスタ投稿画像、折角作ったし,,,,と投稿しちゃったのです。

しかしずっと引きずってしまい、このままでいいんだろうかという思いが拭えず、

色の違いを簡単に許すデザイナー(の卵だけど)と思われてしまうのも嫌ですし、

やり直します!!!

オリジナルとトレース画像(2回目)

色の違いが許せるレベルになったでしょうか。(;^_^A

PEACH MINTの手書きっぽい部分の、トレースの線の細さがちょっと納得いかないんですが、

これ以上時間かけても多分無理~・・・・これで終わりにします。

制作の振り返り

参考バナータイトル:キットカット ミントシリーズ

参考バナーのサイズ (幅 x 高さ)(px):1200 x 675

制作にかかった時間:5時間

使用したフォント

  • 日本語のテキスト: 平成丸ゴシック Std
  • PEACH MINT: Short Stack

素材情報

  • 拡声器のイラストはイラストACさんよりDL
  • キットカットのパッケージは見本からの切り抜き

考察

デザインについて気付いたこと

可愛い!ピンクとミントの組み合わせは、ほんと可愛いですね。

”発売宣言”をしている拡声器もレトロ感がいい。

キットカットで”ミント”!?の組み合わせを背景色でアピールしているんですね。

“PEACH MINT”の手書き風文字をわざと?全部見せない構成なのかな。

苦労した点

色の合わせこみ

今回の見本バナー、全体的にノイズ感がのっていてザラザラしているんですが…

その為、見本のカラーをスポイトで取ってもノイズが乗る前の色にならず、自分で何度も調整したんです。

1回目、結局ずれた色のままになってしまって、完成度が低くなってしまいました。

 

ノイズによるザラザラ感

背景と拡声器イラストにザラザラ感を付けたかったです。

拡声器の方は分かる感じでのったと思いますが、背景の方がいまいち、よく見ないと分からない感じで悲しい(>_<)

ノイズ感を付けるために参考にした記事は↓になります!

 

ドットのグラデーション

こちらの方法は検索してすぐにたどり着けました。

 

しかし、見本バナーと同じようにするのはまた別の話。

あれこれとやり直して、ちょっとトレースの方が荒いドットだけど…もう無理!とギブアップ。

見本のように中心部分が塗りつぶされた感じにするには、どうやればいいんだろう?

拡声器のイラスト

イラストACさんからDLしたイラストを元に作りました。

オリジナルのイラストの向きを変形で変えて、

見本と同じ感じになるように色塗り、白い境界線をつけたりしました。

拡声器の部分は今回は見本に近いイメージで出来たかな?と思っています。

 

今後の課題

時間もかかったけど、自分の色の違いの確認の甘さにがっかり。

以降はこうならないように、よーく確認したいです。

 


最後まで見て頂き、ありがとうございました!

Design
スポンサーリンク
この記事をシェア!
na2factoryをフォロー
Webデザイン勉強中

このサイト、
Na2 factory(なな ふぁくとりー)を運営している
"ななふ"と申します。

40代からのWEBデザイナーへの道!
少しづつステップアップしていきたいです。

このサイトでは、自分が覚えた事、
テクニック等を詳細に紹介していきたいと思います。
これからWEBデザイナーを目指す方々と
情報共有できたら嬉しいです!

約2.5か月かけて(^^;photoshopでのバナトレ30本達成できました!
さらにその倍ぐらいの時間をかけて、
illustratorでもバナトレ30本達成~!!
現在はXDとコーディング勉強中!

詳しいプロフィールはこちら

na2factoryをフォロー
Na2 factory

コメント

タイトルとURLをコピーしました