窓のテクスチャを立体的に描く方法（かな）
久しぶりにブロマガなんぞ書いてみたりします。
アッシュフォード学園ステージは広大で、屋上手すりなどに頂点数をかなり使ったので、少しでも軽くするためにテクスチャで頑張ってみたりしました。
正面から見える範囲でも窓の種類は7種類あり、これを全部ポリにするととんでもなく頂点数を使うので7種類全部テクスチャです。
でもまあ、なるべくならペタっとした質感ではなく、できればポリ割した感じに見える（といいな）ようにしようとした方法です。
準備
まずUV展開した窓枠。そのラインをベースにそれぞれの窓枠になる絵を描きます
これはUV展開したものを出力したものです（一部のみ表示しています）
それぞれの窓枠に合わせて窓の絵を描きます（Illustratorで描いてます）
作業
ここからはPhotoshopでの作業です
窓全体のベースになる色で塗りつぶします（UV展開の枠より広めに）
塗りつぶしたレイヤーをダブルクリックするとレイヤースタイルパレットが開きます。
奥行きを付ける為にグラデーションをかけます。（レイヤースタイルを使うと後から色やグラデーションの幅など色々変更がきくので私はこればかり使います）
太陽（光源）が上にあるのが想定なので下側へ暗くなるように乗算でグラデをかけます（濃さはお好みです）
ここから窓枠です
まず一番奥に表示する格子部分を塗りつぶすためのパスを選択し、パスから作った選択範囲で窓枠色で新しいレイヤーに塗りつぶします
これをさらに奥側にある感じにするために少しレイヤーの不透明度を下げます
50％でこんな感じ（これも数値はお好みです）
これに影を加える為にドロップシャドウをかけます
その結果。
次にこの上にある窓枠そのものを描く用のパスを選択
うっすら見えるのがパスです
ダブルクリックで選択範囲を作成し、新規レイヤーに窓枠色で塗りつぶしをします
このぺったりとしたレイヤーに
ドロップシャドウとベベルをかけます
ちょっと立体的に見えます
そしてさらに新しいレイヤーに飾り部分を塗ります
見た目何も変わりません。が、これもまた
ドロップシャドウとベベルをかけます
結果それだけでも立体的な窓枠になったかと思います。
最後にこの窓枠自体に影がおちているようにするために周りを壁テクスチャのベース色で塗りつぶします
それにもドロップシャドウをかけて、UVの枠を消し
完成です。
これらの繰り返しで、できあがった窓枠がこちら。
レイヤースタイルは同じ効果を何度も使う場合スタイルに登録してしまえばボタン1個で同じ効果ができるので便利です。
選択範囲を作るのにパスを使用しているのは自由度が高いのと使い回ししやすいからです。
自分はPhotoshopとIllustratorでテクスチャを描いているので、他のソフトでは同じようにできるか、わかりません、すいません。レイヤーとドロップシャドウとベベルだけでできるので、その機能があれば同じようにできると思います....たぶん。
この方法だと本来は光源の位置が限定されてしまうのですが、とにかく遠景で使用される背景用ステージですし、アップにすることはほとんどないと想定して、ほぼソフトのデフォルト数値でやっている正直手抜きでございます。ですが、それっぽく見えることで十分だったので、そこはあまりこだわっていません。
ご自身でステージ用に描かれる場合、シーンを限定し使用されるのであれば、光源方向を意識して設定すればよりリアルになるかと思います。
何かのお役にたてれば幸いです
アッシュフォード学園ステージは広大で、屋上手すりなどに頂点数をかなり使ったので、少しでも軽くするためにテクスチャで頑張ってみたりしました。
正面から見える範囲でも窓の種類は7種類あり、これを全部ポリにするととんでもなく頂点数を使うので7種類全部テクスチャです。
でもまあ、なるべくならペタっとした質感ではなく、できればポリ割した感じに見える（といいな）ようにしようとした方法です。
準備
まずUV展開した窓枠。そのラインをベースにそれぞれの窓枠になる絵を描きます
これはUV展開したものを出力したものです（一部のみ表示しています）
それぞれの窓枠に合わせて窓の絵を描きます（Illustratorで描いてます）
作業
ここからはPhotoshopでの作業です
窓全体のベースになる色で塗りつぶします（UV展開の枠より広めに）
塗りつぶしたレイヤーをダブルクリックするとレイヤースタイルパレットが開きます。
奥行きを付ける為にグラデーションをかけます。（レイヤースタイルを使うと後から色やグラデーションの幅など色々変更がきくので私はこればかり使います）
太陽（光源）が上にあるのが想定なので下側へ暗くなるように乗算でグラデをかけます（濃さはお好みです）
ここから窓枠です
まず一番奥に表示する格子部分を塗りつぶすためのパスを選択し、パスから作った選択範囲で窓枠色で新しいレイヤーに塗りつぶします
これをさらに奥側にある感じにするために少しレイヤーの不透明度を下げます
50％でこんな感じ（これも数値はお好みです）
これに影を加える為にドロップシャドウをかけます
その結果。
次にこの上にある窓枠そのものを描く用のパスを選択
うっすら見えるのがパスです
ダブルクリックで選択範囲を作成し、新規レイヤーに窓枠色で塗りつぶしをします
このぺったりとしたレイヤーに
ドロップシャドウとベベルをかけます
ちょっと立体的に見えます
そしてさらに新しいレイヤーに飾り部分を塗ります
見た目何も変わりません。が、これもまた
ドロップシャドウとベベルをかけます
結果それだけでも立体的な窓枠になったかと思います。
最後にこの窓枠自体に影がおちているようにするために周りを壁テクスチャのベース色で塗りつぶします
それにもドロップシャドウをかけて、UVの枠を消し
完成です。
これらの繰り返しで、できあがった窓枠がこちら。
レイヤースタイルは同じ効果を何度も使う場合スタイルに登録してしまえばボタン1個で同じ効果ができるので便利です。
選択範囲を作るのにパスを使用しているのは自由度が高いのと使い回ししやすいからです。
自分はPhotoshopとIllustratorでテクスチャを描いているので、他のソフトでは同じようにできるか、わかりません、すいません。レイヤーとドロップシャドウとベベルだけでできるので、その機能があれば同じようにできると思います....たぶん。
この方法だと本来は光源の位置が限定されてしまうのですが、とにかく遠景で使用される背景用ステージですし、アップにすることはほとんどないと想定して、ほぼソフトのデフォルト数値でやっている正直手抜きでございます。ですが、それっぽく見えることで十分だったので、そこはあまりこだわっていません。
ご自身でステージ用に描かれる場合、シーンを限定し使用されるのであれば、光源方向を意識して設定すればよりリアルになるかと思います。
何かのお役にたてれば幸いです
