あるむふぁっきら

読者です 読者をやめる 読者になる 読者になる

あるむふぁっきら

福岡の大学生による雑記帳。

GIMPでブログのヘッダー画像を作ってみた

IT関連

最近他の人のブログを見ていて思う事。
トップページがなんかすげえよなぁ。

僕のブログはただタイトルと説明文が書いてるだけなのに、みんなのはタイトルが画像になっててかっこいい!! 僕もかっこいいブログにしたい!!

でいろいろ調べていくと、どうやら「GIMP」というフリーソフトで割と簡単に作れるらしい。やったね!
f:id:space-tiger:20160209142347p:plain



GIMPとは?

ギンプ、とかジンプって読むらしい。

フリーの画像処理ソフトとしては唯一無二の高機能を誇り、数々の有料ソフトと比較しても遜色ないと言われている。

GIMPとは (ギンプとは) [単語記事] - ニコニコ大百科

画像編集と言えばillustratorとかPhotoshopくらいしか聞いたことなかったのですが、個人で使うのには困らないほど高機能なものがフリーソフトであるのですね。すばらし。

構想

実はGIMPにたどり着く前に、ブラウザ上で簡単にトップバナーが作れるサイトを見ていました。
www.banner-chef.com

f:id:space-tiger:20160209113114p:plain
▲当時作ったヘッダー画像

このサイトでは
背景→(オブジェクト→効果・フレーム→)タイトルテキスト→サブテキスト
の順番で部品を選択し、バナーを作れるようになっています。

ということは、GIMPでも背景画像の上にテキストを打ち込めばそれっぽいのができるんじゃ??

ブログタイトルの「あるむふぁっきら」とは、アラビア語で「雑記帳」という意味なので、タイトルに合わせて古典風なイメージの画像を作ることにしました。

ブログタイトルの由来等はこちらからご覧ください♪

space-tiger.hateblo.jp



最初に

GIMPで「ファイル」→「新しい画像」を選択して作成にとりかかります。

f:id:space-tiger:20160209114559j:plain
僕のブログデザインだと、幅は900pxで高さは200pxです。

背景画像

次に背景画像を探します。
「古典風なイメージ」から僕が連想したのは、巻物。
[フリーイラスト] 巻物のフレーム - GATAG|フリー素材集 壱
f:id:space-tiger:20160209114058j:plain
こちらの画像を使わせていただくことにしました。

このまま張り付けると縦横の比率がおかしいので、デザインのサイズに合わせるようにWindows標準ソフトの「ペイント」で編集しました。
f:id:space-tiger:20160209115802j:plain

単位を「ピクセル」にすることと、「縦横比を維持する」のチェックを外しておくことに注意です。

サイズ変更したら、GIMPの右側枠にドラッグアンドドロップ。f:id:space-tiger:20160209120222j:plain



フリーフォントのテキスト挿入

次にタイトルとなるテキストを入れるのですが、せっかくだから少し変わったフォントを使ってみたくなりました。
青柳疎石フォントという、書道家の方が作られた毛筆フォントを使ってみました。

GIMPにフリーフォントを追加する方法は、こちらのサイトを参考にしました。
synclogue-navi.com

GIMPに追加したいフォントの「.ttf」ファイルを GIMPのフォントフォルダ 「C:\Users\(ユーザ名)\.gimp-2.8\fonts」 に移動します。

一旦GIMPを再起動すると、追加したフォントが選択できるようになっています。

完成

できた!!
f:id:space-tiger:20160208221645j:plain

あとはこれを、はてブロ管理画面の「デザイン」→「カスタマイズ」→「ヘッダ」にある「タイトル画像」にアップロードするだけ!簡単だった!

画像の上に文字を乗せただけだけどね・・・。作業時間30分くらいだけどね・・・。でも、真っ白な味気ないトップページから「俺の作ったデザイン」って感じになってすごくうれしいよ。カスタマイズって楽しいなあ!!

スマホ版ヘッダー画像

でもこのままだとPC用のヘッダ画像がそのままスマホでも使われちゃって、スマホで見るとせっかく作ったヘッダー画像の両端が大きく見切れちゃうから、スマホ用は別に画像を作らないといけないみたいです。といっても、さっきと同じものをサイズ違いで作ればいいだけですけど。

サイズについてはこちらのブログで使われている350×200にしました。
chipspd.hatenadiary.jp

じゃん!

f:id:space-tiger:20160208223405j:plain

最後に

センスがないからあんまりかっこいいのは作れなかったけど、今回知ったGIMPは勉強したらすごくおもしろそう&役に立つっぽいのでがんばってみます!
画像の縦横比はGIMP単体でも絶対調整できるだろうし。そのうちかっこいいの作り直すぞ~。

これまで!

レバテック様に紹介記事を書いて頂きました!

creator.levtech.jp

space-tiger.hateblo.jp