3D Text On Fire
This tutorial is going to be a little more advanced than the other ones I have done. It shouldn’t be a problem if you have been following along with our other tutorials or have a grasp of Photoshop. So lets begin.
First we are going to need to grab some photos, the links to them are below.
Fire:
http://www.imageafter.com/image.php?image=b17insektokutor079.jpg
http://www.imageafter.com/image.php?image=b17insektokutor075.jpg
http://www.imageafter.com/image.php?image=b17insektokutor074.jpg
Ground:
http://www.imageafter.com/image.php?image=b20grounds080.jpg
Text texture (3rd one down)
http://www.lostandtaken.com/2009/01/11-old-grungy-film-textures.html
Ok now lets get started.
Step 1
Open up Illustrator and type out a word of your choice, in my case I used the word “FIRE” in ITC Franklin Gothic Heavy. Make sure that each letter is in a different text box. Now using Effect>3D>Extrude & Bevel set up your letters in an interesting way, keeping in mind that they are going to be on fire. It doesn’t have to be exactly the same, but something like what I have below. If you are having trouble with the 3D text, you can look at the tutorial on creating 3D text.
Step 2
Open up Photoshop, and create a new document (I’m using 1680×1050). Fill the background with black. Paste the text you created in Illustrator. Make sure you bring in one letter at a time so they are all on different layers. Resize the text and adjust the angle until you get something that you are happy with.
Step 3
We are going to work on the background first, so grab a yellow/orangish color (Something that kind of has a fire look to it) and create a circular gradient with our color fading to 0% opacity. Stretch the gradient out with your transform tool until you’ve created somewhat of a glow under your text.
Step 4
Grab the ground texture that we downloaded and bring it into our document. Decrease the size and adjust the angle so it looks like it is under the text. If you hold down the apple key and drag one of the corners it distorts it, so you can get a better perspective. Drag it so it is above the gradient layer and change the blend mode to multiply. You can adjust the size of the gradient so there is more ground showing.
Step 5
Now we can start adding in the fire. You can use the lasso tool to roughly cut out the parts of the fire you want.
Step 6
Bring your cut out fire pieces into the document and place them in and around the text. Change the blend mode to lighten on your fire, this will get rid of most of the black areas around the fire. Play around with the flames until you get something you like.
Step 7
Now we want to get rid of the sharp edges we have from cutting out the fire from the other images. So what we want to do is click on each layer, apply a layer mask and then use a black brush with a soft edge to start painting out the edge of our fire.
Step 8
Lets give our text a shadow that is cast by the fire, so it will be a fairly high contrast one. Load each layer of our FIRE text and fill a new layer with black, with our selected area. Go into filter>blur>radial blur, put the amount up to 100 and set the blur method to zoom. Repeat that filter with apple + f, then duplicate that layer. Then merge the two layers.
Step 9
Now like we did with the fire, we are going to mask out the spots that isn’t supposed to have a shadow. Like all around the back we want to get rid of, as well as spots where light would come through the letters.
Step 10
Now comes the time consuming part. I usually make a folder for each letter, then at least two different layers for each letter’s shadow and usually one for the highlight. So lets start off with the E. Create a new folder for it in your layers. Then create a layer for our shadow. Use the tool of your choice to get the selections, I’m going to use the polygonal lasso tool (and the pen tool for the curved letters). Now Grab a big black brush and drop the opacity down to 20%. I usually use one that covers most of the shape I’m trying to paint to get an even shadow. Now start painting, one click at a time, making the bottom darker than the top.
Step 11
Grab another part of the E, one that doesn’t touch the area we already darkened and continue shadowing. You can hide the fire layers, it will make the letters easier to see. So just repeat this with all your shadow layers. Creating a new folder for each letter, and a new layer for the opposite dark areas. This is one of those things that the more you do it the more you get better, and it takes practice to get good at it.
Step 12
Now we are going to start working on the highlights. Using the lasso tool (and the pen tool for the curved areas), cut out one top at a time then putting them in the corresponding folders. Set your highlight layers to overlay and use a combination of yellow, orange and white colors to give the tops of the letters a highlight effect. Repeat this for each letter until you get something you like. If you want to add more intensity to the glow, duplicate the layer or create a new layer and start painting on that.
Step 13
Now we want to grab the texture that what got in the beginning. This is going to give our text a burnt look. So bring the texture into the document and size it until you find a good look for the E. Then load the E layer and select the inverse selection using apple + shift + i and delete. Since it is a lighter texture, I am gong to do an inverse, to make it darker (apple + I). Then Change the blend mode to multiply.
Final
This is my process when it comes to creating scenes with 3D lettering. This tutorial was created to give you an idea of how to create something like this with some basic steps and a little time.
Guaranteed 350-018 exam preparation! Getting certified will be easy with help of 350-029 online training. Download free demo for E20-001 to ensure you are getting what you requires.
[...] See the original post here: 3D Text On Fire [...]
nice effect thanks for the tut..
nice tut, i love the outcome! :)
Nice Tutorial…
Just to let you know all of your images link to the same image.
Regards,
Stevie :D
3D Text On Fire Tutorial…
Popularity: unranked [?]
……
Very nice.
This is great. It would be awesome to do this with someone you don’t like’s name and then send them an e-mail with just the image you created.
@Steve: Thanks, they are fixed
@Aimee: Haha, that’s a great idea!
and thanks for the comments everyone
nice!
come on it’s nice
:x
pretty cool man.
I love this but i’m stuck already!! How do i make a circular gradient for the glow underneath the FIRE letters? Also, you say that it’s going to go on the foreground, is this the layer with the letter E on it or the black background?
Cheers
@rsvr85 This is going to be a new layer, usually when you do a new part like this you should usually create a new layer.
So after you pick your color in the tool bar there is a gradient tool, click that. Then (usually at the top of your screen) there are some options and one of them is a circular gradient. Also up there is some color options click on the one that goes from your orange color to what looks like a gray and white checkered pattern, that’s the 0% opacity.
@rsvr85 also it was supposed to say background not foreground, fixed. Thanks!
[...] Learn How to make Hot Fire Text in Adobe Photoshop. [...]
Do you have cs4 ?
This was done on CS
[...] 22.3D Text On Fire [...]
nice for ur detail pictures to ur photoshop ^^
Thanks very much, very nice presentation, I linked this tutorial on my blog!
im stuck on the last part how do i make the texture that was downloaded appear like that on the letters, could be be more specific?
It will look like that if you change the blend mode to multiply. Sorry, I forgot to put that.
kinda shit is this you don’t even tell us noobs how to get certain things done. wtf make some proper tutorials
At the very top, the very first line it says that it is an advanced tutorial…not for beginners. If you don’t have anything constructive to say or any questions to ask there is really no need for you to comment.
oh thanks. i also discovered that luminosity also works as well for the texture
what you think your all big because you put up some not for beginners. im tryna do a project here and ur tutorial just wasted a period of mine. thanks
There are plenty of tutorials here for beginners. It doesn’t say anywhere on the website that all the tutorials are for beginners. You could have asked a question if you need help, and if you read the first sentence you probably wouldn’t have wasted your time.
trabajo en photoshop y se de lo que es capaz felicidades voy a intentar hacerlo mi respeto para el que lo hiso soy del salvador
This is nothing like any other tutorial on fire effects I’ve seen so far. This is amazing! Final artwork is really striking hot! Thanks for sharing this!
It’s my favourite. Thanks a lot:)
[...] text on fire – Photoshop Tutorial Créditos para o blog, Denis Designs ! [...]
[...] 3D Text On Fire [...]
Thanks for sharing this!
uh, im still confused about the part where you do the highlites.
i dont know where to go for that :O
& i am still confused about the last step, the inverse part.
could you possibly email me back on more detailed instructions please? (=
@tiffany
Start off by highlighting the areas where the fire is, because that will be the brightest part. Then highlight anywhere where the reflections of the fire would be.
And the last step, you are supposed to get the inverse selection with apple + shift + I then get the inverse of the image with apple + I. I fixed it in the tutorial.
I hope that helps.
Great tut buddy, got some great ideas from it. Why do some people get on here and give you a hard time just because they are not experienced enough to follows some more technical steps. Keep it Tyler love your work.
Thanks for a great tut! I’ll have to try that with my next poster design.
Very interesting!
To do fire effect I did something different.
If you want you can check the video here http://artmagicbox.com/blog/
I’m very interesting to your comment.
ciao
Rob
Very nice.
I tried to have a fire effect too.
If you want you can see my video in the following address:
http://artmagicbox.com/blog/
Leave me a comment if you can.
Rob
great tutorial.thanks for your sharing
added to my blog
[...] continue [...]
[...] Por lo menos para saber que estilo quedaría bien con diseños de diferentes temáticas. En DenisDesigns nos enseñan como crear un texto en 3d con fuego utilizando Photoshop, y obteniendo un resultado [...]
Great tutorial. Please keep them coming!
muchhhhhhhhhhho bueno.
very interesting thank you papi
[...] Text On Fire [...]
[...] View Tutorial [...]
thank u nice
what the hell?!?!?!? this tutorial rocks! BOOKMARKED!
[...] Dennis Design [...]
[...] Dennis Design [...]
hey i am really stuck at step number 8 i cant figure out how to do that. can you explain a litllte more clearly
For step 8, you are basically just going to load each of the letters (holding down control and clicking on each of the letters layers), create a new layer, and fill that area with black.
Then we are going to use a radial blur filter and that is in the filter drop down menu then in the blur menu. Set the amount in the options to 100 and the blur method to zoom.
Finally we are going to duplicate the layer to give it a darker shadow.
I hope that helps.
Very nice. I love this effect!
[...] 3D Text on Fire [...]
[...] 3D Text on Fire [...]
Nice Tutorial
thank you very much for your tutorial! Nice tutorial.. I’ll bookmarked your blog!
Nice effect, I like the use of textures to make the text look like it’s being burnt!
On step 13, how do you “load the E layer” so that the texture “wraps around the letter” like that?
Thanks!
Just Control and click on the “E” layer then to get the inverse do Control + Shift + I and delete the rest of the area. Do that for each letter.
The texture just naturally looks like it is wrapping around the letters because of the angles, but you don’t have to do anything special to it.
[...] 3D Text on Fire [...]
[...] Haz clic aquí para ver el tutorial» [...]
[...] 3D Text on Fire [...]
[...] 3D Text on Fire [...]
Excellent tutorial! This is among the best looking text-on-fire effects I’ve seen anywhere. Unfortunately, I started doing it with text of about 20 letters and then got to step 10, haha. I’m definitely not an advanced user, but there’s nothing here that you can’t do if you don’t give it a little time and research if necessary.
Thanks a lot for the tutorial, this is great!
oh yeah, 20 letters would take forever!
[...] 3D Text on Fire [...]
3D Text On Fire…
3D Text On Fire effect…
Great tutorials
[...] View the Tutorial – Denis Designs Share and Enjoy: [...]
nice effect excellent
[...] 3D Angled Text in Photoshop3D Text on Fire [...]
[...] 3D Text on Fire [...]
[...] 3D Text On Fire | Denis Designs http://www.denisdesigns.com/blog/2009/03/3d-text-on-fire – view page – cached This tutorial is going to be a little more advanced than the other ones I have done. It shouldn’t be a problem if you have been following along with our other tutorials or have a grasp of Photoshop. So lets begin. — From the page [...]
Hello this is really nice post and tutorial! Really love it!
VERY Nice. I love this text effect
[...] a little while back by Angie Bowen. I’ve also been seen and been inspired by tutorials like 3D Text on Fire and this Fresh Text [...]
[...] 3D Text on Fire [...]
[...] a little while back by Angie Bowen. I’ve also been seen and been inspired by tutorials like 3D Text on Fire and this Fresh Text [...]
[...] a little while back by Angie Bowen. I’ve also been seen and been inspired by tutorials like 3D Text on Fire and this Fresh Text [...]
[...] 3D Text on Fire [...]
[...] 3D Text On Fire [...]
[...] 3D text on fire [...]
[...] 3D Text On Fire [...]
[...] a little while back by Angie Bowen. I’ve also been seen and been inspired by tutorials like 3D Text on Fire and this Fresh Text [...]
it is great
‘it’s very nice..
i wish could be like you in the near future..
[...] 13. 3D text with fire [...]
Great tutorial even being a beginner there were a few things i had to google on how to do things kudos man thanks will check out more tutorials from you in the future
[...] 3D Text On Fire [...]
[...] Its a one of favorite typography effect that was created using adobe photoshop. Burned 3d text that look so realistic, no need 3d software to create this effect, what you need is adobe illustrator and photoshop. Read Complete Tutorial [...]
[...] 34. 3d text on fire [...]
[...] 3D Text on Fire [...]
[...] 34. 3d text on fire [...]
[...] 3D Text On Fire [...]
[...] 34. 3d text on fire [...]
I like it very much but unfortunately I am a beginner and I can’t do it.Can u make a video tutorial Tyler?I think it will be GREAT!!!Thank you
[...] a little while back by Angie Bowen. I’ve also been seen and been inspired by tutorials like 3D Text on Fire and this Fresh Text [...]
[...] 3D Text on Fire [...]
[...] 3D Text on Fire [...]
[...] 28.3D Text On Fire [...]
[...] 28.3D Text On Fire [...]
[...] 3D Texto en llamas [...]
[...] 3D Text On Fire This tutorial is going to be a little more advanced than the other ones he have done. It shouldn’t be a problem if you have been following along with our other tutorials or have a grasp of Photoshop. So lets begin. [...]
[...] 3D Text On Fire This tutorial is going to be a little more advanced than the other ones he have done. It shouldn’t be a problem if you have been following along with our other tutorials or have a grasp of Photoshop. So lets begin. [...]
[...] 3D Text on Fire [...]
[...] Texto 3D On Fire [...]
i’m new to photoshop but really dig ur tutorial. i use pc not mac and i cant seem to get step 3 right. i skipped steps 3&4 and proceeded till i got to step 8 where i needed to do the shadows.
could u pls explain step 3 to again plzzzzz
keep up d good work bro
[...] a little while back by Angie Bowen. I’ve also been seen and been inspired by tutorials like 3D Text on Fire and this Fresh Text [...]
That looks amazing! I love the effect, especially the text and the way light is used! good job
[...] 34. 3d text on fire [...]
Jay:
All you are doing in step 3 is creating an orange gradient and then stretching it out with the transform tool (Ctrl+T).
[...] 2.柴火中的3D字型 [...]
AWESOME tutorial, really well explained and useful data allaround. great job!
In step 8 when I create the layer and do the radical blur nothing changes, the whole pic is just black :S can’t figure that one out.
Btw nice tutorials!
[...] 8. 3D Text on Fire from Denis Designs [...]
i have learned more about this post so I would like to thank you for the efforts you have made in designing these pictures. I am hoping the same best work from you in the future as well. In fact your creative Editing abilities has inspired me
[...] 3D Text on Fire [...]
hello dear
step 7 in this tutorial, I find it difficult, I can not reach the level of transparency of the lower part of the flame, like flame that is about the picture on the letter E for example.
please le me know What is the exact way to achieve this, and (to get rid of the sharp edges)Optimally///
please let me know if it possible
thanks in advance
pini
thanks for offering great effects
I’ve been wanting to do this tutorial for ever and now I am finally started on. My only problem, so far is getting the background layer to look right. Did you first resize it using free transform then do the perspective? Yours above looks like it may have been smudged or something as mine keeps showing rocks, etc. Or did you move it around until you found a flat spot. Oh and hey rsvr85, I know you from Mintywhite.com…. :-)
oh and on more thing, when you bring it in, do you place it as a smart object, or just copy and paste into a new layer?
dang i think my first post disappeared, i was asking how you brought the background in (place, copy/paste, etc.), and did you just scale and persective on it or ? Having trouble getting mine to look like it’s aligned on the X axis and not like, well a background…tried scale and perspective but still looks like it’s standing up in the background…
I took the top side and moved it to the right, and also moved it down so it looks flatter. And I just found a spot that looked the best. It may look kind of funny at first but once you add the shadows and highlights to it, it should look fine.
I just copy and paste it into a new layer.
[...] 3D Text On Fire [...]
[...] poco de tiempo atrás por Angie Bowen. También he visto y ha sido inspirado por tutoriales como 3D Texto on Fire y esta Efecto de texto [...]
[...] 3D Text On Fire [...]
I’ve been looking around http://www.denisdesigns.com and actually am impressed by the exceptional content here. I work the nightshift at my job and it really gets boring. I’ve been coming here for the previous couple nights and reading. I just wanted to let you know that I’ve been enjoying what I have seen and I look forward to reading more.
I really want to do this, but I am a photo shop novice. Can you write a “dumber” version of this? I need steps on how to apply the textures, also the circular gradient. I keep getting caught up on the command buttons because I’m using windows and you have apple commands. Can you or anyone help? It may just be easier to ask you write “BBQ” on fire since I’ve spent 12 hours on this and can’t get it to work. I need it for a marketing flyer
[...] 3D Text On Fire (3D Yanan Metin) [...]
font good me……….
[...] 3D Text On Fire (3D Yanan Metin) [...]
Having trouble at step 12 with the highlights, can’t seem to understand exactly what you mean for us to do, no matter what i try i cant get anything that even looks sensible. Exactly what do we do to get it to work? (Using CS4 here).
All you are doing is selecting the face of the letters and then using a brush to paint on white, yellow and orange colors with a blend mode of overlay. This will give a glowing look to the text.
[...] 4. 3D Text On Fire [...]
The fiery effect on the text is done really well as it looked almost realistic. It actually inspired me for my logo design and I got my designer from logodesignplanet.com to design a logo incorporating elements found from your tut. It came out better than expected as I thought it would be difficult to look strong and corporate but it looked really polished. Even my friends who were skeptics at first were blown away by how the logo design turned out. I got to thank you for posting this tut as I did show to my designer for reference to how I want it to look like. Thanks heaps!
[...] 3D Text on Fire [...]
Mandy: Great! I’m glad it helped
[...] a little while back by Angie Bowen. I’ve also been seen and been inspired by tutorials like 3D Text on Fire and this Fresh Text [...]
Our business creates a subject funny man destined on the footing of harmonious ‘ and pretty projects.
These projects are carried revealed near the cards the most outstanding staff of unambiguous artists and designers in
the shop who are experts in every discrimination of the word. They are also altogether flexible, so you can
acquire very interesting dealing easter card designs, depending on the individual needs of each client.
We do not own a professional printing machines word of honour the highest blue blood of each own card.
Broad selection of identification b docket allows you to upon the expectations of notwithstanding the most demanding customers
from every conceivable industry. We certify the print and appointment of portly quantities of responsibility
cards in the shortest conceivable time. In our holder, the highest attribute is the payment of the proposed
price and honest service from people receiving and carrying not at home an decree recompense business cards.
With access to the services offered past our website, you can post-haste and without undue
formalities place an sect as a remedy for goods, comment the commitment and approved it and ordered some job
cards. Choose our retinue as a good subject card is much a oath for success.
Greet
Merio Kalendarze
Wow! what an idea ! What a concept ! Beautiful .. Amazing ? :)
[...] 3D Text on Fire [...]
[...] 3D Text on Fire [...]
[...] 3D Text on Fire | Tyler [...]
how does the glow come up?
how are highlights done and how are shadows put?
how are highlights done and how are shadows put? i like this am excited