vol.29 photoshopでGIFアニメを作る

こんにちは。イラストレーターの西山です。
イラストを描いていると一度は思いえがくアニメーション。
しかしアニメを作る専用ソフトを買ったり、画像を大量に描いたり、
なんとなく難しそうで作ったことがないという人も多いと思います。

実はphotoshopひとつあれば比較的簡単な方法で
ショートアニメを作れてしまいます。
今回はphotoshopで作るGIFアニメの
基本的な作り方と便利機能をご紹介します。
GIFアニメは、Webブラウザなどで表示できる動画の一つです。
複数の静止画をアニメーションのコマ（フレーム）のように順番に表示することで、
画像が動いているように見せているんです。
※photoshopのバージョンはCS5を使用しています。

基本的な作り方

フレームの作り方

まずはphotoshopで異なる画像を複数作っておきます。
グループで分けておくことも可能ですが、
まずは1つの動きにつき1レイヤーで用意しておきましょう。

次に「ウィンドウ」から「アニメーションウィンドウ」を表示させます。
※ccでは「ウィンドウ」から「タイムライン」。
選択でフレームアニメーション。
まずは「フレームアニメーション」に設定しましょう。
ウィンドウに画像が表示されるのでわかりやすいです。

アニメーションウィンドウで、レイヤーごとに新しいフレームを作ります。
このときレイヤー1つにつき、その都度フレームを追加するようにします。
フレームを作ることでレイヤーを順番に表示できるようになります。
ウィンドウにある「選択したフレームを複製」を
クリックして新しいフレームを作ります。

プレビューの仕方

フレーム作り終えたら実際にどのように動くか確認しましょう。
アニメーションウィンドの下にある
「アニメーションを再生」をクリックします。
アニメーションを繰り返し表示したいときは「無限」に変更します。

書き出し方

サイズが重くならないよう、「Webおよびデバイス用で保存」から保存します。
GIFアニメを保存するときはループオプションを確認しておきましょう。
アニメをくり返したいときは「無限」に変更してから保存します。

作業効率をあげるポイント

レイヤーからフレームを一括作成する方法です。
レイヤーが多いとフレームを作るだけで一苦労です。
こんなとき一括でフレームを作れる機能があります。
右上メニューから「レイヤーごとにフレームを作成」を選択します。
※ccでは「レイヤーからフレームを作成」で一括フレーム作成します。

 

途中でレイヤーを追加するときに気をつけること

フレーム作っている途中で新しいレイヤーを追加したいときがあります。
こんなとき陥りやすいのがすべてのフレームに追加画像が表示されてしまうことです。
多くは右上メニューにある「全てのフレームで表示される新規レイヤー」にチェックが入っているので外します。
また、レイヤーを作るときもフレームを作ってからレイヤーを作るように注意します。

 

応用！トゥイーンをつかって自動で動きをつける

自分で1フレームごとに画像を用意するのが大変という人に、
なんと自動で動きを作ってくれる機能があります。
メニュー下の「アニメーションフレームをトゥイーン」という機能です。
※ccでは「トゥイーン」と呼んでいます。 これは2つのフレーム間を自動で補ってくれる機能です。
例えば右から左への動きをつけたいとき、始め位置と終わり位置の画像だけあれば
自動で間の動きを作ってくれるのです。

トゥイーンにも3種類の効果があります。

位置　始め位置と終わり位置が違う時その間の動きを補う

不透明度　始めと終わりの間を不透明度をかえながら補う

効果　レイヤーにはレイヤー効果という効果があります。この効果に対して補間します。

 

注意点

フレームの枚数と容量です。
何百枚もの画像をGIFアニメにするとWebにあげられる容量の限度を超えてしまいます。
自分のパソコンでスムーズに見れていても容量には注意しましょう。

まとめ

いかかでしたか？
photoshopだけでもアニメを作るのに十分な機能が備わっています。
画像を作りながら動きをつけられるので、作業がスムーズです。

最近はtwitterが対応可能になったりと活躍の場所も増えています。
効果的に情報を発信する手段として取り入れてみてはいかがでしょうか。