photoshopでトゥイーンアニメーションを作る

こんにちは!もちぽんです。

久々に夏風邪をひいてしまいました・・・。
冬に引く風邪より、夏にひく風邪の方がしんどいのはなぜでしょうか。
すっかり弱ってしまい、寄る年波をまざまざと感じてしまいました・・・。

さて、今回は時代逆行感は否めませんが、
photoshopでトゥイーンアニメーションを作る方法をご紹介です!
少ないレイヤーで簡単に動きのある画像を作成しちゃいましょう♪
割と知らない方が多いようなのでまとめてみました。
知らなかった方は是非お付き合いくださいませ。

スポンサーリンク

1)まず、ツールの「ウィンドウ」から「タイムライン」を選択します

2)そうしたら最下部にタイムライン画面が表示されますので、「フレームアニメーションを作成」を選択します

3)アニメーションさせたい画像を、レイヤーを分けて作成します。
今回はキラキラさせたいのでそんな感じでレイヤーを作成しました。

4)タイムラインの1番を選択した状態で、「選択したフレームを複製」をクリックします

5)タイムラインの2番目のレイヤー表示を、「きらきら小」のみにします

6)タイムラインの1番と2番目を選択した状態で「アニメーションフレームをトゥイーン」を
クリックします。クリック後のフレーム数は5を選択しました。

7)ばん!きらきら大~きらきら小までのアニメが自動で作成されました!

8)このままだと片側の動きしかできないので、戻り側のアニメーションを作成します。
7番のレイヤーを選択して「選択したフレームを複製」をクリックします
タイムライン8番が生成されます。

9)タイムライン8番のレイヤーを「きらきら大」のみが見える状態にします

10)どん!戻りのアニメーションが作成されました!
クリック後のフレーム数は5にしてます

11)このままだと動きが俊敏すぎて何が起こっているかわかりづらいので
秒数を調整します。全てのフレームを選択して、秒数をクリック。
デフォルトだと良い数字がなかったので、「その他」で任意の秒数をいれました。
今回は「0.05」にしました!

12)web用にGIFで書き出して出来上がりです☆

最近はjqueryなども進歩して、そちらでアニメーションすることも増えましたが
まだまだGIFアニメを使用することもありますので是非、機会があれば使ってみてくださいね!

スポンサーリンク