タイピング

今回この部分は新たに書き直しました、あまりにも素っ気ないものでしたから。

2,268 この中へ一文字ずつ入れていきたいと思います。

205 163 188 164 144 170 166 164 175 658

step 01 下絵やグラデーションは予め用意しておきます。

126

step 02 新規画像を準備して、3種類のフォントを使うので大きさが不揃いだから、配置のため新規レイヤーにラインを入れます。

「表示」→「グリッドの表示」/「グリッドのサイズ変更」/「グリッドにスナップ」を応用することもできます。

step 03 日本語文字はマスで区切ってもきちんと入るのですが、英文字はそうもいきません。 従って、日本語を先に配置した方が楽ですね。

783

step 04 文字入れをし、縁取りなどの加工をした後は、配置枠レイヤーを削除し、「透過色」を背景に塗り、レイヤーを統合してよろしいです。

切り取り

1,257

step 05 画像を拡大し、一文字ずつ切り取るのですが、最初の位置(この場合 0, 3)」はドラッグしてマウスから指を放すと消えてしまいます。

step 06 ドラッグした大きさも、消えてしまうので、しっかり記憶して、紙にでも控えておくといいでしょう。

1,575

step 07 この大きさの新規画像を作ります。 ファイル名も先に決めておいてよいでしょう。

4,182

全ての文字と、必要があれば全体も保存しておきます。

GIAM に読み込む

step 08 最初のフレームは背景のグラデーションですから、消去手段も「そのまま残す」を選択。

1,813

step 09 2コマ目以降はそれぞれの先に控えた「位置」を入れ、「透過色」にチェックをつけると、自動的に認識してくれると思います。

1,286

step 10 2コマ目以降も消去手段は「そのまま残す」になります。

2,354

4,652

step 11 できあがり。

応用

11,840

このように点滅させるには、背景のグラデーションをコマとして入れることになります。

2,080

タイピングしたものを消していくときには、この場合で言えば、2文字〜8文字までの画像を作らなくてはなりません。

「斜めに切って進む文字」の作り方 もあります。

メニュー提供 : DHTML Menu By Milonic JavaScript