さあ、今度は画像を入れて賑やかにしましょう。ここまでくるとグッと形が整ってホームページ らしくなります。
グラフィックソフトを使って書いたり、スキャナがあれば写真などを取り込んだりして作ります。絵を書くのは苦手〜、という方は得意な方に書いてもらってもいいですね。
また、各ソフトに付いてくる画像データを利用して自分なりに加工するのも手ですし、このページの
タイトルのように文字を書いてタイトル代わりにすることもできますね。
つくった画像は保存しますが、ホームページではgif(ジフ)という形式で保存して使うのが一般的です。(安価な市販ソフトやオンラインソフト(Lview、PaintShopPro等)もあるので、この際ひとつ揃えておきましょう。)
gifにも2種類のパターンがあります
今までご覧になったホームページでも見られたかと思いますが、同じgif形式でもWWWブラウザ での表示に差があります。gif形式で保存 できるソフトなら、保存時に選択することができます。
1.ソフトを起動します。
2.ファイルを指定して開きます。[File]-[Open]
3.ファイルをgifで保存します。 [File]-[Sava_As]・「ファイルの種類」を(gif89a)タイプにして保存します。
4.このソフトは背景の透明化(transparent)ができます (7.画像の応用参照)。詳しくはこちらやこちらをどうぞ。
1.PSP(Paint Shop Pro)というソフトを起動します。
2.先程作った画像を読み込みます。[FILE]-[OPEN] ペイントブラシでは[.BMP]という拡張子になっています
3.もし画像が予定していた大きさより大きいとき
方法その1/周辺部を切り取る
範囲選択ツール(点線の四角形のボタン)を押した後、必要な部分を選択し [Edit]-[Copy]し、さらに [Edit]-[Paste](As_New_Image)と選択すると、 余分な部分が消えた新しい絵が出てきます。
方法その2/拡大・縮小する
全体を拡大・縮小するには、まず左下に表示されている現在のサイズ (Image Xの大きさ×Yの大きさ×色数)を確認してから、
[Image]-[Resize]を選び@CustumSizeに好みの大きさを入力して実行します。
A意図していたものと違ったら、[Edit]-[Undo]して直前の作業が取り消せます。
4.最後に[Save-As]で保存画面にして
@保存の形式(List Types of File)をGIFにして
A保存ディレクトリを正しく選択して
Bファイル名をつければ
GIFファイルの出来上がり。
OPTIONS
ネットワーク上で大きな画像データは転送に時間がかかるなどの問題が多いので、 減色・縮小してデータサイ ズを小さくした方が良いと思います。
方法1:[減色する]
[COLOR]-[Decrease Color Depth]でビット数を小さくしていきます。 我慢できる画質の限界のとこ ろで上のようにgifで保存します。 できるだけ画像は16色(4Bit)位まで減色しましょう。 やり直しの方 法は上と同様に[Undo]すれば良い。
方法2:[サイズを小さくする]
上でやっているように[Image]-[Resize]で画像の大きさを変えます。 試行錯誤しながら試みて下さ い。
<IMG SRC=”画像ファィル名”>
というタグを書いた位置に画像が表示されます。
kuma.gif という画像ファイルを作り、同じディレクトリに保管して
<IMG SRC=”kuma.gif”> と書くと・・・
と表示されます。(タグやファイル名は実際は半角で書きます、念のため。)
★このタグには色々な応用がありますが、ここでは触れません。詳しくはホームページのデザイン を解説した本などを読んでみてください。
文章を書き、大きさや配置も決めて、画像も入ったら・・・出来上がりをチェックしてみなければ
いけませんね。HTMLの作成の基本は「書いたらチェック、修正や追加、またチェック」の繰り返しです。こまめに何度も繰り返して完成させましょう。
ということで、次は「5.できあがりをチェックする」です。