日曜日, 5月 15, 2022

PhotopeaでWebPアニメーションを簡単に作成(その3)

WebツールのPhotopeaで、現状はPhotoshopでも作成できないWebPアニメーションを簡単に作成する・・・その3です。


取りあえず1000×1000pixelの新規ファイルを作成します。

次にデフォルト登録されているグラデーションを任意選択し、放射状で塗りつぶします。

3つほどレイヤー別に作成したら、一番下の鍵マークをクリックしてロックを解除してからすべてのレイヤーを選択して・・・

フォルダーのアイコンをクリックしてグループ化します。フォルダー名は必ず[_a_]で始まるようにします。
次に640×480pixel程度の新規ファイルを作成し、1000×1000pixelで作成したファルダーをドラッグして埋め込みます。受け手ファイルのタグがブルー枠になったらShiftキーを押してマウスを放せばOKです。サイズが変更されずに受け手にフォルダーごと配置されます。
続けてフォルダーの複製を2つ作成し、それぞれのフォルダーの上2つのレイヤーの描画モードを[差の絶対値]とします。

あとは、2つめ、3つめのフォルダーのイメージが激変するように、それぞれのレイヤー位置を変更します。

640×480pixelに対して1000×1000pixelのデータを配置しているので、かなり思い切った調整が可能セです。

あとはGIFで書き出せば完了ですが、WebPでの書き出し結果もGIFと同等だったのでPNG(APNG)でも書き出してみました。個人的にはGIFの感じが面白いとおもいます。

GIFアニメ

WebPアニメ

PNG(APNG)アニメ
ブラウザーにドラッグすると再生できますが、普通に埋め込むと再生されません??? 設定(HTML)を学ばないと・・・。