こんにちは。ゲームUIデザイナーのはなさくのです。

今回は、PhotoshopとAfterEffectsで、NEWアニメーションを作る方法についてご紹介します！

今回、NEWのPhotoshopデータもレイヤースタイルを残したままで配布しますが、解説は必要ないと思うので、省きますね。

01｜【AE】NEWアニメーションの作り方

今回アニメーションを6つ作成しましたので、一つずつ取り上げていきたいと思います。

こちらですが、配布しているAfterEffectsファイルを開いていただくと、下記赤枠の部分で、01～06まで、個別のファイル（コンポジション）に分けているので、1つずつ確認してみてくださいね。

01-01｜キラーン！アニメーション

斜めの2本入っている光のラインが左から右へ移動するアニメーションです。NEWの文字の形に合わせてマスクをかけています。

こちら長めの文字でも、アイコンなどでも使用できる演出なので、汎用的で使いやすいのが特徴です。

ちなみに、2本の光が中央にくるあたりで、NEWの文字全体が薄っすらと光を帯びるような演出も入れています。

01-02｜波アニメーション

ローディングの文字などによく使用される、波のように順々に上→下と流れるように動くアニメーションです。文字が上に来たときに、薄っすらと光らせています。

汎用性が高い演出なのでオススメです。アイコンなどには使えませんが、ちょっとした文字を目立たせたいときのアクセントとして使用できそうです。

01-03｜1文字ずつ時間差アニメーション