⇒おすすめのPS4ソフト&周辺機器!

ブログ用ヘッダー画像をAviutlで作ってみた!過程や利用サイトなどの紹介

ヘッダー画像はココナラ等の外注依頼サイトで作成してもらうことも出来ますが、自作することも十分可能です。

今回作成したヘッダーは↓こちら

グローバルナビと色を合わせており、シンプルにかつ個人ブログ感の強い雰囲気に出来上がったと思います。

今回紹介する方法は様々なテーマやはてなブログでも利用できますので、是非最後までご覧いただけると嬉しいです。

スポンサーリンク

ヘッダー画像製作にあたり、用意したもの

大まかな作業手順としてはまず、細かい画像を作成していきます(↓画像)

・背景

・キャライラスト

めらにっく

・ワンポイントイラスト

・ロゴ①

・ロゴ②

これらを画像編集ソフトにて合成することで、ヘッダー画像の完成です(↓画像)

今回製作するにあたり、それぞれの画像は以下のサイトを利用させていただきました。

・背景:ペイント
・ロゴ:フリーフォントで簡単ロゴ作成
・キャライラスト:スキマ
・ワンポイントイラスト:いらすとや
※外部リンクへ移動します

ペイントにて背景画像を作成しよう

windowsのパソコンの方は購入時からデフォルトで搭載されているペイントという無料ソフトを利用します。

バケツマークをクリックし、色を指定するだけなので簡単に作業が完了すると思います。

色の塗りつぶし機能が使えればペイントでなくても大丈夫です。

また、ピクサベイ等の無料画像サイトから画像をダウンロードすることも検討してみて下さい。

【ピクサベイ(Pixabay)】フリー画像を探せるサイトの安全性と使い方
...
フォントを工夫したロゴの作成方法

ロゴ作成

通常のフォントのままだと少し物足りない感があるので、フォント文字を工夫できるサイトにてロゴを作っていきましょう。

私の場合は、フリーフォントで簡単ロゴ作成というサイトを利用させていただきました。

このサイトではフォント・文字サイズ・色・縁取り文字を設定できます。

詳しい操作方法は別記事にてまとめています。

簡単なタイトルロゴ画像の透過PNGを作れる無料サイトを紹介
...

縁取り文字は↓画像のように、文字の周りを別の色で装飾することを指します。今回のロゴに限らず、普段の記事のアイキャッチ画像にも利用しても良いですね。

アイキャッチ画像の縁取り文字について

YouTuberのサムネイル画像はほとんどこの縁取り文字が利用されています。

キャライラストをヘッダーに入れたい場合

SKIMA

キャライラストは別になくても大丈夫ですが、ロゴだけだと何となく寂しい感じがありませんか?

ブログ専用のキャラクターを用意すると、個人ブログの良さが出てくると思います。

企業サイトが導入しづらいこの手法は、他サイトとの差別化(独自性)につながります。

私の場合は、スキマというイラストオーダーサイトにてはちみつモンテ様に依頼して描いていただきました。

詳しい経緯はこちらから是非。

【SKIMA(スキマ)】口コミと評判を観ずにイラストの依頼をやってみた
...

イラストを自分で描くのは難易度が高いので、専門の人にお願いするのが良いと思います。

関連記事

萌えキャラフリーイラスト集のレビュー【ブログ(サイト)のオリジナルキャラに】

ワンポイント画像で見栄え良く

3のキャライラストと同様に、今度はワンポイント画像を用意していきます。

ゲームブログの場合はゲーム機、ダイエットブログの場合はダンベルなど、自分のブログと関連の深い画像を用意するとより良い見栄えになると思います。

私の場合はいらすとやさんにて、トップの画像を利用させていただきました。

これはヘッダー画像でトップに移動できるということをアピールしたかったためです。

いらすとやさんに他にも、イラストレインさんなどの素晴らしい画像サイトが存在しているので、是非一度サイトを訪問してみて下さい。

用意したそれぞれの画像をAviutlで合成する方法

ここからは画像編集ソフトにて、用意したそれぞれの画像を合成します。

当ブログではAviutl(エーブイアイユーティーエル)の記事を多く公開しているので、Aviutlで編集していきます。

その他の画像編集ソフトでも作成はもちろん可能ですが、Aviutlは無料かつ動画編集と画像編集が両方できるなど汎用性が高いのでサイト運営の大きな助けになってくれます。

Aviutlについては別の記事にて詳しくまとめています。

【AviUtl】ダウンロードのやり方を初心者向けに解説!起動まで
...

合成する際の注意点としては、透過PNGでないとクロマキー処理が必要になることです。

例えばJPG画像で保存していると、色の透明度が保存されず背景が白く表示されてしまいます。

ここまでで紹介したサイトは、すべて透過PNGで保存できるので問題ありません!

透過PNGについて

透過PNGは背景が透明になっている画像のことを指します。

LINEスタンプのキャライラストと同じものですね。

透過PNGかどうかは↓画像のように、背景が黒とグレーで表示されているかどうかで判別出来ます。

このような背景は、実際にアップロードすると背景がしっかりと透過されます。

クロマキー処理について

背景があるものの場合(JPG画像など)は、Aviutlで「クロマキー処理」というものをする必要があります。

クロマキー処理はある特定の色を消す(透明にする)ことが出来ます。

作業手順
・ペイント等の画像編集ソフトで、消したい部分を赤色かなにかで塗りつぶす
・Aviutlに取り込み、【クロマキー】機能でキー色の選択をする

Before

After

クロマキー処理(特定の色の削除)はAvitulで利用できるので、余計な背景が映っていても削除することが可能です。

Aviutlで画像を合成する方法

Aviutlを開いたあとは、【拡張編集】にて右クリック、【メディアオブジェクトの追加】、【画像ファイル】とクリックすると画像ファイルレイヤーを作成できます。

【テキストファイル】にすると、縁取り文字が作れます。

私の場合は、【メラにっく『の』ゲームブログ】で『の』の部分を小さい文字サイズにしたかったため、Aviutlでテキストファイルにしました。

この方法で複数の画像レイヤーとテキストレイヤーを作成し、画像を合成していきます。

完成後は、Aviutlの本体画面(画像が見えている範囲)にて右クリック、【クリップボードに出力イメージをコピー】を選択します。

その後、ペイントにて【貼り付け】で、Aviutlで合成した画像がペイント上にコピーされます。

ペイントにコピー後は画像のトリミングを行いましょう。

めらん
めらん

これで完成です!

お疲れ様でした

普段のアイキャッチ画像やバナー画像も同様の手法で作成できるので、是非やってみて下さい。