みなさんこんにちは！
今回は、Webデザイン勉強日記1日目です。
Photoshopを使ってバナーを模写していこうと思います。
WEBデザイン勉強日記について詳しく知りたい人は、こちらの記事から見てみてください。
この記事で学ぶこと
- バナーの構図、要素などの特徴に関する分析
- バナー模写をしている際に悩んだこと、困ったこととその対策
- バナー模写をしてみての比較、反省
- 今後の課題
別記事で、今回学んだツールの使い方を紹介します。
筆者：ちゃい
24歳
東京勤務の社会人１年目
世界１００都市以上を旅してきた旅人
副業でwebライターをしている
HTML/CSS/Photoshop勉強中
別サイトで旅系のブログも書いていますのでよかったらそちらもぜひ
→http://hello-life.site/
今回の課題：バナー模写No.1
今回作成する参考バナーはこちらです。
url: https://5-fifth.com/
fifthというショッピングサイトのバナーです。
バナー記事の特徴・要素の分析
赤と白を基調とした、シンプルなデザインですね。
フォントの大きさが違っていて、｢30%OFF｣という文字を特にメインにしています。
角には赤と白のボーダーの角塗り、赤単色の角塗りがあります。
構図について
中心の大きな文字から上下に向かうにしたがって小さくなってきています。
中心の文字をメインとしている構図ですね。
角塗りがあることで、余白が多くなりすぎないような工夫がされています。
周囲の角に色を加えているので、全体的にまとまった色で統一されています。
フォントの色を赤と黒で統一していて、フォントの種類にも高級感、おしゃれ感をうかがうことができますね。
バナー模写の作品：No.1
私が作成したバナー模写はこちらです。
作成時間:2時間
バナー作成時の反省点
フォントを探す、大きさを決めるのに時間を費やしました。
どの方法を使って作成すればいいのかを迷ってしまうので、いろいろ試してしまい、時間がかかってしまいました。
いちばん苦戦したのが角塗りです。
まず悩んだのは、どうやって角に左右上下対象の塗り部分を付けるのか。
私は、グリッド線を引いてからペンツールを利用しました。
すべての角に同じ大きさの三角ができるように作成しました。
そして次の問題は、角の塗りつぶし方法です。
赤部分の塗りつぶしは、スポイトツールで見本バナーの赤色をとって完了です。
ただ、ボーダーに関しては塗りつぶし方が分かりませんでした。
ボーダーにするのってどうするんだろうと悩み、Googleで調べまくりました。
結果、パターンという要素を利用してみることで、何とか完成することができました。
2つのバナーの比較
2つのバナーを並べてみます。
左が参考バナーで、右が実際に模写したバナーです。
角塗りの面積が違いますね。
見本画像はもう少し角の面積が広いので修正が必要です。
フォントもやや違うので気になります。
文字幅はある程度似せることが出来ているのかな、と自己評価です。
今回学んだ（調べた）内容：｢パターン｣の活用
今回のバナー模写で、特に自分の成長になった内容は、｢パターン｣の活用です。
角の赤白ボーダーの部分に作るときに、パターンの塗りつぶしを利用して作成しました。
この部分の作成方法はもっと別にあるかもしれないですが、パターン要素の使い方を再度学ぶことができたので満足です。
今後の課題
パターンの使い方を学んだので、次のバナー模写でもパターンを使ってみたいと思いました。
まずは構図を考えてから、模写をする。
構図分析→模写
この流れを常に大切にして、
- どういう意図でこのバナーを作っているのか
- このバナーで何を伝えたいのか
を分析して、自分のデザインを作成するときの知識として積み上げていきます。
次の課題もがんばります。
あなたにおすすめの記事はこちら
