AviUtlとPhotoshopでGif動画を作ってみた

ほーせんか@電猫遊戯

Steamページを作る際、最近はみんな説明欄にGif動画を載せるのがトレンドになっているようです。

文字と一緒に画面の動きを見せられるので、とても有効な手法だと思います。
そんなGif動画、Photoshopを使えば動画を綺麗にGif動画に変換することができます。

以下は私が作ったGif動画を使った宣伝ツイートです。

結構綺麗にできてるでしょう？
それでは作り方と、設定のポイントをまとめていきます。

Gifにしたい動画の作成

  • 先ずはAviUtlでGifにしたい動画を作ります

    • 時間の長さは5秒～10秒程度が望ましい

    • 画面サイズはこの時点で、作りたいgif動画に近いものにしてください

      • サイズが大きい動画を使うと、変換処理がとても重くなります

    • Steamでよく使われる画面サイズが横幅616px、縦幅347pxです(横幅が616pxであれば縦幅は何でも良いっぽい)

      • AviUtlでは画面幅が2の倍数である必要があるので、便宜的に640x360で動画を作りました

        • 後ほどPhotoshop側でサイズ調整をします

    • 重要なのはfps設定

      • gif動画はフレーム間の感覚を0.01秒単位でしか調整できません

        • 0.01秒ならば100fps

        • 0.02秒ならば50fps

        • 0.03秒ならば33.3fps

        • 0.04秒ならば25fps

      • 100or50or25or20の中から選択することになると思います

      • 作る動画の長さと容量次第ではある

        • 6秒程度なら、50fpsで圧縮設定次第では10MB程度に収まります

        • 2秒とか短いならば100fpsもアリ？

        • 分からなかったらとりあえず50fpsで作ってみましょう

    • mp4ファイルとして動画を出力します

Photoshopで作った動画を読み込む

  • Photoshopで作ったmp4を読み込みます

    • 普通に動画ファイルとして読み込まれます

    • webで出力を選択

      • 圧縮設定とリサイズが可能

        • steamページによく使われるサイズ、616x347に変更

        • 圧縮設定について

  • Gifとして出力する

出力したGifファイルをもう一度Photoshopで読み込みなおす

  • Photoshopで作ったGifファイルを読み込みます

    • するとパラパラ漫画のように、フレーム画像が1枚1枚並んでるのが見えます

  • フレーム間隔の調整を行います

    • 画像を一括選択し、間隔の設定を行います

    • 動画で設定したfps値によって、間隔の秒数は変わります

      • 100fpsなら、0.01秒

      • 50fpsなら、0.02秒

      • 33fpsなら、0.03秒

      • 25fpsなら、0.04秒

      • 20FPSなら、0.05秒

  • 最後にもう一度Gifとして出力しなおして完成です

あとがき

今までWebでの変換ツールを使っていたのですが、細かいFPS調整や画像の圧縮が自動で行われてしまい、少し不便だなーと思っていました。
Photoshopが動画からGif動画への変換までやってくれるならば、綺麗で高FPSのGifを最適な圧縮で出力できるので、とても有用だと思います。
ゲーム制作者でPhotoshopを持ってる人はそこそこ多いと思うので、あなたのSteamページを華やかにする一助になれば幸いです。

参考文献


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