2016年06月06日

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


 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]

photoshop_render01.png


 [Render Video]ウインドウが開きます。

① [Select Folder]をクリックして保存するフォルダを作成します。(今回はデスクトップに[DDD]というフォルダを作成

② [File Options]の[Image Sequence]で[PNG](またはJPG)を選択

③ [Size]で[Custom]を選び、出力する画像のサイズを入力。(アスペクト比に連動しないので、自分で計算します。)

④ [Render]をクリック。
 この設定では、[DDD]というフォルダに横272px 縦400pxのスライドがPNG形式で全て出力されます。

photoshop_render02.png


PNGアニメーションの作成

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

スライドを保存したフォルダ(「DDD」)を開きます。

① フォルダ内の画像を全選択([Ctrl]+[A])。「APNG Assembler」の窓にドロップします。

② 作成するファイルの名前、保存場所を決めます。変更しなければ[APNG Assembler]のフォルダ内に作成されます。

③ [Make Animated PNG]をクリック。

APNG_Assembler001.png


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

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

【PNGアニメーション】
(IExplore、Google Chromeでは静止画像として表示されます。Firefoxでご覧下さい。)

Violin PNG Animation


【GIFアニメーション】

violin GIF Animation


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

  44


posted by ネコ師 at 00:18| Comment(0) | apngアニメーションの作り方 | 更新情報をチェックする
この記事へのコメント
コメントを書く
コチラをクリックしてください