見出しデザインの作り方 その1「雨風に打たれる見出し」

こんにちは、WEBデザイナー兼コーダーの中村です。
今回はバナーやアイキャッチ画像に使えるちょっとした見出しの作り方を紹介したいと思います。

特に、配置する要素が少なく、何となく寂しくなりがちな時に役立つかと思いますので、
よろしければご参考ください。

早速ですが、作例と作り方はこちら↓↓

作例

こちらの梅雨っぽいバナーを作例としてご紹介します。
使用するツールは、Adobe Illustratorです。

作り方

① フォントを選ぶ

作りたいイメージに合わせて、フォントを選ぶ。

② 文字の配置

目立たせたい文字を大きく、強弱をつけ、配置を遊ばせる。
※やりすぎると文字が読みづらくなるので注意！

③ 装飾を追加

タイトルに合わせて、雨風と傘の装飾を追加。
※こちらもやりすぎると読みづらくなるので注意！何事もほどよいバランスが大切です。

④ 微調整

テキストをアウトライン化し、文字のアンカーポイントを移動させて装飾との重なりを調整。

⑤ 仕上げ

お好みでさらに調整を加えます。
・部分的に文字色を変更し、アクセントを追加。
・全体にグラデーションをかけて質感を追加。
・水色のドロップシャドウを加え、水っぽい雰囲気を追加。

以上です。とても簡単です。

まとめ

あまり作り込んだものではなくとも、
少しの工夫を加えてやれば、そのまま文字を配置するよりも見栄えが良く、雰囲気も出ます。

今回は作例として梅雨っぽいイメージにしましたが、
配置する装飾等を変えれば他への汎用も可能かと思います。

例えば、装飾を花に、文字の配色を明るいピンクや黄緑に変えれば
春っぽくなります。

是非試してみてください。

この記事を書いた人

中村WEBデザイナー兼コーダー

地道に頑張ります。

最新の投稿

この人の記事一覧

• Web制作2023年1月31日見出しデザインの作り方 その1「雨風に打たれる見出し」