博多のWEB制作会社 -ワールドシェア株式会社-

ワールドシェアのラジオ番組が始動!新感覚・情報ハグ番組HUGGIN’YOU(ハギンユー)」 毎週水曜日、九州を中心に活躍するゲストさんと共にお送りしています♪ >>> 詳細はこちら

WEB制作

2015/01/30 Friday

フォトショップでアニメーションを作ってみよう

 

金曜日ですよ、こんにちは。

昨日新しいゲームが出たので寝不足です、サカモトです。

最近色んなゲームを同時進行しているので、話がごちゃごちゃにならないか地味に心配しています。

 
 

今日は何をブログに書こうかと思いましたところ、

私の好きなものを紹介しよう


 

アニメかな?


 

アニメーションの簡単な作り方を紹介してみよう

というわけで、今回はフォトショップを使って簡単なアニメーション、GIFを作ってみようと思います。

 
メイン画像

ではでは早速参ります。

フォトショップでアニメーションを作ってみよう

 

フォトショップのタイムラインという機能を使って作っていきます。

1,画像を準備する

01画像一覧

ネコちゃんのイラストを用意してみました。さあ、命を吹き込むぞ!

※フォトショップのレイヤーはこういう状態になっています

04タイムライン

2,タイムラインを選択する

02タイムライン

フォトショップを立ち上げ、ウインドウ→タイムラインを選択。

03タイムライン

こういったものが出てくるので、フレームアニメーションを作成を押します。

それでは作っていきましょう!

3,アニメーションを作っていく

05タイムライン

赤く囲ったレイヤーがこのアニメーションの一枚目になります。

動かすには、二枚目を作らなくてはなりません。

二枚目を作るには黄色のわっかの部分をクリック!

06タイムライン

これで二枚目を作る準備ができました。

それでは二枚目のレイヤー表示、そして一枚目のレイヤーを非表示にしましょう。

07タイムライン

ここまでのをアニメーションにすると…

猫1

ちょっと早い

まあ許容範囲といったところでしょうか。ちゃんとアニメになってますね!

ちなみにアニメーションの間隔やリピート数などはここから選択できます。

08タイムライン

ちょっと調整してやると…

猫2

だいぶマシになりました。

基本はこんなところです!これを利用してアニメーションを完成させたいと思います!

~完成版~

猫3

ちょっとケチって原画枚数が少なかったので動きがややいびつですが、まあお見逃しください…

※画像の保存形式はGIFです

 
 

いかがでしたか?

私みたいにアニメが好きで、アニメを作ってみたい!という方も、ちょっとしたバナーに動きをつけたい!という方にもオススメでございますタイムライン。

ぜひぜひお試しあれ。

 
 

トシオトシオトシオ