それじゃあ、いってみよう!

ご要望が多かったので、不肖久弥Adobe ImageReady2.0によるAnimationGIF(以下GIFアニメ)のHow Toなんぞを作ってみました。
なにせ素人なもんで、間違っている所やよくわからぬ所などあるとおもいます。
その際はBBSorメールで問い合わせていただければお答えしますので、突っ込んでやってください。



†必要なもの†
◎Adobe photoshop5.5
◎Adobe ImageReady2.0
1.絵を用意する。
今回はこのページのアイコンを作ってみました。
扉が開閉して中の文字が見えるものです。
今回用意したレイヤーは
 背景    :店の全体
 レイヤー1 :半開きの扉
 レイヤー2 :暗い店内
 how to   :扉の中から出てくる文字
の4点です。
2.Image Readyを開く

とはいってもわざわざ手動で開く方法ではありません。
ツールボックス一番下の方にある丸で囲った部分をダブルクリックしてください。
そうすると、「アプリケーション間をジャンプするには書類を保存してください。”○:\〜\〜\ファイル名”に変更を保存しますか?」
と、でてくるので、フォルダや名前を変える場合は「別名で保存」、そのままでよければ「保存」をクリックします。
3.Image Readyを使う
いよいよアニメーションを作る段階に入ります。
まずは、アニメーションを作るのに必要なウィンドウを開きましょう。
ここで必要なウィンドウとは、
・最適化ウィンドウ
・レイヤーウィンドウ
・アニメーションウィンドウ
の三つです。

アニメーションは複数枚の絵、「スライス」から成り立っています。
「スライス」はアニメーションウィンドウの赤丸で囲った所をクリックすれば、下の図のようにの複製の「スライス」、ができます。



ここで複製したスライス2の絵柄を変えます。
レイヤーウィンドウの各レイヤーの前の目玉マークをクリックして
つけると表示消すと非表示という具合に、スライス2で表示させたい絵柄を選択します。

このアイコンの場合3枚のスライスを使っており、各スライスの表示レイヤーは、
・スライス1:背景
・スライス2:背景、レイヤー1、レイヤー2、How To
・スライス3:背景、レイヤー2、How To
といったレイヤーから構成されています。
この作業を終えた時点で、一応アニメーションGIFの形は出来上がりました。


次は各スライスの表示時間を決めます。
スライスの下の部分の0秒の部分をダブルクリックしてやると上の画像のように表示時間選択のポップアップが現れます。
アニメーションウィンドウの>(再生)ボタンをクリックすればGIFの動きが確認でるので、それを見ながら調節してください。
この画面で表示時間を選択しているのはスライス3です。
このスライスは扉の中に書いてある言葉が何か認知してもらいたいので、人が文字を読めるとおもうぐらいの時間にします。


いよいよ最後の仕上げです。
最適化ウィンドウで画像の保存形式をGIFに設定し、色数を決めて最適化ファイルを保存で保存しましょう。
これで、オリジナルのアニメーションGIFの出来上がりです。
スライスの枚数を多くすることでいろいろな応用はできますが、増やしすぎると画像が重く(ファイルの容量が大きく)なる気をつけてくださいね。


では、皆様の健闘を祈って。




便利箱へ戻る
目次へ戻る