ブログに動画を貼り付けたくなった時便利なのがYouTube。
リンクを貼り付けるだけでブログに動画を表示することができます。
目次
ブログに貼れる GIF動画の作り方
手間はかけてくない人にとっては、リンクではなく、写真のように貼り付けられる Gif動画 や Tiff動画 が便利です。
これは先日After EffectsでつくったGIFアニメーションの動画です。
これでサイズは1MBもありません。メールに添付して送信もできます。
GIF動画 はPhotoshopを使って作れます。
WordPressにも直接貼れる GIF動画の作り方
GIF画像をGIFアニメーションにするフリーソフトはいくつかあります。
今回は定番のPhotoshopを使って動画ファイルにします。
PhotoshopでGIFアニメーションにする方法は連続写真をGIFアニメーションにする時などにも使えます。
まずGIFアニメーションにしたい、ファイル名が連番になったGIF画像を用意します。
連番のGIF画像のレイヤー化
Photoshopを起動し、[ファイル]から[スクリプト][ファイルをレイヤーとして読み込み]と進みます。
動画にしたい連番GIF画像をShiftキーを押しながらすべてクリックするして全選択します。
連番ファイルが読み込まれます。
確認して[OK]を押します。
すると、Photoshopのレイヤーが動き始め、レイヤーに連番のGIF画像が生成され始めます。
生成は一枚一秒程度で終了するにはかなり時間がかかります。
尚、作業が終了すると動作が止まるので、それを見計らって、[ウィンドウ][タイムライン]をクリックします。
すると、Photoshopの画面下部にタイムラインと書かれたパネルが出現します。
パネルの中央にある矢印ボタンをクリックし[フレームアニメーションを作成]を選択します。
すると枠が縮まりタイムラインにアイコンが一つ出現します。
これはレイヤーパネル内のすべてのレイヤーがアニメーションの個別フレームに変換されたことを意味します。
タイムラインの右上にあるメニューアイコンをクリックして[レイヤーからフレーム作成]をクリックします。
するとタイムラインに分割されたフレームが整列します。
並び順は逆になっているため、タイムラインの右上にあるメニューアイコンをクリックして[フレームを入れ替え]をクリックします。
アニメーションをループさせる設定にするためタイムラインパネルの下にあるループオプションメニューから[無限]を選択します。
最後にタイムラインの左下にある矢印マーク「ビデオをレンダリング」を押すと書き出し設定が開くので[レンダリング]をクリックすると動画が書き出されます。
別途作成したGIF画像を GIF動画 にする際の注意点
GIF画像を動画化する時何回か失敗した事案です。解決策をまとめました。
①タイムラインを表示する。
②スクリプト読み込みから参照をクリックしGIFファイルを全選択する。
③読み込みが始まる。かなり時間がかかるので注意。
④[フレームアニメーションを作成]ボタンをクリックする。
⑤タイムラインウィンドウにGIF画像が一個だけ表示される。
⑥操作ボタンから[レイヤーからフレームを作成]を選択する。
⑦[フレームを入れ替え]をクリックする。
⑧書き出し～web用に保存を選択する
特に注意するのが[レイヤーからフレームを作成]を抜かしてしまう点です。
この手順を踏まないと動画制作に必要な画像をフレームにすることができません。
また、[フレームを入れ替え]を選択しないと逆再生になります。
Web用に保存
設定を変更する点は4つあります。
- プリセットメニューから「GIF 128ディザ」を選択。
- カラーメニューから「256」を選択。
- GIFをオンラインで使用するなど、アニメーションのファイルサイズを小さくしたい場合は、画像サイズの幅と高さのフィールドを変更します。
- ループオプションメニューから「無限」を選択。
問題がなければ保存を押せば完了です。
書き出しウィンドウの左下にある「プレビュー」ボタンをクリックして、webブラウザーでGIFをプレビューします。
※逆方向に再生される場合は、タイムラインのメニューアイコンをクリックして、「フレームを入れ替え」を選択します。
After Effects からQuicktimeに書き出した場合
Photoshopを起動しQuickTimeファイルを読み込みます。
読み込んだ動画データをGIF動画に変換するためいったんWeb用に変換します。
静止画を変換したのと同じ画面が出てきます。同様に作業を進めます。
動画から変換するため、絵の順番は逆転していません。
完成した動画ファイルはGIF形式なのでWordPressなどに直接貼り付けることができます。
GIF動画 圧縮
比較的軽いGIFファイルはブログなどに貼り付けるとき重宝します。とはいってもできる限り軽量化した方がシステムに負荷をかけません。役に立つウェブツールがこちら。
GIF動画 まとめ
日頃Photoshopを使う仕事をしているので、自分がやりやすい方法をご紹介しました>
GIFに無料で変換する方法は何通りかあります。自分がやりやすい方法を選びましょう。
フリーソフトで GIF動画 を作る方法
フリーで簡単に作成・編集できるGIFアニメ制作アプリ・ツール4選 | ワードプレステーマTCD
Premiereで GIF動画 を作る方法
【簡単!】Adobe Premiere Proで少し凝ったGIFを作成する方法 | MotionElements
Animateを使った GIF動画 の作り方はこちら
Adobe AnimaiteによるGIFアニメーション作成 | デザイン探索 | AliveCastスタッフブログ
独立して稼げる動画クリエイターを目指すなら映像制作と実務案件を通して学べるスクールがあります
こんにちは、フルタニです。放送局で番組作りをしてました。 GIF動画の作り方 を書きます。