WordPressにも直接貼れる GIF動画 の作り方 Photoshop

フルタニ
こんにちは、フルタニです。放送局で番組作りをしてました。GIF動画 の作り方を書きます。

つくった動画の公開場所はYouTubeしかないと思ってはいませんか。それは大きな誤解です。作品によっては一枚絵の集まりである Gif動画 や Tiff動画 で公開できる場合もあります。利点はメールに添付して送れるくらい軽いこと。

下記のようにWordPressの記事画面に張り付けることだって可能です。

これは先日After Effectsでつくったテキストアニメーション動画です。これでサイズは1MBもありません。

連番で書き出したGif画像をPhotoshopを使って動画ファイルにする方法をご案内します。

Photoshopを使って GIF動画 にする方法

動画を連番のGIF画像にします。gif画像をgifアニメーションにするフリーソフトはいくつかありますが、今回は定番のPhotoshopを使って動画ファイルにします。

After
After Effects は直接背景が透明なGIF動画を書き出すことはできません。遠回りですが、いったんQuicktimeの動画(RGB+アルファ、合成チャンネルマットあり)にしたものを、Photoshopで読みこんで連番静止画をつくり、その連番静止画をPhotoshopで改めてGIF動画にするという方法で行います。

連続写真をアニメーションにする時などにも使える技なので覚えておいて損はありません。

まず、連番になったGIF動画をもとにGIF動画を作る方法です。

連番のGIF画像のレイヤー化

連番になったGIF画像を用意します。

GIF動画

Photoshopから[スクリプト][ファイルをレイヤーとして読み込み]と進みます。

動画にしたい連番GIF画像をShiftキーを押しながらすべてのファイルをクリックすると全選択されます。

すると、Photoshopが連番のGIF画像を作り始めます。瞬時にというわけではなくやや時間がかかります。

作業が終わったところを見計らって、[ウィンドウ][タイムライン]をクリックすると、Photoshopの画面下部にタイムラインが出現します。

パネルの中央にある矢印ボタンをクリックし[フレームアニメーションを作成]を選択するとタイムラインにアイコンが一つ出現します。

これはレイヤーパネル内のすべてのレイヤーがアニメーションの個別フレームに変換されたことを意味します。

タイムラインパネルの右下にあるサンドイッチのようなアイコンは再生ボタンです。この再生ボタンをクリックして、[レイヤーからフレームを作成]を選択します。

タイムラインパネルの下にあるループオプションメニューから[無限]を選択します。これでアニメーションがループします。

別途作成したGIF画像を GIF動画 にする際の注意点

GIF画像を動画化する時何回か失敗した事案です。解決策をまとめました。

新規にGIFを読み取る場合
連番GIFファイルを新規に読み取る場合は、①タイムラインを表示する。②スクリプト読み込みから参照をクリックしGIFファイルを全選択する。③読み込みが始まる。かなり時間がかかるので注意。④[フレームアニメーションを作成]ボタンをクリックする。⑤タイムラインウィンドウにGIF画像が一個だけ表示される。⑥操作ボタンから[レイヤーからフレームを作成]を選択する。⑦[フレームを入れ替え]をクリックする。⑧書き出し~web用に保存を選択する

特に注意するのが[レイヤーからフレームを作成]を抜かしてしまう点です。この手順を踏まないと動画制作に必要な画像をフレームにすることができません。また、フレームを入れ替えを選択しないと逆再生になります。

Web用に保存

[ファイル][書き出し][Web用に保存]を選択するとプリセットメニューが出現します。

設定を変更する点は4つあります。

  1. プリセットメニューから「GIF 128ディザ」を選択。
  2. カラーメニューから「256」を選択。
  3. GIFをオンラインで使用するなど、アニメーションのファイルサイズを小さくしたい場合は、画像サイズの幅と高さのフィールドを変更します。
  4. ループオプションメニューから「無限」を選択。

問題がなければ保存を押せば完了です。

書き出しウィンドウの左下にある「プレビュー」ボタンをクリックして、webブラウザーでGIFをプレビューします。

逆方向に再生される場合は、タイムラインのメニューアイコンをクリックして、「フレームを入れ替え」を選択します。

After Effects からQuicktimeに書き出した場合

GIF動画の作り方
After Effects でいったんQuicktimeの動画(RGB+アルファ、合成チャンネルマットあり)にしたものを、Photoshopで読む場合はこの工程からスタートします。QuicktimeファイルをPhotoshopに読み込ませ。「WEB様に保存」のポップアップを開いて、プリセットをGIFに変更。「保存」でGIFアニメーション書き出しの完了です。

Photoshopを起動しQuickTimeファイルを読み込みます。

読み込んだ動画データをGIF動画に変換するためいったんWeb用に変換します。

静止画を変換したのと同じ画面が出てきます。同様に作業を進めます。

動画から変換するため、絵の順番は逆転していません。

完成した動画ファイルはGIF形式なのでWordPressなどに直接貼り付けることができます。

GIF動画 まとめ

日頃Photoshopを使う仕事をしているので、自分がやりやすい方法をご紹介しました>

GIFに無料で変換する方法は何通りかあります。自分がやりやすい方法を選びましょう。

フリーソフトで GIF動画 を作る方法

フリーで簡単に作成・編集できるGIFアニメ制作アプリ・ツール4選 | ワードプレステーマTCD

Premiereで GIF動画 を作る方法

【簡単!】Adobe Premiere Proで少し凝ったGIFを作成する方法 | MotionElements

Animateを使った GIF動画 の作り方はこちら

Adobe AnimaiteによるGIFアニメーション作成 | デザイン探索 | AliveCastスタッフブログ

デザイナーがすすめる動画編集スクール6選 | ぶいろぐ

動画制作のスキルを手に入れたい人に




ABOUTこの記事をかいた人

元テレビ番組制作者。再就職→窓際→WEBコンテンツ制作で復活。64歳にして動画制作に自分の価値を見いだしました。目指すのは地域に根ざした"伝える系"の動画制作です。スキルアップと感謝の気持ちを持ちながら楽しく生きていきます。編集のお手伝いも始める予定です。