【無料】フリーソフトのGIMP2でブログのヘッダー画像を作成する手順【ブログ管理人へ推奨】

 

 

細かく画像をデザインしたい場合は「GIMP2」を使っています。

先日勉強でヘッダー画像を1つ作ってみました。

その際の手順をまとめたので、以下のようなヘッダーを作りたいブログの管理人がいたらマネしてみてください。

 

最終的にはこんなヘッダーを作りました。

※クリックをすると拡大します。

GIMP2で作ったヘッダー

 

こだわりのポイントとしては、教室の窓から夕日が差し込んでいるようなデザインであることです。

 

GIMP2とは?

GIMPは「ギンプ」と読みます。(私は今まで「ジンプ」と読んでいましたが、「ギンプ」が正解のようです)

GIMP2とは「フリーソフト(無料のソフト)」です。

無料だけど機能制限がされていて、これ以上の機能を使いたかったら有料版を買えというようなこともありません。

全部無料で利用できます。

 

使い勝手はAdobe Illustrator「Adobe Photoshop」に比べれば劣るのは当然ですが、やりたいことはほとんどできます。

画像処理で食べている人(プロのイラストレーターなど)でなければ「GIMP2」で問題ありません。

 

ちなみに「商用利用」が可能です。

つまり「GIMP2」をカスタマイズして新しい商品として販売をしてお金を稼いでもOKということです。

たとえば「GIMP2にこんな機能があったらもっと便利になるのに・・・」と思い、GIMP2の機能追加をし、それが好評なら販売してお金を稼ぐことができます。

 

GIMP2のインストール手順

GIMP2は「窓の杜」からダウンロードができます。

http://forest.watch.impress.co.jp/library/software/gimp/

GIMP2

 

「GIMP2」のセットアップファイル(gimp-2.8.22-setup.exe 2017年10月現在)がダウンロードされたらダブルクリックしてインストールを開始します。

 

 

「Select Setup Language」画面が表示されたら「English」を選択して「OK」をクリックします。

※言語を「English」にしてもGIMP2は日本語版で起動するので問題ありません。

【無料】フリーソフトのGIMP2でブログのヘッダー画像を作成する手順【ブログ管理人へ推奨】

 

 

セットアップ画面が表示されたら「Install」ボタンをクリックします。

【無料】フリーソフトのGIMP2でブログのヘッダー画像を作成する手順【ブログ管理人へ推奨】

 

 

 

インストールが終わったら「Finish」ボタンをクリックします。

【無料】フリーソフトのGIMP2でブログのヘッダー画像を作成する手順【ブログ管理人へ推奨】

 

 

以上でGIMP2のインストールは完了です。

GIMP2を起動すると特に設定変更をしなくても「日本語」表示になっています。

【無料】フリーソフトのGIMP2でブログのヘッダー画像を作成する手順【ブログ管理人へ推奨】

 

事前準備

ここから「GIMP2」を使ってヘッダー画像を作成します。

初めにヘッダー画像のサイズを決めます。

 

ちなみに上のサンプルのヘッダー画像は「width 1195px、height 328px」です。

サイズの大きさに関しては特に理由はありません。

 

また、ヘッダー画像のファイル形式ですが、「.jpg」でも「.png」でもなんでもいいと思います。

ただしWordPressでサイトを作成している場合は「.png」をお勧めしています。

その理由ですが「.jpg」と「.png」の画像両方をアップロードしてみると分かると思いますが「.jpg」の方が画質が悪くなります。

なぜ「.jpg」だと画質が悪くなるのかといいますと、自動的にファイルサイズを小さくしてくれているためどうしても画質が悪くなってしまいます。

しかし「.png」だとそのままの画質でアップロードされますので画像を綺麗に表示させることができます。

 

GIMP2を起動する

GIMP2を起動します。

【無料】フリーソフトのGIMP2でブログのヘッダー画像を作成する手順【ブログ管理人へ推奨】

 

起動すると、以下のようにGIMP2の1セットが表示されます。

【無料】フリーソフトのGIMP2でブログのヘッダー画像を作成する手順【ブログ管理人へ推奨】

 

 

画像を新規作成する

GIMP2が起動したら「ファイル」-「新しい画像」をクリックします。

【無料】フリーソフトのGIMP2でブログのヘッダー画像を作成する手順【ブログ管理人へ推奨】

キャンバスサイズを決定する

下図のような「新しい画像を作成」画面が表示されるので、キャンバスサイズを記入して「OK」ボタンをクリックします。

※今回の場合は「幅1195px、高さ328px」で設定しました。

【無料】フリーソフトのGIMP2でブログのヘッダー画像を作成する手順【ブログ管理人へ推奨】

 

 

下図のような真っ白なキャンバスができます。

【無料】フリーソフトのGIMP2でブログのヘッダー画像を作成する手順【ブログ管理人へ推奨】

 

 

画像を挿入する

キャンバスを作成したら、次は画像を挿入します。

この画像はヘッダー画像の基本となる画像です。

放課後の教室という感じで黒板もあるのでパッと見てどこなのかすぐに分かるというところからこの画像を選びました。

