ヘッダーを描く
ヘッダーに入れる画像を作ってみましょう。
まず、対象になる画像の大きさと内容を決めましょう。
ヘッダー画像の大きさは、あなたが選んだデザインによって異なります。
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で修正し、何度か挑戦してみてください。