Bloggerへの道 「GIMPでHeader画像作ってみる」

まずBloggerのみならず、ブログツールのカスタマイズに有用なのが、ペイントツールなり画像編集ソフト等のヘッダー画像や背景画像を作成出来るソフト。

国内製のパソコンとかだと、それらの体験版または廉価版のようなモノが入ってたりするので、それを利用するのもアリですね。

海外製のパソコンや、ソフトが入ってない場合。[アクセサリ]の[ペイント]でも良いんですが、ちょっとドットが荒くなってしまうので、もう少しちゃんとしたものを使いたい所。

そこで、フリーソフトの中でも評価の高いペイントツール「GIMP2」をオススメします。

フリーソフトでありながら有料のグラフィック編集ソフトウェアと比べても遜色のないレベルの機能を備えている。レイヤー、トーンカーブ、ヒストグラム、画像の形状からの切り抜き、ブラシエディタ、パスの編集、多種多様なプラグインなどに加え、モザイク編集や、アニメーション合成（GIFアニメーション）を行うなどといったフィルタ機能も数多く備えており、これ一つで、コンピュータ上のほとんどの画像編集は行える。　　
　　　　　　　　　　　　　　GIMP / wikipediaより抜粋 

と絶賛されています。比較対象に挙がるのが、AdobeのPhotoshopっていうから凄いもんです。

GIMP2の使い方: GIMP2.8リリース。ダウンロードからインストール・起動までの手順。(Windows版)

上記サイトにて詳しいダウンロード/インストールまでの流れを説明しています。このサイトで基本的な操作等の解説もされているので、是非参考に。
こういうソフトを全く使ったことのない人は慣れるのに少々時間がかかるかもしれませんが、慣れれば便利ですよ。

例えばこれが使えるようになると、Bloggerで

1. オリジナルのヘッダー画像が作れる。
2. オリジナルのファビコンが作れる。
3. オリジナルの背景が作れる。
4. [続きを読む][前の投稿][次の投稿]等のリンク用の画像も作れる。

試しに１のヘッダー画像をGIMP2で作ってみましょう。

                                                                                                                                                      

オリジナルのヘッダー画像が作れる

ヘッダーってのは、ブログのタイトル文字が表示されている所です。このブログで言うと「Friend Of Mine」ってなってる所ですね。いわばブログの顔とも言える部分。ここの部分を画像に差し替える事が出来ます。そうすると、Bloggerで表現出来る文字だけのタイトルだけではなく、絵や画像を差し込んで表現することも出来ます。
ヘッダーを作成したものを設定すれば、ブログのオリジナリティがグッと出ます。多分。

1. フォントをダウンロード/インストールしてみる

ヘッダー画像等作成する時、パソコンに予めインストールされているフォントじゃ、ちょっと物足りない・・・って場合もあります。そんな時はフリーフォントをインストールしてみましょう。

dafont.comというフリーフォントサイト。様々なフォントがダウンロード出来ます。

こちらのサイトは様々な種類のフォントをダウンロードする事が出来ます。これをOSにインストールすれば、他のツール（モノによりますが）でもこのフォントを使用する事が可能です。
[Custom preview]にブログ名等入力すれば、フォントのPreview画像が入力した文字で表示されるので、手間がかなり省けます。

コミックテイストな文字や、ポップな文字、Punk/Hardcoreっぽい文字なんかもあります。

ダウンロードしたzipファイルを解凍し、TrueTypeフォントというファイルを使います。(↓参照)

Windows: Windows でフォントをインストールまたは削除する方法

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

2 インストールしたフォントでヘッダーを作成してみる

まずGIMP2を起動。そして[ファイル]→[新しい画像]を選択

[キャンバスサイズ]は幅と高さで設定します。
僕は大体「幅:1000/高さ200」くらいに設定しています。ブログにアップロードする際に、そのブログに適正なサイズに調整出来るので、適当で大丈夫です。サイズよりも縦横比がキモです。
そこら辺はブログのデザインの問題なので、正解はなく好みの問題ですね。
[塗りつぶし色]というのは、どういった紙に絵を描くかと言う事。「白紙」に絵を描くか、「黒紙」に絵を描くか・・・僕は[透明な板に絵を描く]に設定しています。背景色が透明であれば、わざわざヘッダーとブログの背景色を合わせる必要はないからです。

実際に作成してみましょう。

①[テキスト]　テキストレイヤーの作成・編集を行います。

②[フォントツール]　フォントサイズ、色、フォントスタイルの設定等を行います。先程インストールしたフォントもここで選択出来ます。

③[キャンバス]　ここに絵や文字を描きます。

④[表示倍率] 

⑤[レイヤー] レイヤーの作成・編集を行います。

2.1 レイヤー利用法

「レイヤー＝層(Layer)」

パソコンで絵を書く際に、絵を何層かに分けて作成し、重ねて完成させる方法があります。これが意外と便利で、手直しが凄く楽になります。

上記の絵も下記の４枚のレイヤーが重なって表示されている状態です。

文字と影との距離感が気に入らなかった場合、レイヤー毎に分かれていたならば、２番めの黒文字の位置をちょちょっと調整すれば解決します。しかしこれらが一枚のレイヤーに描かれていたら、消しゴムで消して書きなおさなければなりません。

ヘッダー画像程度であれば一枚のレイヤーに描くだけでも問題ないですが、レイヤーを使えるようになれば、使い道が広がりますので是非。

2.2 ペイント→エクスポート

完成したら、[ファイル]→[エクスポート]で作成した画像をファイルとしてエクスポートします。最初にPNGファイルに設定されていますが、問題ないのでそのまま保存先を指定して[エクスポート]。その後小さいウインドウが出て、細かい設定が出来るようになってますが、弄らずにもう一度[エクスポート]。

これで完成。

3. ヘッダーに設定

Bloggerの管理画面の[レイアウト]→[貴方のブログ名 (Header)]→[編集]→[イメージ]→[コンピュータからファイルを選択]
※[プレースメント]は[説明を画像の後ろに表示する]にする
※[ページに合わせてサイズを調整]にチェック
ここでページに合わせてサイズを調整する事で、適正なサイズにアップロードしてくれます。便利ですね。




これでヘッダーに作った画像が設定されているはずです。後は実際に設定されてみて、文字の位置やバランスがおかしかったらまた調整して・・・という作業になると思います。
さあどうなっているでしょうか？

GIMPはブログ以外にも利用することが多いと思うので是非使ってみて下さい。

"Bloggerへの道"のバックナンバーはこちら