Zenn
🎨

【VRChat】AffinityPhotoを使用して髪色改変をやってみよう

に公開
VRChat
Affinity
アバター改変
idea

VRChatのアバター改編の記事を見ても、Adobe Photoshopを利用したものなどは多くヒットするが、AffinityPhotoを利用した色改変の記事はあまりヒットせず、自分自身ドキュメント探しに苦労した。

VRCに有名配信者やVtuberが多く参入し、初心者も僕が始めた当初からは考えられないほど増加している今、僕と同じ苦労を初心者の人にあまりしてほしくないので簡単にやり方を紹介したいと思う。

使用するソフトと改変対象

下準備-通常色のグラデーションマスクを作成する-

さっそく、色を変更していきたいところだがその前に下準備を行う必要がある。
それは、通常色の髪色でのグラデーションマップを作成すること。

理由として、通常の色でグラデーションマップを作成することで
影の部分の色、光が当たっている部分の白さ具合が直感的にわかるようになり
他の色に改変を行う時も、元の陰影やグラデーション味を損なわないように仕上げることができるようになるから。

実際の手順

  1. テクスチャのPSDファイルを開く
    髪、小物、アバター問わずたいていのアイテムのPSDファイルは、PSDと名を冠するファイル内に格納されている。

  2. 髪の陰影をつかさどっているレイヤーを探す
    大体の構成は、「ハイライト、ベース部分、影」にレイヤー構造になっていることが多い。
    ただ今回のファイルでは、
    「ベースカラー（color）、グラデーションを付けるレイヤー（sdw）、アウトライン、ハイライト」
    の構造になっている。
    今回グラデーションマップを作るべきレイヤーは、sdwとなる。

  3. そのレイヤーに、グラデーションマップを追加

    sdwのレイヤー構造を見てみると、アウトライン部分とグラデーション部分の２つがsdwに入っていたので、グラデーションのみをいじるためにsdwレイヤー内にグラデーションマップを追加する。

  4. グラデーションマップをいったん非表示にし、ベースのメイドの一番高い部分、低い部分の色を割り当て

    とりあえず、明度が最も低い色と高い色をグラデーションマップに追加する。
    これではのっぺりした印象で、滑らかとはいいがたい。

    その対処として、現在の一番明度の低い色を中間色にして、両端の明度の差を極端にしてみる。

  5. 適宜、中間色を追加し色の左右の位置を確定させる

    手順4で行った操作の応用で、中間色の左右に両端と中間色の間の色を入れ、
    それぞれの色の位置を試行錯誤しながら、もともとの色味に近くなるように変更する。

  6. 全く同じ色身にならなくてもok!-あきらめも必要-

    全く同じ色味を再現できれば、色改変後の出来もよくなるのでできるに越したことはありませんが
    ここに時間をかけなくても、次の段階の色入れ時に調整すればよい。
    時にあきらめることも、楽しくクリエイティブするには肝心である。
    最後に、このファイルをテンプレとして名前を付けて保存する。

実際に色改変

テンプレファイルをコピーし、色改変をしていることがわかる名前に変更しファイルを開く。
前項の手順5で作成したグラデーションマップを開き、中間色あたりに髪の色にしたい色を入れる。
両端には、中間色の明度を極端に上下させた色を入れる。

単に、1色の改変をしたい場合は色の位置を納得がいくように変更したり、
追加で色を入れてより滑らかにしたりと調整し、
ベースカラーのレイヤーにグラデーションマップを追加。
ベースカラーの色も、作りたい髪の色を両端に入れ１色を表示するようにする。

もし、明るいところは別の色など複数色を使用したいときは、
ベースカラーで入れたい色を挟むなどしていい塩梅に整える。

複数色で色改変をするときに表したい色の配置は、
おそらく人それぞれになると思うし、正確に「ココはこの色」のようにしたければ
イラストソフトを使用して書き込むのが手っ取り早い。

unityで最終調整

最後に、unity内で彩度などの色を調整し他の衣装やアイテムとの色調を合わせる。
追加でリムライトや発光テクスチャ、ラメなんかを入れてもオリジナリティも出てよい。

おわりに

ここまでの調整ができれば、色改変は完了です。
最後に、この方法のメリット・デメリットを紹介する。

メリット

  • ブロンドヘア等、単一色であれば元々の滑らかさを失うことなく改変できる
  • テンプレファイルを作っておけば、使いまわして改変できる
  • 習得が比較的容易

デメリット

  • ２色以上の改変では、厳密に色の位置の指定ができない
  • レイヤー構造を理解する手間
  • AffinityPhotoが固まりやすい（おそらくグラデーションの処理が重い）

ぜひ参考にして、１歩ステップアップした改変ライフをお過ごしください！

Discussion