ホームページ用画像の準備

ホームページ用画像の準備

2007/6/12再整理

ここではデジカメ或いはスキャナからの画像をホームページ用に加工する手順を説明する。

Ⅰ

写真

写真の掲載に当たっては、表示サイズを決める必要がある。　通常サイズは横幅を基準に決める。
他のWEBの写真サイズを参考にするなら、そのホームページを表示して、当該写真上で右クリック「プロパティ」で知ることが出来る。

1　横幅調整手順（トリミングを含む）
　

1）　Irfanview（最も簡単）
	Irfanviewで画像を開き、「表示」「ズームアウト」を数回クリックし、画像全体が見えるようにする。　その画像の全体を使う場合を除き、通常は使いたい範囲をトリミングする。　トリミングしたい範囲をマウスのドラッグで選定する。　その時タイトルバーに選択中のサイズが出るので、縦横比に留意して選択する。「編集」「Crop selection」で写真を切り出すことが出来る。サイズの調整には、「画像操作」「リサイズ/リサンプル」の画面でwidthに変更したい横幅を打ち込みEnter(OK)で求めるサイズの写真が出来る。　「ファイル」「別名で保存」で保存する。
2）　Photoshop（複雑だが画像の調整も行うときに使う）
	Photoshopで画像を開き、「イメージ」「画像解像度」で幅に変更したい横幅を打ち込み、「ファイル」「WEB用に保存」から保存する。トリミングの必要ある場合は、長方形選択ツールでトリミング範囲を決めて「編集」「コピー」、「ファイル」「新規」「ペースト」で画像を切り出し、「ファイル」「WEB用に保存」から保存する。保存形式は、写真の場合必ずJPEG形式にすること。　画質はホームページに使う場合には通常「標準画質」でよいが、空などグラデーションが破綻するようなら高画質にする。（ただしファイルサイズが大きくなる）これは、選択と同時に画面で確認できる。 Photoshopは多機能な画像エディタなので、画像の明るさ、色彩、ゆがみ修正などあらゆる修正が出来る。これらは簡単には説明できないので、実際に画像を扱いながら習熟して欲しいし、参考書を見ることも有効である。　ヘルプも充実しているが、用語が分かるまでは使いにくいかもしれない。

Ⅱ

文字を画像にする

Illustrator
　文字のほかに線とかイラスト画を入れる場合に便利

	Illustratorを起動し、「ファイル」「新規作成」で作業画面を出す。「画面」「定規を表示」し定規部分を右クリックして「ピクセル」をクリック。　（こうすることで、作成するオブジェクトのサイズがピクセルで分かるようになる）「ツールボックス」から文字ツールにより文字を記入する。デフォルトの画面は範囲が広いので、「画面」「ズームイン」を数回クリックして、定規のピクセル数を参考に適当な画面で作業すると良い。記入した文字を選択し、「文字設定」パレットでフォント、サイズ、文字間間隔、行間隔等の調整を望むサイズを勘案しながら行う。文字につけるカラーは「カラー」パレットで調整する。完了したら、使いたい部分を選択し、「編集」「コピー」、「ファイル」「新規」「編集」「ペースト」で抽出し、「ファイル」「WEB用に保存」、GIFファイルで保存する。
Illustratorはこの種のソフトとしては最高のものなので、参考書を購入してその他の使い方を調べると便利。
Photoshop 　文字だけの場合にこちらが便利
	「ファイル」「新規」を開き、作りたい文字列のサイズを「幅」「高さ」欄に打ち込み「OK」。　すると名称未設定で自分の決めたサイズの画面が出てくる。ツールボックスから文字ツールを選択すると、フォントとサイズの設定が出来るようになる。文字の色はツールボックスで決めることが出来る。これらを設定した後、画面上をクリックすると、カーソルが現れ文字を打ち込むことが出来る。（他の資料からコピーペーストも出来る）出来上がったら、「ファイル」「保存」から gif ファイルで保存する。

Ⅲ	写真に文字を入れる
1	写真の準備
			写真はサイズを決めて一度保存する。
2	文字の作成
			Photo Shop を開き、写真を開く（出来れば100％表示がよい）
3	文字の色
			ツールバー上のカラー設定で決める。ここで左上の色が文字色、右の半分隠れている色が背景色である。色の選定方法には次の2通りがある
		１）	表示されている部分をダブルクリックして、カラービッカー画面から選択。
		２）	表示している写真内の色を使う場合には、スポイトツールを選択し、画面上の任意の位置をクリックするとその色を選んでくれる。背景色も入れ替えの矢印をクリックして表示色にしてから同様の方法で選ぶことが出来る。
4	文字の記入
			文字ツールを選択し写真上の文字を入れたい付近をクリックし、記入する。位置は移動ツールで移動できる。
5	縁取り
			必要あれば文字に縁取りを付ける。この方法は、記入してある文字のみを選択し、その選択範囲をコピーして複製し、複製した選択範囲を「選択範囲」「選択範囲を変更」「拡張」とすすみ、拡張量を１～２ピクセルとする。ついで「編集」「塗りつぶし」、内容欄で背景色を選択しOKをクリック。これで拡張された範囲内が背景色になる。画面の右にあるレイヤーには背景、レイヤー1、レイヤー2があるはず。このレイヤー２を背景とレイヤー1の間に移動すれば、背景色で縁取ることが出来る。
6	保存
			「レイヤー」「表示レイヤーを結合」で完成。　名前を付けて保存する。