Kaboom! Exploding Text
Hey good people, Gabriel here with another Photoshop tutorial. Explosions are always nice to watch, but it’s even better to blow up stuff yourself. This is why I am going to teach you how to make your own exploding text that you can show off to your friends.
For this tutorial we’re going to use a little bit of 3D Studio Max, so make sure you have it and that you know your basics before you start. We’re also going to use textures, which you can grab from sxc.hu. That’s about it, everything else we’ll be creating ourselves. Now, does that sound cool or what?
Step 1
Create new document (Ctrl+N), any size (I used 900×600), then fill up the layer with #000000. Name this layer “Background”. Create new layer (Ctrl+Shift+N) and fill it with #090e12. Name the layer “Bg Light” and add a layer mask to it. With the mask selected, grab the Gradient (G) tool, set it to Radial Gradient, press D to reset the foreground and background colors to default and drag the Gradient tool from the center of the document towards the edge to get a circular light effect.
Step 2
Time to create some fog/smoke. Create a new empty layer, name it “Smoke”. Make sure you’ve got the default colors on (press D), go to Filter › Render › Clouds. Set the blending mode to Soft Light.
Step 3
Time to insert our 3DS Max rendered text. Unfortunately how to achieve the text effects in 3DS Max is not the object of this tutorial, so you must know your way around it before you actually start this tutorial. Basic directions would be to create the text letter by letter, arranging each one in a different position as if they’d be blown away. Give it a Bevel modifier, set up the lighting and an optional camera for rendering angles. Set up the materials so that the text reflects the environment to give it that cool shiny effect. Render it at 1600×1200 or more so that it will be easier to cut out the background in Photoshop without any weird edges.
Anyway, we’ll be creating everything else in relation to this text so after you cut out the background, paste it in your document and adjust its size accordingly. Let’s name this layer “Kaboom” and set its Blending Mode to Luminosity for later on.
Step 4
Next up, we’re going to create some smoke effect behind the text. Create a new layer below the Kaboom layer, select the Lasso tool (L) and draw up a distorted selection around the text. Feather (Ctrl+Alt+D) the selection by, say, 30px, then go to Filter › Render › Clouds. Press L to bring up the Levels window and play with the Red, Green and Blue levels until you get an orange color with strokes of reddish orange here and there. Set the layer style to Pin Light, duplicate the layer, Transform it (Ctrl+T) and flip it horizontally. Duplicate the layer again and set its Blending mode to Hue.
Step 5
Some more smoke and light effects. Grab the lasso tool again and draw a selection in the same way you did on Step 4, except this time draw it in a more “circular” shape (meaning not so spread horizontally). If this explanation fails to do it, just take a look at the image below 
Feather the selection again by 30-40px and fill it up with clouds (Filter &rsaquo Render › Clouds). Set the Blending Mode to Color Dodge, now duplicate that layer and set its blending to Hue. Create a new Levels Adjustment Layer 
above the last layer we just made and press Ctrl + Alt + G to group it with the layer below. This gives the effects created with the adjustment layer only to the grouped layer. Set it as you see below:
Now you should have the following result, or similar:
Step 6
Next we will add motion effect to the text. Duplicate the Kaboom layer, go to Filter › Blur › Radial Blur – Amount: 10, Blur Method: Zoom, Quality: Best. Apply a circular gradient layer mask, then set Blending Mode to Overlay. Duplicate the Kaboom layer again, apply a Radial Blur as follows: Amount: 40, Blur Method: Zoom, Quality: Best, give it the same type of mask as above and set the Blending Mode to Overlay. Press Ctrl + L to play with the Levels and give it a bit of a golden color. Duplicate the Kaboom layer one last time, apply a Radial Blur of 80, same other settings as above, bring up the Layers window (Ctrl + L) and give it an orange type of color. Move this layer below the Kaboom layer.
Step 7
Let’s add one more light burst effect. Create a new layer, grab the Lasso tool and draw a selection with an irregular shape. Feather the selection (Ctrl+Alt+D) with about 20px, then press Ctrl + L and give your shape a red-ish color (view the images below for details). Give it a Radial Blur of about 80, Blur Method: Zoom, Quality: Best. Duplicate this layer and press Ctrl + T to transform it, scale it to about 70% then modify the Levels (Ctrl + L) to give it a light orange color. Duplicate this layer once.
Step 8
Time for some more light effects. Create a new layer. Select the Pen tool (P), make sure you have the Paths mode selected and draw a wavy shape like in the image below. Select the Brush tool and set it like shown below.
Select the Pen again, right-click and select “Stroke Path”, then select Brush from the drop-down menu and make sure you have “Simulate Pressure” checked, then click OK. You should now have something that looks similar to the swirl in the image below. Give it a Color Overlay of #ffdf72, then select and erase the areas shown below to give the swirl a 3D effect, as if it would revolve around the text. Add a Mask to this layer, select the Gradient tool with a linear gradient and use it on the mask so that the swirl is transparent in the middle and opaque on the edge. Duplicate this layer and using the Gradient tool draw the same type of gradient, but in such a way so that the swirl is still transparent in the middle, but opaque on the opposite edge.
Create new layer, grab the Brush tool and set it pretty much the same as above, except that you should use a larger size brush, say 10-15 and Scattering should be about 600%. Use the brush a couple of times until you get an effect like the one below.
Step 9
And for our final step, we’ll add some texture. I got my texture from sxc.hu but you don’t have to use the same one, you can use any texture you think would work. Select the Kaboom layer, paster your texture in the document, scale it down a bit so that the texture details are sharp, set the layer blending mode to Multiply.
Holding Ctrl click on the thumbnail of the Kaboom layer to create a selection after its shape, then click the Add Layer Mask button to do just that, add a layer mask in the shape of the text. This ensures the fact that our texture does not flow outside the boundaries of the text.
And there you have it: exploding text. I hope you enjoyed it at least as much as I did making it. If you’ve got any thoughts, comments or critiques please do leave a comment – I love to hear from you. If you happen to have an idea for one of my next tutorials, don’t be shy, let me know and if it’s interesting enough I will try to make it happen for you.
Happy Valentine’s Day, by the way!
Post comment
233 Comments for Kaboom! Exploding Text
Cool tutorial. Keep up the good work.
this is a super tutorial i liked it loads but badly i wont be able to try it since i know nothing about 3d max…
very excellent keep it up ..
Coolll man…..;)
Should show how to make the 3d txt =)
Freakin Awesome!!! Congratulations… I´ll try to make it
…
Byezzzzz
Good job,thanks.
Thanks..
Nice tutorial man, keep it up.
… it`s looks better because u have a 3d text…
u…i`m going to search it..))
better take a 3D font
nice tutorial..!! good work..man))
Very kool I love it but I don’t have the programs to make or do this. I am doing a show March 22, 2008 and would like to know if you could build me a mpeg 2 file of the following text GOSPEL EXPLOSION 08. I would like for it to start small and and start growing bigger than stop for about 2 seconds then explode. It will be a cool intro and I would be willing to pay you what you want. I would like for it to be on a black background with stars as if it was out in space. The colors of the letters to be gold and 3D. Email me back if you are interested and keep up the good work. I love it
I don’t like it that you used 3D MAX. But the ‘kaboom’ effect is really nice.
Plz giv the tutorial for the 3d text effect
it was extremely confuseing…..like…c’mon..the instructions were not clear..grr
Nice site!
Please Tutorial 3D Text Effect Please !!!
thank you so much, wonderful tutorial.
this is very cool!
Very nice man. It really goes “boom”.
Rocking superb ur great
Realy nice tut.
Hello Gabriel, awesome work done and I was wondering if you could make this exact picture for band but with our band name, we would pay you, or you could just help us out, if your interested just email me back. Thanks!
@Tanner: Unfortunately, I am quite busy at this time so I cannot help you out.
You can use this exact same picture though, as long as you put a copyright notice of where you took it from. (i.e. http://www.tutorialsphere.com or http://www.tutorialsphere.com/homemade)
dang that sux because I am fine with posting a copyright notice, I just have no clue how to use 3ds max to make the letters, and I tried making my own 3d version of letters using photoshop but it came out nowhere near as good as the 3ds ones.
good tutorial.
Nice tutorial. tq. try it now
Good effect.
Very nice man. It really goes “boom”.
iam instrssed thelearning the photoshop but how can i leran but i see the website but i can’t learn plaz hlep me
Hi Man
Awesome tutorial.
I made the 3D text for my version using Xara Extreme. Very easy to use. You can get a demo at their website and if you like it far cheaper.
Check it out.
Nice effect, but like many others, I don’t use 3D Max. But, I used a 3D Photoshop technique as an alternative. Try:
http://biorust.com/index.php?page=tutorial_detail&tutid=38
excelent! I lern a lot of new thing and a lots of new idea is in my mind.
高手~要是有视频教程就好多了.
Hey Gabriel, Awesome tutorial, but I am very confused on one part. I have the 3D text and everything, but it seems on step 4 it doesn’t come out as smooth as your over lay. I am putting it on Pin light, but it seems to be very cloudly like, so to say. In your example it looks very smooth.
Well after thinking, “It will probably change on the next step.” It didn’t. I couldn’t get the effect at all. The blueish green wouldn’t come up at all. It just looked weird haha.
If you could help me out that would be awesome. If you need the PSD file to see if I did something wrong I would be more than happy to give it to you.
One other thing I thought it could be was the text I used. I have 3 words, but they are stacked on each other. I don’t know if this helps at all.
I hope you can help me out!
Thanks,
-Eric
Hi Eric,
Did you play with the Red, Green and Blue channels in the Levels window first (Ctrl + L)? If not, that is probably why you’re not getting the right results.
It will probably be more clear to me if I saw the PSD file…
Yes, I did play with those, but it still came wrong. It also seemed like it wouldn’t get as bright/have as much color fill as you had. How would I send you the PSD?
Qual é a fonte usada no nome Kaboom ?
I loved the tutorial but could anybody tell me what a “circular gradient layer mask” is. I got lost at that point.
@Peter W:
1. You add a Layer Mask to your Layer
2. You select the gradient tool (G)
3. You select Radial Gradient from the tool bar at the top of the Photoshop main window (just below the main menu)
4. Select the mask in the Layers palette, press D to select the default background and foreground colors and draw a gradient. You’ll get an elliptic mask. If you hold down Shift while dragging the gradient tool you’ll get a circular mask.
Simple
Good tutorial but I’m French and I don’t understand this tutorial. Can you translate this tutorial please ?
Loved the info , I am going to give it a go looks great .
nice very nice.. thanks
Superb!!
thanx 4 sharing
keep it up
wicked site
PLEASE TELL ME WHAT FONT THIS IS.
Wat is this font???
Great tutorial, and you can also use Illustrator to do the 3D text guys!
Wow that is pretty neat. I’ll have to get the 3D program for this as I only have PS7.
Cool tutorial. Keep up the good work.
this one the supperb effect. If here 3D text effect maiking in photoshop is justify.
Its a nice tutorial i guess, but when ur writing for example:
Step 7
Let’s add one more light burst effect. Create a new layer, grab the Lasso tool and draw a selection with an irregular shape. Feather the selection (Ctrl+Alt+D) with about 20px, then press Ctrl + L
When i do press CTRL L it says : Could not complete the levels of command because the selected area is empty, now im totally lost, for example.. and i’ve used a very long time on most of the stuff you’ve written trying to understand, but elaborate and ur toturial is absolute awesome, anyway please help me on the step 7 :p
Nice work , amazing photoshop text effects
this is nice… but it would be nicer if its animated… how will that be made possible… ?:)
really………nice tutorial…….!!!
Cool tutorial. Keep up the good work.
PS tutorials that require 3dsmax fail
I don’t think they “fail”.
Obviously, this effect can be done without 3DS MAX, only in Photoshop, but the amount of time spent would be at least tenfold.
tnx for your great tutorial .
Tutorial bacana
Hey fantastic tutorial I love it! but…. Shame on me
I can get the circular light effect… God! so embarrasing I know you explain it so many times and i do it, step by step but I can’t get it pls!! pls!! help me…
wonderful !!!!
Hi this is Chaitanya nice web site for learners
superb, very good tut
Really cool tut. I am familiar w/3ds and got the 3d text no problem but, step 8 stopped me in my tracks. Confusing, appreciate some clarity on that step….Thanx
Wow fantastic result! Keep posting!
Nice text but the most interesting part is the 3d text which this tutorial does not cover.
For God sake!!!! You’re awesome bro!!!!
excelente trabajo de mucha calidad, gracias por su enseñanza. la vida paga bien a quien lo da todo sin recibir a cambio nada. felicitaciones desde fusagasugá colombia
Excellent effect dear let me know where can i get more effects from u
cool art
THIS IS NCCCC TUTORIAL,
EXCELLENT WORK……..KeEp iT uP
hey nice tutorial thanks
but i don’t khnow how to fill the layer with #00000 please help thanks
@gtr: It’s described right in one of the steps.
1. You pick Black (#000000) as your foreground color
2. You fill the whole canvas (assuming this is what you want to do) or a selection with this color by pressing Alt+Backspace.
That’s it
You should also show how to make de 3D tekst!!
really awesome tutorial.
With out the 3D max instructions, the tutorial not works!
i cant fill the background with randomw hex code??? can anyone help me
Wow very nice effect!!! thanks!
great tutorial
cool & nice thanks
I am an end user client looking to contact Gabriel to find out if he can do a freelance 3-D corporate text title job as per his tutorial for a website I am having done for my company.
Please contact me ASAP if interested.
Thank You!
Eric
Stunning work. I’m going to try and work through it. I’m a little out of my depth here (I’m new to PS) but jumping straight in is the best way to learn.
Cool tutorial i did this and it turned out to look really good, so keep up the great work.
thank yooooooooooooooou
hey, this effect didnt work as well for me i did everythign step by step the outer edges werent as smokey and foggy they were more in shape
Thanks for the tutorial. I have been looking for this. Your version is explained so easy
GREAT WORK….
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.
Great tutorial. Thank you.
Thanks for such a 3d text effect tutotial.
awesome tutorial, i learnt alot…thanx to u……
Great tutorial!!! For those who didn’t/don’t know how to use 3D max… i didn’t either… just experimented
Thank you!!!!!!
Great piece…but the tutorial really stinks. Your explanation and direction could really use some help, as well as the use of 3DSMax which you could mentioned that most people using Adobe Suite could utilize Illustrator using the 3D Bevel & Emboss tool. Your instructions took a bit of deciphering but once things trudged through it came out pretty well.
great post as usual!
Great tutorial, thank you!
I agree with quite a few other comments here.
I really wish I could understand the tutorial more. We need more direction and info for photoshop as there are many settings. My biggest problem was the gradient thoe I eventually figured it out myself. Theres tons of different ways to have a gradient, Do we want the one with transparency or without? Do we need dither and transparency checked?
Even after i figured it out my soft light clouds still dont look anything like yours. Mine look much darker than yours. You also dont explain layer masks. My orange and red look quite a bit like yours but for some reason when I hue it, it turns blue instead of green. Etc Theres many things that need explained better.
Hopefully if I sit here a few more hours I can figure out how to get my explosion to look like yours.