ブログカスタマイズ Gimp2を使って

2015年08月21日

高機能画像編集ソフトを利用して編集



ここでダウンロードしてインストールしましたGIMP2と呼ばれる高機能画像編集ソフトを利用します。このソフトを利用して、パソコン内に保存をしたテンプレートの画像を開き編集します。

●左上のファイルをクリックを行ない、パソコン内に保存をした画像を開きます 



●作業を行うウィンドウを表示するために、上のウィンドウからツールボックスとドッキング可能なダイアログからレイヤーを選択します。 レイヤーとは、階層を現す層を現す言葉です。画像と画像を重ねたりする場合に扱うウィンドウです。



● テンプレートの画像が必要なのは、大きさを確認するためです。大きさ分かっているため、この画像を削除します。レイヤーにある選択されている画像をクリックします。



● 画像を削除するには、アルファチャンネルと呼ばれるチャンネルを画像に適用させてから削除します。本来アルファチャンネルは、画像の一部の背景を透明化する時に扱う物で、人物などの画像を切りぬき、背景を透明にする場合に利用する物です。



● レイヤーウィンドウで画像が選択されている事を確認をして、キーボードにありますdeletキーを押して画像を削除します。



● 大きさだけ残して画像が削除されました。この大きさの画像に対して自分の好きな画像を読み込んで行きます。読み込む画像形式は画像形式であれば何でもかまいません。テンプレートはjpgですが、png形式、gif形式、読み込める形式であれば、何でもOKです。



● 画像を読み込む場合は、ファイルからレイヤーとして開くで読み込みます。好きな画像を読みんでオリジナルティの高いブログに変える事が出来ます。



● 二枚の画像ファイルを読み込んだ例になります。画像が不必要な場合は、レイヤーウィンドウにある画像を選択して、右下のゴミ箱にドラッグする事で削除する事が出来ます。



● この時点でよく利用するツールは、下の図に示しているツールになります。1は一定の色の範囲を全て選択してくれます。不必要な場所を削除する時などに利用します。削除する場合は、キーボードにあるdeletキーを押して削除します。

2は、画像を拡大したりする時に利用します。ドラッグで範囲を指定する事できます。元に戻す場合は、上にある表示から表示倍率を100%で戻す事ができます。

3は画像を移動させる時に利用します。

4は消しゴムです。消しゴムの大きさや形をツールボックスウィンドウから変える事が出来ます。様々なツールがありますので、実際に利用してみて確認してみてください。わからない言葉などは、インターネットで検索すれば、直ぐに内容を把握する事が可能です。



● 画像を保存する場合は、二つの保存があります。一つは、GIMP2を利用するための保存で下の図の赤い丸がそれに当たります。ブログカスマイズ用の画像として利用する場合は、青い丸の名前を付けてエクスポートを選択します。編集ができる様に両方保存しておく事を推奨します。



● ファイル名は、分かり易く好きな名前でもかまいません。テンプレートと同じ名前で無くても問題はありません。また、テンプレートの画像がjpgだからと言いまして、必ずjpg画像でなければならないと言う訳でもありません。必ず、小文字の英数文字で付けなければならず、拡張子も付ける必要性があります。拡張子は、.jpg .gif .pngのどれかになり、必ず、ファイル名と、拡張子の間には小さなドット . が必要です。

このブログのブログカスタマイズ Gimp2を使っては、テンプレートの本文の背景はgif画像ですが、png画像を扱っています。



● 右下にあるエクスポートをクリックすれば、保存する事ができますが、保存形式によっては確認ウィンドウが出ます。内容が分からない場合はそのままエクスポートで保存してください。



● このページの内容は、少し量が多いため、始めての方は意味が理解できない事もあるかと思いますが、一つ一つ実践と確認をしながら体で覚えていただければと思います。

次のページではこの完成した画像をアップロードをして、画像アドレスの書き換えを紹介します。











テンプレートにある画像の大きさの確認



画像を入れ替える場合は、入れ替えるための画像の大きさの確認をする必要性があります。ブラウザによって直ぐに確認できる事もありますが、テンプレートをダウンロードして確認するベターな方法で紹介します。

●全ての表示が確認できる様に、一記事だけテスト用として文章を適当に書き、投稿をして起きます。


●cssが記載されているページ内で、キーボードにありますCTRキー+Fを押し、文章内を検索できる様にします。検索する文字は、jpg gif png画像のアドレスを探すために三つキーワードを使い画像アドレスを探します。



テンプレートの内容によっては、jpgのみ、gifのみ、pngのみなどありますが、どの形式の画像が扱われているかわからないため、この三つのキーワードを全て利用して検索をして探します。

この ブログカスタマイズ Gimp2を使ってのブログのテンプレートには、jpg形式の画像が一枚扱われている事が確認できます。

●下の図で見られる様にhttpから始まり、pngで終わっている文字を全てドラッグをして選択を行ない、コピーをします。切り取りでは無くコピーをします。このアドレスは、テンプレートの画像を表示させている画像のアドレスになります。


● 新しいウィンドウを開く、若しくは新しいタブを開き、コピーをしたアドレスを貼り付けキーボードにあるenterキーを押し、画像の確認をします。



●表示されている画像の確認ができます。googleのブラウザでは、この時点で左上に大きさが確認できますが、一度この画像を自分自身で扱うパソコン内に保存をします。画像の上にカーソルを乗せ、右クリック 名前をつけて画像を保存を選択すれば、パソコン内に表示されている画像の保存を行う事が出来ます。



● このページで紹介しています内容は、cssのどこにテンプレートの画像アドレスが記載されているかの確認と、画像を編集するための大きさの確認を行う作業になります。


















「Copyright (C) 2015 Art eh bymy All Rights Reserved.」