photoshop バナートレース #3 『ニフティクラウド 』

Design

こんにちは!

ななふ@na2factoryです。

バナートレースを始めてみて、プロのデザインは細かいこだわりが

あるんだな…と実感しています。

なんとなく配置しているわけではなく、計算されているんですね。

いつか自分もそのようにできる様になりたいです。

 

さて、今回は【バナートレース3回目】です!!

1st stepのテキスト中心のお手本として、バナーデザインアーカイブさんのサイトより、

『ニフティクラウド おためしキャンペーンのバナーデザイン』を使用させて頂きます。

こちらのバナーはテキスト中心なのですが、

過去2回のバナーにはないポイントとして「テキストが斜めに配置」されています。

 

スポンサーリンク

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

【オリジナル】

【トレースした画像】

※niftyのロゴは省略しました。

#3 制作の振り返り

※#2まではテーブル形式でまとめていた振り返りですが、かえって見にくいので(^^;)#3からは記事形式で書くようにします!

 

参考バナータイトル:ニフティクラウド おためしキャンペーン

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

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

考察

苦労した点

  • メインのテキスト「おためし」とその下の「キャンペーン」のフォントがピッタリ合うようで太さが合わず。対策として境界線の拡張を行ったのですが、輪郭がにじんだ感じの仕上がりになっちゃいました
  • 「ご好評につき延長」の両側にある三角形。シェイプツールで見本と同じような三角形を作りましたが、見本と並べてみると微妙に違う…

上手くできた点

  • テキストの変形で角度をつける部分。最初に見本の角度をものさしツールで測り(-5度)同じ角度に変形しました
  • 「NIFTY Cloud」のフォント探し、今回はiphoneアプリ “Adobe Capture CC“を使って似た感じのフォント”RooneySans”を用意し、時短できました!

フォントを探す方法はこちら↓を参考にさせて頂きました!

今後の課題

なんだかんだでまた3時間コース。

見本と比べて微妙に違うな~となった時に、調整に時間がかかります。

技の引き出しが少ない為、回数を重ねていくしかないのでしょうが…

また、次回からはフォント探しにadobeのマッチフォントなる機能を使ってみようと思います!

 

では、引き続き頑張ります!

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

 

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

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

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

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

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

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

na2factoryをフォロー
Na2 factory

コメント

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