2016.3.03 (木曜日)
PhotoshopでスムーズなアニメーションGIFをつくる
以前「簡単!!!PhotoshopですぐにつくれるアニメーションGIF」という記事を書きました
この作り方だけだと、画像がカクカクしますよね、でもスムーズなアニメーションGifを作りたい!
今日はそんな時に便利な、動きをスムーズに見せる機能をご紹介します。
トゥイーンというエフェクト機能です。
FLASHでもよく使用される動的エフェクトですが、PhotoShop上タイムラインにもこのエフェクトがついており、とても便利です。
簡単に言えばA地点からB地点にオブジェクト(パーツ)をスムーズ移動させる機能になります。
トゥイーンの設定
1)始点パーツを置いたフレームと終点になるフレームをつくります。
2)始点パーツを置いたフレームを選択して上記の赤丸部分のトゥイーンボタンをクリックします。
3)この時点で設定するタイムライン(コマ)数や透明度などをうまく調整するとなめらかな動きになります。
スピード調整
また、各フレームの秒数を少なく設定すればスピード感がより増します。
ほぼ0に近い0.01秒のように設定することも可能ですが、主流のブラウザ間でもこのタイムレートの限界が異なり、0.01秒と設定してしまうとブラウザによっては0.1秒に強制的に修正され、プレビューされてしまうようです。
各ブラウザを考慮したフレームレート速度の限界は0.06と言われています。
などなどを踏まえて↓のような動きになりました。

フレーム数等を細かく計算していないので、ちょっとぎこちない動きにも見えますが、大分スムーズですよね。
オブジェクトの影などを工夫すると更に “っぽく” 見えたのかもしれません。
※GIFなので、グラデーションやドロップシャドウはほどほどでw
色々と工夫して、試して見て下さい!