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

photoshop バナートレース #1 『アイシティ ハードコンタクトレンズ価格比較』

バナートレース#1Design
スポンサーリンク

こんにちは!
ななふ@na2factoryです。

Webデザインのスキルを磨くための第一歩として、
photoshopでのバナートレースを始めます。

まだphotoshopの操作が怪しいので、段階的に進めたいと思います。

1st step : テキスト中心、シンプルなもの
2nd step : 画像をちょこっと使ってあるもの
3rd step : 複雑なもの

制作物はTwitterやインスタグラムでも公開し、見てもらうことに慣れたいと思います~。

もし宜しかったら、ご意見いただければ幸いです。

ブログでは制作の考察を残していきます。参考バナーの情報、制作にかかった時間、考察等。

以下のテーブルフォーマットで記入します!

 

参考バナータイトルほげほげ
参考バナーのサイズ 幅 x 高さ )( px )300 x 250
制作にかかった時間
考察苦労した点
上手くいった点
今後の課題

今回は初挑戦、”#1” です!

お手本は、バナーデザインアーカイブさんのサイトより、
『アイシティ ハードコンタクトレンズ価格比較』のデザインを使用させていただきます。

では早速とりかかります!

スポンサーリンク
スポンサーリンク
スポンサーリンク

#1 オリジナルとトレース画像

【オリジナル】

アイシティ ハードコンタクトレンズ価格比較のバナーデザイン

【トレースした画像】

バナートレース#1画像

※トレースではアイシティのロゴ、T-POINTのロゴを省略しました。

スポンサーリンク

#1 制作の振り返り

参考バナータイトルアイシティ ハードコンタクトレンズ価格比較のバナーデザイン
参考バナーのサイズ ( 幅 x 高さ )( px )300 x 250
制作にかかった時間10時間
使用ソフトphotoshop
考察苦労した点・「いつ 買ったっけ?」のフォントのデザインを

どうやっても見本と同じようにできず、

時間がかかってしまいました。

見本のデザインはどうやったらできるのでしょうか…

 

・背景の四角いうっすらグラデーションのやり方が分からず、

いろいろ試して最終的に内側に白で塗りつぶした四角を描き、

境界線をぼかして作りました。

他にいい方法があるのでしょうか??

 

・「コンタクトレンズ」の文字の下線を波線にする部分、

見本は文字の始まりと終わりで波の形がそろっているのですが

トレースでは違っています。見本の様にそろえたかったです。

 

・フォントが違う!太さも違っている…

同じフォントが分からない!

上手くいった点・各要素の配置。ガイドの使い方を覚えたので、

見本の要素の配置を計測しながらトレースできました。

今後の課題・ぱっと見、テキスト中心だと思っても細かい部分で

凝っているんだ、、、というのが初挑戦での発見です。

そして一つ一つ躓いてしまい、googleで検索したりして

時間がかかりました。

各要素にかける時間をもっと減らせるようにしたいです!

以上、道のりは険しい#1でした。

初挑戦とはいえ、時間がかかってしまって悔しいです。

次回はもっと効率良くできるように頑張ります!

ありがとうございました!

 

Design
スポンサーリンク
この記事が気に入ったらシェアしてね!
na2factory ななふ
フリーランス Webデザイナー

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

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

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

Na2 factory ななファクトリー

コメント