PhotoShopでアニメーションGIF作成

前回は同じ作業をワンボタンで繰り返せるアクション機能を紹介しました。

ブログの画像処理用の記事として引き続きアニメーションGIFについて書いてみます。

【Photoshop】

アニメーションGIFは、かなり昔はWEBページでよく使われていた形式だと思います。

最近はFLASHやらいろいろ出てきているのでそちらに移って行ってる感じですかね。

とは言っても、お手軽にアニメーションする画像を作るのにはアニメーションGIFは有効だと思います。

アニメーションさせたいパターンを用意するだけで簡単に作れちゃいますから（^-^



今回はこの画像を使ってみます。

【サンプル】

キャリーストーリーから【剛剣姫ステヴィア】さん。

最近入手したキラキラキャラはこれくらいかな。。。ってことで今回のサンプルになってもらいます（^-^


ブラウザベースのゲームなので、キラキラするときはこんな感じの画像しか使えない感じでしょうか。

このキャラ画像のパターンは4種類。

なので、その4種類をスクショで撮ります。

撮ったあとはキャラの部分だけを切り抜き、別々な画像で保存しておきます。



ここからアニメーションGIF作成の手順です。

Photoshop5で説明しますが、ほかのバージョンでも大差ないと思われます。

たぶん。。。（＾＾；



【アニメーションフレーム】

まずはこのアニメーションウィンドウを出します。

最初はこれ見つけるだけで苦労しました。。。こんなのあるんだ？って感じでしたもん。

【各パターン】

先ほど保存した各パターンの画像を表示させます。

あとは一つ一つの画像をレイヤーとして登録していきます。

　作業例：画像2～4をコピペして画像1にペーストすると、画像1に4枚のレーヤーができます。

レイヤーに関しては慣れないとピンと来ないかもしれません。

慣れれば使いやすい機能ですけどね（^-^

【レイヤーからフレームを作成】

レイヤーの登録ができたら、アニメーションウィンドウで【レイヤーからフレームを作成】を選択します。

これも見つけるまで苦労しましたよ(苦笑

【アニメーションフレーム】

そうすると、アニメーションウィンドウに各レイヤーが登録されます。

左から順番に再生されるので、順番が入れ替わっていたりしたら直してあげましょう。

ドラッグ＆ドロップで入れ替えは簡単にできますので。

【アニメーション間隔調整】

あとはアニメーション間隔を秒で指定してあげます。

今回の場合は、間隔を0.3秒にするとちょうどよかったです。

【Webおよびデバイス用に保存】

調整が完了したら画像として保存します。

通常の保存ではなく、ここの【Webおよびデバイス用に保存】で保存です。

これも気が付かずに普通に保存すると、アニメーションしない普通のGIF画像になります（>_<；


これも見つけるまでかなり苦労しました。

『なんで動かないんだよ！』ってイライラした経験あり（-_-；

【保存】

そうしたら普通に保存します。

この画面では特にいいじらないでいいと思います。




そして完成したのがこれ。

【剛剣姫ステヴィア】

こんな感じにアニメーションします。



一昔前だとアニメGIF作成ツールは適度にあった気がしますが、最近ってあまりないんですかね？

Photoshopではこの機能があるので問題ないですが、やり方を見つけるまでが大変でした。。。（＾＾；

使い方もよくわからなかったので試行錯誤です。

でもわかれば非常に簡単だし使いやすいので今でも使っています。



ブログに貼った画像が動くか動かないかで見栄えがかなり違うんじゃないでしょうか？

って、ここまで書きましたが、実はアニメーションGIFはキャリストーリーの記事を書くときだけしか使わないですけどね（￣▽￣♪