イラレ初心者がブログの見出し用画像を作ってみた

デザイン素人でもイイ感じのブログを作りたい！シリーズ（？）

第３弾となる本記事では
Adobe Illustrator（以下「イラレ」）を使用した見出し用画像の作成風景をお伝えします。

イラレ初心者で日々努力している方にとって
少しでも励みになれば幸いです。

本記事で紹介するのは画像を作成するところまでとなります。
ブログのトップページに設置する方法については別記事にする予定です。

第１弾はこちら

第２弾はこちら

作った見出し用画像はこちら

本記事で紹介するのはこちらの見出し用画像です。

サイト型ブログのトップページに配置する、記事まとめの見出し
（赤枠で囲った部分）が見出し用画像。

本サイトではメインの見出しとして

の４つを配置し、さらに小見出しとして
４つのカテゴリ名を配置しています。

見出しは普通にテキスト入力もできますが
画像にすることでブログの個性が出せるのでおすすめです。

ブログテーマはSWELLを使用しています。

見出し用画像の作り方

それではさっそく
上記見出し用画像を作る手順を紹介します。

①見出しの文言と数を考える

まずはトップページの構想を練っておくことが大切です。
どのような見出しをいくつ配置するのか決めておきましょう。

本サイトの場合は前述のとおり
メインとなる見出し４つ＋小見出し（各カテゴリ名）４つという構成です。

②仕上がりイメージを考える

見出しの文言と数が決まったら、どのようなデザインにするか
仕上がりイメージを考えます。

すでにメインビジュアルやピックアップバナーを作っているなら
それに合わせてざっくり考える程度でＯＫです。

わたしはこんな感じで考えました。

②画像をダウンロードする

イラストを入れる場合は、画像を探してダウンロードします。

毎度お世話になっているイラストＡＣ様を利用しました。

ダウンロードしたのはこちら

出典：イラストＡＣ　ティータイムシルエット　紅茶　ポット　作者：はとむぎ茶　ダウンロードページ

色や形を変えたいならAI形式、このまま使用するならPNG形式がいいと思います。

③新規ドキュメントを作成する

イラレを開き、「ファイル」→「新規」をクリックします。

新規ドキュメントのダイアログボックスが開くので
次のように設定します。

これで８つの見出しを一気に作成できます。

サイズは使用テーマに合わせて各自で設定してください。

④テキストを作成する

テキストツールを選択し、以下の設定で見出し名を入力します。

整列を適用させてもテキストが中央に配置されない場合は
以下の設定をした上で再度試してみてください。

⑤画像を配置する

「ファイル」→「配置」をクリックし
先ほどダウンロードした画像を選択します。

配置したら、Shiftキーを押しながら大きさを調整します。

⑥アンダーラインを引く

ペンツールを選択し、以下の設定でアンダーラインを引きます。

Shiftを押しながらクリックして水平な線を引きます。

ブラシにすることで、ふわっとした印象になります。

線レイヤーは、レイヤーパネルで
テキストと画像の下に移動させておきます。

⑦アンダーラインをゆるやかにする

「ちょいユル」という仕上がりイメージに近づけるため
線を少しゆるやかにしてみます。

ペンツールを長押しして、アンカーポイントの追加ツールを選択します。

ペンツールに「+」マークのついたカーソルに変わります。

線のカーブさせたい部分をパス上でクリックすると
アンカーポイントが追加されます。

わたしは上記の赤丸部分をクリックし、アンカーポイントを追加してみました。

次に、ダイレクト選択ツールをクリックし
追加したアンカーポイントを下記のようにそれぞれドラッグして波になるようにします。

このままだとカクカクなので、なめらかにしていきます。

ペンツールを長押しして、アンカーポイントツールを選択します。

Vが逆になったようなカーソルに変わります。

追加したアンカーポイントをクリックして選択し、右にドラッグするとハンドルが出てきます。
ハンドルの長さや角度を調整してゆるやかなカーブを作ります。

ハンドル調整はダイレクト選択ツールに変えて行ってください。

ペンツールに慣れている方は、初めから曲線をスイスイ引いてしまえば早いです。
わたしはまだ慣れないので、水平な線からカーブにする方法で行いました。

⑧アンダーラインを２色にする

１色だとさみしいので、２色の淡いグラデーションっぽくしてみたいと思います。

レイヤーパネルで線を複製し、色を変えて位置を上にズラすだけの
簡単な作業です。

わたしはピンク（#e3c4b8）にしてみました。

ちょっと分かりづらいですが（笑）淡いグラデーションになりました。

⑨頭文字の色とサイズを変更する

以上で完成でもよかったのですが、調子にのって
もう一手間加えてみました。

それが頭文字を目立たせるデザインです。

レイヤーパネルでテキストを複製し「人」と「気記事」に分けたら
「人」テキストを以下のように変更します。

ちょっぴりデザイン性を出すことができました。

⑩完成したデザインをコピペする

完成したデザインを、他のアートボードにコピペします。

すべてを選択し、Shiftキー＋Altキーを押しながらドラッグすると
垂直（水平）移動によるコピペができます。

整列パネルやスマートガイドも併用しながら位置を調節してください。

コピペができたら、テキストをそれぞれの見出し名に修正します。

このように、アートボードを見出しの数だけ作っておけば
パパッと複製できます。

「プロフィール」のように長くてはみ出る場合は
テキストのトラッキング数を変えたり、線を延ばしたりして調整します。

残りの４つは小見出し（カテゴリ名）なので
差別化するためにシンプルに仕上げます。

先に作った見出しの黒テキストをコピペして打ち直すだけです。
カテゴリ名だけだとさみしいので、サブテキストも付けてみました。

これでブログのトップページに並ぶ
すべての見出し用画像が完成です。

⑪書き出す

アートボード１（左上）を選択した状態で
「ファイル」→「書き出し」→「Web用に保存（従来）」をクリックします。

形式はPNG-8を選択し、保存をクリック。
保存先フォルダを選択し、名前をつけて保存しましょう。

アートボード２～８も同様の作業を繰り返し、すべての見出し用画像を書き出します。

これらをブログのトップページに配置する方法については
別記事で紹介する予定です。

まとめ

イラレ初心者であるわたしの「見出し用画像」作成風景をお伝えしました。

見出し用画像はサイト型ブログに欠かせません。
自分のテイストに合ったものを配置するには自作することをおすすめします。

初心者のわたしは今回紹介したレベルが限界。
それでも自作した画像には愛着がわき、作ってよかったと思いました。

これからもイラレの学習を続け、ためになったことはどんどん発信していきたいです。

最後までご覧いただきありがとうございました。