ヘッダーを描く

ヘッダーに入れる画像を作ってみましょう。
まず、対象になる画像の大きさと内容を決めましょう。
ヘッダー画像の大きさは、あなたが選んだデザインによって異なります。
        
Jimdoにログインしてください。
ヘッダーの下辺にマウスを近づけると「ヘッダー部分を編集」という文字帯が出てくるので、クリックしてください。ヘッダーの編集画面になります。
ここで、「オリジナル画像」を選んでください。
右側に、現在選んでいるデザインにあった画像サイズが表示されます。

次に内容を考えてみましょう。

 

ヘッダーはどのページでも目に入るものです。
ですから、まず事務所名、あればロゴ、電話番号と受付時間、これは必須でしょう。
キャッチフレーズを入れたいと思われる方も居られるかもしれません。
ここでは、普通の事務所と言うことで、事務所名と電話番号、受付時間を配置します。

GIMPをインストールする

使いやすい無料ソフトと言うことで悩んだのですが、GIMPをご紹介することにしました。
これはとても有名で人気のあるソフトです。少し大きな本屋さんのコンピュータコーナーには、必ず解説書が置いてあります。
無料と言っても、十分すぎるくらいに高機能のソフトです。
プロでもPhotoshopではなくGIMPを使っているという人は意外と多いです。
    
では、GIMPをインストールしてみましょう。
Widowsの方は、下記のURLからダウンロードしてください。
http://gimp-win.sourceforge.net/stable.html
    
gimp-2.6.8-i686-setup.exeというファイルが出来ます。
このファイルを起動してインストールしてください。
インストール中は英語ですが、起動したGIMPは日本語になっています。

ヘッダーの枠を作る

GIMPを起動してみましょう。少し時間が掛かりますが、気長にお待ちください。

先ほど調べたヘッダーの大きさは、940×210でした。
メニューから「ファイル」→「新しい画像」を選んでください。
ここで、画像サイズを入力し、OKをクリックしてください。

文字を入力する

画像を作る領域(キャンバス)が出来ましたでしょうか。
では、文字を入れて配置していきましょう。
その前に、メニューから「ウィンドウ」→「ドッキング可能なダイアログ」→「レイヤー」を選んで、レイヤーダイアログを開いておいてください。
ここに入力した文字が「文字レイヤー」として表示され、文字を選びやすくなります。
    
ツールボックスから、「A」【テキスト】をクリックしてください。
キャンバス上の文字を配置したい位置でクリックしてください。

GIMPテキストエディタに文字を入力すると、入力した文字が出てきます。
同時に、レイヤーダイアログに、新しいレイヤーが追加されます。
    
レイヤーはマウスでドラッグして移動することが出来ます。
レイヤーの外側の枠にカーソルを近づけるとマウスポインターの形状が変わります。
そこでドラッグすると、枠のサイズを変えることが出来ます。
    
ツールボックスから、「A」【テキスト】をダブルクリックすると、ツールオプション・ダイアログが表示されます。
ここで、今選んでいるテキストのサイズや書体、文字間隔等の設定を行うことが出来ます。

背景を付ける

