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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Web用に保存

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

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

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

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

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

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

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

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

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

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

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

GIF動画 圧縮

比較的軽いGIFファイルはブログなどに貼り付けるとき重宝します。とはいってもできる限り軽量化した方がシステムに負荷をかけません。役に立つウェブツールがこちら。

Optimize animated GIF

GIF動画 まとめ

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

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

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

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

Premiereで GIF動画 を作る方法

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

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

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

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