2002年4月 長嶋洋一
このページは
ここから
の続きです。
3. 画像データの作成(続き)
どうやってレイヤーを実現するか、は下記においおい出てきますが、いずれにしても
「総合運」など8種類の文字が必要です。そして、これはアニメーションする静止画の上に
直接書き込むこともGraphicConverterでできますが、それでは、文字の位置がちょっと
でもズレると、アニメーションした時にガクガクと動いてしまいます。そこで、全てに共通の
ものとして、
このような
静止画を作りました。これは、GraphicConverterで
こんなふうに
新規作成を選んで、既にトリミングした画像と同じ、512*512ドットを選びます。そして
メニューからToolBoxを表示させて、その中のテキストパレットを
こんなふうに
指定して、強調文字の24ポイント、というように指定します。あとは画面内で
こんなふうに
文字列を入力・表示していきます。重なっていない限り、あとで自由に移動できますから、
最終的に
このように
アバウトな画像として確定させます。
次に、この画像を「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] のこれ
という8種類を、とりあえず作りました。これだけあれば、まぁどんな画像でも、
まったく見えない、ということはないだろう、という読みです。(^_^;)
・・・ここまで書いてくれば、ハハァあれだな、と気付いた人も多いと思いますが、
このような透過GIF画像に必要な文字があって、あとは既に制作した静止画もGIFです
ので、この両者をピッタシの位置関係で重ねる、というツールは、実は世界中のパソコンに
入っています。そう、2枚のGIFをPhotoshopなど不要でレイヤーとして重ねてくれる
のは、誰でも持っている
ブラウザ
です。(^_^)
そこで、テキストエディタJeditで、
このように
ごくごく簡単なHTMLファイルをまず作ります。
背景画像として、作成した静止画を指定すると、これがブラウザの中に敷き詰められます。
そしてインラインイメージとして、その背景画像となるべく「混じらない」
色の透過画像を指定して、ブラウザの中に投げ込みます。この状態でまたまた、
スクリーンショットを撮ります。
これを21種類の静止画ごとにくり返します。そして再び、そのスクリーンショットPICT
画像の画面内の左上ピッタリの部分から512*512ドットの領域を
トリミングして、再びGIF画像として保存します。その結果、このような、今度は
文字列の入ったGIF画像が得られます。
★
★
★
★
★
★
★
★
★
★
★
★
★
★
★
★
★
★
★
★
★
アニメーションをしないのであれば、これで、このそれぞれの静止画を
「占い」として別個に使う、ということもできます。長い道のりでしたが、
Photoshopを使わずにここまで来て、ようやく、先が見えてきました。(^_^)
4. アニメGIF化、イメージマップ化
GIF画像をいくつも取り込んで「アニメーションGIF」を作る、というツールは
MacでもWindowsでもたくさんあります。ここでは、フリーウェアのGifBuilder
を、
ここ
からダウンロードして使いました。
フリーウェアなのに、起動すると
このように
シェアウェアのような画面が出てドキッとします(^_^;)が、これはなんでもありません。
そして、あとはメニューで
このように
次々とGIF画像を取り込んで、全ての画像について共通に「0.5秒」という
スピードを指定して、あとは「保存」というだけで、
このような
アニメーションGIF画像の完成です。(^_^)
あとは、このHTML
は定番のクライアントサイドイメージマップ、ということで、これにて、無事に、
このような
ページが完成した、ということです。作ったのは半日でしたが、この「解説」ページを作るのには
2-3日かかりました。御苦労さまでした。(^_^;)
|