デザイナーのhayatoです。
いつもはゲームレビューばかり書いていましたが
たまには制作手順を書いてみようと思います。
近年、Adobeの製品は凄く便利になりましたね。
アプリ間の連携も強化され制作のコストが
ぐっと押さえられる機能がたくさん詰まっています。
制作環境によっては、使わないまま、触らないままで
ずっと放置しちゃう方も多いかと思います。
今回はPhotoshopのアセットのマニアックな使い道をご紹介します。
上級者向けなのでテクニックを中心に紹介します。
現在の制作環境は図解するとこんな感じ。
Unity環境に実装する前にAfter Effectsでアニメーションの大まかな、
イメージを作成します。
動画ファイルモックでOKが出ればUnity上で再現する流れです。
動きのイメージというのは人それぞれで、擬音で表現する場面も多く
個人個人の感覚のズレが多い部分でもあるので、修正コストが低い
After Effectを活用するのが一番の近道。
そこでさらに修正コストを下げるために
Photoshop CCのアセット機能を活用します。
「FFっぽいダメージ表示を作ってみよう」
さてさて、今回の題材はFFっぽい数字表示のアニメーションを作成してみましょう。
数字の文字をPhotoshop上にレイアウトしていきます。
この時点である程度ファイルネームのルールを決めておきます。
透過する素材なのでレイヤー名の最後に「.png」にしてマスクを追加します。
画角サイズに合わせたマスクも必須です。
（マスクしないとオブジェクトの大きさに対して自動的に書き出されます。
逆にそれを利用する場合もありますが…。）
画像アセットにチェックをいれれば自動的に書き出されます。
さらにレイヤー効果をライブラリに保存。（ちょっと小技）
ライブラリも便利な機能ですが、奥深いのでまた今度。
はぁ〜便利！
1個ずつ書き出す手間もなくスライスする手間もない！！
とまぁここまではPhotoshopのみの作業手順。
これをAfter Effectsに組み込んでいきます。
というか放り込みます。
その際に、先ほど作成したアセットフォルダを指定してください。
ここが大きなポイントになります。
（プロジェクトファイル内は必ず整理。しないと後悔するぜ。）
そしてアニメーションの1桁を作成。
1桁だけだと寂しいので4桁ぐらい作りましょうか。
という感じに1桁のアニメーションを作成したら
アンカーをコピーして新規コンポジションを増やしていきます。
わざわざバラすのはモック段階ですので
ここでもモーションの修正が楽な方法をとります。
（今回は数字が題材だし…。）
ファイルの数が段々増えてきましたね。
最初から命名規則を作ったり、ファイル整理しておけば修正するときも楽になります。
「モーションはOKだったけど色味を赤にして」
さて、ここでそもそもの素材の色に修正が入った場合、
アセットがなかった時は想像を絶する修正コストがかかっていました。
今はPhotoshop上で色を調整し「レイヤースタイルのコピー」も駆使しつつ
アセットで自動的に書き出された時点で
フォルダを指定していたおかげでAfter Effects上のファイルも同時に書き換わります。
色味＋アニメーションの修正が同時発生した場合でも
最初の素材修正が自動化されたことで断然に早く対応が可能となりました。
「あ、やっぱゴールドにして！」「背景透過でよろしく」
と言われても即対応可能！
ふぅ…あぶねぇーぜ。
これでようやくOKがでましたね。
素材はすでに書き出されているので
そのままUnityに持っていくことができ、アニメーションをモック通りに作成していくだけ。
今回は簡単に作成しましたが、あくまでも作業ベースの話。
この数字のフォント選び、色のイメージ、グラデーションの掛け方、
アニメーションの動き、こだわると出口の見えない迷宮に入り込むこととなり
そこは未だに自動化できない部分ではあります…。
クリエイティブな仕事はそこが一番面白いし力を入れる部分なので
作業は簡単効率化して行くのがベストなはずですね。
アセットを使ってない方は
今からでも遅くないので是非チャレンジしてみてください！
制作現場に合わせた使い方がきっと見つかるはずです。
0コメント