PhotopeaでGifのスライド。

皆さん、こんにちは。

今回は、PhotopeaでGifのスライド。

最近は、無料でキャラクター作成、ティラノビルダーの使い方ページに時間を割いていましたが、その中で、Gif画像のアニメーションを勉強しました。

このサイトでも、VRoidstudioの表情変化などでスライドショーを使い機会が多いのですが、これまでは、Smart Slider 3を使っていました。

機能としては、何の不具合も有りませんが、どうしても取り込む画像の量が多くなると、メディアライブラリーがどんどん膨らんでしまいます。ご存じの方も、沢山いらっしゃると思いますが（今更ですみません）WordPressは1枚の画像を取り込むと、9枚の画像にして保存しています。

私は、画像圧縮の為にTinyPNG – JPEG, PNG & WebPをプラグインで使っていますが、月500枚まで無料の使用制限が有りました。

情報の世の中になって、ブログ等を書いてらっしゃる（私もそうです＞＜）皆さん、何か発信しなくてはとお考えと思います。其々の考えや思いが有るので、必ずは無いですが、このプラグインは、総じて圧縮率が高いと書かれていましたので、此方にしました。

現在は、サムネイル用の小さい画像は、圧縮しない様にしていますが、それでも元画像1枚で6枚圧縮されています。ですから月83枚以上画像を使うと、追加費用がかかる計算です。

スライドショーですと20枚ぐらいは、すぐにきてしまいますから、まぁまあ大変です。

PhotopeaのGIF形式は、アニメ―ッションのつなぎに効果を入れる事が出来ない仕様ですが、作り方はPhotoshopに比べると、覚える事が少なくて、簡単です！

実際の画像（スライドショー）を入れておきますから、こんな感じなら使ってみたいな！と思ったらお試し下さい。

１枚の画像は、600X252px、表示は全体の75％にしています。この状態で、サイズは、140KBです。

参考に、800X336pxでも、作ってみたのですが、218KBでした。

因みに、メディアライブラリーの保存されている1枚の画像（上記の分）でも、サイズは998X517pxで91KBでした。

GIF画像に使ったPNG画像（全体７枚）も1枚平均130KBでしたから、７枚ですと910KB、大分少なくなりました。

私感覚では有りますが、スライドは、画像が流れて行くのでキャラクターをじっくり見る感じではない事も利用出来る理由になると思います。

作成参考に、させて頂いたサイトは、此方です。大変有難うございます。

https://kaizu-blog.blogspot.com/2022/05/photopeawebp.html

では、早速始めてみます。

最初に製作する画面サイズは、適当で大丈夫です^^。最後に、GIF画像に統合する際に、決められます。

又、保存画像の形式も、皆さんが普通に保存しているJPG画像やPNG画像で大丈夫です。

只、最終的に、１枚の画像になりますので同じ大きさにしておく方が、イメージが掴みやすいと思います。

私は、最初に7枚同じ大きさの画像を作りました。

Photopeaを立ち上げたら、背景を同じサイズに作ってそれから残りを足していくのでも良いですが、面倒な様でしたら、先ず、1枚だけドラッグアンドペーストします。この時、この1枚だけのレイヤーの名前は、background になっています。

ドラッグアンドペーストする画像は、一番最初の画像にしておくと、後から変更しなくも良いので、便利だと思います。

次は、残りの6枚をまとめて、ドラッグアンドペーストしますが、GIF画像からスライドショーを作る為に、必ずファイルの名前の前に _a_ を付けて置く必要が有ります。（Photoshopでは、この作業は有りません）。ダウンロードしてからでも、変更は可能ですが、最初に変えてからダウンロードしても良いです。

どちらにしても、backgroundは、後から_a_ を付けないといけないのですが…💦。

後、画像を作る際に名前に番号入れておくと、自然に順番通りに並びますから便利です。小さい画像で見ていると少し分かり難いですし、出来上がってな違っていると面倒ですので…。

これで、7枚の画像が並びました。

そうしましたら、レイヤーの名前の所で、ダブルクリックすると、名前が変更出来ますので、先程の_a_を使用する全てのファイルに付けます。

色替え等の調整レイヤー使用も可能です。（_a_は不要です）

これで準備が出来ました。

①上段のファイルから、②別名で保存、③GIFと進みます。

別窓が開きますので、大きさ（幅を入力して、enterキーを押すと自動で変えてくれます）品質（100％で良いと思います）スピード（デモ画像が動いていますので、確認しながら決めて下さい）、問題無ければ、④保存します。これで、画像がダウンロードされます。

ダウンロードされた画像は、プレビューでも見る事は出来ますので、出来上がりを確認して下さい。

おつかれさまでした。