illustratorで素材を作る（別で用意しても勿論OK)
元の画像を作成→アートボードをコピーして→動きを確認
大きさは縦横300×300
ctrl+shift+v で全く同じものの複製ができる。
Photoshopでアニメーションにする
参照→ファイルを選択（素材を準備）→OK
ウィンドウパネル→タイムライン→フレームアニメーションを作成を選択→クリック
基本デフォルトは０秒（個別で指定することで動きがつく）
↓全てのレイヤーが１つにまとまったら右端の線からレイヤーからフレームを作成を選択
shiftキーで全選択可能
＋で複製が可能
◎保存先
「GIFにする場合」
ファイル→書き出し→Web用に保存→GIFで保存
「MP4にする場合」
ファイル→書き出し→ビデオをレンダリング→フォルダを選択→ファイルを指定→レンダリング
◎tween
アニメーションの開始点と終了点を指定するだけで間のフレームを自動で生成してくれる機能。
背景画像と動かしたい素材を用意
ウィンドウパネル→タイムラインパネル→フレームアニメーションを作成
フレームを複製→2枚目（終了点）を作成→アニメーションフレームをトゥイーン→追加するフレームの枚数を選択→1枚目と2枚目の間にフレームが作られる
ぼやけたように見せるには
向きが逆の画像を用意する1枚目（右向き：開始点）と2枚目（左向き：終了点）
→開始点のレイヤーで片方を非表示（仮に左向きの方を選択したとして）にした状態でトゥイーンを選択→フレームが作られる→終了点のフレームで先ほどと反対に、左向きを表示して右向きを非表示にする。
◎動き・リズムをつける
例）右端から動かした画像を途中で反転させて左向きで反対方向に動くようにする
※ワードプレスに投稿する時は画像をフルサイズにしないとGIFは動かない。
コメント