私見ですが、背景は強い印象があり、うまく作ればとても有効です。
しかし、素人には文字との兼ね合いもあり、正直なところ難しいです。
付けないか、出来るだけ控えめに付けるか、プロに頼むのが良いと思います。
今回は、上品な大理石柄を背景にします。
レイヤーダイアログで「背景」レイヤーを選んでください。
バケツ【塗りつぶし】をダブルクリックし、ツールオプション・ダイアログでパターン塗り(Marble #1)を選び、キャンパス上でマウスをクリックします。

(ここでは、分かりやすいように少し派手目のMarble #2を使って説明しています。)
背景に写真を入れたいというような場合は、写真を貼り付けた後、レイヤーダイアログで写真のレイヤーを下に移動してください。

イメージを配置する

これでは、文字ばかりで面白くありませんから、電話のイメージを入れてみましょう。
まず、電話のイメージ画像を用意します。これはフリー素材などで探してください。
次に、イメージ画像をファイルからキャンバス上にドラッグします。
これで、新しいレイヤーが出来、イメージ画像が貼り付けられました。

次にツールボックスから【拡大縮小】をクリックします。
拡大縮小ダイアログが現れます。
画像枠にマウスを移動し、マウスポインターの形状が変わったところでドラッグします。
適当な大きさになったら、拡大縮小ダイアログの「拡大縮小」ボタンをクリックしてください。
これで、画像のサイズ変更が終わります

最後に、ツールボックスから、【移動】をクリックし、画像をドラッグして適当な位置に持ってきます。
ついでに、電話番号の色をイメージ画像に合わせてみました。

ちょっと物足りないですねぇ。文字も大きすぎますし、目を引くものがありません。
見て欲しい人の目を引くもの。一番は人の顔ですね。
笑っている人々の顔など、著作権フリーの画像がありますので、そういうものを使っても良いかもしれません。ここでは弁護士の顔を出してみましょう。

弁護士の顔を貼り付ける

写真から顔の部分だけを抜き出して、今の画像に貼り付けます。
メニューから「ファイル」→「開く」で、新しいキャンバスに写真を開きます。

ツールボックスから【前景抽出選択】を選び、人物の回りを少し大きめにマウスでドラッグしてなぞります。なぞった外側が背景に設定され、青くなります。

ツールオプションの「抽出部分の修正」が「前景部分をマーク」になっていることを確認してください。
前景つまり人物の部分を、はみ出さないように内側をドラッグして塗りつぶします。
あまり細かく塗りつぶす必要はありません。

マウスを放すと、前景が選択されます。青くなっている背景部分が前景に残っていれば、さらに塗りつぶしてください。
同様に、背景で青くなっていない部分がありましたら、「抽出部分の修正」を「背景部分をマーク」にして、塗りつぶしてください。
    
概ね出来たら、Enterキーを押してください。前景(人物)が選択されます。
メニューから「編集」→「コピー」でコピーしてください。
    
次に、元の画像に戻って、メニューから「編集」→「クリップボードから生成」→「レイヤー」を選んでください。
先ほどコピーした人物が、貼り付けられます。
    
あとは、ツールボックスから【拡大・縮小】を選んで大きさを調整し、【移動】を使って適当な位置に移動してください。
どうですか、グッと良い感じになりましたでしょうか。

   
作業が終わりましたので、メニューから、「ファイル」→「保存」で保存します。
後から修正できるように、GIMP XCF画像として保存することを忘れないでください。
    
では、この画像をヘッダーに適用しましょう。

形式を変えて画像を取り出す

画像をJimdoで使うためにjpg,gif,pngなどのフォーマットの画像に変換します。
ここではpng形式に変換しましょう。
メニューから「ファイル」→「名前を付けて保存」を選びます。
「画像の保存」ダイアログが表示されますから、保存するフォルダーやファイル名を設定し、そして下部の「ファイルタイプを選択」の+アイコンをクリックしてファイルタイプをPNG画像にして保存します。

「ファイルのエクスポート」ダイアログで「PNGプラグインはレイヤーを取り扱えません」という表示が出ますが、問題有りません。「エクスポート」ボタンをクリックしてください。
これで画像がpng形式で保存できました。

画像をヘッダーに適用する

Jimdoにログインしてください。
ヘッダーの下辺にマウスを近づけると「ヘッダー部分を編集」という文字帯が出てくるので、クリックしてください。
ヘッダーの編集画面になります。
    
次に、「オリジナル画像」をクリックし、先ほど作ったpngファイルを選んでアップロードしてください。
これで、ヘッダーが入れ替わりました。
    
具合を見ながら、GIMPで修正し、何度か挑戦してみてください。