バナー作成への道④〜デザインの調整〜
こんにちは、ソラです🌟
バナーを作りを頑張っているところですが、今回は配置いした文字のデザインを調整していきます！
現状の状態はこちらです。
ここからどうなっていくのでしょうか😙
フォントの調整と加工
適当に設定していたフォントを読みやすいように調整していきます。
さらに目立たせたいところは強調する図を重ねて、デザイン性を持たせました。
それがこちら！！
少しはマシになりましたが、この時点で結構バナーっぽくなってないといけないのにバナーっぽくない…😢
既存のバナーと見比べるとやはり使っているイラストがよくなさそうですね…
写真を配置する
バナーはやっぱり写真を使うべき？
と言うことで、女性＆ところてんの画像をフリー画像サイトからとってきました。
配置しつつ、文字に袋文字の処理も追加したバナーがこちら。
全然違いますね。
やっぱりバナーは写真がないとダメなんだ！！
いらすとやからイラストをDLしてしまったのは失敗でした。
でも、失敗したからこそ写真が重要だと気づけたのでいい勉強になりました。
配色する
まだモノクロなので、最後に配色をします！
ところてんの色に合わせて緑と、緑が映える黄色、赤で配色しました。
あとなぜかコンバージョンボタンに重ねていた図形が外れていたので、コンバージョンボタンの処理も再度しました。
どうでしょう！？
ちょっと商品名のところが簡素な気がしますね。
ちょっとデザインを足してみようと思います。
「100%天然の食物繊維」に黄色のラインを引きました。
プロのデザイナーからみたらまだまだでしょうが、これで初めて作ったバナー完成にしたいと思います＞＜
フォントの感覚とかなくて、ちょっとまだ素人感が否めませんねぇ。
でも、配置まで終わった段階がこれですからね…！上出来ってことで😂
ブログではコンパクトにまとめましたが、めちゃくちゃ時間かかりました…
デザイン技術ってこうやって手を動かしながら少しずつ習得できるものなんですよね。
バナー作りのポイント
最後にバナー作りのポイントをまとめます！
次回作る時にはポイントを押さえてやってみようと思います😊
配置から決めていく
手描きのラフや既存のバナーなど、配置の指針を用意して配置を決めると良いようです。
必ずバナーに適した写真を使う
今回、最初は適当に選んだイラストを使っていたのですが全然バナーらしいデザインになりませんでした。
キービジュアルの選び方でデザインの印象が決まってしまうことが失敗から学べましたね。
最後に配色する
配色はたくさんの色を使うのではなく、3〜4色にまとめるとデザインに統一感が出るようです。
今回は補色の関係の緑と赤を使用しましたが、補色を使うと視認性がよくなります。