TORAT
Photoshopで滑らかに動くGIFアニメーションを作りたいけど、画像を大量に作ったり、レイヤーの位置も微調整したり、めんどくさいのでは？と思ったことはありませんか？
今回はそんな時に使えるPhotoshopのトゥイーン機能を紹介します。
トゥイーン機能を使うとアニメーションの開始と終了の位置を設定するだけで、中間のフレームを自動で生成してくれるので、簡単に滑らかなアニメーションが作成できるとても便利な機能です！
例えばこんな感じで、滑らかな動きのアニメーションが作れます↓↓
ではこのような動きのアニメーションを作るにはどうしたらいいのか、画像付きで説明していきます。
1.まずは画像を準備
背景の写真と動かしたいスーパーマンの画像を用意します。切り抜きが必要な場合は切り抜いておいて下さい。
2.ウインドウからタイムラインを選択
3.フレームアニメーションを作成を選択
タイムラインウインドウが表示されるので、フレームアニメーションを作成を選択し、クリックして下さい。
4.動かしたいレイヤーの開始位置を設定
スーパーマンのレイヤーを最初に表示したい位置に移動させます。
タイムラインウインドウのフレームの下の部分(黄枠部分)で秒数を指定することが出来ます。初期設定は0秒になっているので、今回は0.1秒に変更します。お好みの秒数に変更可能です。
5.動かしたいレイヤーの終了位置を設定
①まずフレーム複製ボタンをクリックしてフレームを複製します。
②フレームが追加されるので、クリックで選択します。
③動かしたいレイヤーを最終の表示位置に移動させます。
6.トゥイーンウインドウを表示させる
④トゥイーンボタンをクリックします。
⑤トゥイーンウインドウが表示されるので、前のフレームを選択し、追加するフレームの数を入れます。今回は10で設定しています。
⑥OKをクリックします。
7.中間フレームが自動で生成される
開始と終了のフレームの間に10コマフレームが追加されました。(赤枠部分)
開始と終了までの動きを自動で補完してくれています。
黄色の枠で囲った部分でアニメーションループのループ設定ができます。今回は無限で設定したので、無限ループで表示されます。
8.Web用に保存し完成！！
メニューバーからファイルを選択し、Web用に保存を選択します。
拡張子はGIFを選択し、ループオプションは無限になっているのを確認します。もしループオプションを変更したい場合はここで変更可能です。
最後に保存をクリックで完成です。
ボタン一つで簡単に滑らかなアニメーションを作ることが出来ました。とても便利な機能ですね！
今回はトゥイーン機能を使って滑らかに動くアニメーションの基本的な作り方を紹介しました。
このように GIFアニメーションは簡単にPhotoshopで作ることが出来て、面白いので興味がある方はぜひチャレンジしてみてください！！
