Webデザイン記事

GIFで動く蝶を作ってみた。

2024/01/15

GIFで動く蝶を作った。

1 蝶のパーツを各々切って各レイヤーに入れる

モーションGIFを作る方法

2 切り抜き方は「多角形ツール」

モーションGIFを作る方法2

3 ①胴体、②羽全部(右・左)、③羽半分(右・左)にする

 

モーションGIFの作り方 蝶

4 ウインドー ー タイムラインで下に時間の流れを作る。

モーションギフの作り方 4

5 右側の👁(目)印の物がタイムラインに反映する。(全羽)

6 右側の👁(目)印の物がタイムラインに反映する。(半羽)

7 各レイヤーが表示される時間の秒数を設定する。
秒数の設定が出来たら、再生して上手く羽が開いて見えるかどうか確認する。

8 加工が終わったら GIF形式で書き出す

9 保存したGIF形式の蝶をメディアにアップし、サイトに張り付けると動きのある画像
(モーションGIF)が稼働する。

-Webデザイン記事