アニメーションgifファイル作成手順 · 1...
TRANSCRIPT
1
アニメーション GIF ファイル作成手順
例 １） 文字を点滅させる例
１．イラストレータにてデザインを作成します。
２．レイヤー１のコピーを複数作ります。
（コピーする数は、どのような発光にさせるかに依ります。）
ここでは、コピーを６つ作ります。
2
３．
同様の手順で、“ト”まで行います。（レ
イヤー１のコピー５まで）
一つのレイヤーだけを表示させ、一つの
文字の明るさ（色）を変えます。
レイヤー１のコピー６は、全ての
文字を明るくします。
3
４．
５． [ ファイル ] → [ データ書き出し ] をクリックします。
全てのレイヤーを表示させて、
ファイルに保存します。
Photoshop (PSD)形式で書き出します。
カラーモードを RGB にします。
4
６．ImageReady を起動させ、 [レイヤー] → [フレーム１ の変更を反映] をクリックし
て、チェックマークをはずしておきます。
(チェックマークが付いていなければ、そのままにしておきます。)
７．５．で保存した PSD 形式のファイルを開きます。
このウィンドウが現れていいないときは、
[ ウィンドウ ] → [ アニメーション ] をクリックします。
5
７．アニメーションウィンドウで、フレームの複製を作ります。
全てのフレームを選択し、時間を設定します。
（一つのフレームを設定すると全てのフレームが設定されます。）
各フレームの時間は全て同じに設定します。
８．1フレーム目を選択し、レイヤーの表示・非表示 をこのようにします。
ここをクリックして、複製
を作ります。
6
２フレーム目を選択し、レイヤーの表示・非表示 をこのようにします。
３フレーム目を選択し、レイヤーの表示・非表示 をこのようにします。
４フレーム目を選択し、レイヤーの表示・非表示 をこのようにします。
５フレーム目を選択し、レイヤーの表示・非表示 をこのようにします。
7
６フレーム目を選択し、レイヤーの表示・非表示 をこのようにします。
７フレーム目を選択し、レイヤーの表示・非表示 をこのようにします。
８フレーム目を選択し、レイヤーの表示・非表示 をこのようにします。
各フレームの設定が終わったら、アニメーションの再生ボタンをクリックして、
アニメーション動作の確認をします。
8
９． [ ファイル ] → [ 最適化ファイルを別名で保存 ] をクリックして、
ファイルに保存します。
ファイルの種類が GIF になっていることを確認して保存します。
以上でアニメーション GIF ファイルの作成は終了です。
出来上がった GIF ファイルをダブルクリックして、動作を確認します。
（注意）
前記の例では、イラストレータにてレイヤーの明るさを変更しましたが、
フォトショップにて変更しても構いません。
また、デザインに写真データが含まれるときに写真の一部分を点滅させ
たい場合は、フォトショップにて、点滅させたい場所のエリアの明るさを
変えたデータを作る必要があります。
9
例 ２） 写真の雲を順次明るくする例
１．元の写真をフォトショップで読み込み、次ページのようにレイヤに分けます。
（レイヤーの分け方や、写真の切取りの操作につては、フォトショップ のマニュアル
を参照してください。）
元の写真
レイヤー２～５は、元写真の一部分を切り取ってい
ます。（明るさは元の写真と同じです。）
レイヤー１は、元の画像の全体の明るさを暗くして
います。
10
レイヤー５ レイヤー４
レイヤー３ レイヤー２
レイヤー１
このようにしてレイヤー分けができたファイルを PSD(フォトショップ)形式で
ファイルに保存します。
11
２．ImageReady(イメージレディ)を起動して、１．で作成したファイルを読み込みます。
はじめに、 レイヤー → フレーム１の変更を反映 を
クリックして、チェックマークをはずしておきます。
アニメーションウィンドウの
時間をクリックして、とりあえず 0.5 を選択しておきます。
12
ここをクリックして、フレーム１の複製をいくつか作ります。
（この例では、３つ複製を作ります。）
各フレームを選択して、レイヤーの表示・非表示を下図のようにします。
フレーム１ フレーム２
フレーム３ フレーム４
13
アニメーションの再生ボタンをクリックしてアニメーションの動作を確認します。
動作が良ければ、ファイル → 最適化ファイルを別名で保存 をクリックして
GIF ファイルで保存します。
以上でアニメーション GIF の完成です。
この例はごく簡単な例ですが、実際はレイヤーやフレームの数を増やしたり、
各フレームの時間を増減させたりして完成させます。