連続写真 or ビデオからアニメーションGIFの作成

ゴール

スマホで撮影した動画データをPhotoshopを用いてアニメーションGIFヘ変換する方法を習得する

hr.icon

チュートリアルで学ぶ

教材

作成方法

上記チュートリアルでは連続写真を素材としているが、本授業内ではチュートリアルの写真データを映像データ（mp4）に変換したもの（下記URLからDL）を利用する。

方法については、チュートリアルの「①連続写真を読み込む」の「オプション：ビデオを読み込む」を参照。

手順補足

ビデオファイルの場合、「ファイル > 読み込み > ビデオフレームからレイヤー」を選択

https://gyazo.com/c04acd121e31e43893c6fb57772b25d8

GIFアニメーションはウェブ上で用いられるためできるだけファイルサイズを軽量にする必要があり、ビデオが長い場合は短く調整する必要がある。

長尺動画の場合はYouTubeなどにアップロードして埋め込む方法が一般的であり、GIFアニメーションとの使い分けを行う。

サムネイル下のIN/OUTアイコンをドラッグして短く設定

頻度制限でフレームを間引くこともできる

また、「フレームアニメーションを作成」にチェックを入れることで、アニメーションGIFに書き出す下準備が整う。

あとは連続写真と同じ方法で書き出す

完成見本

https://gyazo.com/920b7dc9a6e43ea8b6643d960f47fdf9

hr.icon

オリジナルアニメーションGIFの作成

スマホ等を利用して動画撮影

Photoshopを利用してアニメーションGIFへ変換

hr.icon

提出

提出用Scrapboxへアップロード

hr.icon