見出し画像

PhotoshopでAPNGやWebPアニメーションを作ろう

Photoshopのタイムライン機能を使ってアニメーションを作成し、APNGやWebPアニメーションとして書き出す方法についてご紹介します。


サンプルファイル

サンプルファイルはこちらからダウンロードできます。

タイムラインパネル

「m_logo.psd」をPhotoshopで開き、メニューバーの「ウィンドウ」から「タイムライン」をクリックして、タイムラインパネルを表示します。


下向き矢印をクリックし、プルダウンメニューから「ビデオタイムラインを作成」を選択します。

矢印の左側にある「ビデオタイムラインを作成」ボタンをクリックします。

レイヤーごとに、タイムラインが作成されます。

今回は3秒間のアニメーションを作成するので、
「ワークエリアの終了時間」を「03:00」に合わせます。

それぞれのレイヤーのタイムラインも「03:00」に合わせます。

拡大縮小のアニメーション

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

「変形」の左にある「キーフレームアニメーションを有効にする」ボタン(ストップウォッチのアイコン)をクリックします。
※「変形」「不透明度」「スタイル」が表示されない場合は、レイヤーがスマートオブジェクトになっている確認してください。

タイムラインにキーフレームが追加されます。

①「時間インジケーター」を右にドラッグして00:10まで動かし、
②「再生ヘッドでキーフレームを追加または削除」(ダイヤのアイコン)をクリックします。

①「時間インジケーター」を左にドラッグして00:05まで動かし、
②「再生ヘッドでキーフレームを追加または削除」(ダイヤのアイコン)をクリックします。

「時間インジケーター」が00:05にある状態で、「sparkle」レイヤーを選択し、「編集」→「自由変形」をクリックします

①オプションバーで「縦横比を固定」をONにして
②Wに「200%」と入力し、
③「変形を確定」をクリックします。

「再生」ボタンを押して確認します。


キラキラマークが、100%から200%に拡大し、100%の大きさに戻るというアニメーションを作成することができました。

この動きをもう1回繰り返すために、
①3つのキーフレームを選択し、
②「タイムライン」パネルの右上にある「≡」ボタンをクリックします。

パネルメニューから「キーフレーム」→「コピー」をクリックします。

①「時間インジケーター」を01:00に合わせ、
②「タイムライン」パネルのパネルメニューから「キーフレーム」→「ペースト」をクリックします。

これで「sparkle」レイヤーの作業は完了です。

キラキラが3秒間に2回点滅します

回転のアニメーション

①「時間インジケーター」を00:00に合わせ、
②タイムラインパネルの「circle」レイヤーの「変形」の左にある「キーフレームアニメーションを有効にする」ボタン(ストップウォッチのアイコン)をクリックし、キーフレームを追加します。

「時間インジケーター」を02:29に合わせ、「再生ヘッドでキーフレームを追加または削除」(ダイヤのアイコン)をクリックします。

「編集」→「自由変形」をクリックし、オプションバーで「回転」に「90」と入力し、「変形を確定」をクリックします。

これで「circle」レイヤーの作業は完了です。

周りの文字部分が3秒間に90°回転します。

グラデーションのアニメーション

タイムラインパネルの、「M」レイヤーの「スタイル」の「00:00」「01:00」「02:00」「02:29」にキーフレームを追加します。

「時間インジケーター」を01:00に合わせ、レイヤーパネルの「M」の「グラデーションオーバーレイ」をダブルクリックします。

グラデーションオーバーレイの3つ分岐点の色を、それぞれ変更します。
位置0:#f4bfaf(オレンジ色)
位置50:#ec8fa6(ピンク色)
位置100:#7c5a9f(紫色)

「時間インジケーター」を02:00に合わせ、同様にグラデーションの色を変更します。
位置0:#ec8fa6(ピンク色)
位置50:#7c5a9f(紫色)
位置100:#f4bfaf(オレンジ色)

これで「M」レイヤーの作業は完了です。

グラデーションが変化します。

連番静止画の書き出し

Photoshopから直接APNGやWebPアニメーションを書き出すことはできないので、静止画のPNG画像を連番で書き出し、後述の「アニメ画像に変換する君」というアプリケーションを使って変換する、という方法で作業します。

①「レイヤー」パネルで、「背景」レイヤーを非表示にします。
②「ファイル」メニュー→「書き出し」→「ビデオをレンダリング」をクリックします

Photoshop画像シーケンス
形式:PNG
アルファチャンネル:ストレート-マットなし
「レンダリング」をクリックします。

全90枚の連番の透過PNGが書き出される

APNG、WebPアニメーションに変換する

書き出した連番の静止画を、アニメーションに変換するため、「アニメ画像に変換する君」を起動します。

アニメ画像に変換する君

※「アニメ画像に変換する君」は株式会社ICSさんが無償で提供してくれている、APNGとWebP形式のアニメーション画像が作成可能なデスクトップアプリケーションです。 Windows 10以降とmacOS 10.9以降で利用できます。
ダウンロードページ: [Mac App Store] [ Microsoft Store (Windows用)]

①用途を「Webページ用アニメーション」にし、
②「画質設定」をクリックし、
③「APNGファイル出力」「WebPファイル出力」にチェックを入れ、
④「ファイルを選択」から先ほど書き出した90枚のPNGを選択します。

「アニメ画像を保存する」をクリックし、任意の場所を選択し、任意の名前を入力して「保存」をクリックします。

APNG(PNGアニメーション)、WebPアニメーションを書き出すことができました。

背景を透明にしているので、Webページで背景画像の上に表示しても綺麗に表示されます。
(アニメーションGIFは半透明の表現ができないので、ロゴの周り白いジャギジャギが表示されます)

上記スクリーンショットだと違いが分かりにくいと思うので、アニメーションGIF、APNG、WebPアニメーションを並べて表示したデモページでご確認ください。
デモページを見る

まとめ


フルカラーで透過もできるAPNGとWebPアニメーションは、GIFアニメーションに置き換わる新世代のアニメーション画像形式と言われています。
今回は手軽に使えるPhootshopを使って連番の静止画画像を書き出しましたが、After Effects等から書き出した静止画画像からでも、「アニメ画像に変換する君」を使ってAPNGやWebPアニメーションを作成することができます。

補足

#朝までフォトショ

この記事は、2023-06-23(金)開催の「#朝までフォトショ」の補足記事として書きました。


フレームアニメーションや、シネマグラフの作り方は以下の動画をご覧ください。

フレームアニメーションの作り方動画

シネマグラフの作り方動画


この記事が参加している募集

この記事が気に入ったらサポートをしてみませんか?