No.6【ホームページタイトルバナーの作り方】

| コメント(0) | トラックバック(0)

弊社関連サイト「あらんだまおばさん元気日記」では、ほぼ月替わりで「タイトルバナー」を差し替えています。

今回は「ホームページタイトルバナーの作り方」について、記載します。とても簡単ですので、お試し下さい。

タイトルバナーの作り方

以下の手順に沿って説明します。
  1. 画像加工ソフトを用意
  2. 画像の用意
  3. トリミング
  4. リサイズ
  5. 「ぼかし」を入れる
  6. 完成

1.画像加工ソフトを用意

画像加工(処理)ソフト(レタッチソフト)は、

  • リサイズ(画像サイズの変更)ができること
  • 「ぼかし」などの加工ができること
  • 簡単な補正ができること

の機能があれば十分です。
今回は、簡単で軽快なレタッチソフト「JTrim」 http://www.woodybells.com/を使います。
インストールの説明は、省略します。JTrim Ring 【画像作成/加工遊びの環】ホームページに詳しい説明がありますのでそちらをご覧下さい。

2.画像の用意

まず、バナーに使う画像を用意します。(下の写真は縮小してあります)
サンプル画像
デジカメで撮った、特に何の変哲もない「サツキの花」の画像ですが、今の季節にマッチしているのでこれを使うことにしました。

3.トリミング

JTrimで開いた状態
「JTrim」を起動し、用意した画像を開きます。

まず、画像をバナーのサイズに切り取ります。
切り抜きボタンをクリックします。
座標指定切取り
「座標指定切取り」ダイヤログボックスが開きます。バナーのサイズ(今回は718px×130px)になるよう入力して、「縦横比を維持する」にチェックを入れておきます。

そのままの状態で、カーソルを画像上に移し、バナーの出来上がりをイメージしながら、切取りたい範囲を指定します。
切取り中
ここがセンスの見せ所ですね。

「座標指定切取り」ダイヤログボックスの「OK」ボタンをクリックすると、画像の切り取りができました。

表示サイズの変更は、虫眼鏡ボタン表示サイズ変更をクリックして適切な表示サイズにしてください。

4.リサイズ

切り取った画像は、縦横比率はバナーと合っていますが、サイズが大きいままです。
リサイズボタンリサイズボタンをクリックし、
リサイズダイヤログボックス
表示された「リサイズ」ダイヤログボックスで、サイズ(今回は718px×130px)を指定して「OK」をクリックするとリサイズ完了です。

5.「ぼかし」を入れる

これで、「完成」としても良いのですが、サイトタイトル、説明の文字が表示されるところなので、このままでは、バックが少し、やかましいようです。文字が重なる部分に少し「ぼかし」を入れてみます。

「JTrim」は、矩形でしか範囲指定ができないので、ぼかしを入れる部分を数回に分けて範囲指定します。
まず、ぼかしを入れたい部分をクリックして範囲指定します。
リサイズ画像
画像の左上から画像中央よりすこし右まで、手前の「サツキの花」にかからない範囲を指定しました。(わかりやすくするために、青線を書き入れてあります)

次に、「メニューバー」から、「加工」→「ガウスぼかし」をクリックします。
ぼかし範囲指定
「ガウスぼかしダイヤログボックス」でぼかしの強さを指定します。
今回は「2」に指定しました。

境界範囲指定 画像にぼかしを入れた部分と、元のままの部分の境界線が目立ってしまいましたので、境界部分を再度範囲指定します。
今度は、「ガウスぼかし」のぼかしレベルを「1」で指定して、先の「2」で指定した部分と、ぼかしをなじませました。

ぼかしの範囲を細かく指定したい場合は、上記の作業を繰り返します。
範囲指定の際、矩形範囲指定以外の「自由選択」「投げ縄ツール」で指定できるレタッチソフトであればぼかし処理は一度で済みますね。

6.完成

バナー

これで完成です。加工前は割りと平坦な画像でしたが、一眼レフカメラで撮ったような、奥行きのある画像に変更することができました。
ぼかしの際の範囲指定が「矩形」以外で、(なげ縄選択機能のある、PictBear SEなど)できるレタッチソフトであれば、もっと簡単に作ることができるでしょう。
...でも、「JTrim」でも問題なくできし、簡単なのでお勧めです。

トラックバック(0)

トラックバックURL: http://www.td-sys.com/mt/mt-tb.cgi/31

コメントする

このブログ記事について

このページは、が2007年10月 3日 08:20に書いたブログ記事です。

ひとつ前のブログ記事は「No.5【楽にブックマークを更新する】」です。

次のブログ記事は「No.7【写真をイラスト化する】」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。