ＷＷＷ上で使える画像を作る方法

このマニュアルは
滋賀大学経済学部情報管理学科３回生・神代知範氏が学生用に書いた物を改変しています。御了承ください。

ＷＷＷ上で普通表示できる画像の形式は[gif]、[jpeg(jpg)]という拡張子の付いたものです。
とりあえず基本として、gifデータについてその作り方と表示の仕方を書きます。

第一段階

適当なソフトで(ペイントブラシ等で)絵を描いてフロッピーに保存します。
必ずしも完成の画像の大きさにする必要はありません。(大き目に描いても良い)

第二段階・画像ファイルのgifへの変換

ここでは、できあがった画像ファイルを、gifに変換できるアプリケーションで 読み込んで、gif形式で保存しています。 基本的にはこれでおしまいです。 簡単でしょう。では実際にそれらのソフトを使ってみましょう。

　　Lviewを使った方法

  1. ソフトを起動します。
  2. ファイルを指定して開きます。[File]-[Open]
  3. ファイルをgifで保存します。
    [File]-[Sava_As]・「ファイルの種類」を(gif89a)タイプにして保存します。
  4. このソフトは背景の透明化(transparent)ができます。 詳しくはこちらやこちらをどうぞ。

第三段階・HTMLでの表示のしかた

表示の基本は，<IMG SRC="画像のＵＲＬ">です。
例）<IMG SRC="aaaaa.gif"> (htmlの文書と同じディレクトリの中にaaaaa.gifファイルがある場合)
また、バックグラウンドとして画像を使う場合は<BODY BACKGROUND="aaaaa.gif">とすればよい

　　PSP(Paint Shop Pro)を使った方法

  1. PSP(Paint Shop Pro)というソフトを起動します。
  2. 先程作った画像を読み込みます。[FILE]-[OPEN] ペイントブラシでは[.BMP]という拡張子になっています
  3. もし画像が予定していた大きさより大きいとき

    4. 方法その１／周辺部を切り取る

    範囲選択ツール(点線の四角形のボタン)を押した後、必要な部分を選択し [Edit]-[Copy]し、さらに[Edit]-[Paste](As_New_Image)と選択すると、 余分な部分が消えた新しい絵が出てきます。

    方法その２／拡大・縮小する

    全体を拡大・縮小するには、まず左下に表示されている現在のサイズ
    (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]で画像の大きさを変えます。 試行錯誤しながら試みて下さい。

クリッカブルマップ

その他の書き方については神代知範氏のＨＴＭＬマニュアルリストから探してください.

ホームページ作成講座へ戻る