Toyo Kibun*

新米Web屋の雑記帳(只今デザイン調整中につき、お見苦しくて申し訳ありません)

  • Web
  • バナートレース#001 「楽天デリバリー」
Web

バナートレース#001 「楽天デリバリー」

2020/01/19 15:36
Comments:0 Trackbacks:0
バナートレース#001 「楽天デリバリー」

デザインのスキルアップの為に、バナーのトレースに挑戦することにしました
最初は情報量が少なくてシンプルなバナーから始めて、徐々に複雑なデザインのものにも挑戦していこうと思います。

今回トレースしたバナー


今回は数ある楽天のバナーの中でも特にシンプルなこちらのバナーを選びました。

楽天デリバリー

リンク先  楽天デリバリー:会員ランク毎にポイントアップ!
サイズ 174×174
#163955   #ffffff


写真素材を探せ!


まず、バナーのトレースに必要な写真素材を探すことに。
今回はお寿司の写真が必要です。
このバナーで使われている写真が撮りおろされたものという可能性もありますが、もしフリー素材だったりしたら、同じ写真を使うのがベストです。
まずは同じ写真が無いか探してみて、見つからなかったり有料だった場合は似ているフリー素材を探すことにります。

【1】検索用の画像を用意



バナーのキャッチコピーなど余計な情報が無い方が探しやすいと思うので、このように写真の部分だけをトリミングした画像を用意しました。

【2】Google画像検索で写真の出所を探す



Google画像検索にアクセスします。
今回は【1】で作成した画像をもとに検索するので、カメラのアイコンをクリックします。


こんな感じのモーダルが出てくるので、【1】で作成した画像をドラッグします。


同じ写真が使われているサイトがたくさん引っ掛かったので、検索結果を巡回した結果、PIXTAの有料素材ということが分かりました。

【3】有料素材だった場合、代わりのフリー素材を探す


見つかった素材は660円払えば手に入りますが、今回は極力お金をかけずに作りたいので、似たフリー素材を使うことに。
使ったのはこちらの素材です。
角度も似ていて、お寿司の並び方も手前が握りで奥が軍艦なので、これなら雰囲気を似せられそうです。

トレース開始


Photoshopを立ち上げて1番最初にすることは…




まず、バナーと同じサイズのファイルを新規作成し、オリジナルのバナーをコピーしたレイヤーを追加します。
このレイヤー(以下、答え合わせ用のレイヤー)は不透明度を50%ぐらいにしておいて、常に一番上に配置しておきます。
答え合わせ用のレイヤーは基本的には非表示にしておきますが、時々表示させて文字や写真の位置がずれていないか確認するのに使います。
注意事項は手を動かして作業をしているときは答え合わせ用のレイヤーは非表示にしておくことです。
文字や写真の大きさ、余白などが何pxかは自分で計測した方が色々な発見があると思います。

トレースするときのポイント


フォントは極力似ているものを使う


一件ありきたりな明朝体やゴシック体も種類は色々とあり、どのフォントを選ぶかで印象が変わってきます。
ドンピシャなフォントが見つかるまで血眼になって探したり、お高い有料フォントを購入したりはしないまでも、手持ちのフォントの中で極力近いものを使います。


色をトレースするときは色相・明度・彩度を意識する


カラーピッカー

色をトレースするときは単純にカラーコードをコピペするだけではなく、色相・明度・彩度がどの辺りかをカラーピッカーで確認すると発見があります。


バナーを拡大してみる


手の込んだバナーは一件無地のように見えても良く見るとグラデーションだったりノイズが掛かっていたりすることがあります。
そういった些細なニュアンスを見落とさないためにも500%ぐらいに拡大して見ると良いと思います。

手を動かしているときは答え合わせ用のレイヤーは非表示


前述したように、答え合わせ用のレイヤーは時々確認するとき以外は非表示にします。
写し絵のようなやり方でトレースをするとフォントのサイズや要素同士の間隔などが何pxかということに注意を払いにくくなってしまいます。

トレースしたバナーはこちら




こんな感じに仕上がりました。
並べると偽物感はありますが、雰囲気は出ていると思います。


気付いたこと


フォントのウェイトは全て同じ


文字の強弱を表現する場合、フォントのサイズだけでは無くの太さを変える場合もあると思うのですが、このバナーは全て同じウェイトでした。
ウェイトを変えなくてもサイズのバリエーションだけでここまで強弱が付けられると言うことでもあると思います。


数字を全角で表現するのもアリ


私が普段数字を強調したいデザインを作る場合、数字は半角と言う前提で、欧文フォントで数字が美しいものを探してその部分だけフォントを変えることが多いです。
それに対してこのバナーは和文フォントの全角を使っているみたいです。
1桁の数字だったら、全角もアリかもしれないと思いました。


お勧めアイテム


Share this entry !

この記事が気に入ったら
「いいね!」をお願いします。

Comments

Post Comment

Share this entry !

この記事が気に入ったら
「いいね!」をお願いします。

PROFILE

Author: 310

横浜在住の新米Web屋。
30代未経験でWeb業界に足を踏み入れた為、日々勉強中。
横浜&京浜東北線沿線に良く出没しています。

GROUP SITES

趣味兼勉強の為、色々とサイトを作っています。

RANKING

あなたの体験を、次のトレンドに womedia会員募集中! ブログランキング・にほんブログ村へ ブログランキング参加中! サンプル・モニターの口コミ広告ならブロカン
Toyo Kibun*