ゲーム開発奮闘記

Unity・エフェクト・アプリ開発に関係した記事を書いています

PhotoShop フィルターを使用する 炎テクスチャー作成研究

PhotoShopの機能でフィルターというものが複数あります。
このフィルターを使用して、今回はエフェクトの炎テクスチャー作成方法を紹介します。

■炎のテクスチャー素材の作り方
1.新規でカンバスサイズを512pixel x 512pixel、解像度72で作成します。

f:id:KTK_kumamoto:20160902062432p:plain


2.次にフィルターの雲模様2を使用します。
フィルター>描画>雲模様2

f:id:KTK_kumamoto:20160902062506p:plain
f:id:KTK_kumamoto:20160902062519p:plain


3.次にフィルターの明るさの最小値を使用します。
フィルター>その他>明るさの最小値

設定を以下の内容にします。
・半径:14.0 pixel
・保持:真円率

f:id:KTK_kumamoto:20160902062615p:plain
f:id:KTK_kumamoto:20160902062621p:plain


4.次にフィルターの波形を使用します。
フィルター>変形>波形

設定を以下の内容にします。
・波数:1
・波長:最小 1 , 最大 120
・振幅:最小 47 , 最大 102
・比率:水平 100% , 垂直 100%
・種類:正弦波
・未定義領域:端のピクセルを繰り返して埋める

f:id:KTK_kumamoto:20160902062710p:plain
f:id:KTK_kumamoto:20160902062716p:plain
f:id:KTK_kumamoto:20160902062727p:plain


5.次に調整レイヤーのトーンカーブを作成します。
レイヤーパネルの「塗りつぶしまたは新規調整レイヤーを作成」>トーンカーブ

トーンカーブをS字に調整します。
詳細は、図を参照

f:id:KTK_kumamoto:20160902062831p:plain
f:id:KTK_kumamoto:20160902062841p:plain


6.背景レイヤーにレイヤーマスクを作成する。
レイヤーパネルの背景レイヤーを選択した状態で、
レイヤーパネル下の方にある、新規レイヤーマスク作成を選択

f:id:KTK_kumamoto:20160902062917p:plain
f:id:KTK_kumamoto:20160902062924p:plain


7.レイヤーマスクの編集をする。
レイヤーマスクを選択した状態で、中心からぼかした円で塗りつぶす。

f:id:KTK_kumamoto:20160902062948p:plain


8.次に調整レイヤーのグラデーションマップを作成します。
レイヤーパネルの「塗りつぶしまたは新規調整レイヤーを作成」>グラデーションマップ

f:id:KTK_kumamoto:20160902063026p:plain


9.グラデーションマップの調整をする。
黄色→オレンジ→赤黒→黒に色が変わるよう調整します。
詳細は、図を参照

f:id:KTK_kumamoto:20160902063046p:plain


10.最後に背景に黒い板を追加する。
各種マスクやトーンカーブの調整をする。

f:id:KTK_kumamoto:20160902063137p:plain


■まとめ
雲模様2、トーンカーブ、レイヤーマスク、グラデーションマップの調整で
色々な見た目を作ることが出来ます。
他にもフィルターには様々な効果がありますので、是非試してみてください!

■サンプルデータ(完成psdとpng :PhotoShopCC2015より作成)
fire.pngダウンロード
fire.psdダウンロード

PhotoShop トーンカーブプリセット 光のエフェクト作成研究

PhotoShopの機能でトーンカーブというものがあります。
このトーンカーブを使用して、今回はエフェクトのテクスチャー作成方法を紹介します。

■光のエフェクト素材の作り方
1.まずはグラデーションツールの円形グラデーションを使用して、中心から外へと暗くなる円のグラデーションを作成します。

f:id:KTK_kumamoto:20160816215056j:plain

2.レイヤーパネルの下の方にある、調整レイヤーのリストからトーンカーブを選択する。

f:id:KTK_kumamoto:20160816215428j:plain

f:id:KTK_kumamoto:20160816215629j:plain

3.適当にトーンカーブをいじって調整をする。

f:id:KTK_kumamoto:20160816220127j:plain
par1

f:id:KTK_kumamoto:20160816221626j:plain
par2

f:id:KTK_kumamoto:20160816221635j:plain
par3

4.いい感じのカーブが出来たら、トーンカーブプリセットを保存する。

f:id:KTK_kumamoto:20160816220620j:plain

.avcでトーンカーブプリセットが保存されます。
上記手順の3.で作成した3つのトーンカーブ
[ par1.avc ] , [ par2.avc ] , [ par3.avc ] で保存しました。


色々とトーンカーブを使用して、綺麗な光のテクスチャーが作れるかもしれません。

■サンプルデータ(トーンカーブプリセット.acv :PhotoShopCC2015より保存)
par1.avcダウンロード
par2.avcダウンロード
par3.avcダウンロード
サンプルデータは、トーンカーブプリセットの読み込みで使用できます。
f:id:KTK_kumamoto:20160816221220j:plain

よかったら試してみてください!