![](http://about-adobe.com/wp-content/uploads/2022/07/赤ちゃんのフリーアイコン9.png)
PhotoshopでGifアニメーション作りたいんだけどできる?
できますよ!
![](http://about-adobe.com/wp-content/uploads/2022/07/社長のアイコン.png)
この記事ではPhotoshopを使ったGifアニメーションの作成方法を書いていきたいと思います。
記事の内容
- Photoshopで動画をGifに変換する方法
- PhotoshopでイラストをアニメーションGifにする方法
Photoshopを使ってGifアニメーションを作成する方法を考えている人は参考にしてみてください。
PhotoshopでGifアニメーション作っていきましょう。
![](http://about-adobe.com/wp-content/uploads/2022/07/社長のアイコン.png)
Photoshopで動画をGifに変換する方法
もしも既にGifにしたい動画があるのならこちらの方法を試してみてください。
-
-
Photoshopで動画をGIFに変換する方法2選
2022/11/12
この記事ではPhotoshopで動画をGIFに変換するっていうことをやっていきます。 動画をGIFに ...
Photoshopには動画を取り込むことができるので、その取り込んだ動画をGifに変換する方法です。簡単にできるのでおすすめです。
PhotoshopでイラストをアニメーションGifにする方法
PhotoshopでイラストをアニメーションGifにする手順としては大まかに以下です。
- イラストアニメーションを作成する
- タイムラインで動きをつける
- GIFで書き出す
![](http://about-adobe.com/wp-content/uploads/2022/07/赤ちゃんのフリーアイコン9.png)
Photoshopでイラストアニメーションって作成できるの?
実はできるんですよね。
![](http://about-adobe.com/wp-content/uploads/2022/07/社長のアイコン.png)
Photoshopにはレイヤーを組み合わせてそれらを並べてアニメーションにしてくれる機能がタイムラインにあります。そのタイムラインを使えば、Photoshopで描いたイラストをアニメーションさせることができる。
やっていきましょう。
Photoshopでイラストアニメーションを作成する
まずはGifにしたいイラストアニメーションを作成していきます。描くツールは何でもいいですが、今回はブラシツールで花を描いていきましょう。
![](https://creator-blog.jp/wp-content/uploads/2023/07/Image-2023-07-01-14.44.04-1024x491.png)
Gifで並べたい数のレイヤーだけ描きます。
![](https://creator-blog.jp/wp-content/uploads/2023/07/Image-2023-07-01-14.45.44-1024x465.png)
![](http://about-adobe.com/wp-content/uploads/2022/07/赤ちゃんのフリーアイコン9.png)
ここで描いたレイヤーが切り替わって動くようになるってこと?
そういうことです!
![](http://about-adobe.com/wp-content/uploads/2022/07/社長のアイコン.png)
レイヤーがフレームとして切り替わるアニメーションになるので、想定するアニメーションにはどんなレイヤー(フレーム)が必要なのかを考えながら描いてみるといいですよ。
タイムラインで動きを付ける
動かしたいイラストを描いたら、ウィンドウからタイムラインを出しましょう。
![](https://creator-blog.jp/wp-content/uploads/2023/07/Image-2023-07-01-14.48.34-1024x748.png)
タイムラインが表示されたら、Create Frame Animation(フレームアニメーションを作成)をクリックします。
![](https://creator-blog.jp/wp-content/uploads/2023/07/Image-2023-07-01-14.50.24-1024x324.png)
続いて、レイヤーからアニメーションを作成してほしいので[Make Frames From Layers](レイヤーからフレームを作成)を選択。
![](https://creator-blog.jp/wp-content/uploads/2023/07/Image-2023-07-01-14.53.46-1024x464.png)
これでそれぞれのレイヤーが1フレームになってくれます。再生してみるとこんな感じですね。
![](https://creator-blog.jp/wp-content/uploads/2023/07/animation.gif)
![](http://about-adobe.com/wp-content/uploads/2022/07/赤ちゃんのフリーアイコン9.png)
おおーアニメーションになってるね。
はいレイヤーごとが切り替わるアニメーションですね。
![](http://about-adobe.com/wp-content/uploads/2022/07/社長のアイコン.png)
うまく使えば簡単なアニメーションなら作ることができるはずです。いろいろやってみるといいでしょう。
イラストアニメーションをGIFに書き出す
イラストのアニメーションを作成出来たら、後はGifに書き出すだけです。[File→Export→Save for Web(Legacy)(ファイル→書き出し→Web用に保存)と進みます。]
![](https://creator-blog.jp/wp-content/uploads/2023/07/Image-2023-07-01-14.59.42-1024x677.png)
Save(保存)ボタンをクリックすると保存完了です
![](https://creator-blog.jp/wp-content/uploads/2023/07/Image-2023-07-01-15.00.08-1024x757.png)
![](https://creator-blog.jp/wp-content/uploads/2023/07/flower.gif)
まとめ
今回紹介した内容はこんな感じです。
- 動画をGifに変換したい場合にはPhotoshopに取り込んでGifに書き出せばOK
- イラストアニメーションをGifにしたい場合はタイムラインでフレームアニメーションを作成する
Photoshopは画像の加工を行うソフトっていうイメージだけど、レイヤーをフレームにして簡単なアニメーションなら作成することができます。
作りたいアニメーションがあったら試してみてはいかがでしょうか。