【GIMP】ネオン風ロゴを作る
さて、GIMPで何か作ってみようの記念すべき一回目。
何を作ろうかなーと考えていたところ、某所で、GIMPでネオン風のロゴを作るというチュートリアルを見つけたので、それを少々アレンジしたものを作ろうと思う。
※ちなみにショートカットはすべてフォトショップ同様のものになっているので、その設定を行っていない人はひとつ前のエントリを見て同じように設定しておいてください。
これが完成形。
ここでのポイントは、
・GIMPについている「フィルタ→ロゴ効果→ネオン」は使わない
・パチンコ屋の看板風にアニメーションさせてみる
の2点。
フィルタ効果を使わない、というのは、一発でできるやつを使うと応用が利かないから、という理由。実際にネオン風を作るときは便利なものを使ってもまったく問題ないけれど、使わないやり方を知っていれば他にも応用できるし、細かい調整もできるし、いいことづくめなんじゃないかということでやってみましょう。
ではさっそく。
まず、ファイル新規作成で、500x80ピクセルの画像を作る。
横500px、縦80pxを指定してOKをクリック。
新規ファイルが開いたら、ツールボックス中ほどの描画色パレットで、描画色（手前）が黒になっていることを確認し、ショートカットキー（Alt+Backspace）を押す。
★TIPS★
※ Alt+Backspace … 描画色で塗りつぶし
Ctrl+Backspace … 背景色で塗りつぶし
このように、背景レイヤーが黒くなれば成功。最初から黒で新規作成することもできるが、とりあえず白で作ってから好きな色に塗るのがレイニー流。
次に、テキストツールを選び、テキストの色を白に設定する。
ツールボックスでテキストツール（「Ａ」という文字のアイコン）をクリックすると、ツールボックスの下半分がテキストツールモードになるので、その中ほどにあるカラーアイコンをクリックし、別窓で開くカラーパレットで色を選ぶ。ここでは白に設定。
設定したら黒い背景の上をクリックし、文字を入力。文字を入力すると自動的に背景レイヤーの上にテキストレイヤーが追加される。入力してテキストツールのフォントサイズなどを調整し、適当な大きさにする。
位置の調整は、移動ツール（ショートカット「V」）に変更して行うが、このとき、ツールボックスの下の方にある「アクティブなレイヤーを移動」にチェックを入れ、移動したい素材のあるレイヤー（ここではテキストレイヤー）を選択して移動すると、移動させたいものだけを動かせる。
※これをやらないと背景のほうが動いてしまったりする。
位置、大きさが決まったら、テキストレイヤーの上に新しいレイヤーを一つ追加する。
レイヤーパレットの左下にある新規レイヤー作成ボタンを押すと、現在選択しているレイヤーの上に新しいレイヤーが追加される。
追加したら、さっきのテキストレイヤーを右クリックし、「テキストを選択範囲に」をクリックする。
テキストを選択範囲にしたら、このテキストレイヤーは非表示にする。レイヤーパレットの目玉のマークをクリックすると、目玉がついたり消えたりする。これを消しておくと非表示になる。
テキストが選択範囲になったら、メニューの「選択→チャンネルに保存」を実行して、この選択範囲をチャンネルに保存する。
※この、選択範囲をチャンネルに保存する、という機能はひっじょーーーに使えるので覚えておくと便利。
チャンネルに保存したら、今の選択範囲を2ピクセル拡大する。
「選択→選択範囲を拡大」を実行し、拡大幅を2ピクセルにして「OK」をクリックする。
この拡大された選択範囲から、拡大する前の選択範囲を差し引いて、縁取りの部分だけを残す、という作業を行う。ここでさっき保存しておいた拡大する前の選択範囲が活躍するというわけ。
チャンネルパレットを開き、先ほど保存した選択範囲を選び、チャンネルを選択範囲に戻すボタン（右から二番目にある赤いアイコン）をCtrlキーを押しながらクリックする。
★TIPS★
ある選択範囲に対し、
・Ctrlを押しながら新たな選択範囲を作ると、元の選択範囲から新しい選択範囲を引く
・Shiftを押しながら新たな選択範囲を作ると、元の選択範囲に新しい選択範囲を足す
ここまでの操作で、縁取りだけが選択された状態になっているはず。
ここでようやく、だいぶ前に作った新規レイヤー（今のところ何も入っていないレイヤー）を選択し、Ctrl+Backspaceを押して、縁取り部分（今の選択範囲）を白（背景色）で塗りつぶす。
縁取りが白く塗られたら、このレイヤーを複製する。
複製したいレイヤーを選択し、レイヤーパレット下部にある「レイヤーを複製」ボタンを押すと、選択しているレイヤーの上に同じ内容をもったレイヤーが複製される。
この複製した新しいレイヤーを選択し、「フィルタ→ぼかし→ガウシアンぼかし」を実行する。
ぼかし幅は５ピクセルに設定した。
さらに、この５ピクセルぼかしたレイヤーを複製し、できたレイヤーにガウシアンぼかしを２０ピクセルでかける。
--操作--
・今ぼかしたレイヤーを選択してレイヤーパレット下部のレイヤー複製ボタンを押す
・新しいレイヤーが選択された状態で、「フィルタ→ぼかし→ガウシアンぼかし」を実行
・ガウシアンぼかしの設定ウィンドウで、ぼかし半径を２０にして「OK」をクリックする
※ここでのプランは、芯になる縁取りの文字（これが光っていないネオン管の役割）の上に、少しぼけたレイヤー、すごくぼけたレイヤー、と２枚重ねることで、光ってにじんでいる感じを表現しよう、というもの。
ここまでの操作で、レイヤーは、背景、元のテキストレイヤー（非表示）、ネオン管レイヤー、少しぼけたネオン管レイヤー、すごくぼけたネオン管レイヤー、となっているはず。
ここでボケていないネオン管のレイヤーを非表示にし、背景、少しぼけ、すごくぼけの３つが表示された状態にし、一番上のレイヤーを「右クリック→可視部分をレイヤーに」を実行する。
すると今表示されていた３つのレイヤーが１枚にまとまったものができるので、少しぼけレイヤーとすぼくぼけレイヤーは削除してしまおう。（別に残しておいても良い。その場合は非表示にしておく。）
できたレイヤー（３つが統合されたレイヤー）を選択し、「色→トーンカーブ」を実行する。
トーンカーブの対象は図の位置からプルダウンで選べる。ここで赤、緑、青がそれぞれＲＧＢのカラーチャンネルに対応しているため、この３つをコントロールすることで自在に色を調整することができる。ここでは赤、緑、青をそれぞれ次のような感じに設定し、明るい青緑のような色にしてみた。
色が決まったら、このレイヤーを複製する。
一番上のレイヤーから順に、
・モード：スクリーン 不透明度：５０ （色つきレイヤーの複製）
・モード：スクリーン 不透明度：１００ （色つきレイヤー）
・モード：通常 不透明度：５０ （光ってないネオン管レイヤー）
・非表示 （元のテキストレイヤー）
・モード：通常 不透明度：１００ （背景の真っ黒レイヤー）
という風に調整する。
これで、全体が光っているネオンサインが完成した。
ここまでの仕上がりをファイルに保存しておこう。（というか本当はもっと早い段階で保存しておくべき。今回はスクリーンショットを撮りながら作業してたら保存しないままここまで来ちゃっただけなので、良い子はまめに保存しましょう）
「ファイル→名前を付けて保存」を実行してファイルを保存する。
ファイル名や保存する場所は何でも良いが、自分でわかりやすい場所、名前にするのが基本。
最近のウィンドウズマシンなら問題ないが、ファイルやフォルダの名前になるべく日本語を入れないようにすると無駄なトラブルを避けられる。
ここではneon_base.xcfというファイル名にした。
GIMPは保存時に拡張子（ファイル名の後ろにある.以下の文字）をつければ、そのファイル形式で保存してくれる。作業中のファイルは基本的にすべて「.xcf」形式で保存する。これがGIMPの標準形式で、すべての作業状態が保存される。
続いて、背景と光っていないネオン管のレイヤーだけを表示し、それ以外を非表示にする。
この状態で、「ファイル→名前を付けて保存」を実行し、neon_anim_00.png というファイル名で保存する。拡張子に.pngを指定するとPNG形式になり、詳細を設定する窓が開くのでそれぞれ次のように指定する。
一つ目は、複数のレイヤーが存在するファイルをPNG形式で保存しようとしたときに出る窓。「可視レイヤーの結合」にチェックが入っていることを確認して「エクスポート」をクリック。
２つ目の窓はPNGの細かい設定をするものだが、ここでは「透明ピクセルの色の値を保存」のチェックを外し、それ以外はそのままで「保存」をクリックする。
これでPNGへの書き出しが完了する。
ではこれから、アニメーション用のPNGファイルを次々に出力していこう。
再び、光っている２つのレイヤーを表示する。
表示したら、矩形選択ツール（ツールボックスの左上の端、ショートカット「M」）を使い、最初の一文字だけを選択する。少々余裕を持たせて、ざっくりと選択すれば大丈夫。
選択したら、「選択→境界をぼかす」を実行し、「縁をぼかす量」を１０ピクセルにする。
続いて、「選択→選択範囲を反転」（またはCtrl+Shift+i）を実行して選択範囲を反転する。つまり、最初の１文字以外のすべてが選択されている状態になる。
この状態で、光っている２つのレイヤーをそれぞれ選択し、Deleteキーを押して削除する。（１つ選択して削除、次を選択して削除、という手順）
これによって、光っているのは最初の一文字だけ、という状態になったはず。
この状態で、「ファイル→名前をつけて保存」を実行し、neon_anim_01.png という名前で保存する。
PNGの保存オプションは前にやったときと同じ（通常は前回の設定を覚えていてくれる）でOK。
保存が終わったら、Ctrl+z（アンドゥ）を３回行い、すべての文字が光っていて、１文字だけ選択されている状態（選択範囲を反転する前）まで戻す。
ツールボックスから移動ツール（ショートカット「V」）を選び、移動オプション（ツールボックスの下半分に表示される）から、移動対象を選択範囲にする。
選択範囲を２文字目へ移動し、１文字目でやったのと同じ操作を行う。
以降、作った文字の分だけ同じことを繰り返し、保存するpngファイル名の数字を１ずつ増やしていく。
--操作--
・選択範囲を残す文字（光らせる文字）のところへ移動し、選択範囲を反転させる
・光っている２つのレイヤーをそれぞれ選択し、Deleteキーを押して削除する
・１文字だけ光っていることを確認し、neon_anim_○○.png という名前で保存する。（○○は数字）
・Ctrl+zを３回押し、選択範囲を反転する前の状態に戻す
これを繰り返す。
最後の１文字だけ光っているものを保存したあと、Ctrl+zを３回して戻ったら、Ctrl+Dを押して選択範囲を解除し、すべての文字が光った状態で neon_anim_○○.png として保存する。
これで、
・１文字も光っていないネオン管
・１文字ずつ光ってるネオン管が文字数分
・全部光っているネオン管
というpngファイル群ができたはず。
最後にこれをアニメーションgifにまとめたら完成だ。
GIMPで500ｘ80の画像を新規作成し、「ファイル→レイヤーとして開く」（Ctrl+Alt+o）を実行する。
ファイルを選択する窓が開くので、今作った連番のpngファイルをすべて選択する。
すると背景レイヤーの上に、連番ファイルがレイヤーごとに下から順に積み重なったような状態になる。一番下の背景レイヤー（読み込んだ画像が入っていないレイヤー）はいらないので削除してしまおう。（レイヤーの削除は選択して下のごみ箱のアイコンをクリック）
これをアニメーションGIFとして保存すると、レイヤーが下から順に表示されていくような形でアニメーション化される。
それを踏まえて調整していこう。
ここでは1文字も点灯していない状態から、1文字ずつ点灯していき、最後に全部点灯して3回点滅し、4回目にしばらく点灯する、という風にしてみる。
PNGファイルは00が消灯、01～08が1文字ずつ（この例では8文字なので）、09がすべて点灯、という状態になっている。
そこで下から順にまず00～09までが並び、00を複製して09の次に置く。さらに09と00をいくつか複製して点滅部分を作る（交互に配置する）。
最後にしばらく点灯する部分は、点灯させたい長さ分だけ同じ画像を配置する。この例では全部点灯している画像（09）を8枚表示している。
レイヤーはこんな感じ。長すぎて全部表示できていないが、この下に00のレイヤーがもう一つある感じ。
これで完成。
これをGIFファイルに書き出すわけだが、その前に一度xcf形式で保存しておこう。
「ファイル→名前を付けて保存」を実行し、neon_anim.xcfという名前で保存する。
続いてアニメーションGIFで書き出す。
「ファイル→名前をつけて保存」を実行し、neon_anim.gifというファイル名で保存を実行すると、どのように保存するかを聞いてくる。
1つ目は複数のレイヤーのあるファイルをGIFで保存しようとした場合に出る窓で、アニメーションにするのか、1つのレイヤーに統合するのかを選べる。ここではもちろんアニメーションを選択。
また、下半分の項目は色に関するもので、インデックスカラー（使われている色だけに限定して保存する方式）か、グレースケール（いわゆるモノクロ）に変換するかを選ぶ。ここでは色を残したいのでインデックスカラーにする。
次の窓はアニメーションを選択した場合に出てくる詳細設定の窓。
ここで重要なのはループさせるかどうかの設定と、どのぐらいの速さで再生するか、それぞれのレイヤーをどうやって表示するか、という部分。
まずループについてはループさせる設定にする。
速さはお好みだが、1枚の絵を何ミリ秒表示するか、という単位で設定することになる。ここでは200にしたので0.2秒ということになる。これは実際に保存したGIFファイルを表示してみて、手頃な速さになるように何度も変更しては保存する、というのを繰り返すと良い。
次のどのように表示するか、については、今回のように各レイヤーがそれぞれ完結した絵になっている場合は、「レイヤーごとに1フレーム（置換）」を選ぶ。これを選ぶと各レイヤーがそれぞれ独立したものになり、次の絵が表示されるときには前の絵が消える、という動作になる。
以上の設定をして書き出したものが、冒頭に掲載したアニメーションGIFだ。
なんだかとてつもない長さになったが、随所に役立つ小技が入っていると思うので、じっくり試してみてほしい。
何を作ろうかなーと考えていたところ、某所で、GIMPでネオン風のロゴを作るというチュートリアルを見つけたので、それを少々アレンジしたものを作ろうと思う。
※ちなみにショートカットはすべてフォトショップ同様のものになっているので、その設定を行っていない人はひとつ前のエントリを見て同じように設定しておいてください。
これが完成形。
ここでのポイントは、
・GIMPについている「フィルタ→ロゴ効果→ネオン」は使わない
・パチンコ屋の看板風にアニメーションさせてみる
の2点。
フィルタ効果を使わない、というのは、一発でできるやつを使うと応用が利かないから、という理由。実際にネオン風を作るときは便利なものを使ってもまったく問題ないけれど、使わないやり方を知っていれば他にも応用できるし、細かい調整もできるし、いいことづくめなんじゃないかということでやってみましょう。
ではさっそく。
まず、ファイル新規作成で、500x80ピクセルの画像を作る。
横500px、縦80pxを指定してOKをクリック。
新規ファイルが開いたら、ツールボックス中ほどの描画色パレットで、描画色（手前）が黒になっていることを確認し、ショートカットキー（Alt+Backspace）を押す。
★TIPS★
※ Alt+Backspace … 描画色で塗りつぶし
Ctrl+Backspace … 背景色で塗りつぶし
このように、背景レイヤーが黒くなれば成功。最初から黒で新規作成することもできるが、とりあえず白で作ってから好きな色に塗るのがレイニー流。
次に、テキストツールを選び、テキストの色を白に設定する。
ツールボックスでテキストツール（「Ａ」という文字のアイコン）をクリックすると、ツールボックスの下半分がテキストツールモードになるので、その中ほどにあるカラーアイコンをクリックし、別窓で開くカラーパレットで色を選ぶ。ここでは白に設定。
設定したら黒い背景の上をクリックし、文字を入力。文字を入力すると自動的に背景レイヤーの上にテキストレイヤーが追加される。入力してテキストツールのフォントサイズなどを調整し、適当な大きさにする。
位置の調整は、移動ツール（ショートカット「V」）に変更して行うが、このとき、ツールボックスの下の方にある「アクティブなレイヤーを移動」にチェックを入れ、移動したい素材のあるレイヤー（ここではテキストレイヤー）を選択して移動すると、移動させたいものだけを動かせる。
※これをやらないと背景のほうが動いてしまったりする。
位置、大きさが決まったら、テキストレイヤーの上に新しいレイヤーを一つ追加する。
レイヤーパレットの左下にある新規レイヤー作成ボタンを押すと、現在選択しているレイヤーの上に新しいレイヤーが追加される。
追加したら、さっきのテキストレイヤーを右クリックし、「テキストを選択範囲に」をクリックする。
テキストを選択範囲にしたら、このテキストレイヤーは非表示にする。レイヤーパレットの目玉のマークをクリックすると、目玉がついたり消えたりする。これを消しておくと非表示になる。
テキストが選択範囲になったら、メニューの「選択→チャンネルに保存」を実行して、この選択範囲をチャンネルに保存する。
※この、選択範囲をチャンネルに保存する、という機能はひっじょーーーに使えるので覚えておくと便利。
チャンネルに保存したら、今の選択範囲を2ピクセル拡大する。
「選択→選択範囲を拡大」を実行し、拡大幅を2ピクセルにして「OK」をクリックする。
この拡大された選択範囲から、拡大する前の選択範囲を差し引いて、縁取りの部分だけを残す、という作業を行う。ここでさっき保存しておいた拡大する前の選択範囲が活躍するというわけ。
チャンネルパレットを開き、先ほど保存した選択範囲を選び、チャンネルを選択範囲に戻すボタン（右から二番目にある赤いアイコン）をCtrlキーを押しながらクリックする。
★TIPS★
ある選択範囲に対し、
・Ctrlを押しながら新たな選択範囲を作ると、元の選択範囲から新しい選択範囲を引く
・Shiftを押しながら新たな選択範囲を作ると、元の選択範囲に新しい選択範囲を足す
ここまでの操作で、縁取りだけが選択された状態になっているはず。
ここでようやく、だいぶ前に作った新規レイヤー（今のところ何も入っていないレイヤー）を選択し、Ctrl+Backspaceを押して、縁取り部分（今の選択範囲）を白（背景色）で塗りつぶす。
縁取りが白く塗られたら、このレイヤーを複製する。
複製したいレイヤーを選択し、レイヤーパレット下部にある「レイヤーを複製」ボタンを押すと、選択しているレイヤーの上に同じ内容をもったレイヤーが複製される。
この複製した新しいレイヤーを選択し、「フィルタ→ぼかし→ガウシアンぼかし」を実行する。
ぼかし幅は５ピクセルに設定した。
さらに、この５ピクセルぼかしたレイヤーを複製し、できたレイヤーにガウシアンぼかしを２０ピクセルでかける。
--操作--
・今ぼかしたレイヤーを選択してレイヤーパレット下部のレイヤー複製ボタンを押す
・新しいレイヤーが選択された状態で、「フィルタ→ぼかし→ガウシアンぼかし」を実行
・ガウシアンぼかしの設定ウィンドウで、ぼかし半径を２０にして「OK」をクリックする
※ここでのプランは、芯になる縁取りの文字（これが光っていないネオン管の役割）の上に、少しぼけたレイヤー、すごくぼけたレイヤー、と２枚重ねることで、光ってにじんでいる感じを表現しよう、というもの。
ここまでの操作で、レイヤーは、背景、元のテキストレイヤー（非表示）、ネオン管レイヤー、少しぼけたネオン管レイヤー、すごくぼけたネオン管レイヤー、となっているはず。
ここでボケていないネオン管のレイヤーを非表示にし、背景、少しぼけ、すごくぼけの３つが表示された状態にし、一番上のレイヤーを「右クリック→可視部分をレイヤーに」を実行する。
すると今表示されていた３つのレイヤーが１枚にまとまったものができるので、少しぼけレイヤーとすぼくぼけレイヤーは削除してしまおう。（別に残しておいても良い。その場合は非表示にしておく。）
できたレイヤー（３つが統合されたレイヤー）を選択し、「色→トーンカーブ」を実行する。
トーンカーブの対象は図の位置からプルダウンで選べる。ここで赤、緑、青がそれぞれＲＧＢのカラーチャンネルに対応しているため、この３つをコントロールすることで自在に色を調整することができる。ここでは赤、緑、青をそれぞれ次のような感じに設定し、明るい青緑のような色にしてみた。
色が決まったら、このレイヤーを複製する。
一番上のレイヤーから順に、
・モード：スクリーン 不透明度：５０ （色つきレイヤーの複製）
・モード：スクリーン 不透明度：１００ （色つきレイヤー）
・モード：通常 不透明度：５０ （光ってないネオン管レイヤー）
・非表示 （元のテキストレイヤー）
・モード：通常 不透明度：１００ （背景の真っ黒レイヤー）
という風に調整する。
これで、全体が光っているネオンサインが完成した。
ここまでの仕上がりをファイルに保存しておこう。（というか本当はもっと早い段階で保存しておくべき。今回はスクリーンショットを撮りながら作業してたら保存しないままここまで来ちゃっただけなので、良い子はまめに保存しましょう）
「ファイル→名前を付けて保存」を実行してファイルを保存する。
ファイル名や保存する場所は何でも良いが、自分でわかりやすい場所、名前にするのが基本。
最近のウィンドウズマシンなら問題ないが、ファイルやフォルダの名前になるべく日本語を入れないようにすると無駄なトラブルを避けられる。
ここではneon_base.xcfというファイル名にした。
GIMPは保存時に拡張子（ファイル名の後ろにある.以下の文字）をつければ、そのファイル形式で保存してくれる。作業中のファイルは基本的にすべて「.xcf」形式で保存する。これがGIMPの標準形式で、すべての作業状態が保存される。
続いて、背景と光っていないネオン管のレイヤーだけを表示し、それ以外を非表示にする。
この状態で、「ファイル→名前を付けて保存」を実行し、neon_anim_00.png というファイル名で保存する。拡張子に.pngを指定するとPNG形式になり、詳細を設定する窓が開くのでそれぞれ次のように指定する。
一つ目は、複数のレイヤーが存在するファイルをPNG形式で保存しようとしたときに出る窓。「可視レイヤーの結合」にチェックが入っていることを確認して「エクスポート」をクリック。
２つ目の窓はPNGの細かい設定をするものだが、ここでは「透明ピクセルの色の値を保存」のチェックを外し、それ以外はそのままで「保存」をクリックする。
これでPNGへの書き出しが完了する。
ではこれから、アニメーション用のPNGファイルを次々に出力していこう。
再び、光っている２つのレイヤーを表示する。
表示したら、矩形選択ツール（ツールボックスの左上の端、ショートカット「M」）を使い、最初の一文字だけを選択する。少々余裕を持たせて、ざっくりと選択すれば大丈夫。
選択したら、「選択→境界をぼかす」を実行し、「縁をぼかす量」を１０ピクセルにする。
続いて、「選択→選択範囲を反転」（またはCtrl+Shift+i）を実行して選択範囲を反転する。つまり、最初の１文字以外のすべてが選択されている状態になる。
この状態で、光っている２つのレイヤーをそれぞれ選択し、Deleteキーを押して削除する。（１つ選択して削除、次を選択して削除、という手順）
これによって、光っているのは最初の一文字だけ、という状態になったはず。
この状態で、「ファイル→名前をつけて保存」を実行し、neon_anim_01.png という名前で保存する。
PNGの保存オプションは前にやったときと同じ（通常は前回の設定を覚えていてくれる）でOK。
保存が終わったら、Ctrl+z（アンドゥ）を３回行い、すべての文字が光っていて、１文字だけ選択されている状態（選択範囲を反転する前）まで戻す。
ツールボックスから移動ツール（ショートカット「V」）を選び、移動オプション（ツールボックスの下半分に表示される）から、移動対象を選択範囲にする。
選択範囲を２文字目へ移動し、１文字目でやったのと同じ操作を行う。
以降、作った文字の分だけ同じことを繰り返し、保存するpngファイル名の数字を１ずつ増やしていく。
--操作--
・選択範囲を残す文字（光らせる文字）のところへ移動し、選択範囲を反転させる
・光っている２つのレイヤーをそれぞれ選択し、Deleteキーを押して削除する
・１文字だけ光っていることを確認し、neon_anim_○○.png という名前で保存する。（○○は数字）
・Ctrl+zを３回押し、選択範囲を反転する前の状態に戻す
これを繰り返す。
最後の１文字だけ光っているものを保存したあと、Ctrl+zを３回して戻ったら、Ctrl+Dを押して選択範囲を解除し、すべての文字が光った状態で neon_anim_○○.png として保存する。
これで、
・１文字も光っていないネオン管
・１文字ずつ光ってるネオン管が文字数分
・全部光っているネオン管
というpngファイル群ができたはず。
最後にこれをアニメーションgifにまとめたら完成だ。
GIMPで500ｘ80の画像を新規作成し、「ファイル→レイヤーとして開く」（Ctrl+Alt+o）を実行する。
ファイルを選択する窓が開くので、今作った連番のpngファイルをすべて選択する。
すると背景レイヤーの上に、連番ファイルがレイヤーごとに下から順に積み重なったような状態になる。一番下の背景レイヤー（読み込んだ画像が入っていないレイヤー）はいらないので削除してしまおう。（レイヤーの削除は選択して下のごみ箱のアイコンをクリック）
これをアニメーションGIFとして保存すると、レイヤーが下から順に表示されていくような形でアニメーション化される。
それを踏まえて調整していこう。
ここでは1文字も点灯していない状態から、1文字ずつ点灯していき、最後に全部点灯して3回点滅し、4回目にしばらく点灯する、という風にしてみる。
PNGファイルは00が消灯、01～08が1文字ずつ（この例では8文字なので）、09がすべて点灯、という状態になっている。
そこで下から順にまず00～09までが並び、00を複製して09の次に置く。さらに09と00をいくつか複製して点滅部分を作る（交互に配置する）。
最後にしばらく点灯する部分は、点灯させたい長さ分だけ同じ画像を配置する。この例では全部点灯している画像（09）を8枚表示している。
レイヤーはこんな感じ。長すぎて全部表示できていないが、この下に00のレイヤーがもう一つある感じ。
これで完成。
これをGIFファイルに書き出すわけだが、その前に一度xcf形式で保存しておこう。
「ファイル→名前を付けて保存」を実行し、neon_anim.xcfという名前で保存する。
続いてアニメーションGIFで書き出す。
「ファイル→名前をつけて保存」を実行し、neon_anim.gifというファイル名で保存を実行すると、どのように保存するかを聞いてくる。
1つ目は複数のレイヤーのあるファイルをGIFで保存しようとした場合に出る窓で、アニメーションにするのか、1つのレイヤーに統合するのかを選べる。ここではもちろんアニメーションを選択。
また、下半分の項目は色に関するもので、インデックスカラー（使われている色だけに限定して保存する方式）か、グレースケール（いわゆるモノクロ）に変換するかを選ぶ。ここでは色を残したいのでインデックスカラーにする。
次の窓はアニメーションを選択した場合に出てくる詳細設定の窓。
ここで重要なのはループさせるかどうかの設定と、どのぐらいの速さで再生するか、それぞれのレイヤーをどうやって表示するか、という部分。
まずループについてはループさせる設定にする。
速さはお好みだが、1枚の絵を何ミリ秒表示するか、という単位で設定することになる。ここでは200にしたので0.2秒ということになる。これは実際に保存したGIFファイルを表示してみて、手頃な速さになるように何度も変更しては保存する、というのを繰り返すと良い。
次のどのように表示するか、については、今回のように各レイヤーがそれぞれ完結した絵になっている場合は、「レイヤーごとに1フレーム（置換）」を選ぶ。これを選ぶと各レイヤーがそれぞれ独立したものになり、次の絵が表示されるときには前の絵が消える、という動作になる。
以上の設定をして書き出したものが、冒頭に掲載したアニメーションGIFだ。
なんだかとてつもない長さになったが、随所に役立つ小技が入っていると思うので、じっくり試してみてほしい。