Photoshopのビデオタイムライン機能を使って回転するgifアニメを作ろう

※当サイトはアフィリエイト広告を利用しています

   

この記事は2020年11月24日に書かれたものです。
現在は内容が古い可能性もありますのでご注意ください。

先日こちらの記事で紹介した、ローディングアニメーションをつけるプラグイン。

ローディング画面にアニメーションを付けるWordPressプラグイン「Preloader」

この記事では、無料のローディング用アニメーションをダウンロードして使用しましたが、「オリジナルのアニメーション画像を使いたい」という場合もあると思います。

といっても、いきなり複雑なものを作るのは大変なので、まずは画像を回転させるだけのアニメーションを作ってみましょう。

Photoshopを使えば画像を簡単に、しかもなめらかに回転させることができます。

画像を用意する

まず、ローディングアニメーション用の画像を用意します。
回転させるのが目的なので、なるべく円形に近いものが良いですね。

今回はこちらの画像を使います。

 


この子はリモネといいます!

大きさは任意ですが、実際のローディング画面に表示するサイズよりも大きいほうがキレイに作れると思います。

タイムラインウィンドウ

Photoshopに画像を読み込んだら、「タイムラインウィンドウ」を表示させます(既に表示済みの場合は必要ありません)。
ツールバーの「ウィンドウ」で「タイムライン」にチェックを入れると、画面下部にタイムラインウィンドウが表示されます。

タイムラインウィンドウ

次にタイムラインウィンドウの中央のプルダウンで「ビデオタイムラインを作成」を選択→クリックします。

ビデオタイムラインを作成

アニメーションの秒数を決める

タイムラインウィンドウに新しいレイヤーが作成されたら、紫色の帯の右端をドラッグして、設定したい時間まで引っぱります。
今回は2秒にしました。

秒数を決める

 

アニメーションの作成

準備ができたら、レイヤーウィンドウの画像の上で右クリックして「スマートオブジェクトに変換」をクリックします。

スマートオブジェクトに変換

そしてタイムラインパネルのレイヤー名の横の右向きの「>」をクリックして、レイヤープロパティを表示します。

レイヤープロパティ

次にインジケーターが左端(0秒の部分)にあることを確認し、「変形」の左にあるストップウォッチのマークをクリック
すると黄色い菱形の「キーフレーム」が追加されます。

変形

続けて、ウィンドウの左下の時間が表示されている部分をダブルクリックすると時間設定ウィンドウが開くので、「0:00:01:00」と入力して「OK」をクリック。

時間設定

インジケーターが1秒の場所に移動するので、今度はストップウォッチの左にある黄色の菱形を1回クリックしてキーフレームを追加します。

黄色の菱形をクリック

同様にインジケーターを右端(2秒の場所)に移動させ、黄色の菱形を1回クリックしてキーフレームを追加します。

2分の位置にキーフレームを追加

キーフレームを3ヶ所追加したら、中間地点のキーフレームをクリックしてアクティブ(黄色)にします。

中間地点のキーフレームをクリック

そして、画像を「180°回転」させます。

180°回転

なんと、これでアニメーションの設定は完了です。
Photoshopによってフレームが補間され、画像が回転するようになりました!

画像が回転

gifへの書き出し

最後に、ローディングアニメーション用に書き出しをおこないます。

ツールバーから「ファイル書き出しWeb用に保存」を選択。

Web用に保存

「Web用に保存」ウィンドウが開くので「画像サイズ」の項目で書き出したいサイズを入力し、「保存」をクリックします。

Web用に保存ウィンドウ

そして、書き出したものがこちらです!
(こちらはブログ用に少し大きめに書き出しています)

アニメーション完成

通常gifアニメを作るときは細かくフレームを設定していくイメージがありますが、Photoshopならビデオタイムライン機能で間を補間してくれるので、とても簡単に作ることができます。

ぜひ試してみてください。