3. 画像データの作成(続き)

次に、この画像を「Picture」メニュー内の「Colors」メニューの中から「B/Wの2値化」 を選んで(どうせもともとこの画像はバックが白、文字が黒と2色です)、そのあとで このように 再び「Picture」メニュー内の「Colors」メニューの中の「Edit Color Table」によって、 右側のフォアグラウンドカラー(ここでは文字の黒)をパレットで指定して、この例では RGBのうちR(赤)だけ最大の255にします。これでOKとすれば、この静止画は このように バックが白で文字は赤、というものになります。

さて、ここで再びToolBoxを出して、今度は このような 「透過」ツールを選びます。これは、画像の中でクリックした場所と同じ色を、 GIFの256色の中で「透明(透過色)」として指定するものです。この画像では どうせ文字色と背景色の白の二つしかありません(^_^;)ので、迷わず、文字に かからない部分をクリックすると、 このように 文字色の部分以外のところに、Macの顔が出てきます。これは、「ここは透明です」という 意味なので、これで、透明な背景の中に8種類の文字列だけがある色で浮かぶ (ここでは赤)、という画像が出来たことになります。 ブラウザの別ウインドウに表示すると、デフォルトの背景色に文字だけ浮かぶという もので、この赤の場合が これ です。

21枚ものカラフルな静止画を作りましたから、そこに文字を浮かべても、どこかで 背景と似ていて喧嘩しますから、静止画ごとに文字列の色は変化させる必要が あります。そこで、上記と同じことを、 この 元データからカラーだけ変えて、いくつも用意します。ここでは、RGBのそれぞれについて、 「最大の255」か「最小のゼロ」という組み合わせによって、

• [R/G/B] = [0/0/0] のこれ
• [R/G/B] = [255/0/0] のこれ
• [R/G/B] = [0/255/0] のこれ
• [R/G/B] = [0/0/255] のこれ
• [R/G/B] = [255/255/0] のこれ
• [R/G/B] = [255/0/255] のこれ
• [R/G/B] = [0/255/255] のこれ
• [R/G/B] = [255/255/255] のこれ

・・・ここまで書いてくれば、ハハァあれだな、と気付いた人も多いと思いますが、 このような透過GIF画像に必要な文字があって、あとは既に制作した静止画もGIFです ので、この両者をピッタシの位置関係で重ねる、というツールは、実は世界中のパソコンに 入っています。そう、2枚のGIFをPhotoshopなど不要でレイヤーとして重ねてくれる のは、誰でも持っている ブラウザ です。(^_^)

そこで、テキストエディタJeditで、 このように ごくごく簡単なHTMLファイルをまず作ります。 背景画像として、作成した静止画を指定すると、これがブラウザの中に敷き詰められます。 そしてインラインイメージとして、その背景画像となるべく「混じらない」 色の透過画像を指定して、ブラウザの中に投げ込みます。この状態でまたまた、 スクリーンショットを撮ります。

これを21種類の静止画ごとにくり返します。そして再び、そのスクリーンショットPICT 画像の画面内の左上ピッタリの部分から512*512ドットの領域を トリミングして、再びGIF画像として保存します。その結果、このような、今度は 文字列の入ったGIF画像が得られます。 ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★

アニメーションをしないのであれば、これで、このそれぞれの静止画を 「占い」として別個に使う、ということもできます。長い道のりでしたが、 Photoshopを使わずにここまで来て、ようやく、先が見えてきました。(^_^)

4. アニメGIF化、イメージマップ化

を、 ここ からダウンロードして使いました。 フリーウェアなのに、起動すると このように シェアウェアのような画面が出てドキッとします(^_^;)が、これはなんでもありません。 そして、あとはメニューで このように 次々とGIF画像を取り込んで、全ての画像について共通に「0.5秒」という スピードを指定して、あとは「保存」というだけで、 このような アニメーションGIF画像の完成です。(^_^)

あとは、このHTML は定番のクライアントサイドイメージマップ、ということで、これにて、無事に、 このような ページが完成した、ということです。作ったのは半日でしたが、この「解説」ページを作るのには 2-3日かかりました。御苦労さまでした。(^_^;)