教室の風景

 

 

ヘッダーの基本となる画像を選択する

GIMP2のメニューより「ファイル」-「レイヤーとして開く」をクリックします。

【無料】フリーソフトのGIMP2でブログのヘッダー画像を作成する手順【ブログ管理人へ推奨】

 

 

「レイヤーとして画像ファイルを開く」ウィンドウが開いたら、画像を選択して「開く」ボタンをクリックします。

【無料】フリーソフトのGIMP2でブログのヘッダー画像を作成する手順【ブログ管理人へ推奨】

 

 

下図のような感じで教室の画像が表示されます。

【無料】フリーソフトのGIMP2でブログのヘッダー画像を作成する手順【ブログ管理人へ推奨】

→この画像はフリー画像のサイトからダウンロードしたもので、ヘッダーのコンセプトは「学ぶ」なので教室の画像としました。

後程、この画像にタイトルや様々な効果を加えてちゃんとしたヘッダー画像に加工します。

 

画像にタイトルを入れる

まず初めに画像にタイトルを入れます。

 

【例】
タイトル     : 試しに作ってみたヘッダーです。無料のGimp2で短時間で簡単にここまで作れました。
キャッチフレーズ : レンタルサーバーの技術習得が趣味の管理人がどこまで深くレンタルサーバーを解説できるのか?仮想化・クラウドなんでもありです!

 

この「タイトル」「キャッチフレーズ」をヘッダー画像に入れます。

 

下図のようにGIMP2の「ツールボックス」「レイヤー」ウィンドウが表示されている事を確認します。

【無料】フリーソフトのGIMP2でブログのヘッダー画像を作成する手順【ブログ管理人へ推奨】

 

表示されていない場合

表示されていない場合は以下の手順で表示させます。

 

■レイヤーを表示させる場合

GIMP2のメニューより「ウィンドウ」-「最近閉じたドック」-「レイヤー、チャンネル、パス、作業履歴・・・」をクリックします。

【無料】フリーソフトのGIMP2でブログのヘッダー画像を作成する手順【ブログ管理人へ推奨】

 

以下のように「レイヤー - グラデーション」が表示されます。

【無料】フリーソフトのGIMP2でブログのヘッダー画像を作成する手順【ブログ管理人へ推奨】

 

■ツールボックスを表示させる場合

GIMP2のメニューより「ウィンドウ」-「新しいツールボックス」をクリックします。

【無料】フリーソフトのGIMP2でブログのヘッダー画像を作成する手順【ブログ管理人へ推奨】

 

下図のように「ツールボックス」が表示されることを確認します。

 

 

 

ツールボックスより「テキストツールのアイコン」をクリックします。

【無料】フリーソフトのGIMP2でブログのヘッダー画像を作成する手順【ブログ管理人へ推奨】

 

 

 

こんな感じでタイトルを入れてみました。

ただし白の文字で作ったので見にくいです。

そのためタイトルに枠を付けて(縁を入れて)ハッキリと見えるようにします。

【無料】フリーソフトのGIMP2でブログのヘッダー画像を作成する手順【ブログ管理人へ推奨】

 

文字を選択する

文字を入力すると、以下のような感じで「レイヤー - グラデーション」ウィンドウでタイトルのレイヤーが出来ているので確認します。

【無料】フリーソフトのGIMP2でブログのヘッダー画像を作成する手順【ブログ管理人へ推奨】

 

 

タイトルのレイヤーを選択して右クリックして「不透明部分を選択範囲に」をクリックします。

【無料】フリーソフトのGIMP2でブログのヘッダー画像を作成する手順【ブログ管理人へ推奨】

 

 

以下のような感じで文字が選択されます。

【無料】フリーソフトのGIMP2でブログのヘッダー画像を作成する手順【ブログ管理人へ推奨】

 

 

選択範囲の拡大をする

GIMP2のメニューより「選択」-「選択範囲の拡大」をクリックします。

【無料】フリーソフトのGIMP2でブログのヘッダー画像を作成する手順【ブログ管理人へ推奨】

 

「選択範囲の拡大」ウィンドウが起動するので拡大量を入力して「OK」ボタンをクリックします。

 

※ここで入力する数値は、どれだけ枠の線を太くするかをpx単位で決めるものです。数値を大きくすればするほど枠が太くなります。

私の場合はシャープな感じにしたいので大体「1px」に設定します。

 

新しいレイヤーを作成する

再度メニューより「レイヤー」-「新しいレイヤーの追加」をクリックします。

【無料】フリーソフトのGIMP2でブログのヘッダー画像を作成する手順【ブログ管理人へ推奨】

 

 

「新しいレイヤー」ウィンドウが表示されたら「レイヤー塗りつぶし方法」「透明」であることを確認して「OK」ボタンをクリックします。

 

 

以下のように新しくレイヤーが作成される事を確認します。

【無料】フリーソフトのGIMP2でブログのヘッダー画像を作成する手順【ブログ管理人へ推奨】

 

 

レイヤーを下に移動する

先ほど作成したレイヤーをドラッグ&ドロップでタイトルのレイヤーの下に持ってきます。

