ホームページビルダー　初級講座　 　Room110　 　第９回

ウエブアートデザイナーを使って写真サイズを変える　−サムネイルを使うテク−

ホームページに写真をたくさん表示して、ある写真をクリックするとさらに大きな写真や詳しい内容が表示される。というスタイルが、よく取られます。 　これは、最初は全体を見渡すことが出来て、そこから細部にはいって、目的の詳しい情報を得る、という手順がごく自然な操作方法だからです。 いきなり大きな写真を掲示すると、ダウンロードに時間がかかります。それが何枚もあると、たいていは最後のページまで行かずに、よそのサイトへ逃げていってしまうでしょう。 　最初のページは、サイズの小さい写真（これをサムネイルといいます）を並べ、簡単な説明を付けるのです。 　サムネイルあるいは、説明文をクリックすると、詳しい説明や、大きい写真を貼り付けてあるページへジャンプさせます。今回は、このサムネイルを作るテクニックを身につけましょう。

１．　ウエブアートデザイナーを起動する。

　ウエブアートデザイナーはホームページビルダーとは独立したソフトですが、ホームページビルダーとうまくリンクされ、ホームページを作るのに大変使い勝手がよくできています。

ツールバー上のツールをクリックすると、 プルダウンメニューが現れます。　 [ウエブアートデザイナー]を選択して、左クリックします。

       

２．　目的の写真を取り込みます

これが、元の写真です。 ｇｉｆファイルでサイズは68kバイトあります。 モデムを使っているユーザーは、この写真を画面に表示するだけで、速くて１０秒はかかるでしょう。 １枚でも大きすぎます。圧縮してサイズを小さくする必要があります。

このｇｉｆファイルを　[ウエブアートデザイナー]　の作業画面に　ドラッグアンドドロップします。

３．　サムネイルを作ります。

　　　

	ウエブアートデザイナーでの画面です。 １）　画面内でクリックすると、選択マークが出ます。 ２）　左図のマウスカーソルが示しているポイントに近づけると、 このように形が変わります。 この状態で、左上にドラッグします。
	このように小さくなりました。 　長さで1/2　大きさで（面積で）1/4　です。 次に、画像が選択されている状態で、右クリックすると

４．　保存します

右クリックすると、 左図のダイアログが現れます。 １）　一番下のＷｅｂ用保存ウイザードを選択します。 ２）　これからの処理は、前回８回と同じですが、 　再度、復習しましょう。

　　　　

５．　下のダイアログが現れます。

６．　下のダイアログが現れます。

　[選択されたオブジェクトを保存する]を選択し、[次へ]ボタンをクリックします。

 7.　下のダイアログが現れます。

[jpeg] を選択し、[次へ]ボタンをクリックします。

  ８．　下のダイアログが現れます

元々６０ｋバイトあった　ファイルが約5.5kバイト　1/10以下に減りました。

さらに

上の図のレーバー（矢印）を左にドラッグすると、ファイルサイズが変わります。

約５０％　で、３．８Ｋバイトになりました。画質はほとんど落ちません。

[次へ]　ボタンをクリックします。

  ９．　下のダイアログが現れます。

[ファイルに保存]を選択し、[完了]ボタンをクリックします。

１０．　保存します。

　　　　サイト[lesson1]　の[hum_sum.jpg] にしましょう。

　　　　.jpgは自動的につけられますので、入力無用です。

            これで第９回は終わりです。　お疲れさま!!

	back to  room 110 top	goto e-school top