ブログに慣れてくると、
「バナー画像を自作してブログをもっとおしゃれにしたい」
と思うことがあるかもしれません。
私自身実際にバナー画像を作ってみると非常に楽しい作業でした。
実例はこんな感じ↓
このページでは、
・バナー画像の作り方
・画像編集ソフトの使い方
について紹介します。
もちろんカテゴリーだけでなく、アイキャッチやTOPページなど様々な用途にも応用が効くので是非実践してみてください。
目次(もくじ)
バナー画像の作り方
大まかな流れは以下の通りです。
②キャライラスト、装飾品、吹き出しなどの透過PNGの用意
③Aviutlで合成し、完成したらスクリーンショットを撮る
④ペイントで好きなサイズ（300×250ピクセルなど）にトリミング
ヘッダー画像の作り方の時と作業内容は同じになります。詳しい手順は以下の記事にてまとめていますので是非ご覧ください。
バナー画像に使う背景を選択しよう
まずは好きな背景を選んでいきます。カテゴリーと画像が一致していると、クリックしてもらいやすくなると思います。
私の場合はピクサベイでサッカーの画像を選んでみました。
キャラや装飾品を透過PNGで用意しよう
キャライラストを載せたい場合はキャライラストを用意していきます。
絵を描ける方は自作で、絵の苦手な方はココナラやスキマ等イラストオーダーサイトを利用して依頼してみてください。
私はスキマで依頼して大満足でしたので、イラストの上手い方に依頼するのも選択肢の1つですね。
注意点として、ここの引き出しや装飾品、キャライラストは全て透過PNGで用意することを強くおすすめします。
透過PNGとは背景が透明になっている画像のことを指します。
合成をする場合は透過PNGの画像ファイルを用意しておくとスムーズに作業が出来ます。
透過PNGかどうかは⇩に画像のように、背景が黒とグレーで表示されているかどうかで判別出来ます。
このような背景は実際にアップロードすると、背景は透明になります。
※今回の↑画像は視覚でわかりやすいようにあえてスクリーンショットで背景を残しています。通常はこのような透過PNGを使うと背景がしっかり透過されます。
Aviutlで背景を消すことも可能です（クロマキー処理）
背景があるものの場合は、Aviutl（無料の動画編集ソフト）などで「クロマキー処理」というものをすると透過PNGのように背景を消すことが出来ます。
クロマキー処理はある特定の色を消す（透明にする）ことが出来る機能です。
ペイントやGIMP等の画像編集ソフトでいらない部分を赤色かなにかで塗りつぶし、Aviutlの【クロマキー】機能で赤色を透過させます。
クロマキー処理（赤色の削除）で⇩こうなります
Aviutlで合成し、スクリーンショットを撮ろう
合成といっても、背景に吹き出しやテキスト、キャライラストを載せてサイズを調整するだけなので特別な技術は必要ありません。
ある程度自分の満足がいく画像になったら、スクリーンショットを撮ります。
キーボードの、
【Prt Sc Sys Rq】というキーをクリックすることで、スクリーンショットが撮れます。
私のキーボードの場合は【P】【F12】【0】キーの近くに配置されていました。
ペイントで好きなサイズにトリミング
最後にWINDOWSに標準搭載されているソフト「ペイント」を利用して画像のサイズを調整していきます。
【Prt Sc】キーを押してスクリーンショットを撮ったら、ペイントの【貼り付け】をクリックすることでスクリーンショットを貼り付ける事ができます。
私の場合はCocoonというテーマでサイドバーカラムの長さを336ピクセルに設定していますので、横を336にトリミングしています。縦の長さは一般的なバナー広告の長さである250にしました。
これでバナー画像の完成です。最初は大変かも知れませんが慣れると20分ぐらいでバナー画像を自作できるようになります
Aviutl（動画編集ソフト）は無料なのに画像編集をはじめ様々な機能があり、何でもできる万能ソフトなので非常におすすめしています。
これがあればフォトショップ等の高額な画像編集ソフトも必要ありませんので、是非この機会にダウンロードしてみてください。
自分で作ると非常に愛着が湧きブログ更新のモチベーションUPに繋がりますので、是非頑張ってみてください。
