151112toda_00

自分のイラストや文字を動かしてみよう!

こんにちは!デザイナーの戸田江美です。
TwitterやTumblrでよく見かけるGIFアニメ。海外サイトではロゴをGIFアニメにするケースも出てきているみたいです。
でもアニメーションを作るって、敷居が高そう…と思っていたのですが、コツを掴めば作れることが判明!今回は、PhotoshopでGIFアニメを作るテクニックを3つに分けてご紹介します。
Photoshopの使い方は、Adobeのヘルプなどネット上にたくさんありますのでそちらも参考にしてください。

じんわり浮かび上がるフェードGIF

151112toda_01いわゆるフェードイン動画。ゆったりとした雰囲気が出ます。
見ている人を動画の世界に入りこませる「間」にもなるかも。

■ステップ1 画像を2枚用意してみよう
151112toda_02Photoshopを開いて、浮かび上がらせたい画像を用意します。上の図では「illust」と名付けられたレイヤーです。
レイヤー「illust」を右クリックして、「レイヤーを複製」をクリック。複製されたレイヤーの名前を「illust _gray」に変更しました。
そして、レイヤー「illust _gray」の不透明度を10%に変更。これで完了です!
151112toda_02 ちなみに、2枚のレイヤーを並べてみるとこんな感じ。

■ステップ2 タイムライン上に配置
151112toda_03タイムライン(Photoshop>ウィンドウ>タイムライン>フレームアニメーションを作成)を表示させます。
タイムライン1に、レイヤー「illust _gray」が表示されている状態にします。
次に、下部にある「選択したフレームを複製」ボタンをクリック。タイムライン2が現れるので、今度はレイヤー「illust」が表示されている状態にします。

■ステップ3 「トゥイーン」を使ってみよう
151112toda_042つのフレームを選択した状態で、下部にある「トゥイーン」ボタンをクリック。「追加するフレーム」を記入します。今回は6ですが、数が増えるほど動きが細かくなるので適宜調整しましょう。

■ステップ4 秒数を調整する
151112toda_05「OK」ボタンを押すと、自動補完してくれました!最初と最後のフレーム秒数をちょっと多めにして、完成です。

次々に文字が登場してくるGIF

151112toda_06使い方によっては文字だけでなく、イラストでも活用できそう。言葉に動きが出るので賑やかになります。

■ステップ1 文字が徐々に現れる様子を作ろう
151112toda_07動かしたい部分が描かれたレイヤーを用意し、大体10枚くらい複製します。複製数が多いほど動きが細かくなるので、その都度調整してください。
次に、「レイヤーマスク」機能を使って、文字が徐々に現れる様子を作ります。レイヤーウィンドウ下部にある「レイヤーマスクを追加」ボタンを押し、見えなくしたい部分を黒色のブラシで塗ればOK。レイヤー1枚ごとに、ちょっとずつ塗りつぶしていきます。
151112toda_08それぞれのレイヤーはこんな感じになりました。レイヤー塗りつぶす時に使うブラシの種類によって、見せ方を変えることができます。

■ステップ2 タイムラインに配置
151112toda_08タイムラインを使って、動きをつけていきます。タイムライン1に、何も無い状態のレイヤーを。タイムライン2にはちょっと文字が見える状態のレイヤーを…と、文字が完全に現れるまで表示順にレイヤーを配置したら完成!

雪が降るGIF

151112toda_09雨や雷バージョンも作れます。天候に限らず、桜や紅葉などバリエーションが出せそうです。

■ステップ1 雪が描かれたレイヤーを用意する
151112toda_010雪が描かれたレイヤーを一枚用意します。

■ステップ2 雪を降らせてみよう
151112toda_012タイムラインにフレームを3つ作成。1フレームごとに、雪が描かれたレイヤーを横に10px、下に10px動かします。これで完成!
雪の動きを細かくしたい場合は10px以下の方が良いと思います。再生しながら適宜調節します。

手法は様々なので表現は無限大!GIFアニメ制作、ぜひお試ししてみてくださーい!

◆箱庭キュレーター
todaemi戸田江美Twitter
Webを中心に活動するデザイナー。写真が好きで、アーティスト活動もしています。すきなものは、落語と日本史とイギリス。