フリー(無料)のペイントソフト「GIMP」でブログのヘッダーを作ってみました

今回こそ諦めずにググって完成させる!

まったくの初心者さんが自分だけのブログを手に入れる1番かんたんな方法という記事を、「ドメイン編」「サーバー編」「ワードプレス編」という形で3回に分けて紹介しました

 

ワードプレス(WordPress)のテーマを変更する方法をかんたんに画像付きで紹介しますの記事ではデフォルトのテーマから無料の秀逸テーマSimplicityにテーマを変更するまでを紹介しました

 

今回は無料のペイントソフト「GIMP」を使ってヘッダー画像を作ってみようと思います 実は何度かGIMPに挑んだことがありますが、サッパリわからず挫折していました.. 今回こそあきらめずにググって完成させます!

今使っているのは化石..

ブログに挿し込む画像を加工するとき、ぼくは大昔のペイントソフトを使っています

 

今から15年ほど昔〃にコンビニで2980円で売られていたソフトで、ウィンドウズmeという伝説のOSで起動したらリソースがどうたらこうたらでマトモに動かなかったという..(笑)

OSが変わるたびにビクビクしていましたがWindows10になった今でもバリバリと動きます もともと機能を制限してコンビニで売られてる程度のソフトなのでサクサク動きます。「もっとあんなことがしたい」「フォントを装飾したい」という願いはあまり叶いませんが、あきらめがついたらスッキリしました(笑)

 

今使っているペイントソフトが、いつか本当に動かなくなる日が来るかもしれません そうなる前にGIMPを多少使えるようにしておくのは大切です

まずはGIMPをダウンロード

https://www.gimp.org/downloads/

最新晩は2.8.20(2017-02-01)でした

ダウンロードしたらインストールしてください 言語選択に「日本語」はありませんのでEnglishを選びました

おいおい!日本語じゃなきゃダメだよ!GIMP!

と言いかけましたが無料で使わせてくれてるんです

持ち前のガッツとグーグルでカバーしていきす

 

ダウンロードページをそのまま下にスクロールすると GIMP User Manualなる物を発見し、その中に日本語マニュアルを見つけました

これで何とか戦えそうです!

日本語マニュアルもダウンロード、インストール完了しました 実際にGIMPを起動します

 

すると どうでしょうか..

完全に日本語化されてます

 

ということは..

そうです

これで逃げ場がなくなりました(笑)

ブログの顔とも言われるTOP画面ですから

ヘッダーはインパクトのあるものにします

無料で素敵な画像を配布している海外のサイトに出かけてきます

 

FreeStockPhotos

あまりにも素材が多くて迷いましたが

下の画像を選びました

画像の上で右クリック→名前を付けて画像を保存します

GIMPの画面から

「ファイル」→「新しい画像」をクリックしてください 今回ブログに使うヘッダーの幅は「横1070px」です高さは雰囲気で500pxにしてみました

下の画面右下に黄色と黒の点線で白い物が見えます これが今作った1070px 500pxの土台部分です この土台に先ほどの浜辺の画像を貼り付けます

「ファイル」→「レイヤーとして開く」

土台の上に、浜辺の画像が乗っている状態です

ここで問題が発生です

下の図で見ると浜辺の画像の横幅が足りないことに気づきました 薄ピンクの部分が不足している部分です

これを下図の「拡大・縮小ボタン」を使って横幅を増やしました 浜辺の画像に格子状の白線が見えますが、これを引っ張ったり伸ばしたりすることで画像のカタチを変えることも出来ます

きっちりpx単位でいきたいので「幅」に1070と打ち込むと、おそらくGIMPが気を利かせてくれたのでしょう 高さが585に伸びていました

無事に画像のサイズも変更できましたので、インパクトのある文字を入れることにしました

「文字入力ボタン」をクリックし、浜辺に適当に枠を引いてください その枠の中に文字を入力します 最初のフォントのサイズが8pxとなっていてメチャクチャ小さいので大きくします

フォントの色やデザインをそれっぽくしました

無事にゴールが見えてきたので、ぼくがよくやる小手先の画像加工をご紹介します(笑)

 

下図の「レイヤー-ブラシ」と書いてあるところに注目してください

これは一番下に「背景」という画像の上に「浜辺」が乗っていて、さらにその上に「フォント」が乗っている状態です

レイヤーというものを理解するのに7年かかったことは内緒ですが、要するに透明だったり不透明だったりするフィルムです、レイヤーの紹介は省略します

このフォントのレイヤーの不透明度を少し下げると、後ろの「浜辺」の画像が見えてきます ぼくはこれが大好きです(笑)

これでトップ画像(ヘッダー)の完成です!

「ファイル」→「名前を付けてエクスポート」をクリックします

任意の名前をつけて保存します 「拡張子かくちょうし」という言葉に馴染みがない人はそのまま保存してください「〇〇自分でつけた名前〇.png」のままでOKです

次はワードプレス側の設定です

ダッシュボード(管理画面)の「外観」→「ヘッダー」をクリック

左側にゴニョゴニョと設定する項目がいくつもあります その中からヘッダーに関する項目がありますので「ヘッダーの高さを500px」にしてから「新規画像を追加」をクリックします

「ファイルをアップロード」を選択し、ヘッダー画像を直接ドロップインもしくは「ファイルを選択」をクリックしてアップロードしてください

デカデカとヘッダー画像が現れますので、そのまま画面右下の「画像の切り抜き」を1度クリックしてください

 

次にどれぐらい切り抜くのか?というページになりますが、「切り抜かない」をクリックします

最後に「保存して公開」をクリックします

確認しに行きましょう

http://4416.fictionfun.net/4416WP/4416WP/

なんとか挫折せずにゴール出来ました!(笑)

サンキューグーグル!!

 

GIMPのダウンロードはhttps://www.gimp.org/downloads/

 

by カエレバ

 

一生懸命書きました!お役に立ちましたらシェアボタンを押してお友達にもご紹介ください!

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください