はじめに
初めまして。5月よりnanapiにjoinしました、デザイナーの山田です。
昨今、GIFアニメーションが再注目される日がやってきました！Twitterが6月19日より、GIFアニメーションに対応されたり。GoogleのロゴもGIFアニメーションで制作されていたり。pixivでは「うごイラ」というGIFだけでなく、PNGやJPGファイルを連続表示して動画化するサービスがリリースされたりと、パラパラ漫画的な表現が再注目されています。
アニメーション制作は、FlashやAfterEffectを使えないと作れないと思いがちですが、Photoshopだけで簡単にアニメーションが制作できるのがGIFアニメーションの魅力です。今回は私が実践している、Photoshopで簡単にGIFアニメーションが作れる小技をご紹介します。
※動きのポイントの紹介になりますので基本的なフレームアニメーションの操作については[Adobeヘルプ]をご参考ください。
基本編：フェード
フェードアニメーションです。単純ですが様々な場所に使える汎用的な手法です。
STEP1
フェード前の色(今回はグレー)と通常の画像をレイヤー分けして用意
STEP2
タイムライン1にフェード前画像、タイムライン2に通常画像をフレーム分けして配置
STEP3
フレームを2つ選択した状態でタイムラインバー下にある【トゥイーン】をクリック
STEP4
追加するフレームに今回は”3″を記入しOKをクリック(※数が増えるほど細かいアニメーションになる)
STEP5
すると自動的に中間レイヤーを補完
STEP6
最初と最後のフレーム秒数を調整し完成！
慣れてくれば数分程度で制作可能です。この方法以外にも【トゥイーン】を使用せずにレイヤー透明度をフレームごとに変更しても同じように制作可能です。
基本編：輝き
キラーンと輝きを付ける小技。金融系の文字やコインなど高級感を出したい時に最適です。
STEP1
輝きとなる白長方形を作り【フィルター】→【ぼかし】→【ぼかし(ガウス)】で4pixelぼかす
STEP2
ぼかした白長方形を斜め45°に回転し配置
STEP3
Ctrl+クリックでロゴを選択し、空フォルダを制作しそこにベクトルマスクをかける
STEP4
フォルダにマスクが掛かっているのを確認し白長方形をフォルダ内に入れる
STEP5
上記のようにフレームを追加し、白長方形を移動させれば完成！
基本編：横スライド
スピード感のある横スライドアニメーション。勢いのある表現をしたい時にオススメです。
STEP1
通常、ぼかし中、ぼかし大と3種類の画像をレイヤー分けして用意
STEP2
【フィルター】→【ぼかし】→【ぼかし(移動)】→角度0°の移動距離を2つ用意
STEP3
上記のようにフレームを追加し、ロゴを移動させれば完成！(※5フレーム目は、はずみを付ける為に気持ち右寄りに配置)
基本編：縦スライド
横スライドの縦バージョン。応用としてスロットのように回転させたアニメーション。
STEP1
通常、ぼかし中、ぼかし大と3種類の画像をレイヤー分けして用意
STEP2
【フィルター】→【ぼかし】→【ぼかし(移動)】→角度90°の移動距離を2つ用意
STEP3
スロット風にするには縦にロゴを並べてぼかしをかける(※通常画像は1つでOK)
STEP4
上記のようにフレームを追加し、ロゴを移動させれば完成！(※1〜3と4〜6は同じ動き。8フレーム目は、はずみを付ける為に気持ち下に配置)
基本編：上下伸縮
ドキドキわくわくなどを表現するのに使える、上下伸縮アニメーション。クリックボタン等にもオススメです。
STEP1
通常、左右縮小・上下拡大したサイズ違いを2つレイヤー分けして用意
STEP2
【編集】→【自由変形】→shift+alt押しつつサイズ調整
STEP3
上記のようにフレームを追加すれば完成！
基本編：回転
近づきながら拡大する回転アニメーション。途中停止せずに無限回転するのも面白くみせられます。
STEP1
通常を基準として②を80%縮小、①を60%縮小し3つレイヤー分けして用意
STEP2
上記のように円を描くようにフレームに配置すれば完成！(※2,3フレームと5,6フレームは位置が違うだけでサイズは同じ)
基本編：浮き上がり
文字が浮き上がるアニメーション。ブラシの質感により見せ方を色々変えられます。
STEP1
レイヤーマスクを使用し徐々に浮き上がる表現をする
STEP2
今回はデフォルトブラシ【Chalk 36 pixels】を使用。(※掠れのないブラシを使用するとハッキリした表現が可能)
STEP3
計7枚分レイヤーを分け、徐々にレイヤーマスクを外していく
STEP4
タイムライン上に、表示順に配置すれば完成！
応用編：拡大+振動
勢いのある演出や強調したい時に効果的です。フレーム数が増えますが、[拡大]した後に[振動]するアニメーションを繋いでいるだけです。
STEP1
100%で表示したい角度を最初に決め、やや回転しつつ拡大する画像を5つ用意
STEP2
画像を中央揃えにしタイムラインに配置
STEP3
100%画像を元に角度が微妙に違う画像を1つ用意(※角度は少ない方が細かい振動になる)
STEP4
①②を繰り返しタイムラインに表示すれば完成！
応用編：縮小・フェード+輝き
輝きを高級感があるよに見せるには、黒背景が効果的です。一見、動きが難しいように感じますが[縮小]と[フェード]に[輝き]を加えただけで、分解してみるとたったの5フレームで作れます。
STEP1
通常以外に大きさとカラーオーバーレイ濃度違いの3枚の画像を用意
STEP2
ブラシ等で輝きの効果を制作し3枚サイズ違いで用意(※輝きの素材が無い場合はデフォルトのブラーブラシ等でもOK)
STEP3
用意した素材を組み合わせて上記のようにフレームに配置すれば完成！
応用編：伸縮+回転+フェード
[伸縮]の後に[回転]、最後に[フェード]の単純な3つのアニメーションを組み合わせています。ロゴなどのちょっとした演出等に効果的です。
STEP1
最初に伸縮アニメーションを制作。通常、①横伸び、②縦伸びの3つレイヤー分けして用意
STEP2
フレームを上記のように追加
STEP3
次に回転のアニメーションを制作。通常、①45°回転、②120°回転、③135°回転の4つレイヤー分けして用意
STEP4
上記のようにフレームを追加
STEP5
最後にフェードアニメーションを制作。13フレームから16フレームにかけて【トゥイーン】をかけて完成！
GIFアニメーションを上手く作るまめ知識
プレビューする際は必ず【Web用に保存】後、ブラウザで表示を確認！
Photoshop内プレビューだと表示速度が追いつかなく表示が遅く見える場合があります。手間ではありますが、最終確認はブラウザ上で確認するのが確実です。
コマ数はむやみに増やさない！
コマ数を多く作りがちですが、コマ数は少なく綺麗にアニメーションを制作可能です。「動きが何かおかしい」と思った場合はコマを削り調整するのも一つの手です。
GIFの特性を理解する！
GIFは最大256色しか使用できません。256色以上必要のないロゴやボタン、アイコンや単純なイラストなど単色ベタな面を多く含む画像に向いています。写真のような色数が多い素材を動かすと劣化してしまい汚くなるので注意が必要です。
まとめ
nanapiでは元々あった記事をイラスト化し、GIFアニメーションを加えたカード式コンテンツを配信しています。
[缶ビールをお店のように美味しそうに注ぐ方法…カプチーノみたいなフワッフワな泡に！]
アニメーションを少し加えるだけで、よりコンテンツを見やすく、面白く演出できるのがGIFアニメーションの魅力です。アニメーション制作は、時間がかかってしまうと敬遠されがちですが、手軽に出来る小技もありますので参考にしていただけると幸いです！
nanapiではデザイナーを募集中です！
nanapiではコンテンツをより良くしたいデザイナーを募集しています！一緒により良いサービスをユーザーへ届けていきましょう！
株式会社nanapi(ナナピ) | 募集要項 WEBデザイナー