【Photoshop】アニメーション画像を作ってみよう！（APNG・WebP）【後編・書き出しまで】

2024.12.23

WEB

Webデザイン

前編では、Photoshopのタイムライン機能を使って、ツリー上のスターの飾りを拡大・縮小する方法をご紹介しました。
APNG・WebPアニメーションについても下記ブログで解説しています。
【Photoshop】アニメーション画像を作ってみよう！（APNG・WebP）【前編】

続いて中編では、ツリーを飾るオーナメントを点滅させる方法をご紹介しました。
【Photoshop】アニメーション画像を作ってみよう！（APNG・WebP）【中編】

前回までに作成したアニメーション

今回は完結編ということで、ツリー周辺のサークル状テキストをぐるっと回転させ、完成としたいと思います。
また後半では、作成したアニメーションをAPNG・WebPにする方法をご紹介しますので、ぜひご覧ください。

最終形態

INDEX

前回までに作成したデータを確認

前回作成したPSDデータを確認してみます。

Photoshopやlllustratorで各パーツを作成し、パーツごとにスマートオブジェクト化してあります。
（アニメーションを付与するには、それぞれのレイヤーがスマートオブジェクトである必要があります）

それぞれわかりやすいよう、素材ごとに名前をつけてあります。

サークルパーツを作成するコツは、このあとパーツを3秒間に90°回転させるため、90°の間に1センテンスの要素を入れ込むことです。
こうすることで、連続したアニメーションになったときに、シームレスに繋がっているように見えます。

タイムラインパネルが閉じてしまっている場合は、上部メニューバー「ウィンドウ」から、「タイムライン」をクリックして、タイムラインパネルを開きます。

タイムラインパネルが開きますので、「ビデオタイムラインを作成」をクリックします。

「スター」「オーナメント」それぞれのパーツに、前回までのブログでご紹介した

が付与されていれば問題ありません。

今回は「サークル」のパーツにアニメーションを加えていきます。

サークル状に作成したテキストのパーツを、3秒間に90°回転させる、というアニメーションをつけようと思います。

まず、時間インジケーター（青い下向き矢印）を『00:00（0秒10フレーム）』の位置まで持ってきておきます。

タイムラインパネルの、「サークル」レイヤーの右向き矢印をクリックし、設定エリアを展開します。

展開した中の「変形」の左にある、ストップウォッチのアイコンをクリックします（赤枠）。
タイムラインにキーフレーム（黄色いひし形）が追加されたのが確認できるはずです（白丸）。

ここがアニメーションの起点となります。

時間インジケーターを、タイムラインの端『02:29（2秒29フレーム）』までグイっと移動させます（黄丸）。そして、ストップウォッチ左側にある、ひし形のアイコンをクリックします（赤枠）。
タイムライン上の『02:29（2秒29フレーム）』の位置に、キーフレーム（黄色いひし形）が追加されます（白丸）。

ここに、パーツを90°回転させるアニメーションを付与します。

時間インジケーターを『02:29（2秒29フレーム）』に置いたまま、上部メニューバーから「編集」⇒「自由変形」をクリックします（または[ctrl]+[T]）。

オプションバーにて、①角度の欄に、「-90°」と入力します。（今回は反時計回りに回転させたいためです。ここで「90°」と入力すると時計回りに回転します。）

②「変形を確定（〇マーク）」をクリックします。

これで、“時間インジケーターが『02:29（2秒29フレーム）』にあるとき、サークル状のパーツが90°回転する”というアニメーションができました。
タイムラインパネルの『再生』ボタンを押下し、今の状態を確認してみましょう。

サークルパーツが回転していれば完了です。