フリーランスWebデザイナー・ななふの
デザイン、コーディングの勉強記録やTIPSなど

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 ななふをフォローする
na2factory ななふ
フリーランス Webデザイナー

群馬県在住の40代女子です。
2020年8月からWebデザインの勉強を独学でスタートし、
2021年11月に開業しました。
守備範囲はバナー・チラシ制作からWordPressでのサイト制作まで。

このサイトでは、Webデザイナーになるべく自分が調べた事、
自主制作物、テクニック等を紹介しています。

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

Na2 factory ななファクトリー

コメント