| Top > Photoshop講座 |
| ImageReadyでGIFアニメーション |
|
|
作成日:2002/08/12 更新日:----/--/-- |
|
まず元になる画像を作成します。 これはPhotoshopで作成するとよいでしょう。 今回は下図のようなデータを用意しました。 |
|
↓画像 |
↓レイヤー |
※作成目的画像 |
|
|
|
|
|
|
では、何はともあれImageReadyを起動しましょう。 Photoshop上で、アニメーションさせたい画像が開かれている状態で Photoshopのツールバーから下図の  部分、「ImageReady を起動」をクリック！ ・・・ということもできますが、通常のソフトと同じように起動してもＯＫ。 というか、Photoshopはメモリ食い野郎なので、マシンパワーに自信のない方は Photoshopを起動していない状態でImageReadyを使用するほうがよいと思います。 その場合はImageReadyからPhotoshopで作成した「.psd」画像データを読み込んでください。 ウチのマシンは非力なもんで（笑） |
|
ImageReadyを起動して、アニメーションさせたい画像が表示されましたか？ 出は早速作成しましょう。 まず、下図のような、「アニメーションパレット」を見つけてください。  現在は「1」とかかれた画像が１枚だけあります。 まあ、１枚だけのアニメーションといえなくもないですが（笑） それだと寂しいので、とりあえず２枚にしましょう。 まず、Photoshopでレイヤーを作成するように、アニメーションパレットの 部分をクリックしましょう。すると、下図のように、「2」と書かれた新しいアニメーションレイヤーが出来ます。  おお。これで少なくとも２枚の画像を使ったアニメーションが可能です！ しかしまだまだです。 各サムネールの下に「0秒」と書かれていることにお気づきになられましたか？ これは「0秒その画像を表示する」ということです。 0秒って・・・表示されないじゃん（苦笑） というわけで、各画像の時間を設定しましょう。 「秒」とかかれた右隣の「▼」を押すと下図のように時間を選ぶメニューが現れます。  この中から好きな時間を選びましょう。 ちなみに「その他...」を選ぶと、もっと詳細に時間を決定することができます。 先ほど作成した２枚の両方に設定しましょう。 ※最初に、レイヤーを２枚に増やす前に時間を設定した場合、 レイヤーを増やしたら、時間も一緒にコピーされるので便利です。 これでアニメーション画像ができあがりました。 が、２枚とも同じ画像なのでアニメーションといっても、絵が変わりません。 では、２枚の画像に変化をつけましょう。 まず「1」と書かれた画像のサムネールをクリックして「1」をアクティブにします。 そして、「1」の画像のレイヤーパレットを下図のようにします。 
 ちなみに、現在のアニメーションパレットはこんなカンジ↓  次に「2」と書かれた画像のサムネールをクリックして「2」をアクティブにします。 そして、「2」の画像のレイヤーパレットを下図のようにします。 
 ちなみに、現在のアニメーションパレットはこんなカンジ↓  これでアニメーション画像が完成です。 アニメーションパレットの下部、再生ボタンを押してみましょう。  |
|
できた画像は保存しましょう。 ちょっと、ImageReadyの保存は特殊なので気をつけてください。 まず、画面内から「最適化パレット」を見つけてください。。  最適化メニューが少ないときは の部分を押すと変化します。これが保存設定になります。 各項目の詳しい意味合いは こちら をお読みください。 設定が終わったら、実際に保存です。 メニューバーから「ファイル＞最適化ファイルを別名で保存」を選択してください。 ※通常の「保存」ではアニメーションGIFを保存することが出来ません。  あとは、通常と同じく名前を付けて保存完了です。 これでGIFアニメーションの出来上がり！！ |
|
ちょっとした画像加工でワンランク上のアニメーションを作成しましょう。 今回は２枚のアニメーションを補間してみます。 ではまず、２枚のアニメーションが作成されている状態で、 下図の の部分、
「アニメーションフレームをトゥイーン」をクリックしてください。 すると下図のようなウィンドウが開きますので。 図のように補間内容を選んで「OK」をクリック。  「OK」を押すと、下図のように間２枚が補間されました。  これで、「秒」等を調整して...  完成です！！  |
|
大きな画像を扱う場合、全てをアニメーションさせたら データがとても大きくなってしまいます。 ですので、アニメーションする部分だけを切り出して作成しましょう。 まず、ツールバーから「スライスツール」を選択します。  そして、アニメーションする部分だけを囲いましょう。  あとは通常通り、アニメーションを作成して同じように保存するだけ。 ただし、「スライスツール」の名が示すとおり、画像をバラバラに保存するので バナーなどには向きません。 しかもアニメーション部分が大きかったり、小さい画像ではよりデータ量が大きくなってしまいます。 バラバラになった画像はHTML上でテーブルなどで隣接に配置することによって ひとつの画像のアニメーションのように見せます。 保存するとき、「gifのみ」や「html」の保存を聞かれますので 「html」ごと保存し、そこに書き出されたテーブルを使用すると良いでしょう。 |
|
|
||||||||
|
|
|
