ブログに貼れる GIF動画の作り方 Photoshop

フルタニ

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

ブログに動画を貼り付けたくなった時便利なのがYouTube。

リンクを貼り付けるだけでブログに動画を表示することができます。

ブログに貼れる GIF動画の作り方

手間はかけてくない人にとっては、リンクではなく、写真のように貼り付けられる Gif動画 や Tiff動画 が便利です。

これは先日After EffectsでつくったGIFアニメーションの動画です。

これでサイズは1MBもありません。メールに添付して送信もできます。

GIF動画 はPhotoshopを使って作れます。

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

GIF画像をGIFアニメーションにするフリーソフトはいくつかあります。

今回は定番のPhotoshopを使って動画ファイルにします。

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

PhotoshopでGIFアニメーションにする方法は連続写真をGIFアニメーションにする時などにも使えます。

まずGIFアニメーションにしたい、ファイル名が連番になったGIF画像を用意します。

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

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

GIF動画
[レイヤーを読み込む]のパネルが表示されます。パネルをクリックします。

[参照]をクリックして

動画にしたい連番GIF画像をShiftキーを押しながらすべてクリックするして全選択します。

連番ファイルが読み込まれます。

確認して[OK]を押します。

すると、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動画 圧縮

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

Optimize animated GIF

GIF動画 まとめ

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

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

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

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

Premiereで GIF動画 を作る方法

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

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

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

独立して稼げる動画クリエイターを目指すなら​映像制作と実務案件を通して学べるスクールがあります

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