【Photoshop】Twitterでくじ引きのようなgifアニメーションの作り方

よくtwitterでみるgifアニメーションでタップすると停止する投稿の作り方は?

下記のようなタップすると止まるおみくじ形式!

これって、どうやって作ってるんだろうと思ったのですがとっても単純。Twitterは、gifアニメをアップロードすると自動的にクリックやタップした場所で停止する仕様なのです。
そう、Photoshopでサクッと作れますよ~!
詳しく書いているサイトがなかったのでメモ代わりに書いておきます。

1.photoshopのレイヤーにアニメーションしたい画像をおきます

絵を描いたらアニメーションしたい枚数だけレイヤーを作ります。このレイヤーがgifアニメーション1コマのアニメーションになります。

2.ウィンドウ→タイムライン→「フレームアニメーション」を選択

上部のメニューより、ウィンドウ→タイムライン→フレームアニメーションを選択してください。プルダウンをクリックすると出てきますよ。

3.タイムラインの右上の3本線のメニュー表示→「レイヤーからフレームを作成」を選択

これで、レイヤーが1コマのアニメーションになります。

4.最後にファイル→web用に保存(書き出し)→gifで保存

書き出した時点では、下記のようにただループしているだけで、クリックしてもなにも止まりません。





5.Twitterにアップロードします

運が良ければ石油王が50000兆円(5000兆円と間違えました笑)くれるくじ引きの出来上がり!

石油王のスタンプ他変なラインスタンプはこちら

LINEスタンプ購入





The following two tabs change content below.

嫁の方

代表取締役かぴのんスタジオ
株式会社かぴのんスタジオ夫婦の嫁のほう。 webのデザイン&イラスト&コーディングまでが得意なフリーランス。写真は田舎が大好き。富士山の樹海でよくキノコを追いかけています。 ご質問はこちら

ご質問はこちら