ここではWeb上でよく見かける、ボタンアニメーションを作成します。まずは完成品を見てみましょう。→ new_button.gif
１．Illustraorでボタンの絵を描きます。
今回は私が作成した物をサンプルとして使用します。(ダウンロードはこちらから→new_button.zip)Illustratorでnew_button.aiを開きましょう。このデータはすでに４つのボタンの絵に対してスライスを切ってあります。スライスツールを選択してスライスの状態を確認しましょう。写真のようになっていれば大丈夫です。
２．スライスを保存する。
[ファイル]→[Webおよびデバイス用に保存]を選択し、GIF形式で4つのスライスを保存します。デスクトップ上にnew_button.gifで保存しましょう。デスクトップにimages/new_button_01～04.gifができたでしょうか？
３．フォトショップでGIFアニメを作成する。
フォトショップを起動し、[ファイル]→[新規]を選択し、プリセットでWebを選択、幅と高さを両方とも16pxに設定し、カンバスを開きます。
４．先程保存したGIFファイルを読み込み、レイヤーに配置します。
[ファイル]→[配置]で、new_button_01.gifを読み込みます。この時、読み込み位置の基準点を画像の左上にし、X,Y座標を両方0pxに設定しておきます。
同様にnew_button_02～04.gifも配置します。基準点を左上にして、XとYを0pxに設定することをお忘れなく。すると、下の写真のような状態になると思います。
５．アニメーションの設定をします。
[ウィンドウ]→[アニメーション]で、アニメーションパネルを開きます。次に、アニメーションパネルのパネルメニューから新規フレームを三回選択し、合計4フレームの状態にします。
ここでは、1フレーム目ではnew_button_01.gifだけが見えるように設定し、2フレーム目ではnew_button_02.gifだけが見えるように設定し、3フレーム目ではnew_button_03.gifだけが見えるように設定し、4フレーム目ではnew_button_04.gifだけが見えるように設定します。まずはアニメーションパネルの1フレーム目を選択し、レイヤーパネルの目のアイコンを下の写真のように設定してみてください。（背景の白地は目隠しして透明になるように設定してください。）
１フレーム目のところにnew_button_01.gifの絵が表示されていれば成功です。続いて2～4フレーム目もそれぞれnew_button_02～04が表示されるように設定してみましょう。下の写真のようになります。
続いて、各コマの表示時間を設定します。今回は各コマ0.3秒で遷移するように設定しましょう。
６．アニメーションGIFを保存します。
[ファイル]→[Webおよびデバイス用に保存]を選択し、ファイル形式でGIFを選択します。今回のアニメーションは永久ループさせたいので、[アニメーションループオプション]は[無限]を選択しておきます。（今回は設定不要ですが、GIFで写真のスライドショーを作る時などは、色数やカラー数や劣化度を調整しながら、ファイルサイズをなるべく小さくするように調整します。）一番下の[アニメーションを再生]ボタンでアニメーションを確認したら保存しましょう。ファイル名は今回はnew_button.gifとしておきましょう。
７．ブラウザでアニメーションを確認。
いま作ったnew_button.gifをブラウザで表示してみましょう。ファイルを選択し、右クリックから[プログラムから開く]→[Internet Explorer]で表示してみましょう。明暗を繰り返すアイコンが表示されましたでしょうか。（このように表示されれば成功です。→ new_button.gif）このGIFファイルは通常のGIFやJPGと同じようにHTMLでWebページに表示させることができます。お疲れさまでした。