WEBサイト制作

ショッピングサイト制作

システム開発

コンテンツ制作

TORATについて

制作の流れ

プライバシーポリシー

お問い合わせは
こちらから

TOP

超簡単!!Photoshopで滑らかなGIFアニメーションを作ってみよう!

2019年12月25日

投稿者: TORAT

Photoshopで滑らかに動くGIFアニメーションを作りたいけど、画像を大量に作ったり、レイヤーの位置も微調整したり、めんどくさいのでは?と思ったことはありませんか?

今回はそんな時に使えるPhotoshopのトゥイーン機能を紹介します。

トゥイーン機能を使うとアニメーションの開始と終了の位置を設定するだけで、中間のフレームを自動で生成してくれるので、簡単に滑らかなアニメーションが作成できるとても便利な機能です!

例えばこんな感じで、滑らかな動きのアニメーションが作れます↓↓

ではこのような動きのアニメーションを作るにはどうしたらいいのか、画像付きで説明していきます。

1.まずは画像を準備

背景の写真と動かしたいスーパーマンの画像を用意します。切り抜きが必要な場合は切り抜いておいて下さい。

2.ウインドウからタイムラインを選択

3.フレームアニメーションを作成を選択

タイムラインウインドウが表示されるので、フレームアニメーションを作成を選択し、クリックして下さい。

4.動かしたいレイヤーの開始位置を設定

スーパーマンのレイヤーを最初に表示したい位置に移動させます。

タイムラインウインドウのフレームの下の部分(黄枠部分)で秒数を指定することが出来ます。初期設定は0秒になっているので、今回は0.1秒に変更します。お好みの秒数に変更可能です。

5.動かしたいレイヤーの終了位置を設定

①まずフレーム複製ボタンをクリックしてフレームを複製します。

②フレームが追加されるので、クリックで選択します。

③動かしたいレイヤーを最終の表示位置に移動させます。

6.トゥイーンウインドウを表示させる

④トゥイーンボタンをクリックします。

⑤トゥイーンウインドウが表示されるので、前のフレームを選択し、追加するフレームの数を入れます。今回は10で設定しています。

⑥OKをクリックします。

7.中間フレームが自動で生成される

開始と終了のフレームの間に10コマフレームが追加されました。(赤枠部分)

開始と終了までの動きを自動で補完してくれています。

黄色の枠で囲った部分でアニメーションループのループ設定ができます。今回は無限で設定したので、無限ループで表示されます。

8.Web用に保存し完成!!

メニューバーからファイルを選択し、Web用に保存を選択します。

拡張子はGIFを選択し、ループオプションは無限になっているのを確認します。もしループオプションを変更したい場合はここで変更可能です。

最後に保存をクリックで完成です。

ボタン一つで簡単に滑らかなアニメーションを作ることが出来ました。とても便利な機能ですね!
今回はトゥイーン機能を使って滑らかに動くアニメーションの基本的な作り方を紹介しました。

このように GIFアニメーションは簡単にPhotoshopで作ることが出来て、面白いので興味がある方はぜひチャレンジしてみてください!!

この記事の投稿者

管理者

TORAT

2020年10月6日 リッキー

2019年12月18日 ヨッシー

2020年10月16日 リッキー

2020年2月5日 アンディ

ブログ一覧へ

書いた人

WRITERS