【無料】フリーソフトのGIMP2でブログのヘッダー画像を作成する手順【ブログ管理人へ推奨】

 

※その理由は、レイヤーは一番上に位置するものが一番上に表示されるからです。今回作成した”文字枠のレイヤー”はタイトルに枠を付けるためなのでタイトルより下に位置しないと文字枠を付けられないためです。

もし文字枠の方がタイトル文字の上の位置にあると、タイトルが枠に隠れてしまいます。

 

枠(縁取り)の色を付ける

枠のレイヤーが選択されていることを確認して「ツールボックス」ウィンドウより「描画色」のボタンをクリックします。

【無料】フリーソフトのGIMP2でブログのヘッダー画像を作成する手順【ブログ管理人へ推奨】

 

「描画色の変更」ウィンドウが表示されるので色を選択して「OK」ボタンをクリックします。

【無料】フリーソフトのGIMP2でブログのヘッダー画像を作成する手順【ブログ管理人へ推奨】

 

※今回は黒より灰色にしてみました。

 

 

メニューより「編集」-「描画色で塗りつぶす」をクリックします。

【無料】フリーソフトのGIMP2でブログのヘッダー画像を作成する手順【ブログ管理人へ推奨】

 

 

塗りつぶしが確認できたら「選択」-「選択の解除」をクリックします。

【無料】フリーソフトのGIMP2でブログのヘッダー画像を作成する手順【ブログ管理人へ推奨】

 

 

枠(縁取り)が出来ていることを確認します。

【無料】フリーソフトのGIMP2でブログのヘッダー画像を作成する手順【ブログ管理人へ推奨】

 

画像にサイトのキャッチフレーズを入れる

上記の方法と同様にキャッチフレーズ(簡単な説明文)を入れます。

キャッチフレーズ : レンタルサーバーの技術習得が趣味の管理人がどこまで深くレンタルサーバーを解説できるのか?仮想化・クラウドなんでもありです!

キャッチフレーズ : レンタルサーバーの技術習得が趣味の管理人がどこまで深くレンタルサーバーを解説できるのか?仮想化・クラウドなんでもありです!

 

 

人物の画像を挿入する

更に画像を加工します。

人物をヘッダー画像に載せます。

あらかじめ人物も画像フリーサイトから気に入ったものをダウンロードしておきます。

 

メニューより「ファイル」-「レイヤーとして開く」をクリックします。

【無料】フリーソフトのGIMP2でブログのヘッダー画像を作成する手順【ブログ管理人へ推奨】

 

挿入したい画像を選択して「開く」ボタンをクリックします。

【無料】フリーソフトのGIMP2でブログのヘッダー画像を作成する手順【ブログ管理人へ推奨】

 

 

画像が挿入されたことを確認します。

【無料】フリーソフトのGIMP2でブログのヘッダー画像を作成する手順【ブログ管理人へ推奨】

 

 

以降、上記の手順を繰り返し、人物の画像を配置します。

※コツはレイヤーの順番を気を付けることです。前に出したい絵は、上のレイヤーに配置し、後ろに置きたい絵は、下のレイヤーに配置します。

【無料】フリーソフトのGIMP2でブログのヘッダー画像を作成する手順【ブログ管理人へ推奨】

 

 

 

光を演出したいので、再度絵を挿入する

更に窓から光が差し込むような画像にしたいので、以下のような画像を用意しました。

【無料】フリーソフトのGIMP2でブログのヘッダー画像を作成する手順【ブログ管理人へ推奨】

 

メニューより「ファイル」-「レイヤーとして開く」をクリックします。

【無料】フリーソフトのGIMP2でブログのヘッダー画像を作成する手順【ブログ管理人へ推奨】

 

上の画像を選択して画像を挿入します。

 

 

ここから教室内を照らす淡い夕陽を再現するために「不透明度」を変更します。

デフォルトでは不透明度は「100%」になっているので、徐々に不透明度を減らして調整していきます。

 

 

 

最終的に不透明度「14.5」にしました。

【無料】フリーソフトのGIMP2でブログのヘッダー画像を作成する手順【ブログ管理人へ推奨】

 

 

 

もし画像が大きすぎた場合は、別途画像の大きさを調整します。

下図のように「レイヤー」より対象の画像を選択して、「ツールボックス」「拡大・縮小」アイコンをクリックして大きさを調節します。

 

 

画像を保存する

ヘッダー画像を作成したら保存します。

メニューより「ファイル」-「名前を付けて保存」をクリックし、保存したいフォルダを選択して画像の名前を設定して「保存」をクリックします。

 

ヘッダー画像をエクスポートする

ヘッダー画像ファイルをエクスポートしたいので、メニューより「ファイル」-「名前を付けてエクスポート」をクリックします。

名前を付けて「エクスポート」をクリックして画像をエクスポートします。

 

 

まとめ

 

以上でヘッダー画像が完成しましたが、ブログ管理者はこんな感じで無料で簡単にオリジナルのヘッダー画像を作れるので試してみてください。

 

 

Posted by 100%レンタルサーバーを使いこなすサイト管理人

コメントを残す

メールアドレスが公開されることはありません。