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

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 ななふをフォローする
na2factory ななふ
フリーランス Webデザイナー

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

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

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

Na2 factory ななファクトリー

コメント