[GIFを自作する]Photoshopで簡単アニメーションを作ってみる

ウェブサイトや自分のブログページを、アニメーションで飾ってみたい!動きを出したい!
と前々から思っていて、いざやってみるととても簡単だったので、 PhotoshopでGIFアニメーションを自作する方法をご紹介します。
出来上がりのGIFは、こちら。

素材は、Pixabayというサイトがお勧めで、無料で使える。

ぐるりと回したデザインもかわいいのでは?
さてでは、作っていこう。
段階としては、
- 下地になる文字と太陽のデザインを入れる
- 下地の上をペンツールでなぞっていく
- それを何度も繰り返す
- 太陽を動かしてみる
- GIFにして保存
といった内容です。
2種類の方法は一気に紹介するので、少しずつ試してみてください。といってもとても簡単なので、すぐに同じようなオリジナルのアニメーションが作ることができます。
今まで全く動きのなかった自分のブログページが、GIFによってちょっと不思議感が出てます。
では、ここからアニメーションの作り方を解説していきます。 使うのはもちろん Photoshop!!
英語の方が使いやすいので、英語に設定して説明してます。
もし日本語の設定でも、ほとんど同じかと思います。が、英語設定にするのがおすすめです。
これあると便利!!なツール
最近わたしもデザイン関係のお仕事が増えてきて、マウスだけだと
「なんかもの足りない~」
と思っていた。
そんな矢先に、画家でグラフィックアーティストのメキシコ人の友達が使っている道具を発見。
それが、このペンタブ!!!!
始めは、使いにくいと思ったけど、慣れるとすごい使える。もう手放せないレベル。
もちろん今回の様な、GIF作りにも一役買ってくれる私の新しい相棒ちゃん。
3000円で手に入る快適。
いろいろ調べて初めてのペンタブだったこともあって、安めのものをチョイスしたけど、かなり使えるで満足してます。
強いて言うなら、ケーブルが真横に付けて欲しかった。
おすすめペンタブは置いといて、さっそくGIFの作り方いってみましょう!
1.新規ページを作る

今回は、600×300px横長でレゾルーションは72pxで作っていきます。
あまり大きいと、アップロードした時にちゃんと動いてくれなかったので、小さいサイズでやってます。
いろいろ試してみてください。
2.タイムラインのタブを出す

アニメーションを作るには、”タイムライン”タブを出す必要がある。
“Window”から“Timeline”というタブを出しましょう。
出てきたら、下か左に入れておこう。好みは人による。私は下でいきます。

ここまでできたら、使いたい素材を入れ込む。
今回は、左側にテキストを入れて、右側にメキシコらしい太陽の画像を。
4.ビデオタイムラインを作成

タイムラインのタブに出てくる”Create Video Timeline”を選択

タイムラインが生成されて、各レイヤーごとに階層ができているはず。
5.新規のビデオレイヤーを追加する

Layerから、”New Video Layer”そして、”New Blank Video Layer”を選択する。
そうすると、ビデオタイムラインの上に、新規のレイヤーが追加される。
6.ビデオアニメーションの設定を行う

”Timeline”タブの右上の三本線をクリックすると出てくるのが、この画面。
”Enable Onion Skin”にチェックを入れる。
オニオンスキンとは、玉ねぎの皮っていう意味だけど、薄皮の下が透けて見えるように、前後のアクションがちょっと透けて見える機能。
これは便利なので、使ってみるのがおすすめ。

次は先ほどのオニオンスキンの設定。
同じタブを開いて、“Onionskin setting”をクリックする。

前後1クリップづつオニオンスキン機能が働く設定に。

次はビデオ自体の設定。
”Set Timeline Frame Rate”を選択。

お好みで設定。
15くらいが個人的に好きなレート数。
1秒間に何クリップ入れ込むかという数字。
7.長さを調節

ビデオを短くする場合は、クリップの最後にカーソルを合わせることで移動が可能。

一番下に見える山のアイコンの間のカーソルを調節してみてください。
クリップのサイズを作業のしやすい長さに変更。
7.長さを調節

さあ、ここから遂に本番!!!
先ほど作ったビデオクリップのレイヤーを選択した状態で、ブラシツールでなぞっていく。
ちょっとづつずらすとアニメーションっぽくなるので、あ!ってなっても、雑なくらいが丁度いい。

ここが重要で、
このブルーのカーソルを右に一コマ動かす。
そうすると、オニオンスキン機能が起動してちょっと薄くなったはず。
そして、その状態で、また文字の上をなぞる。
これを7-8回ほど繰り返してみてください。
スペースを押すと再生されます。

文字の部分が動き出しましたか?
次は、太陽を動かしてみましょう。
8.太陽を動かす前にスマートオブジェクトに

ブルーのタイムラインカーソルが一番初めの位置に戻っていることを確認して、太陽のレイヤーを“Smart Object”にしておく。

スマートオブジェクトにすることで、レイヤーが壊れない。
9.太陽を回してみる

・ブルーのカーソルが一番左の位置にあることを確認。
・タイムラインタブの矢印をクリックして開く。
・”Tranceform”の時計のアイコンをクリック。

・黄色いマークが現れたのを確認。
・ブルーのカーソルを適当な位置に移動させる。

・太陽を回転させて、エンターを押す。
そうすると、新たに黄色いマークが追加される。

・同じようにもう一度回転させて、元に戻す。これでぐるっと一周。

こんな感じになったはず。
スピードは、”Set Timeline Frame Rate”の数字を小さくすればゆっくりになるし、大きくすれば速くなる。
10.出力してみる

・ファイルから、”Export”の中の”Save for Web(Legacy)”を選択。

・デフォルトのままで”Save”をクリック。
もっと高品質にする場合は、設定を変えるけど、今回はこのままいきます。
完成!!!!!

こんなのとか

いろいろ作って楽しんでます。あと、フォトショップも使わずにサクッとGIFを作る方法も紹介してます。
でわ!!!
フォトショップの記事