おはようございます。maiことホタテです。
以前、北海道の留萌で食べたホタテのことが忘れられなかったのでホタテにしました。
普段はサーモンとえんがわばかりの私ですが、そこのホタテは今までに食べたことがないくらい甘くておいしかったです。北海道に行った際には是非食べてみて下さい。
さて、突然ですが、みなさまはGIFアニメというものをご存知でしょうか。
ぬるぬる動く画像です。not Flash。
動画ではなく画像がずっとループしているものです。
広告などでたまに見かけると思います。
アニメーション＝難しそう？？と思いがちですが、実はPhotoshopの機能で簡単にできちゃいます。
たまにアプリ系のバナーでも依頼されることがあるのと、ネタ的なものを作るのも楽しいので簡単に流れをご紹介します。Tipsというよりは息抜き程度にさらっと見ていただけると幸いです。
※使用Ver：CS5です。
PhotoshopGIFアニメ
用意したものはペンギンの画像1枚です。
動かしたい部分の画像を用意する
まず、ペンギンの部分を切り抜きます。普段はペンツールを使用していますが、今回は形も単純なので自動選択ツールを使用してささっと切り抜いています。
切り抜いたペンギンは、別レイヤーに置いておきます。（レイヤーは「背景部分」「ペンギン部分」と分かれている状態。）
背景は固定するつもりでいるので「固定部分」と「動きをつけたい部分」にレイヤーを分けます。
背景を使いやすいように加工
ペンギンがいた部分をコピースタンプツールで消して、もとの画像となじませています。
パラパラ漫画のように、レイヤーに置いていく
ペンギンを複製します。大きさを各コマごとに変えたいので、別のレイヤーにします。
それぞれのレイヤーで大きさや角度を調整。
パラパラ漫画を作る要領で位置を決めていきます。
レイヤーの数が少ないとカクカクのGIFになるので注意です。
（背景にある白い棒は、「GIFで3D風アニメを作成する」という記事を見て、
3D風GIF、作ってみたい！と思い長方形ツールで追加してみました。）
ここでやっとアニメーションのパネル
「ウィンドウ」をクリックし、プルダウンメニューから「アニメーション」を選択。
※アニメーション（フレーム）になっていることを確認してください。CCの場合はプルダウンメニューから「フレームアニメーションを作成」を選択します。
フレーム1を選択し、表示させたくないレイヤーは隠します（レイヤーパネルにある目のマークをクリックすると、表示非表示の設定ができます）。
次に、アニメーションパネルの下部にある「選択したフレームを複製」をクリックし複製。フレーム2を作ります。
次に、フレーム2をクリック。
フレーム１と同じように、表示させたくないレイヤーは隠し、フレーム2用に用意したレイヤーを表示させる。用意したレイヤー分これを繰り返します。
アクションパネルの下に、再生ボタンがついているので、それをクリックして確認しながら作業ができます。
ちなみに、各フレームごとに「ディレイ時間」というものが設定できます。
これは、各フレームを表示させる時間です。これも再生ボタンで確認しながら、気持ちよく動くポイントを探してみてください。今回はフレーム数6、ディレイ時間は各0.2秒で設定しています。フレーム数が多く、ディレイ時間が短いと滑らかな動きになりますがその分ファイル容量が重くなるので注意です。
うまく動くような設定ができたら、アニメーションパネルの右上にあるメニューボタンをクリック→「アニメーションを最適化」をクリックしてください。
これでOK。
あとは保存するときに「Web用に保存→保存形式はGIF」で保存したらできあがりです。
こんな感じ。
3D風にしつつ、ペンギンが飛ぶように泳ぐ感じにしたかったのですが、落下しそうな勢いのGIFになってしまいました。。技術不足です。
スマートフォンの普及とGIFアニメ
私は、GIFアニメ＝ガラケーで見るもの、という個人的なイメージがあり、スマートフォンが普及した今、もうGIFアニメを見ることはあまりなくなるのかなーとぼんやり思っていたのですが、簡単なGIFを作成してくれるアプリやサイトがあったり、上記にも挙げた「GIFで3D風アニメを作成する」記事を読んでいると、なくなることはないかなと。
ただ、画像の美しさなどを考えると商用ではなく「趣味としてのGIF」だと思いますが。
コラージュ遊びの記事にも似たようなことを書いていますが、感覚的にできる作業なので、GIF画像を作ってPhotoshopとより仲良くなるのもいいかもしれません。