PNGアニメーションの作り方(Photoshop編)

apngアニメーションの作り方

 PNGアニメーションに対し注目が集まっているようです。やはり、iOS8がPNGアニメーションに対応したことで、スマホやタブレットでもPNGアニメーションを見ることができるようになったのが大きな要因でしょう。ただし、IExploreやGoogle Chromeは未だPNGアニメーションに対応していないので、静止画像として表示されます。

 前回書いた「PNGアニメーションの作り方」では、三つのフリーソフト(apng制作ツール)を紹介しました。今日は、`Photoshopの場合を書きたいと思いますが、現時点では、Photoshop用のAPNG作成プラグインはないので、結局、上で紹介したソフトを使うことになります。

手順

 Photoshopできれいに作ったアニメーションもGIFアニメーションとして出力すると画質が激しく劣化します。色数が少ないGIFの宿命です。

 PNGアニメーション手順は以下の通りです。
1.まず、Photoshopで、アニメーションを作成します。
2.次に、アニメーションの全てのスライドをpng形式かjpg形式で出力します。
3.PNGアニメーション作成ソフトを使って、PNGアニメーションを作成します。
4.できあがったPNGアニメーションの拡張子を「apng」に変更してwebにアップロードします。
 

Photoshopからスライドを出力

 Photoshopで作ったアニメーションのスライドを出力するには、以下のようにします。

 [File] ⇒ [Export] ⇒ [Render Video]

 [Render Video]ウインドウが開きます。
① [Select Folder]をクリックして保存するフォルダを作成します。(今回はデスクトップに[DDD]というフォルダを作成
② [File Options]の[Image Sequence]で[PNG](またはJPG)を選択
③ [Size]で[Custom]を選び、出力する画像のサイズを入力。(アスペクト比に連動しないので、自分で計算します。)
④ [Render]をクリック。
 この設定では、[DDD]というフォルダに横272px 縦400pxのスライドがPNG形式で全て出力されます。

PNGアニメーションの作成

 今回はフリーソフト「APNG Assembler 2.9」を使います(過去記事『PNGアニメーションの作り方』参照)。

 「APNG Assembler 2.9」を起動します。
スライドを保存したフォルダ(「DDD」)を開きます。
① フォルダ内の画像を全選択([Ctrl]+[A])。「APNG Assembler」の窓にドロップします。
② 作成するファイルの名前、保存場所を決めます。変更しなければ[APNG Assembler]のフォルダ内に作成されます。
③ [Make Animated PNG]をクリック。

 できあがったアニメーションが下のものです。

 PNGアニメーションはサイズが大きくなります。1.97MBもあります。しかし、画質は美しい。拡大すると分かりますが、GIFアニメと比べると雲泥の差です(拡大しないと違いが分からない程度ですが)。

 ちなみに、GIFアニメとして出力すると、そのサイズは0.36MBでした。PNGアニメの方が5.5倍大きなファイルになっています。

PNGアニメーション

(IExplore、Google Chromeでは静止画像として表示されます。Firefoxでご覧下さい。)

Violin PNG Animation

GIFアニメーション

YouTube動画

 このサンプルで使っているものは、以前、『バイオリンを奏でる動く絵画』としてYoutubeにアップしたものです。