Dramatic Text on Fire Effect in Photoshop
May 31st in Text Effects by Collis
Flames are particularly hard to render in Photoshop, but in this tutorial I'll show you how to use a photograph of fire to set text to the match. We'll render the look on a nice dark background with a gorgeous text effect to complete the image.
This is the second of our five-part series on Photoshop Typography. If you missed last week's, go visit Create a Spectacular Grass Text Effect.
Hello! I started Psdtuts+ because years ago reading Photoshop tutorials was how I got into design. You can find me on Twitter or on my blog theNetsetter.
The End Effect
As always we'll begin with the final result, so you can see where we're going. It's on a nice big canvas so it can serve as the desktop background on my laptop for the next week or so! click to see the full 1920px x 1200px size.
Part 1—The Background
So create a new document in Photoshop at 1920px wide x 1200px high, and with the Gradient Tool (G), draw in a radial gradient of browns (#5c3d09 to #1f1409) so you get something like what is shown below.
Notice that the gradient is not centered vertically but sits toward the top. In this image we want the top of the text to be on fire, so the top part of the image should be a bit more lit up.
Step 2
As in the grass text tutorial, once again we're going to have a textured background. But rather than starting from scratch, I just copied the background from the previous tutorial, merged all the layers and desaturated to get what you see below.
If you need to make this from scratch, first visit Bittbox to get the original paper textures and then follow the previous tutorial's steps.
Step 3
Now we set the layer to Overlay and to blend the texture into the background and voila!
Step 4
Just to add a bit more texture though, let's run the Texturizer filter. To do this, create a new layer and fill it with a brown/beige color—#66500f. Then go to Filter > Texture > Texturizer and use the Canvas texture with 80% Scaling and Relief set to 4.
Step 5
Once you have your texturized layer, set that to Overlay. This adds some extra fine detail to our texture which is good because we're working on such a big canvas.
Step 6
Next we're going to apply a layer to slightly desaturate the bottom half of the image. This is so that the top looks like it has a warmer glow where the flames are, while the bottom looks a little colder.
So create a new layer and fill it with the color #4b4f3b. Then add a layer mask with a gradient to mask out the top and fade down (so you get the effect shown).
Now set the layer to Color and 45% Opacity.
Part 2—Text + Glow = Awesomeness
OK, we now have a nice background! So let's add some text. I've used the font Trajan because it's a really dramatic looking font. Here I've placed the text in the color #cb9328, then set it to Linear Dodge (Add) with an Opacity of 8%.
What we're going to be doing with our text is making it look like the top half of the text is coming out of the background and is red hot with flames flickering off. This means we're going to run a lot of effects and apply layer masks to them so that only the top half shows while the bottom half reverts to faded out text like we have currently.
Step 8
So first create a new layer group to put all the text layers in—because there will be a lot of them.
Then duplicate the text layer and set the color of the duplicate text to #5e3f1c.
Step 9
Now set the newest text layer to Overlay and 70% Opacity. It should look kind of reddish (as shown below).
Step 10
Now duplicate the text again and set the latest duplicate to a yellowish color—#cb9328. Then set this to Linear Dodge (Add) and Opacity 30%.
Next we add a layer mask and draw a gradient so the latest text layer fades out as shown below, and beneath you can see the reddish colored combination of the bottom two text layers.
Step 11
Next we duplicate the text layer yet again, but put this layer right on the bottom. Set the color to black—#000000. Then go to Filter > Blur > Gaussian Blur and it will ask you to rasterize the text, click yes to that, and then set the Radius to about 4px.
Then Ctrl-click any of the other text layers and go back to the black layer and hit delete so you are just left with a sort of shadow. Then duplicate this layer and merge it with the first so the effect is heavier. You should have something that looks like the screenshot below.
Step 12
Once again, add a layer mask so the shadow quickly fades out as shown. This makes it look like the text is coming out of the page.
Step 13
Now duplicate our black layer again and using the Smudge Tool (R) and a largish soft brush you want to just smudge the shadow around so it looks like burn marks.
Step 14
Here's how our text is looking now. I actually created two sets of "burn" marks, and then four sets of the shadow layer each blurred a little more than the last and each faded back.
Step 15
Now it's time to make the top part of our text glow. So first of all, duplicate the text layer again and place this layer at the very top and set it to a yellow color—#dc9a08.
Then run a Filter > Blur > Gaussian Blur over it with Radius of 8px. Then grab a large soft eraser brush and just erase away parts at the bottom so it's kind of uneven.
Step 16
Set our first glow layer to Soft Light. You might want to repeat the process, erasing even more so the top part is even glowier.
Step 17
Now duplicate the text layer yet again and place this at the very top. This one should be again the same yellow (#dc9a08).
Then go to Layer > Rasterize > Type and turn the text into a flat graphic. Then Ctrl-click the layer and go to Select > Modify > Contract and use a value of 1px. Then press Delete to delete everything except that 1px outline.
Step 18
Now set the 1px layer to Overlay, and you should have something like the image below.
Step 19
Now to our 1px glow add a layer mask to fade it out down the bottom as we've been doing with the other layers.
Then duplicate the layer, and run a Filter > Blur > Gaussian Blur set to 1px. Then duplicate this layer again and blur it by 2px. Then duplicate the layer again and blur it by 4px.
Then Ctrl-click any of the text layers, press Ctrl+Shift+I to inverse the selection and go through each of the glow layers and press Delete to remove any of the blur that has strayed out of the boundary of the text.
The idea is that we want the edges of the text to look red-hot with it fading in to an overall hot glow on the text.
Step 20
Next we duplicate all four of the glow layers and merge them together. This should result in a layer on top which is the original bright yellow.
Grab the Smudge Tool and run over the text, smudging it up to look like heat waves coming off the text, as shown.
Step 21
Now set this latest layer to Overlay and you should have something looking like this!
Step 22
Now we've pretty much finished our text. I went through and duplicated some of the glow layers to make it look even more fiery. Feel free to experiment with getting a real red-hot glow look by doing so.
Step 23
Next, in keeping with the last wallpaper, I've gone and added a quote underneath my main text. This provides a nice embellishment to the page. Try to use colors that fit in with the background and text layer so it doesn't stand out too much, because we really want this to be a secondary element to the main text. I've used Swiss Light Condensed as my font and laid it out just like in the previous Grass Text tutorial.
Part 3—The Flames
Finally, with all our preparation done, it's time to add the actual flames! For this, we need some images of fire set against a plain black background. A good photo is hard to find, and try as I did, I couldn't find a really great free photo. So in the end I used this photo from Fotolia which you can purchase using the link below. There was also an OK photo from Flickr which I've also linked to and which I ended up using later for the "E". So you might want to grab that too.
AcheroN—Fotolia.com
Peasap—Flickr.com
Now the technique for copying the flames over is actually really simple. I actually only learned this technique recently when reading one of Nik Ainley's tutorials for DigitalArts magazine called Create Amazing Photomontages where he did it with water.
What you need to do is:
- Open up the flame image in Photoshop
- Go to the Channels tab and find the channel with the highest contrast, which for images of fire should be the Red Channel, and click on it
- This will make your image appear black and white, and because we're on the highest contrast layer, it will seem really bright white. Now Ctrl-click this channel and it will select all the pixels in that channel.
- Click back to the RGB channel and copy the selected pixels
- You can now paste the flames into your main canvas!
This is actually a really, really useful technique for copying something translucent like fire off a flat background. And as you'll see by visiting Nik's tutorial, it's also great for copying water!
Step 25
OK, so here we've pasted the flames on to our main canvas. (For clarity I've also temporarily switched off the text layers). As you can see, we've got the fire without the black background and it's partially transparent, which means it'll look super on top of our text.
Step 26
Now the next thing to do is to cut up our one bit of fire into a few pieces. Just duplicate the layer and switch off one as a backup first. Then using the Pen Tool, cut up the fire so you work with the contours of the flame so it looks natural. Here you can see I've produced four pieces of flame from the one image. You can also try flipping bits around to make them seem more random.
Set the layers to Screen mode so that any remaining black parts are totally gone, and it's even more transparent.
Step 27
Now because my text is just four letters, I need four separate pieces of fire. For the fourth one (on top of the E) I actually grabbed that Flickr photo and repeated the same process as earlier to create another flame. Also the fire on the letter I has been squashed a little as well to make it look more random.
Step 28
Applying the fire is really as easy as moving the flames over the text. You want to try to match the flames to the shape of the letter so it looks like they are dancing off the letters.
Step 29
OK here I've placed all four bits of flame over the top. It's not bad, but you can see that the I and the R have the same flame and also all the flames aren't very tall.
Step 30
So here I've gone through each flame and using the Transform Tool stretched them vertically. Also I used a bit of judicious erasing to make the flame on the I look a little more unique.
Step 31
Now to make them look even more lit up, duplicate each flame layer, run a Filters > Blur > Gaussian Blur with a Radius of 3px and set the layer to 15% Opacity so it provides a bit of glow around the edges of the flames.
Step 32
So we're pretty much there! This is how the composition looks.
Step 33
Finally we'll add a last highlight. So create a new layer above all the others and draw in a white to black radial gradient as shown. Set this layer to Overlay and 40% Opacity.
Finished!
And there we have it, a text on fire effect! In the next tutorial in the series, we'll be producing the Air image, however it'll be in two weeks, not one—as I'm taking a few days off work!
If you're interested in creating flames from scratch in Photoshop, you might also like to check out this classic tutorial that coincidentally uses the exact same typeface! It's a Photoshop 6 tutorial, and I can still remember reading it like a half decade ago, but it's still very relevant, even if the screenshots feature a super retro Mac interface.
User Comments
( ADD YOURS )wayne hsi May 31st
AWESOME!!! GREAT EFFECT,THANKS FOR SHARING!
( )Alex Beltechi May 31st
Cool stuff. It looks like forged metal straight out of the fire.
( )Dullface May 31st
Looks kick-ass, sweet tutorials so far Collis, can’t wait to see the next!
( )typeministry May 31st
Impressive.
( )Natalya May 31st
Wow. I can’t wait to see the rest of your ‘Elements’ collection! I loved EARTH and FIRE is absolutely AMAZING!
( )Kim Dolleris May 31st
Really beautiful! Thanks a bunch!
( )D. Carreira May 31st
Great effect! Thanks for sharing this!
[OFF-TOPIC]: I’ve updated my personal website, for those who wants to see, the link is in end of this message. (The site is in portuguese, but you can send me a message in english with your ideas trough the contact form. Also, take a look to the site in portfolio
Thanks.
David Carreira
( )Ruben May 31st
FANTABULOUS.
( )Collis May 31st
yay! I’m so glad you all like it! After staring at this for hours and hours, it’s started looking weird to me
But then again so did the grass one, but that went down well too. Guess it’s time for a break…
( )Daniel May 31st
Great tut…
Thanks
Daniel
( )D. Carreira May 31st
@ Collis:
Your work is very apreciated from the PSDTUTS comunity. Keep up the EXCELENT work you have done with the tutorials!
(Sorry for my bad english… )
David Carreira
( )Ben Griffiths May 31st
Truly awesome tutorial, this has to be my favourite to date! Keep ‘em coming!
( )Sacha May 31st
Wow.. tutorials showing you how to do “ice text” or “fire text” with photoshop are pretty common, but this is the first version I see that actually looks like real fire. Using a photo was a great idea !
I’m looking forward to the rest of the series.
( )AGuilbeault May 31st
Wow really nice man!!! Look real!
( )Zach LeBar May 31st
INCREDIBLE! You are a true master, and its great to see you making these incredible tuts from you. i eagerly await the next ones.
( )Andrew Pryde May 31st
Nice tutorial, would make my own but it looks like following that would take ages.
Thanks
Andrew Pryde
( )Nysuatro May 31st
Very impressive, thanks for the share
( )giackop May 31st
I agree.. Impressive.. Thanx
( )Mukund May 31st
Cool Fire!!:D
( )David May 31st
nice effect!
( )antipix May 31st
nice tut !
( )Has.n May 31st
awsome
( )Sabo May 31st
Thnak for sharing, it´s an amazing tut
( )Arik May 31st
Great, this will prove to be very useful for me.
( )Adam Jackett May 31st
Excellent work Collis. I never thought of copying just the red channel from fire, I always used to try and remove the black. This is what tutorials are all about, learning new tricks and tips, even if it’s something so seemingly simple.
( )Glacia May 31st
Ok, this has got to be one of the best text tutorials on PSDTUTS in a LONG time. Simply stunning - thank you so much!
( )Arun Stanislavose June 1st
“A-W-E-S-O-M-E”
I always like the way u guys play with the colors.. U guys are truly Photoshop Gurus..
PSDTUTS Rocks!!!
( )BogDinamita June 1st
that’s more like Collis!! mindblowing man!..
( )Oli Kenobi June 1st
Beautiful! Great job!
( )RickerMe June 1st
Teacher! Excellent tuto!
( )Braden Keith June 1st
Sick nasty, truly; sick nasty.
( )Drawde June 1st
If you don’t mind me saying so, Collis, you create the best tutorials on this site! This is the quality I was looking for. =)
( )Andrew June 1st
This effect looks incredible, so did the grass text. I’m looking forward to the next in the series!
( )LOSWL June 1st
Great tutorial, I love how you did the background effects too.:o) I had a 404 error when I tried to view the full 1920px x 1200px size. :o(
( )krashsquad June 1st
Looks great. You’re always coming through, bro.
( )Wes June 1st
Great tutorial man, I have been waiting for this next installment and I can’t wait to give it a shot today. Look forward to the others and awesome job on this site.
( )ZaFaR June 1st
Wow. I can’t wait to see the rest of your ‘Elements’ collection! I loved EARTH and FIRE is absolutely AMAZING!
( )Javi June 1st
Amazing!
( )forman June 1st
Damn Collis is straight killin it over here.
( )AndrewD June 1st
You guys are on a roll! Keep it up!
( )Andre June 1st
god damn this is tuff. nice tut man
( )Zach June 1st
I hate these comments here. Also Collis the navigation menu man, it needs fixing.
( )Executive Summary June 1st
Sweet tut! Love it, this real, look good. Thanks look forward to next. Christ, I hope this place doesn’t get a forum.
( )Gastón June 1st
O.o This is a excelent effect… amazing! congralutions an thanks for share it
Greetings!
( )rich June 1st
thats hot!
( )whoisantonis June 1st
Very nice tut
( )thank u!
Kamel June 1st
Very Fucking Amazing!
thats all i can say! amazing
Collis’s Tutarial beside that they are great looking always, they also teach me ALOTS of things!!!
i love to see more and more and more tuts from Collis
( )Lamin Barrow June 1st
This is wicked man. Thx.
( )Danny June 1st
That’s so cool, a little long and complicated, but the effect is worth it!
( )Nabil Kaz June 1st
Amazing man! You’ve done it again. Nice quote!
( )Nikhil June 1st
Too good…
( )i made something like that but not with effects you have in there…
the tutorial rocked!!
Gary Pollock June 1st
Awesome tutorial. Maybe One day I’ll publish one. Hmm.
( )markus June 1st
Hey! This is awesome!! I love it!
( )MD June 1st
Very nice effect!
thanks!
( )Seth June 1st
really nice one
( )Bruno Gurgatz June 1st
Wow!!! impressive!!
( )Andrei Constantin June 1st
amazing outcome, thanks a bunch
( )Martin Benes June 1st
Hey man, killer tute! Thumbs Up!
( )Yuri June 1st
good much
( )memeko June 1st
amaaaaaaaaaaaaaziiiiiiiiiiinggggggggggggggggggggggggg
i realy like this one
( )Ariful Alam Khan June 1st
It’s hot. Thanks..
( )bassae June 1st
Wow once again amzed,
My feeble attempt:
http://www.flickr.com/photos/27195126@N02/2539845337/
( )Qbrushes June 1st
loving it.. hey collis how long dose it take you to write a tutorial like this?
( )goldenthunder June 1st
Wow! Lot’s of work went into this! Thank you Collis - it looks great!
( )DaNieL-TJ June 1st
Wow Nice job, congratulations dude
( )Paul June 1st
This tutorial is amazing. The more I see your tutorials around this site the more excited and impressed I get for your future endeavors you in tutorials. Like I said with your Grass tutorial. The way you explain every step is amazing. It SHOWS us how we are utilizing each fetcher in photoshop and lets us actually grasp the concept of what were doing. Most tutorials around the web seem like they have little thought into what their saying apart from showing which hinders tutorials to the max. Its easy to read with a great finish, NICE JOB. I look forward to see the next few you promised!
( )Dom June 1st
that looks really cool, but I’m kind of a noob at Photoshop, and I’m stuck on step 11. what do you mean by “hit delete?” and, also, what is the opacity and blending mode for thhat text layer? thanks.
( )Diesel June 1st
Truly inspiring, well done man.
110% RESPECT.
( )Constantin Potorac June 1st
Hi Collis,
I just want to say that I really love the way you design and the simplicity you use. The effect is very nice and the technique you used is very useful.
I tried to do this, If you remember my Water VS Fire effect… but yours is even better.
Congratulations.
( )Constantin Potorac June 1st
Also as Sacha said there are a lot of tutorials showing you how to make fire text effect or ice but this one is the best and it is unique with a unique outcome.
( )David O'Neill June 1st
As bloody usual this is fantastic Collis, one of the best fire text tutorials I have ever seen….actually scratch that it is the best
Oh I notice that you had problems finding good free fire texture…and here I can help!!!
There is a group on DA called Resurgere who have some of the best high res stock images ever! check out this link for the fire stock, called blaze buy the guys there!
http://resurgere.deviantart.com/journal/12893594/#blaze
Hope this helps you guys,
( )David
Rax June 1st
Nice ! Now I tested this one and the earth one. Very awsome, I really like the text theme. You should do a tutorial about how to make an awsome water / ice text
Awsome tutorial. As always!
( )Rijalul Fikri June 1st
wow, impressive. Awesome tutorial as usual. and the fire text is cooooool
( )NourShow June 1st
Wiiiiiiiw, i mean that is a wow work :p
( )thanks alot for this tutorial
Bobmeier June 2nd
Great Tutorial! This is one of the best tutorials i have ever read. And im really looking forward to the other two elements!
( )Jonathan Solichin June 2nd
That was hot! (pun intended) Thanks for the tutorial!
( )Nate June 2nd
Very nice effect. Thanks for sharing it with us Collis!
( )mattems June 2nd
Collis. Fantastic. This is why i paid for psdtuts+.
Thanks for your hard work!
( )Aaron June 2nd
The techniques you used in here are very informative and the result is spectacular!
( )Miguel Pereira June 2nd
@DAVID CARREIRA
OMFG!
———————
I am already on fire to do this lol
MIGUEL PEREIRA
( )Ignacio June 2nd
The best so far, very high quality, love it.
( )dlv June 2nd
Great one !
( )Damien June 2nd
Very Nice!
( )pHeR-d June 2nd
Awesome tutorial man!
( )Finalfire June 2nd
Thanks for sharing man!
( )Josh June 2nd
Great effect. It’s amazing all the small detail you pack into these things. I would have never noticed the “burn marks” had you not explained that you did them in the tutorial. WELL DONE!
( )Craig Snedeker June 2nd
AWEEEEEEESOME!!!!
( )Philip L June 2nd
Most fire effects look cheesy and unrealistic but this is by far the best fire effect I’ve seen.
( )Dallas Area Web Design June 3rd
WOW, awesome tutorial. We use fire on text all of the time, and this adds new visions and perspectives to it. Keep up the awesome work!
( )Justin June 3rd
easier to just use eyecandy for something like that IMO.
( )Jesse Foster | jf26028 June 3rd
That looks awesome. Thanks for all the detail that went into this tutorial.
( )Matt Radel June 3rd
Friggin’ awesome! I didn’t think you’d be able to come close to the grass effect but…wow. You rock!
( )Jen June 3rd
Hi, i was around two or three steps in when i hit a problem.
I’m using cs3 in windows, and i’m noticing your on a mac, through the pictures.
Most of the commands i can do. But is there a different set of buttons to press for ctrl-click in windows? because i’m getting nothing.
Help?
( )b00m June 3rd
awesome.
( )Joefrey Mahusay June 3rd
Wow this is great effect! thanks for sharing
( )god056 June 3rd
Great! I initially thought you would be creating the flames, but I still picked up something very handy here
( )Alvaro June 3rd
The type is on fire!
( )Amol June 3rd
Nice effect man it will very much helpfull for designing new thing as fast as possible
( )Jacob Stoops June 4th
Dude. I love your tutorials… they are so fricken cool! This might be one of the best photoshop tutorial sites on the net.
( )JD June 4th
Best Ever!
( )Amazing!
Braden Keith June 4th
Haha, made my gravatar from this tutorial. Thanks man, once again.
( )Prince Vasquez June 4th
nice try man… JUST KIDDING!
ITS AMAZING!!!
( )HOT~!!!
Mark Abucayon June 4th
wow very professional text effect. I love this one. two thumbs up Collis I like your designs. Thank you for sharing this to us.
( )recy June 4th
Amazing
( )Fow June 4th
Omg… Awesome, stunning, amazing effect. You are my master :). Great thanks for sharing this with us.
( )Alberto June 4th
Great, thank you very much! Can’t wait to read the next one!
( )wildwise June 5th
Collis you’re the man
( )ads news June 5th
Woow! Excellent design…
This Powerful
( )aj June 5th
Step 17. my computer won’t let me click on modify so i can’t get to contract. Any ideas why?
( )SupaRobs June 5th
Amazing work!!
( )Kate June 5th
Great stuff, I could follow along even as a n00b.
My attempt: http://kizitokitty.deviantart.com/art/TOAST-87709820
Thanks!
( )torka June 5th
wow….
awesomeness at its best!
n___n
( )Bel Koo June 5th
Great and awesome tutorial!
( )Maicon June 6th
My horizon is wide open now! This is actually the best photoshop tutorial site around the internet.
( )punkid June 6th
wow dude… your tutorials are awesome… great job!!!!
( )bayu bocapez June 6th
Wow, this is the first time i can grab a free tutorial. Thanks a bunch!!
( )Jad Graphics June 6th
WOW! What else can I say?
That was one awesome tutorial.
Here is my attempt at it. I think it came out great.
http://www.flickr.com/photos/27399758@N03/2555194463/
( )Black Mamba June 7th
This is one of the most stunning effects ever thanks alot .
( )FantomKiLLER June 8th
wooooooooooow!!1 this is awesome!!!
look at mine is not super but i think is nice
http://fantomkiller.deviantart.com/
( )Jeffrey Kaine June 8th
I’m pretty sure that this is the best text effect that I have ever seen… well done sir, well done.
( )kszhang June 10th
the effect so cool,i love it
( )starsky133 June 10th
complicated, but pwnage. Nice tut!
( )Tirann June 10th
Wow, thankyou so much. I am a total Photoshop slightly self taught noob, but your guides are as complete as possible and I actually completed it. The effect is stunning!
( )jad June 11th
Gr8 effect
thanks for this tutorial
( )Erik June 11th
Question for Tutor. Take your fire logo for example. Suppose I want to put someone’s face behind and slightly above the fire, how do you give the face same glow as if fire shed light on face?
Thanks!
Erik Diamond
( )jinil June 11th
wow! thanks you..
http://croquis.net/blog
( )JP June 12th
nice tutorial man! Just one thing though, step 11 is very unclear to me :/ I don’t understand what you’re trying to tell in that step so I’m kinda stuck there at the moment.
( )xxx June 14th
great! thx
( )Tabasco June 14th
awesome tutorial,
Keep up the great work !
my attempt (unfortunaly quality was lost due to uploading)
http://img.villagephotos.com/p/2004-10/843930/vuur1440×9002.jpg
( )Tabasco June 14th
forget the previous link,
this link version is way better
http://img.villagephotos.com/p/2004-10/843930/vuursmall.jpg
( )evviva niente June 16th
Wow!
I didn’t think to be able to make it!
Thanks toooooo!
ciao
( )yoyo June 17th
Wow!is it a real fire!!!?lolz
( )afg89 June 18th
WOW! It’s so amazing! Thanks
( )Sriteja June 18th
hi., this creation very easy but ur story very very lenthy
( )Kartz June 20th
I was looking up for certain text effects in Photoshop and chanced upon this article. Your site is a treasure trove for Photoshop users!
( )Peter June 20th
Awesome. Very Cool Effect.
( )Ku June 20th
I too am having trouble with 10/11. It’s not making sense to me. I’ve tried to figure out what you mean by delete but it’s not coming out right at all. :/ It seems off. Could someone please help me or explain to me more thoroughly? I’m sorry. I’d be very grateful indeed.
( )Ku June 20th
Oh and mine wouldn’t let me modify for step 17 either. Thanks again though, your work is amazing.
( )Drew June 21st
I was wondering if it would be possible to do this but with a short animation of fire as a layer using CS3 so it would be an animation of fire on letters rather than just a picture. If it is I am definitely going to do that while making a title for a youtube video.
( )GMR June 24th
Great Done ~! thx
( )Jocuri June 25th
Thanks a lot for your tutorials!
( )naidokdin June 27th
thank you .
( )TyPhoone June 28th
Hy !! very cool tutorial,but seems to have the same problem as the others - stuck at Step11..I’m using PC instead of Mac..please Help.THX
( )Brad July 1st
Awesome! So excited for water and air
( )Surfer Fredling July 2nd
Simply Fabulous.
( )persian July 2nd
Beautiful effect….and nice Baha’i reference
( )havoc_2k18 July 4th
its realy awesome & amazing… but i want lil detail tutorial from u in the future…
( )Tmand July 4th
Is their a link to download the .psd file or if your a premium member can you download the file?
( )Rommel July 4th
es bello
( )its beaty, great effect,
Flash Animation July 7th
Exelent fire effect, thx
( )Hikmat Surya Permana July 10th
It was so great! A very great big thanks to Collis.
I give it a try and post it in my blogs :
( )http://xhspz.wordpress.com/2008/07/09/im-burn-in-the-fury-of-my-flames/
ImForTheStupid July 14th
Can anybody explain step 11 to me? What am i suppossed to delete? The black layer? How am i going to have the shadow then?
( )elbazzi July 17th
it is a superb effect but at step 11 i stoped because i didnt understand what is the purpose so plz send me a video tutorial about this effect .send it to acme_labs_1@hotmail.com
( )Loom July 18th
please someone help us with step 11. I tried, but I can´t understand what to do. Thanks.
( )Sebastian July 23rd
GREAT!! Been looking for something like this for a long time. Perfect for what I’m trying to do.
( )Thanks.
carozzi July 23rd
i’ve done it , with a lot of trouble , but finally it came up great
thannks for sharing it
( )Jaimi July 24th
Yeah I am currently stuck on step 11. I also am having a lot of trouble with the layer masks, I don’t quite understand them. However I am pretty new at PS.
( )Jaimi July 28th
Well I didn’t quite get it exact, but this is the World of Warcraft signature I manipulated out of it.
http://i19.photobucket.com/albums/b169/Mairne/Kaelthalay.jpg
( )Phillip July 30th
Anyone kind enough to post a solution to step 11. Can’t figure out what you mean with whole ctlrl-click thing. Thanks.
( )Eva July 30th
Great tutorial, very visually arresting!
However, I just wanted to do the text up to step 23 but I also couldn’t follow what was being said at step 11. I skipped it, made a new layer for the black, blurred text and went on until step 17, where, like above, the “Modify” menu was hidden. Stuck now, I can’t find a work around.
Can anyone who is feeling benevolent help us out?
Cheers!
( )Lexanâ„¢ August 1st
effect super thank you…
( )games August 1st
nice
( )private red August 1st
love the effects. wondrin’ if the other elements would release soon.
( )Ctanner August 1st
I am Stuck at step 11, i ctr+click one of the txt layers then ctr+click the blurred black txt layer. Then press delete and nothing happens, please help im kinda new to PS
email me at ctanner10126@gmail.com
Thank You
( )Alas August 2nd
1. Video tutorial (think about it)
( )2. I’m a noob so some steps skipped stuff ie. step 11 click any other layer then delete??? i did but i dont get a shadow i get solid black txt. Stuck here
3. More screenshots (baby steps)
4. Ur awesome
5. No seriously ur awesome and so is this tutorial
Alas August 2nd
srry forgot
6. Put the .psd file you did for download (no so much lazy just stuck maybe can see mistakes i’m making on original)
( )Fokus August 4th
Thank U! I did it!
( )crazyart12 August 8th
————————————-…(speechlessly amazed)
( )crazyart12 August 8th
:headbang:
( )Gajendran August 8th
Nice amazing tutorials
( )Thanks
Gajendran
http://www.visualsindia.com
GT August 9th
Wow, I like the lighting, makes it look allot realer!
( )Great tut, great outcome! x[)
Hikmat Surya Permana August 10th
It’s my second time to this page and searching for new pages as an example from the comments. I’m looking for and collecting another flame photos.
My old firetexts try is now moved to http://digitalenquirer.blogspot.com/2008/08/im-burn-in-fury-of-my-flames.html
Thanks to Collis, my friends are now called me a new photoshop expert.
( )Rez Exelon August 11th
This might be the single best fire tutorial that I have seen, and I have looked around alot. Thank you sincerely for all your hardwork, and letting the rest of us benefit from it
( )k.s August 12th
Can we get some help on step 11 please?!
( )ciao8604 August 15th
My Step 11’s solution:
1. After Blur the “Black text”, firstly, u choose whole text group. Then, Layer > Rasterize > all layers.
2. Secondly, u must click on any text (i name it “Text A”), EXCEPT the black one. Next, u use magic want tool (tool box), hit on the first letter of Text A, choose Select > Modify > Contract > 1 px. After that, u choos the “Black text” layer, hit delete. Right now, you can see there is only the blur bounder of “Black text”.
3. Do the same process to other left letters.
I don’t know whether the authors did the same process to me or not. But I saw it works kind well! However, it could take you time.
Gud luck ^^!
( )ProtocoL August 15th
This is THE BEST fire text tutorial I’ve ever seen! You’ve been doing amazing work! Keep it up.
( )ciao8604 August 15th
here the shorter way to do step 11.
1. Choose all each text layer. Then go to Layer > Rasterize > Type. All your texts now are transfered to flat graphic.
2. Choose any text layer you want, except the black text layer.
3. Use Magic Want tool (in Tool box). Clich on first letter of text layer you choosed. Then choose the black text layer again. Hit delete. Now you can see there’s only black blur bounder left.
4. Do the same for other left letters.
Done! Becareful n’ Gud luck ^^
( )ciao8604 August 15th
sorry! i fogot. The above is only my solution for Step 11’s issue. So you should change the color of the text to black and blur them as the author taught in his first paragraph of step 11. Then follow my steps.
( )iLLini John August 17th
—————————-
Easy solution to step 11:
—————————-
I think what the author meant was to press Ctrl (Cmd on Mac) and click on the icon in the black layer of type which was rasterized. That will select the type, but not the shadow that was created by the Gaussian Blur. Then hit delete. You will see the dark black type is gone while the soft drop shadow remains.
I hope that helps. I am sorry no one replied with an easy answer by now.
I have been using Photoshop for 5 years now and even I was stumped by what he meant. It didn’t make sense the way it was written. Nevertheless, this is a badass text effect and many thanks to the author.
( )iLLini John August 18th
BTW, here is my attempt…
http://i12.photobucket.com/albums/a235/JohnsPIX/John-02.jpg
( )Oron August 18th
I got lost after step 9 because it is not clear which text layer I should duplicate and everything after hat was just a mess :\. Help anyone!
( )Oron August 19th
Never mind, I solved the problem after reading the Step 11 Solution.
( )Thanks for the Tut! The final result is absolutely amazing!
Asif August 20th
i was also wondering abt step 17 cus my computer wont let me select it. any way round it.
email me at
Fisa_411@Hotmail.com
( )Tamil August 20th
Its pretty good….
( )Katrin August 21st
Like many before me, I am stuck in “step 11″. Any chance for helping hand? Thank´s anyway.
Katrin
( )Olivier August 22nd
These tutorials are awesome… (earth, fire…)
( )Congratulations !
MYGeR September 2nd
I’m french, & it’s the first english Photoshop’s tutorial i I followed. I take some time to have the final result, but the effect is amazing !!! I’m sure i’ll enjoy the next tutorial ! Thanks a lot !!!
( )U+P September 11th
very thanks auther
it is a wongderfull outcome
( )and so detail it was !
sai kumar September 13th
wow!.. its cool.
( )Marcus September 15th
Hmm.. nice tut but many ppl have problems at Step 11, Also me. Don’t really understand what you are trying to say. Anyway…
( )david September 22nd
This is incredible, the manner of exract flasmes form the black background is awsome!!!
( )Kristine September 23rd
I had so much fun recreating this in photoshop! It was amazing to see it transform, amazing!
( )Kim September 24th
Can someone make this on a small scale for me? I just need it to say PYRE. It will be 100 pixels wide and have a height of 56 pixels.
( )Ramesh SS September 26th
Coolest tutorial ever… Thanks to u mate….
( )Juan Manuel September 26th
Muy buen tutorial, gracias¡¡¡
( )Adil September 27th
This tuts was published mnths before, but hey Collis we are still waiting for the rest of the elements!! whr are they??
( )Mark September 27th
I loved this tutorial, i and a go a creating the texture. I took it a little bit further and created a more realistic look. I blurred the edges of the flames and added some burned bits on the floor and in the air. Flames tend o look very blurred at the edges, especially where it gets hot, this is what i feel the tutorial lacks. Otherwise its great!!!!
Heres mine:
http://www.fault151.com/photoshop/fire.jpg
( )Mark September 27th
Great tutorial, i really enjoyed it. I took a lot of your ideas and added a few bits of my own in there too. Heres mine, please note the quality has been reduced a little for the web.
http://www.fault151.com/PHOTOSHOP/fire.jpg
Keep up the good work!
( )moring October 2nd
You are great!!!
( )Maxerateur October 4th
Incredible,
( )That was just so helpful! Thanks a lot.
EquatioN October 6th
Pretty much gave up after step 11. This would be a nicer tutorial if it was simpler to follow. If this is a tutorial, it should be able to be done from beginning to finish by someone with little to no experience using the program. I spent over an hour trying to perfect this, only to find myself stuck at times, trying to google what the heck a “layer mask” is and how to add layers.
( )gamemastr95 October 8th
sorry meant fotoolia
( )nu nu October 8th
This tut is very nice,thank million.
( )Ali October 9th
I’m astounded this is unbelievable … amazin fantastic outstanding … I’m gobsmacked.
I followed yer steps and was about to faint to do something as 1% of what you did. God bless you I’m a humble fan and learner. thanks a million trillion. oh me lord am ova da moon.
below is the link to how I did it, I will try it again and again …
( )http://i454.photobucket.com/albums/qq264/ali_tut/Fire.jpg
Baba October 15th
one of thoughts cool !
( )Peter October 17th
Nice tut but email me Shadownet0@hotmail.com for help….or can someone post a link for a .psd?
Could someone make me one just the text? Email me please.
( )Logan October 19th
Awesome effect i would like to use that on one of my pics but i just started Photoshop and I am sorry but i couldnt even do the first step right… sadface so i was wondering if you could help me out a little more.
( )Deny October 22nd
Great effect and tutorial!
The other tutorials for this serie won’t be published?.. Can’t wait for it.
Thanks.
( )Rizal October 22nd
it was really amazing…very much informative…..
( )i want to learn more through this….kindly send me more details pls……
Paolo October 25th
the tutorial is good but the steps are explained bad.
( )Wes October 28th
STEP 17 fix… you have to use your magic wande to highlight all the text letters, then you can access modify, then contract.. then 1px… then hit delete… then you should be able to continue one….
( )zeb October 30th
i done it , looks great thanks
( )Travis R. November 5th
Hey i love the tutorial, it was spectacular. [i remember using that retro one you showed to i did that back when i took my DGA class in high school]
i figured i’d post some links to the best fire pics i could find for free. there were Four good ones including the one you posted that was free.
http://www.sxc.hu/photo/956165
http://www.sxc.hu/photo/956164
http://www.sxc.hu/photo/956163
all are plenty big. good enough to work with.
For these though i found it easier to keep the text layer visible and after resizing the flame picture move it around to where you can see the contours of the flames and the letters, finding a good place that they seem to line up, then using a medium soft brush with lowish flow erase what you don’t need. I also transform + warped flames to fit better. nothing drastic though. Then repeat for each letter.
the proceed to copy all flame layers and screen. like you said.
great tutorial man thanks for it.
( )SH_Rock November 5th
I am stuck at step 11 For those that have done theirs please share
( )Tommy November 11th
This is an amazing tutorial, thanks…
( )Otávio Augusto November 15th
VIOLENTISSIMO! FANTASTIC MAN! AWESOME! Thank you!
( )Rockin November 15th
Well this was great. But I have no idea how to use the pen tool to cut pieces of the fire, whenever I use it it just makes curves. This is my 1st time using PS. But was great up to there. Thanks so much.
( )Francois November 16th
HEy love the Tut!! Thanx! It’s awesome!!
Here’s my design!
http://s93.photobucket.com/albums/l43/shtdafckup/?action=view¤t=PhoeniXback1copy.jpg
( )Francois November 16th
heres another picture I edited using the same style…
Tell me what you think at:
franna43@gmail.com
Link:
( )http://i93.photobucket.com/albums/l43/shtdafckup/voelkopcopyLo.jpg
Francois November 16th
Hey man! the first link doesn’t work…
Here it is again:
http://i93.photobucket.com/albums/l43/shtdafckup/PhoeniXback1copy.jpg
( )NAYIR November 16th
Great tut, it’s amazing and stunning, but, I’m stucked in step 11, I don’t understan that part, please someone help, mail me if you want, nayir_55@hotmail.com
( )bobby November 16th
Hi,
Im new to this website. Learning about Photoshop.
One thing I wanted to mention is that this is not in Printable form.
I would love to print this tutorial and have it in my achieves.
or at least have a PDF of it.
Would be nice to be able to print these tutorials.
( )would make me wanna come back every day for more….lol
Ani November 21st
i get stuck on step 11 i need help please!
( )Hoang November 24th
Thank you, iLLini John. You put it clear at step 11.
( )Hoang November 25th
This is my first attempt: http://hoang360.com/linhtinh/NhietHuyetFire.jpg
( )Martin November 26th
Thanks for the tutorial here is my http://dl.getdropbox.com/u/61423/Bilder/Media_Empiricus_Wallpaper.jpg
( )ubaid November 26th
thank you and i love Natalya very much my name ubaid
( )i miss you ..Natalya
Lahori_Munda November 30th
Thats awsome…..
I create something same..must check it guys
http://lahorimela.com/forums/index.php?showtopic=3946
( )Cayusa December 2nd
Great tutorial. I used the technique and adapted it to a somewhat different use. Would never have managed though without this tutorial.
Thanks!
http://www.flickr.com/photos/cayusa/2569878338/
( )SomeNoob December 11th
As a newbie trying to make something nice for my website, the result of this tut is awesome, but the steps to make it are poorly explained. Stuck on step 16 not really understanding what do you mean by “erase more”.
Thanks for sharing though, seems greet for some better PS users than me.
( )Dawn December 12th
Awesome - i tried it it worked awesomely– question have you ever made an ice one - it be cool to try - was wondered if you have tried
( )sandy December 13th
Hey .. Its Really a Awesome Tutorial.. Thank u ..For this Great Job..Awaiting for The Next. Tutorials..
( )Dawn December 15th
SomeNoob
it just means if you want to make it brighter you can do what you did the step before - more — but only if u want to
hope it helps
( )Peter December 16th
I was searching for some inspiration for the cover of my book when i stumbled upon this on google. I have to say, this is by far the most powerful effect i’ve created in photoshop. Im looking forward to trying your other tutorials! Thank you for a great job! /Peter
( )Anthony December 22nd
HOW TO DO STEP 11
for the people stuck on step 11 Ctrl + click the Black T on the white background icon on any type layer but the black type one, you will see the type selected, then go to the black type layer and hit deleate.
It’s ok, I had an O-duh moment when I figured this out too.
( )Anthony December 22nd
O and yeah this effect is really sweet!!! I was wondering if someone can post a tutorial on how to do something like this but using like a crazy energy type look… that would be pretty cool.
( )saurav panjwani December 26th
Its jus woww!!!
( )Miss Neal December 27th
I’m ok at photoshop, but yet a novice.
What would really help is is screen shots of the buttons and menus in each step!
If you did that I would love you forever!
( )haifafans December 29th
really awesome !
( )Darkrazor December 29th
Amazing tutorial!! here’s my try
i hope you like it and post if it’s a good try
( )http://img185.imageshack.us/img185/9784/backgrounduf8.jpg
asadullah January 2nd
sweet. i like this alot. thanks for the info
( )Musc January 5th
simply “wonderful”
( )Aessari January 11th
BADASS KICkASS! :] Awsome, thanks!
( )Learned alot today!
lovin it January 14th
Absolutely incredible that you were able to come up with this out of the blue. Thanks for the tutorial!
( )maicon... January 16th
du caraio….
( )magdy January 22nd
very goood
( )Nimmue January 29th
Hey!!!! THANKS FOT THIS TUTORIAL!!!
I have done my own wallpaper! here is:
http://nimmue.monterd.net/wp-content/files/love.jpg
Thanks again!
( )Amy February 5th
Nice tut, thanks for the tips. Your final image is a great background!
( )johb February 6th
hi 2 al my name is john
( )m hvin alot of difficulties in ds tutorial
can ny body provide m its video or send m in sme easy wordings of ds tutorial
my email
kingjack_7409@hotmail.com
Gennick February 12th
Hello. And Bye.
( )Mikael February 15th
This tutorial is awesome! Thanks so much!
( )constantinos February 16th
very nice! but i have a problem creating those shadows! i’m new to photoshop… i do what it says here: “Then Ctrl-click any of the other text layers and go back to the black layer and hit delete so you are just left with a sort of shadow.” but when i hit delete it deletes the layer!! i need some help plz…
( )get entertainment February 20th
Wow this is so cool tutorial. I really like it !!! Thanks
( )Phasmatis February 20th
Absolutely stunning, I have never used PhotoShop before, but this has started a love affair with what this package can do… Thank you so much for the tutorial… WOW
( )writersbloc February 21st
Solid tutorial. Some parts were a little vague when copying the text layer and you really weren’t specific on opacity or blending layer. My biggest problem was the smudging… in CS3 I had to play with the strength a lot, 100% smudge doesn’t work but varying between 60% and 80% between layers did the trick. Here’s my version:
http://www.flickr.com/photos/7642888@N08/3296902482/
( )desu February 23rd
http://img120.imageshack.us/my.php?image=arts05white.jpg
this efect black & white very nice
( )vishal February 24th
it was so cool and ya thanks for sharing your cool idea
( )Ravenna March 5th
I found step 11 the most hard out f them all.
( )Design March 5th
Great tutorial, Thanks!
( )wa March 9th
i’m stucked at step 11 too..
( )Nazareth Marroquín (NazarDesign) March 12th
Great and awesome tutorial!
( )ryan March 18th
only doing this tut now, but its fantastic, got my own desktop bg out of it, and i say its impressive!! well done
( )tasarhane March 18th
Coll.. I like it.. Thanks..
( )Mr. Sifuentes March 19th
got stuck on some of the steps. anybody know if they have made a video tut on vimeo, yet? awesome tutorial by the way!
( )Surendra March 24th
I’m stuck on Step 20…I don’t know what “4 glow layers”…Can anyone help me…I duplicated all the layers but yeah…I get nothing like in the pic….
( )Laura March 24th
a very great tutorial!! congratz! it is really good, i get lost in some momment at read it but i got it, thank you very much for share your time
( )Pedro March 25th
I need help.
I’m a begginer in Photoshop.
How I do the second part of step 11? My result isn’t the same.
( )hudosnyuen March 26th
Thanks for the tutorial!
( )Burak April 7th
psd please
( )zaim April 12th
Woow thankss for the best tutoriels.!!!!
( )CristV77 April 17th
thanks man, its awesome what we r able to do and after experimenting a little, sry it took much time for u, cuz in my case at least it took just a couple hours, so its much easier, haha sry, but any ways, i’m in a halo clan so i was looking ot do something like that for my sig at the forum, so i did and this is the final result:
http://i627.photobucket.com/albums/tt356/cristvida/FiretagF.jpg
thanks again, great job, cant wait for the next!!
( )chanti April 20th
Hoooooooooooo……….
Look like a realistic text fire………….
It’s “HOT”
( )Step11stuck April 22nd
Step 11 is confusing and i’ve even tried the solutions people post up here but its been an hour and I cant take it anymore…I think its confusing because the steps before 11 are also not very clear…like which layer is it saying to duplicate in every step? the first text layer or every new layer duplicated? these things should be clearly said…i appreciate the posting of this tutorial but please…please make it clearer next time.
( )mariana April 28th
this is so hard……
( )Shorty April 28th
Awesome tutorial, was a bit confusing, but once you get it, it’s really simple.
I took what the tutorial… and.. Modified it a bit to create this…
( )Shorty April 28th
http://i121.photobucket.com/albums/o233/justshort/IVGSawesomeness.jpg
( )Olpezo April 30th
Dude! ctrl-clicking doesn’t work in CS3 and CS4… what do i do?
( )Olpezo May 5th
FOR THOSE WHO CAN’T DO THE CTRL-CLICK!
select->load selection and just press OK. Worked fine.
http://i267.photobucket.com/albums/ii313/laggiator/OlPezo-FIRE.jpg
( )http://i267.photobucket.com/albums/ii313/laggiator/OlPezo-red-FIRE.jpg
Asha Singh May 13th
it is very good… but flame is another image… try to do with effects..
( )david May 13th
hi..
i dont hunderstand STEP 11 ==>” but put this layer right on the bottom”
someone can send a picture to explain? Plz
( )MySelf May 16th
It is incredible and fantastic. It’s really professional.
Congratulations.
( )Brandon May 22nd
Great Tutorial!
( )xphunt3r May 29th
its kind of difficult for beginner, but you have well describe to make it easy. Thanks for great work dude
( )LucicX May 29th
o yeah! I searched for this kind of effect a lot of time. 10x a lot for post
( )C May 29th
PSD please. Thanks!
( )Alexei May 29th
Ii have gone completely crazy with fire, im just adding fire effects everywhere, every banner every website =)) every advertisement i make. Even though im not a pro, i just followed the steps of the turorial and i got OUTSTANDING PICTURE , only changed words to “Beauty” will save the world :)) this isssssssssss awesome !
( )Adrian May 31st
I FOUND A WORKING SOLUTION TO STEP 11.
JUST FOLLOW EXACTLY HIS STEPS BUT MAKE SHURE THAT THE BLACK TEXT LAYER IS SET TO NORMAL, NOT LINEAR DODGE (ADD) AND OPACITY 100%
I DID THAT AND WORKED PERFECTLY JUST AS HE EXPLAINED
( )Adrian May 31st
i came up with this
http://i40.tinypic.com/30lp001.jpg
great tutorial
( )bad.boy.ska June 1st
WoW ^o^ So pretty cool …….
( )David June 3rd
maybe you are insterested in this: one user in the DA is selling this design =/
http://dorian1212.deviantart.com/art/Fire-106123917
is this legal? O.o
( )Cliptoematic designs June 9th
very good tut……very interesting and it allows u to work on ur skills..great tut
( )pooja jasani June 11th
ITS REALLY GREAT N EVERYTIME I ENJOY IT WITH NEW FLAVOUR………..
( )shabeer June 11th
thanks
( )hdfgs June 12th
thanks helal la !
( )AL June 13th
amazing tuts!
( )my result:
http://dota.ck.ua/images/stories/wallpapers/dota_wallpapers_06_al_v2.jpg
Makina June 14th
Stuck on step 6… how do you add the layer mask with the gradient? I’m so confused. >.>
( )Mr.Smith June 15th
Impressive tut. I’m very impressed, been looking for something like this for a while, thanks a lot for sharing.
( )mukesh June 22nd
wow its realy intrusting its much better.
( )Gautam June 23rd
In the first step How Do I shift the radial gradient from center to the top
( )Ha Nguyen June 26th
KICK ASSS!!!! THANKSSSSSSSSSSSSSSSSSSSSSS
( )