▲即使える！素材の作り方

・フォトエディターで「素材の元」（バナー・ボタンの元デザイン）を素材に編

　この章では、前章でワードを使って作った「バナー」や「ボタン」「アイコン」の元を
　WEBページ用のファイル（GIF、JPEG）にする方法を紹介しています。

	１）WEB素材にしたいオブジェクト（図形など）を画面（ブラウザ）に表示する
	ここでは主に、前章で作ったワード内のオブジェクト（図形など）を元に ＷＥＢページ素材を作る方法を紹介しています。 前章でワードを使って作った「素材の元」を表示しておいてください。 （補足説明） ここで紹介する方法の他に、もっと簡単な方法がありますが、 最近の新機種では、対応していないものが多いため、 汎用性のある方法を紹介しています。

	３）フォトエディターを立ち上げる。
	通常、ｗｉｎｄｏｕｗｓに多く付属されているソフト「フォトエディター」を使ってこの画面からコピーした画像を加工してゆく方法 について説明します。 フォトエディターは、通常の他のプログラムと同様、「スタート」ボタンの「プログラム」（または、「全てのプログラム」）から起動できるものと、 「Microsoft Office ツール」の中から起動するものがあるようです。 最近は、後者の方が多いようです。 windouws98,Me,2000 など 「スタート」→「プログラム」 →「Microsoft Office ツール」 →「Microsoft Photo Editer」 windouwsXP など 「スタート」→「すべてのプログラム」 →「Microsoft Office ツール」 →「Microsoft Photo Editer」 ↓ ↓ フォトエディターが起動画面（見本）

	４）クリップボードにコピーした、画面画像をフォトエディターに貼り付ける。
	クリップボードにコピーした画面画像をフォトエディターに貼り付けます。 「編集」→「新しいイメージとして貼り付け」をクリックします。 ↓ ここからは、フォトエディターでの画像表示倍率を 常に１００％で表示するようにしておきましょう。

	４）貼り付けた画面画像の必要な部分だけを切り取る。
	切り取る部分を選択するには、左図の　　のボタンを クリックします。 ↓ ↓ 切り取りする部分を選択します。 選択を始めたい部分でマウスを左クリックしたまま、 選択をしたい範囲までマウスを動かし、離します。 ↓ ↓ 選択した部分が、点滅枠で囲まれます。 このとき、できるだけ小さい範囲を選択するようにしましょう。 また、範囲を選択し直したいときは、現在の選択範囲を 無視してもう一度、同じように選択し直せます。 ↓ ↓ 選択した範囲の上でマウスを右クリックし、 表示されるメニューのなかから「トリミング」を選択します。 これで、選択した必要な部分だけを切り取りする事ができました。 ↓ ↓ ここでは、次工程での説明がしやすいように、 少し多きめに切り取りをしました。 通常は、できるだけ小さい範囲を切り取るようにします。

	５）不要な余白部分を透明化する（透過処理）。
	前章で作ったバナーが、「真四角」でない場合、切り取った部分に余白ができてしまいます。 特に、丸や不正形な形のものを作った場合は、大きな余白ができます。 背景が、「白」のページに作った素材を貼り付ける場合は、特に支障はありませんが、常に背景が白であるとは限りません。 そこで、この余白部分を透明にし、どんな色の背景にも違和感なく表示できるようにしましょう。
	ツールバーの「透過色に変更」 をクリックします。 画面上にカーソルを持っていくと カーソルが の様に表示されるようになります。 ↓ 透明化したい部分にカーソルを合わせ、 左クリックすると「透明色に変更」の操作画面 が表示されます。 ↓ 今回は、余白である「白」の部分を透明化したいだけ ですので、そのまま「OK」をクリックします。 白く表示されていた余白部分が、の様に、 チェック模様で表示されるようになります。 これで、この部分が「透明化」されました。 ↓ （注意） 画像の一部を透明化できるのは、「GIF」ファイルのみ と考えてください。 透明化処理をした画像を「JPEG」形式のファイルとして 保存することはできません。 また「PNG」形式は、ファイル容量が重くなり、 また、ブラウザにより表示のされ方がかわる場合があり、 このページでは、殆ど触れていません。

	６）画像の大きさを調節する。
	画像が大きすぎた場合は大きさを調節しましょう。 「イメージ」→「サイズ変更」から サイズ変更の操作画面を起動します。 ↓ 「なめらかにする」にチェックを入れ、 変更したい倍率に大きさを指定して 「OK」をクリックします。 「縦横の比率を保持しない」にチェックを入れると、 縦横の比率も変化させることができます。

	７）フォトエディターで加工した画像を保存する。
	最後に、ここまでで作ってきた画像を名前を付けて保存すれば作業完了です。
	「ファイル」→「名前を付けて保存」から 作った画像を保存します。 �@）GIFファイルで保存する場合 ファイルを「保存する場所」を選んで、 「ファイル名」を付けます。 「ファイルの種類」からGIF形式（*gif） を選択して保存ボタンを押せば完了です。 gifファイルは、バナーや、ボタン、アイコンなど 色の変化の境界をくっきりと表示させたいファイル に適した画像ファイル形式です。 �A）JPEGファイルで保存する場合 ファイルを「保存する場所」を選んで、 「ファイル名」を付けます。 「ファイルの種類」からJPEG形式（*jpg,*jpeg） を選択して保存ボタンを押せば完了です。 JPEGファイルで保存する場合、 「オプション」からファイルサイズを圧縮する事ができます。 透明化を行った画像はJPEG形式では保存できません。 jpegファイルは、写真などの 色の変化の境界を滑らかに表示させたいファイル に適した画像ファイル形式です。

ここまでの補足。

ここで紹介したような作業は、専用の画像加工ソフトを使えば、もっと簡単に、高度な作業をおこなう事が出来ます。
しかし、ここでは敢えてwindouws内に通常、セットされているソフトを使って行う方法を説明しています。

また、作業方法についても、フォトエディターや、ワードのバージョンが違えば、多少できることも異なりますし、
また、作業結果も若干変わってきます。

ここでは、「Print Screen」により、画面全体の画像を取り込んでから加工してゆく方法で説明していますが、
フォトエディターのバージョンによっては、ワードオブジェクト（ワード内で作った画像など）を
グループ化したものをコピーして、そのままフォトエディタに貼り付けできる場合がありますので、
その場合は、そちらの方法の方が、よりスムーズに作業をおこなう事ができます。