デザイン

ブログヘッダー画像の作り方【無料で手作り】簡単シンプルな手順

おしゃれでデザインが好みのブログやサイトは見ているだけで楽しいですね。

あなたのブログのヘッダー画像(トップ画像)も、運営者のこだわり溢れる魅力的なものにしてみませんか?

自分でデザインなんてできっこない!という場合は、ココナラやクラウドワークスで有料で作ってもらうことも可能ですが、無料で全部できるならやってみたい!

ということで1枚のヘッダー画像の作り方を手順ごとに説明するので参考にしてください。

  • ブログヘッダーを無料で作る
  • 無料画像と無料ソフトを使う
  • PhotoScapeでデザイン加工

もちろんお金は一切かからないし、画像加工を覚えればヘッダー画像だけでなく今後役に立つこと間違いないのでぜひチャレンジです。

※やってみると、あれ意外と簡単!と思うはずですよ~

ブログヘッダー作り方【簡単動画解説】

ブログヘッダーを無料で作ろう

今回使用した画像やソフト

無料画像:Pixabay

無料画像サイトはたくさんありますが、今回使用したPixabayは、洗練された写真系が多く私は特にお気に入り。

画像編集ソフト

有名なAdobe社が提供するイラストレーターなど玄人向けのデザインソフトもいいですが、今回使ったPhotoScapeは、はじめてでも直感的に操作ができて、完全無料。

インストールしない手はないのでまだならばすぐにどうぞ!

PhotoScapeで画像を編集

今回はPixabayで無料でゲットしたこちらの画像でトップ画像を作っていきますね。

※画像は見にくい場合クリックで拡大します

うん、とってもお洒落な感じで非常に良い!

まずはこれをPhotoScapeで編集画面に移します。

編集したい画像を選択する

PhotoScapeを立ち上げて、この画像の画面になったら↓

※画像はクリックで拡大できます

画像編集アイコンをクリック

PhotoScapeの画像加工画面が開きます。

  1. 左のフォルダから画像の保存先を選ぶ
  2. フォルダ内の画像をクリック

すると、編集画面の右側に画像が出ます。

画像サイズを変える

ブログヘッダーを作る時に、まずはヘッダーのサイズを合わせます。

好みのサイズはブログのテーマやデザインによるところではありますが、一般的なブログをみると、

横幅1000~1500ピクセル
縦幅250~350ピクセル

このあたりで設定するのが一般的でおすすめです。

今回は、

横幅1300
縦幅300

で作成してみます。

画像サイズをヘッダー用に加工する手順は、

  1. 画像のリサイズで横幅を決める
  2. 画像をトリミングして縦幅を決める

この順番でヘッダーを作りますので過程を見ていきましょう。

まずは、①画像のリサイズで横幅1300にするところから。

画像編集画面では、画像の下にメニューが表示され、色々な加工ができるようになっています。

  1. メニュータブの「ホーム」を選ぶ
  2. リサイズをクリック

↓↓↓↓↓↓↓↓↓↓↓↓

画像サイズをいくつにしますか?と設定画面が出てきます。

今回横幅を1300にするので、

幅(ピクセル)の数字を1300と入力

※アスペクト比を保持はチェックを入れておきましょう

OKをクリックすると、画像下のサイズが変更されているのが確認できます。

画像中央の下に、現在の画像サイズが記載されています。

そこを見ると、しっかり1300にリサイズされています。

画像をトリミングして一旦保存

トリミングは、画面左下のメニュータブを、ホーム→トリミングに切り替えます。

切り替えた状態で、画面内をマウスでドラックすると、トリミング枠が表示されます。

このトリミングをしたい枠は、マウスで自由に動かすことができますよ。

どの部分を切り取ればヘッダーにちょうどいいか試行錯誤しましょう。

画像サイズは横:1300,縦:300で作っていますが、サイズの数字より絵がいい感じになる範囲で決めた方が良い仕上がりになりますよ。

  1. トリミングしたい範囲を決定する
  2. 範囲が決まったらトリミングボタンを押す
  3. よければ名前を付けて保存する

※ここで、トリミングしたけどやっぱり範囲が納得いかない、元に戻したいという場合は、

元に戻すボタンを押せば元に戻ります。

もしくはキーボードの【 Ctrl + Z 】で元に戻せます。

トリミングした画像を複数持っておけば、後々文字を少し修正したいとか、更に加工を変更したい場合に役に立ちます。

ひとまずここまでで、オリジナル画像から自分の好きな範囲を切り取ることを覚えました。

これはヘッダー画像以外にも使える作業なのでぜひ覚えておきましょう。

トリミングした画像に文字入れ&加工

ヘッダー用に画像をトリミングできたら、一旦保存したものを編集していきます。

今は美しい画像と桟橋の画像で、綺麗ではありますがキャッチフレーズを入れてブログの個性を出したいですね。

PhotoScapeにトリミング画像を読み込み

上の【編集したい画像を選択する】で説明したとおり、PhotoScapeにトリミングした画像を読み込みます。

  • PhotoScapeを起動
  • 画像編集アイコンをクリック
  • フォルダからトリミング画像を選択
  • 画像を選ぶ

このようにトリミングした画像が編集画面に表示されます。

それではこの画像に、ブログのトップ画像らしい文字を入れていきましょう。

ブログタイトル:FREE LIFE

