こんにちは、動くものを見ると手が出てしまう人ミラノです。

今日はどうしてもぬるぬるぬるぬる動くGIFが作ってみたくてPhotoShopで作りました。

GIFとは?

Graphics Interchange Formatの略称。
長い間「ギフ」なのか「ジフ」なのか呼び方が定まらなかったが近年「ジフ」という読み方がただしいと言われたもの。

何に使うの?

最近では動画作成に使われる事が多いようです。
昔はイラストやフォントなんかにはJpegよりもGIFを使ってたことが多いみたいですが最近ではそういうのもPNGにしてしまう場合が多いですね。

実際に作って動かしてみよう!

まず最初にウインドウ>タイムラインでアニメーションのウインドウを出しましょう。
gif1
そうすると下記の形のタイムラインが出てくると思います。
gif2
ctrl+Nで新しいのを作りましょう。
gif3
そしたらフレームアニメーションを作成というボタンを押してみます。
gif4
タイムライン上になにか色んなモノが出てきましたね。
gif5

とりあえず今回はPuts “Hello, Hamamatsu”っていうのをキーで打っているかのようなアニメーションがほしいので、

gif7

一文字ずつレイヤーに打っていきます。地道な地味な作業ですね。

全部作れたらタイムラインの右の方にあるボタンを押してレイヤーからフレームを作成というボタンをクリック。

gif8

そうすると勝手にアニメーションを作ってくれます。

でも、あれれ?色が付いてない・・・。

gif9

gif10

こういうときはフレームのところをShiftでクリックして色を付けたいところを選択。その後レイヤーのところで表示させましょう。

gif11

しかしこのままだと超高速で動いてなにがなんだかわからなくなってしまうので、アニメーションのスピードをチョット変えてみます。

完成!でもちょっと寂しいかもしれない。

gif17

寂しいからこの後を加えてみる。

このままだとちょっと寂しいかなーと思ったのでこの前勝手に作った浜松Ruby会議のロゴを入れこんでみることにしました。
gif12
作ったのはこんなロゴ。

超簡単!頭良すぎるPhotoShop!

ここからは超簡単です。
gif13

まずはここまで作成した最後のフレーム部分を複製して黒い画面を作る。

そしたら最終的にこうしたいというものもう一度フレームを複製して作る。

そのフレーム両方を選択してトゥイーンというボタンをクリック!追加するフレームは10くらいに設定しておけばいいでしょう。

gif14

すると頭が良すぎるPhotoShopはバァーンと作ってくれます!

gif15
あとは再生回数を無限に設定して、試しに再生してみたら完成!
gif16
最終的に出来たのがこれ。

ぬるぬるへの道は遠い。
twitterbirdが宙返りするだけのGIFもなぜか作った。
tb

そういえば曲は全然聞いたことないけどSEKAI NO OWARIのウェブサイトはスゴイGIFが使われてる。