photoshop バナートレース #5 『アウトレットモール BRANDELI』ギザギザ円で苦しむ

Design

こんにちは!

ななふ@na2factoryです。

バナートレース5回目になります。

 

過去4回はテキスト中心のバナーをお手本にしていました。

そろそろ画像を使ったバナーもやってみたいな…と。

5回目はいよいよ画像ありバナーに取り組みたいと思います。

 

お手本として、バナーデザインアーカイブさんのサイトより、

『アウトレットモール BRANDELIのバナーデザイン』を使用させて頂きます。

今回、お手本の色違いサンダルの画像を切り抜いて使用させて頂きます。(切り抜きの練習!)

 

スポンサーリンク

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

【オリジナル】

【トレースした画像】

#5 制作の振り返り

参考バナータイトル:アウトレットモール BRANDELIのバナーデザイン

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

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

使用したフォント

  • ¥1,900の部分 : 数字はJost(Bold), ¥はHGP創英角ポップ体
  • 均一セール、アウトレットセール、BLANDELI : HGP創英角ゴシックUB

考察

苦労した点

¥1,900のフォントを見本と似た角度で並べる部分

フォントはGoogleFontで探して、Jostが一番近いと思って決めたのですが

その後の角度変更で迷走しました。

単純にテキストを角度つけただけでは、なんか違うのです。

特に数字の向きが見本と全然違う。

今回はテキストを変形(ゆがみ)で無理やり見本に近づけて終了にしました。

もっとスマートな方法がきっとあるんだろうけど…

¥1,900を囲むギザギザ円の作り方

見本のギザギザ円に似たシェイプを発見。

(カスタムシェイプツール→従来のすべてのデフォルトシェイプ→バナーと賞→記章)

しかし、見本と比べるとギザギザの数が合わない。合わせ方も分からない。

なのでカスタムシェイプを使うのはやめて、自分で作ることに。

以下のサイトを参考にして、自分で数えたギザギザの数28で多角形シェイプで作ることができました!(辺のくぼみを10%に設定)

ギザギザ円の色

見本の色は濃いブルーからやや薄いブルーに変わっている感じに見えたので

グラデーションを使ったのです。しかし出来上がりを見るとトレースはのっぺりと平面的!

見本はもっとひと手間かかっている!

後ひと手間が必要なんだと分かったのですがここで力尽きたのでした。

今後の課題

photoshopの小技をもっと覚えること、フォントを探すスピードアップ!

今回は見本から画像を切り抜いて使ったので、次回は素材を探して使うこと、ですね!

 


今回は以上になります。

最後まで読んでいただき、ありがとうございました!

 

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

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

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

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

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

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

na2factoryをフォロー
Na2 factory

コメント

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