キャッチフレーズ:~世界中を旅しよう~

素敵な南国の海を思わせる写真なので、自由な旅を連想したのでこれで行きます!

タイトルテキストを入れる

まずはブログタイトルとなる「FREE LIFE」というテキストを入れていきます。

  1. 左下のオブジェクトタブをクリック
  2. T のアイコンをクリック

Tのアイコンでテキストを画像に入れることができます

文字のカスタマイズは簡単!

PhotoScapeでは、文字を入れるだけでなく、

  • フォント
  • フォントサイズ
  • 文字の加工
  • カラー変更

デザインに自信がなくても様々な文字加工ができるんです。

テキスト入力画面は以下のとおりです。

  1. テキストの入力
  2. フォント・サイズ・太字・斜体・アンダーライン
  3. アウトラインの追加とカスタマイズ
  4. シャドウの追加とカスタマイズ
  5. アンカー 文字の位置調整

ここを好きなようにカスタマイズするだけで、

同じ「FREE LIFE」という文字だけでも

↓↓↓↓↓↓↓↓↓↓

こんな感じで、フォントを変えたり、カラー、アウトラインを変更するだけで好きなテキストを作ることができます。

デザインに慣れてない人でも直感的にカスタマイズできるので安心です。

この要領で、ブログタイトルと、テキストを入れていきます。

↓↓↓↓↓↓↓↓↓↓↓↓

いかがでしょうか?!

ちょっと旅ブログのトップ画像っぽくなったと我ながら思っています(笑)

ですが、なんだか画像の右側が暗いのが気になりますね~

そんなときは、

  • メニューのツールにタブを切り替え
  • 効果ブラシをクリック

すると、セピア・モザイク・暗くする・輝かせるなどの効果メニューが表れます。

これを押して、画像の修正した部分をクリックすると、画像の背景もあっという間に明るくすることができちゃいます。

上の暗かった右側に「輝かせる」ブラシを当ててみると・・・

(上)加工前

(下)加工後

どうでしょうか?右側がだいぶ明るく輝いているのがわかりますか?

文字を入れるだけなく、背景のコントラストなども修正できちゃいますからね。

さらに全体も合わせていい感じにしていきます。

↓↓↓↓↓↓↓↓↓↓↓↓

はい、背景のカスタムはこれでいきます。

最初の画像と比べると、だいぶ全体が明るくなり綺麗に見えますね。

画像をスタンプで装飾

文字入れ、文字の加工、背景の加工が終わりましたが、もう少し可愛くしたいなあというときはスタンプが便利です。

  • オブジェクトのタブに切り替える
  • ハートのアイコンをクリック

すると、シーンに合わせた様々なスタンプが出てきます。

基本的な入れ方は、選択してOKを押すだけ。

キラキラしたスタンプを入れたりすると、一気に可愛らしいトップ画像に変身です。

フレームを変えてみる

がらっと雰囲気の違うヘッダーに変えることができるのがフレーム。

画面左下を「ホーム」にして、矢印の示すフレームを変更してみると・・・

フレームパターンはなんと50種類以上。

フレームパターンを変えるとトップ画像の雰囲気がガラリと変わるのでオススメです。

気に入ったものがあれば、保存していくつかのパターンを持っておき、ブログで定期的に変える楽しみもいいかもしれません。

フィルター効果

写真加工ではおなじみのフィルター効果ももちろんできます。

  • ホームのタブをクリック
  • フィルター
  • 好きな効果を選ぶ

例えばフィルター加工すると

アニメフィルター

アンティークフィルター

セロファンフィルター

などなど、こちらもフレーム同様に多種多様なフィルター加工をすることができます。

ということで、ここまでのおさらいですが、

  1. 無料画像をゲットする
  2. PhotoScapeで画像編集
  3. PhotoScapeでトップ画像用にトリミング
  4. トリミング画像を保存
  5. トリミング画像を編集画面へ
  6. 文字入れ
  7. 文字の装飾
  8. 背景画像のカスタマイズ
  9. フレームの追加
  10. フィルター効果

10個の手順で、ブログのトップ画像を作成してきました。

それでは今回完成した画像を、記念にこのブログのヘッダーにしてみると

↓↓↓↓↓↓↓↓↓↓↓↓↓

こんな感じにできました!

いかがですか?

サクッと作った割にはなかなかよさそうなトップ画像ではないかなと思います。

PhotoScapeを使ってトップ画像を作れば、もっと可愛らしい女性よりなデザインにしたり、無骨な男性デザインにするも自由自在。

すべて無料でできるし、ここでは紹介しきれなかった画像加工もあるのでぜひチャレンジしてみましょう。

ブログヘッダー画像の作り方【今回のおさらい】

  1. トップ画像は有料で作成依頼もできるが無料で自分で作れる
  2. 好きな無料画像サイトから画像をゲットしよう
  3. PhotoScapeでヘッダー画像用にトリミング
  4. トリミングした画像に文字入れ、背景カスタマイズ、効果を使ってオリジナルヘッダーを作る

ヘッダー画像作りはとても楽しいし、何より自分のブログに愛着が湧く、オリジナリティが出て差別化が図れるなど利点ばかり。

ヘッダーに限らずこの作り方を覚えれば、他のサムネイル作成やアイキャッチなど応用が効くのでやってみてください。

一度やってみると本当に簡単に感じるので安心してチャレンジあるのみ!