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

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

当ブログはアフィリエイト広告を利用しています。
Design
スポンサーリンク
【PR】おすすめの本

管理人が買って良かった一冊を紹介します!

Webデザイナーのお仕事が具体的に分かる!デザイン勉強中の人は読んで損なしの一冊。
¥2,497 (2024/12/03 17:54時点 | 楽天市場調べ)

バナトレ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したイラストを元に作りました。

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

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

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

今後の課題

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

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


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

コメント