X

photoshopを使って、歩くgifアニメを作ろう♪:書き出ししよう!

こんにちは!
結構長めに続いてきた歩くgifアニメ講座もいよいよ最終回です!(´;ω;`)

前回、とうとう歩くアニメーションが完成しましたね(`・ω-´)☆
皆さん思うとおりに歩かせることができましたか?

スタッフの見本では動きがわかりやすいように線だけにしてありますが、みなさんはぜひ色までつけてみてくださいφ(..)
影が体の動きに合わせて変わると、更に説得力のあるアニメーションに見えること間違いなしですっ(ΦωΦ)

さてさて、最後の仕上げ!

完成したアニメーションをアニメーションgif形式として書き出ししましょう!

前回の最後で歩くアニメーションが完成しましたよねφ(..)
では、完成した状態から【ファイル>web用に保存】を選択してください

web用に保存 保存形式によってオプションが違う


すると、▲こんな画面が出てくると思います
①の部分がJPGになっている場合は、GIFに変更します
すると、GIF用のオプションが表示されます

アニメーション用のオプションも表示され、ここでアニメーションをループさせるかどうかも選択することができます
忘れずにチェックしておきましょう!

できたら、保存をクリックして、名前をつけて…完成です!

書き出せたら、保存したフォルダから確認しましょう

ダブルクリックして再生!

windowsフォトビューワーだと再生されないことがあります


…のはずが、あれ?再生されない?!(@_@;)
という方もいらっしゃるかと思います
そういう方は、ブラウザから再生してみましょう(`・ω・´)b

右クリックしてメニューから、ブラウザで開きましょう


ファイルを右クリック>プログラムから開く>使っているブラウザをクリックです
すると…ブラウザ上で作ったアニメーションが動いているところを見ることができます!ヽ(=´▽`=)ノ

これで完成!

やった~できました!

photoshopを使って、歩くgifアニメを作ろう♪講座にお付き合いいただき、ありがとうございましたm(_ _)m
アニメーションの資料本や動画など、探せばたくさん出てきます!
ぜひぜひそれらを参考にして、いろんなアニメーションを作ってみてくださいね~φ(..)
動きの前後を知ることで、絵自体にも役立つこと間違い無しですよっ(`・ω・´)

シリーズ一覧

こんにちは!最近、やっと動くラインスタンプを手に入れました~いや~楽しいですね!やっぱり、そのうちクリエイターズスタンプでも、動くスタンプが登録出来るようになるのでしょうか?そんな日に備えて、アニメーションgifを作れるよう...
photoshopを使って、歩くgifアニメを作ろう♪:準備するもの - イラスト制作、キャラクター制作、インフォグラフ...


こんにちは!今日も、歩く動きの続きを作っていきますよ☆前回で、一番初めの動きと、その次の動きまで描けましたよねその続きを早速作っていきましょうφ(..)三枚目は、上げた足を地面に下ろしている絵を描きます...
photoshopを使って、歩くgifアニメを作ろう♪:歩く動きを作ろう!2 - イラスト制作、キャラクター制作、インフォグラフ...

こんにちは!前回までの足の動き、上手にできましたか?今回は、前回までの四枚をコピーして、反対側の動きを描いていきますよ(=^・^=)最初に、一枚目をコピーしたレイヤーを作りますやることは簡単、足と手の動きを奥...
photoshopを使って、歩くgifアニメを作ろう♪:歩く動きを作ろう!3 - イラスト制作、キャラクター制作、インフォグラフ...

こんにちは!前回まで説明で、歩く動きを描いた8枚の絵が完成しましたねφ(..)今回からはいよいよ!フォトショップのタイムラインパネルを使ってgifアニメーションにしていきますよ~(`・ω・´)前回の最後に、描いた絵を...
photoshopを使って、歩くgifアニメを作ろう♪:タイムラインパネルを使おう! - イラスト制作、キャラクター制作、インフォグラフ...

こんにちは!結構長めに続いてきた歩くgifアニメ講座もいよいよ最終回です!(´;ω;`)前回、とうとう歩くアニメーションが完成しましたね(`・ω-´)☆皆さん思うとおりに歩かせることができましたか?スタッフの見本では...
photoshopを使って、歩くgifアニメを作ろう♪:書き出ししよう! - イラスト制作、キャラクター制作、インフォグラフ...
https://any-illust.com/photoshop%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6%e3%80%81%e6%ad%a9%e3%81%8fgif%e3%82%a2%e3%83%8b%e3%83%a1%e3%82%92%e4%bd%9c%e3%82%8d%e3%81%86%e2%99%aa%ef%bc%9a%e6%9b%b8%e3%81%8d%e5%87%ba%e3%81%97/photoshopを使って、歩くgifアニメを作ろう♪:書き出ししよう!
anyillustinsync3465 :