PhotoshopでGIFアニメーションを制作!CS4での作り方

——————————————————
PhotoshopCS4でGIFアニメーションを作ってみた
——————————————————

Photoshopでgifアニメを制作

GIFアニメを作った事のない初心者が調べながらGIFアニメを作ってみました!

まず画像を用意。

走ってるGIFを作りたかったので
スクリーンショット 2015-10-17 22.36.42スクリーンショット 2015-10-17 22.36.58
まず手足を交互に出してる画像を2枚。
スクリーンショット 2015-10-17 22.37.57
走ってるところをとめたかったので泊まったところを1枚。
スクリーンショット 2015-10-17 22.37.10
今回は止まる前に誰かに気づくというシーンも入れてみようと思ったのでこちらを1枚
スクリーンショット 2015-10-17 22.39.38
止まったら決めポーズに1枚

これをPhotoshopで全て別レイヤーで用意します。

あとは効果で好きなものを用意します。
今回は文字と星を加えてみました。

使う画像を全てレイヤーに入れれたら。
画面上のバーからウィンドウ→アニメーションをクリックします。
スクリーンショット 2015-10-17 22.25.18
そしたらこんなウィンドウが出てきます。

もしこんなウィンドウでしたらウィンドウの一番右下の□が3つくらい書いてある小さなボタンを押せばコマのウィンドウに変わります

スポンサードリンク

ではキャラクターを右から左へ走らせたいと思います。
フレームの新規追加をクリックし(ウィンドウの左下ボックスのゴミ箱ツールの左側)
スクリーンショット 2015-10-17 22.30.28
キャラクターを右に配置します
スクリーンショット 2015-10-17 22.31.16
さらに新規フレームを追加し、1枚目と手足が前後逆になってるものを少し右に配置します
(1枚目は見えないようにしてください)
スクリーンショット 2015-10-17 22.33.37スクリーンショット 2015-10-17 22.36.42スクリーンショット 2015-10-17 22.36.58
これの繰り返しで画面真ん中らへんまできたら
スクリーンショット 2015-10-17 22.37.10
こちらへ気づいたイラストを出し
スクリーンショット 2015-10-17 22.37.57スクリーンショット 2015-10-17 22.38.55
止まります。
ただ止まるだけだとちょっと不自然だったので
さらに同じイラストを次のフレームで少し左にずらし急ブレーキで滑っている感じにしました
スクリーンショット 2015-10-17 22.39.14
そして決めポーズ
スクリーンショット 2015-10-17 22.39.38スクリーンショット 2015-10-17 22.40.21
からのピースから星をキラリと出して
さらに星を次のフレームで右斜め上へずらし星が飛んだ感じにしました。
スクリーンショット 2015-10-17 22.42.05
あとは文字を入れたらフレーム作りは完成です。

次にフレームの下に各フレームごとの表示スピードが選択出来るため
再生ボタンで確認しつつ各フレームの秒数を決めます。
(わたしはだいたい1コマ0.2秒です)

秒数が決まったらアニメーションウィンドウの右上のメニューボックスをクリックし
「アニメーションを最適化」をクリックし

「web用に保存」からダイアログで「GIF」を選択すれば完成です!

スポンサードリンク

コメントを残す

サブコンテンツ

このページの先頭へ