自分のイラストや文字を動かしてみよう！
こんにちは！デザイナーの戸田江美です。
TwitterやTumblrでよく見かけるGIFアニメ。海外サイトではロゴをGIFアニメにするケースも出てきているみたいです。
でもアニメーションを作るって、敷居が高そう…と思っていたのですが、コツを掴めば作れることが判明！今回は、PhotoshopでGIFアニメを作るテクニックを３つに分けてご紹介します。
Photoshopの使い方は、Adobeのヘルプなどネット上にたくさんありますのでそちらも参考にしてください。
じんわり浮かび上がるフェードGIF
いわゆるフェードイン動画。ゆったりとした雰囲気が出ます。
見ている人を動画の世界に入りこませる「間」にもなるかも。
■ステップ１ 画像を２枚用意してみよう
Photoshopを開いて、浮かび上がらせたい画像を用意します。上の図では「illust」と名付けられたレイヤーです。
レイヤー「illust」を右クリックして、「レイヤーを複製」をクリック。複製されたレイヤーの名前を「illust _gray」に変更しました。
そして、レイヤー「illust _gray」の不透明度を１０%に変更。これで完了です！
ちなみに、２枚のレイヤーを並べてみるとこんな感じ。
■ステップ２ タイムライン上に配置
タイムライン（Photoshop>ウィンドウ>タイムライン>フレームアニメーションを作成）を表示させます。
タイムライン１に、レイヤー「illust _gray」が表示されている状態にします。
次に、下部にある「選択したフレームを複製」ボタンをクリック。タイムライン２が現れるので、今度はレイヤー「illust」が表示されている状態にします。
■ステップ３ 「トゥイーン」を使ってみよう
２つのフレームを選択した状態で、下部にある「トゥイーン」ボタンをクリック。「追加するフレーム」を記入します。今回は６ですが、数が増えるほど動きが細かくなるので適宜調整しましょう。
■ステップ４ 秒数を調整する
「OK」ボタンを押すと、自動補完してくれました！最初と最後のフレーム秒数をちょっと多めにして、完成です。
次々に文字が登場してくるGIF
使い方によっては文字だけでなく、イラストでも活用できそう。言葉に動きが出るので賑やかになります。
■ステップ１ 文字が徐々に現れる様子を作ろう
動かしたい部分が描かれたレイヤーを用意し、大体１０枚くらい複製します。複製数が多いほど動きが細かくなるので、その都度調整してください。
次に、「レイヤーマスク」機能を使って、文字が徐々に現れる様子を作ります。レイヤーウィンドウ下部にある「レイヤーマスクを追加」ボタンを押し、見えなくしたい部分を黒色のブラシで塗ればOK。レイヤー１枚ごとに、ちょっとずつ塗りつぶしていきます。
それぞれのレイヤーはこんな感じになりました。レイヤー塗りつぶす時に使うブラシの種類によって、見せ方を変えることができます。
■ステップ２ タイムラインに配置
タイムラインを使って、動きをつけていきます。タイムライン１に、何も無い状態のレイヤーを。タイムライン２にはちょっと文字が見える状態のレイヤーを…と、文字が完全に現れるまで表示順にレイヤーを配置したら完成！
雪が降るGIF
雨や雷バージョンも作れます。天候に限らず、桜や紅葉などバリエーションが出せそうです。
■ステップ１ 雪が描かれたレイヤーを用意する
雪が描かれたレイヤーを一枚用意します。
■ステップ２ 雪を降らせてみよう
タイムラインにフレームを３つ作成。１フレームごとに、雪が描かれたレイヤーを横に１０px、下に１０px動かします。これで完成！
雪の動きを細かくしたい場合は１０px以下の方が良いと思います。再生しながら適宜調節します。
手法は様々なので表現は無限大！GIFアニメ制作、ぜひお試ししてみてくださーい！
◆箱庭キュレーター
戸田江美｜Twitter
Webを中心に活動するデザイナー。写真が好きで、アーティスト活動もしています。すきなものは、落語と日本史とイギリス。