フリーランス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でした。

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

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

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

PR
当ブログはエックスサーバーを使用しています。
これからWordPressでブログを始める方におすすめのレンタルサーバーです。

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

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

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

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

Na2 factory ななファクトリー

コメント