Cycling'74 Max8用のGUI用画像を用意する

Cycling'74 Max8用のフェーダ用GUI画像を用意する話です。

Max用としていますが、この手のGUI作成は手段がほぼ同じですので、汎用性を持った記事かとは思いますが、必要とされる知識と要求されるアプリケーションが多岐に渡るため、実際に最終フォーマットまで完成させられるのはもしかしたら難しいかもしれません・・・。

※筆者は元々映像制作を行っていましたが、そのもっと昔・・・高校生くらいの頃からこうしたGUIパーツを作るのが好きで趣味で描いていました。ホームページ作成経験していると親和性が高いですね。

Cycling'74 Max8用のフェーダ用GUIに使用するパーツで要求される事

1.ラスター画像ファイル(アルファチャンネル対応可能、svg不可)

2.pictsliderの場合は背景画像とツマミ画像、pictctrlの場合は分解能を満たした分のフレーム画像

本記事では上記の2パターンを解説します。

1.Adobe Illustratorでツマミの画像を作成する

ベクトルデータでの描写

こちらは適当にツマミを作るために用意したものです。この後Photoshopに渡す為、この時点でドットスケーリングを考慮し、ピクセル単位しばりで作成します。但し、pictctrlはAfterEffectsで回転を行うため、見合うだけの解像度をあらかじめ見定める必要があります。

2.Adobe Photoshopでラスター画像化する

ツマミ単体でデザインするとスケール感が狂いやすいので出来れば最初はトータルの画面を作成し、それをスライスしていく方式を取った方が良い。筆者はもう慣れているのでいきなりツマミからデザインを行った

要求される解像度のルールから、ドロップシャドウの範囲、入れ替わるための画像の大きさを感覚で掴む。経験を積むとこの「マージン」は掴みやすいが最初は躓く部分

最終的に透過を行うが、想定している背景色を置きシャドウの具合を調整する

どこかに書いてあるとは思いますが、MaxでのGUI画像はクリック時に画像を差し替える事が可能です。pictsliderの場合は設定した画像の幅×2倍で右隣り、pictctrlの場合は設定した画像の縦×2倍で真下です。

pictsliderは用意する画像が2つで良いですが、pictctrlは分解能に対応するだけのフレーム数を用意しなければならないので、ここの難易度が高いかもしれません。

3.Adobe AfterEffectsで分解能に対応するだけのフレーム数を用意する

キーフレームで回転させ、それを参照する。映像制作経験があるとこういう時に役に立つ。回転にはターゲット解像度の2倍の大きさがあれば良い

pictctrlは分解能に対応するだけのフレーム数を用意しなければならないので、65フレームを用意した。※センタが必要なので奇数になる

特に縛りはありませんが、8ビット分解能で255段階を満たすために64フレームくらいかな、と算段を立て、それにセンタを足して65フレームとしました。クリック時の画像も用意する必要があるため、合計で130個の画像が必要になります。これをいちいち手で書いてはいられませんのでAfterEffectsを使用します。ノブの色変えなどはAE内で行います。

4.Max上で配置する