blog

top > 學展blog

2014.10.20 (Mon)

制作

Photoshopを使ってGIFアニメをつくってみよう!

0000 Photoshopを使ってGIFアニメをつくってみよう! 學展ブログ

こんにちはよねちゃんです。

みなさんGIFアニメをしってますか?
画像データなのに動画のように動くあのGIFアニメ!

そんなGIFアニメ、実はPhotoShopで簡単につくれてしまうんです!

今回はPhotoshopを使ってGIFアニメをつくってみようと思います。

さっそく作ってみよう

まずはPhotoshopを起動して
GIFアニメにしたい画像を選択します。
(今回のご紹介する制作方法はcs6を使用しております。バージョンによって表示の違いがあります。)

1 Photoshopを使ってGIFアニメをつくってみよう! 學展ブログ

次にメニューバーより
“ウィンドウ” → “タイムライン”
を選択。

2 Photoshopを使ってGIFアニメをつくってみよう! 學展ブログ

3 Photoshopを使ってGIFアニメをつくってみよう! 學展ブログ

アートワークの下にタイムラインのウィンドウが表示されましたね。
このタイムラインにフレームを追加してアニメーションにしていくのです。
(ぱらぱらマンガの要領に近いです。)

ではフレームを追加しましょう。
タイムライン下にあるフレームを追加のアイコンをクリックしてください。
下の画像の赤丸の部分です。

4 Photoshopを使ってGIFアニメをつくってみよう! 學展ブログ

クリックすると

5 Photoshopを使ってGIFアニメをつくってみよう! 學展ブログ

新たなフレームが追加されました。

では新たなフレームと1つ前のフレームに変化を付けてみましょう。
フレーム2を選択してままレイヤー0を非表示にします。
赤丸の部分をクリック。

6 Photoshopを使ってGIFアニメをつくってみよう! 學展ブログ

するとフレーム1はロゴが表示されており
フレーム2はなんも表示されていなくなります。

7 Photoshopを使ってGIFアニメをつくってみよう! 學展ブログ

この状態で再生を押すとロゴが一瞬で消えるアニメーションになります。

ゆっくり変化するアニメーションにしよう

このままではつまらないのでゆっくり消えていくようなアニメーションにしてみましょう!
タイムライン下のアイコンから”トゥイーン”をクリック。

8 Photoshopを使ってGIFアニメをつくってみよう! 學展ブログ

トゥイーンウィンドウが表示されました。
まずは画像のようにデフォルトのまま”OK”ボタンを押してみましょう。

9 Photoshopを使ってGIFアニメをつくってみよう! 學展ブログ

するとタイムラインの部分に新たなフレームが追加されました。

10 Photoshopを使ってGIFアニメをつくってみよう! 學展ブログ

この状態で再生ボタンを押すとゆっくりとロゴが消えていくアニメーションになっているのがわかるかと思います。

無限ループされてみよう

このアニメーションは一度再生されると止まってしまうので
再生し終わったら再度再生させるようにしてみましょう!

タイムライン下にある”一度”の部分を”無限”に変更すると再度再生されるアニメーションになるのですがせっかくなのでループするアニメーションにしてみます。

まずは新たにフレームを追加してください。

11 Photoshopを使ってGIFアニメをつくってみよう! 學展ブログ

この新たに追加されたフレーム8にロゴマークを表示させます。
先ほどの要領でレイヤー0の目玉アイコンをクリック。

12 Photoshopを使ってGIFアニメをつくってみよう! 學展ブログ

こちらもさきほどと同様にゆっくり表示されるようにトゥイーンさせます。

14 Photoshopを使ってGIFアニメをつくってみよう! 學展ブログ

ロゴマークが一度ゆっくり消えて再度ゆっくり表示されるアニメーションとなりました。

15 Photoshopを使ってGIFアニメをつくってみよう! 學展ブログ

ではこのアニメーションを一度ではなく無限に再生されるアニメーションにしてみましょう。
タイムライン下の”一度”ボタンをクリックして”無限”を選択します。

16 Photoshopを使ってGIFアニメをつくってみよう! 學展ブログ

18 Photoshopを使ってGIFアニメをつくってみよう! 學展ブログ

では再生してみてください。
表示されて消えてを繰り返すアニメーションになったのが確認できるでしょうか。

もし少しぎこちないように感じる方はフレーム13を削除してみてください。
アニメーションは繰り返されているのでフレーム13のあとに続いてフレーム1が表示されます。

100%表示されているフレームが2つ連続することとなり、一瞬止まったような印象となりますので気になる方は最後のフレームを削除してください。

保存してみよう

ではこのデータをGIFアニメとして保存してみましょう。

このまま普通に保存してしまうとただのPhotoshopデータとして保存されてしまうためGIFに書き出す必要があります。

まずはメニューバーより
“ファイル” → “Web用に保存”
をクリック。

19 Photoshopを使ってGIFアニメをつくってみよう! 學展ブログ

すると

20 Photoshopを使ってGIFアニメをつくってみよう! 學展ブログ

Web用に保存ウィンドウが表示されます。

ここのデータの形式をGIFに設定します。

21 Photoshopを使ってGIFアニメをつくってみよう! 學展ブログ

あとは”保存”ボタンを押すだけ!

26 Photoshopを使ってGIFアニメをつくってみよう! 學展ブログ

保存することができました!

gaku 2 Photoshopを使ってGIFアニメをつくってみよう! 學展ブログ

しっかりとGIFアニメになっていますね!

もしパソコン上で確認できない場合はtwitterに投稿してみてください。
3MBまでのデータであればGIFアニメを投稿できます。

(もしtwitterに投稿される際はハッシュタグ”#學展”を付けてくれると嬉しいです。[小声])

応用編

全体を付けて消してという簡単なGIFアニメの作り方を紹介させて頂きましたが

以下のように
細かくパーツを予めレイヤーに用意しておき

27 Photoshopを使ってGIFアニメをつくってみよう! 學展ブログ

28 Photoshopを使ってGIFアニメをつくってみよう! 學展ブログ

29 Photoshopを使ってGIFアニメをつくってみよう! 學展ブログ

30 Photoshopを使ってGIFアニメをつくってみよう! 學展ブログ

順番に表示させていくとこのような

gaku2 Photoshopを使ってGIFアニメをつくってみよう! 學展ブログ

流れるように表示されるGIFアニメをつくることができますよ!

〆(まとめ)

いかがでしたでしょうか。

細かくパーツを作っておきフレームごとに少しづつ変化を付ければ
オリジナルのLoadingアイコンだってつくれちゃいます!
ぜひぜひこの機会につくってみてくださいね!

學展の開催概要はこちらから >