炎文字の作り方 プログラマにもできるPhotoshopの使い方

Step14プログラマーでもば作り方さえ知っていれば簡単に作れる物は意外と多く、ちょっとしたデモでもこういうエフェクトを使うことでお客さんのウケが良かったりする。

というわけで、プログラマーでもできるPhotoshopの使い方を勉強中w

今回は、Photoshop Tutorial: Text on Fire EffectこのへんとかPhotoshop講座・メモ集:テキストを燃やせ!この辺をやってみた。ただ、ブラシとか感覚に頼るところはなるべく、感覚に頼らず別なエフェクトに置き換えて、デザインセンスのない僕みたいなプログラマでもできるように修正してみた

Step1 文字を書く

step1正方形のキャンバス(今回は約700px四方)を作り、黒で塗りつぶした。
そこにテキストレイヤーで任意の文字を白文字で書いた。

その後、レイヤーを選択し、テキストのラスタライズでテキストを図形化した物を複製する。以後は複製した方にエフェクトをかけていく。

Step2 回転する

Step2
イメージ>>カンバスの回転>>時計回りで文字を回転させる。


Step3 風エフェクトを1-3回かける

step3
 フィルタ>>表現手法>>風
 のエフェクトを1-3回好みでかける。かければかけるほど炎が立ち上がります。個人的には2回ぐらいがおすすめ。もちろん4-5回でも可といえば、可だけどやりすぎ。


Step4 カンバスを元に戻してガウシアンブラー

step4
 イメージ>>カンバスの回転>>反時計回りで文字を元に戻し、フィルタ>>ぼかし>>ガウシアンブラーで、炎をぼかす。1px~3px程度をお好みで。今回は1.4pxほどかけた。


Step5 オレンジ色に着色

Step5Step5はちょっと複雑なので要注意。

 まず、レイヤーで、Step5までで作ったエフェクト付きの文字と、背景の黒のレイヤーをCTRLを押しながら選択。2つのレイヤーが選択されたら、右クリックでレイヤーの複製。そのままもう1度右クリックでレイヤーの結合
 これで、背景が黒のエフェクト文字ができあがったはず。

 そうしたら、その新しいレイヤーにイメージ>>色調補正>>色相・彩度を適用
 ダイアログボックスが出てきたら、色相を40、彩度を100、を明度0、色相の統一にチェックしてOK

 これでオレンジ色の文字ができたはず。


Step6 赤色に着色

Step6 Step5のレイヤーを選択して、複製。
 複製したレイヤーにもう一度、イメージ>>色調補正>>彩度。今度は、色相の統一にチェックはOFF、色相をー40、彩度を100、を明度0で適用。
 これで、文字が赤くなったはず。

 そうしたら、赤くなったレイヤーのモードを通常から『覆い焼きカラー』に変更して、赤いレイヤーとオレンジのレイヤーを結合。これで、なんとなく炎っぽい文字ができあがる。


Step8 中心の黒文字を作成

Step8
 またもやレイヤー操作

 初めに作った、何のエフェクトもかかっていない白文字のレイヤーを複製。複製したレイヤーを一番上にもってくる。

 もってきたレイヤーの文字色を、塗りつぶしツールで黒にする。

 次に、Step7で作った、エフェクト付きのレイヤーを複製。一番上にもってくる。

 一番上にもってきたら、そのレイヤーにレイヤーマスクを付ける。レイヤーマスクは□の中に○があるボタンで作成できる。

 ※サンプルのレイヤーは結合の度に複製をとっておいたので上の手順で作った物よりも若干レイヤーが多いです。


Step9

Step9マスクレイヤーができたら、そのできたばかりの白い□枠をクリックして、マスクに対して作画します。

次に、描画色を白、背景色を黒にして、グラデーションツールでグラデーションを作ります。上が白(スタート) 下が黒になるようにグラデーションをかけます。

 この時、文字の上1/4ぐらいからかけはじめ、下1/4ぐらいで終わるようにグラデーションをかけると写真のように



Step10 炎を波紋化する

Step8
 ここまでできたら、上から3番目にあるはずの、炎エフェクトがかかった、レイヤーをもう一度選択し、フィルタ>>変形>>波紋 効果大をかけます。これで炎が単純なブローから炎っぽい揺らぎを持った炎にかわります。
 効果はお好みで、小でも中でも可

Step11 文字を少しずらしました

Step11次は、鏡文字化なのですが、gの位置が下過ぎてじゃまなので上にずらします。

本当はもっとまえにやっておけばよかったorz

ズラした部分はちゃんと黒で塗っておきます。


Step12 文字を反転させる

Step12
 処理の前に、表示されているレイヤー全てを選択して、複製し、結合しておきます。

 結合したレイヤーを複製します。

 複製したレイヤーに編集、自由変形を適用します。

 真ん中上のぽっちをつかみ、下までぐぐーーっと、持ってくると、反転するので、反転したら、中央のポッチをつかみ上にズラして、文字がかがみっぽくなる位置までもってきます。



Step13 完成~

Step14


 できた~

Photoshopは簡単

 基本的に、このぐらいのデモレベルデザインであれば、Photoshopはすっごく便利なツール。プログラムと同じで、上から順番にコマンドをたたき込んでいけば、簡単に結果が帰ってくる。


 便利便利~~~

 まだまだ勉強していきたいと思います~~~



Adobe – Adobe Photoshop CS3 Extendedのダウンロード