3.gif
2.gif
1.gif
上の画像はすべてのピクセルを不透明値で作成しています。 しかしgifファイルはアルファ値を指定することが可能です。
| ■GIFアニメーション作成 | Prev Top Next |
| 関連ページ：なし |
１．画像作成
まずアニメーションさせる画像を用意します。これがないと始まりません。画像は最終的にひとつのファイルに結合するので縦横の解像度を同じにします。
3.gif
2.gif
1.gif
上の画像はすべてのピクセルを不透明値で作成しています。
しかしgifファイルはアルファ値を指定することが可能です。
アルファ値を設定する場合はレイヤーを使用します。
まず「新規レイヤー」を作成し、作成したレイヤーに画像を書き込んでから、残った「背景」を削除します。
Photoshop上では透明部分が網掛け表示になります。
最後にファイルを保存しますが、通常使用する「別名で保存」ではなく「Web用に保存」を選択して保存します。
２．画像を１つのレイヤーにまとめる
１.で作成した３つの画像ファイルを「移動ツール」で１つのレイヤーにまとめます。
なお、gifファイルをPhotoshopで開くと「モード」が「インデックスカラー」となります。
インデックスカラーの場合、「移動ツール」で移動させられないので「モード」を「RGB カラー」に変更してから移動してください。
３．アニメーションの設定
次にアニメーションを設定します。アニメーションの設定は、「アニメーション」パレットで行います。
「アニメーション」パレットは「ウィンドウ」メニューの「アニメーション」から表示します。
「アニメーション」パレット
まずは「アニメーション」パレット上でキーフレーム分だけフレームを作成します。
サンプルでは"１"、"２"、"３"と全部で３つのキーフレームが必要となります。したがって、
ここを２回クリックしてフレームを２つ作成します。
次に「アニメーション」パレットの各フレームごとに「レイヤーの表示／非表示」の設定を行います。
例えば「アニメーション」パレット上で"２"の画像を選択した場合、"１"と"３"のレイヤーを非表示にして、"２"のレイヤーを表示するようにします。
残りの"１"、"３"も同様に設定を行い、最終的に「アニメーション」パレットには次のように表示されるようにします。
次に「フレームのディレイを設定」します。ディレイとは遅延という意味ですが、ここではフレーム間の所要時間となります。
ここをクリックするとプルダウンメニューが表示されるので、時間を設定します。
４．ファイルの保存
最後に「ファイル」メニューから「Web用に保存」を選択してファイルを保存します。
完成！