Published on Sun, Oct-31-2010 by Ian Reyes

Create “Take a Break” 3D Text Composition

In this tutorial, we will show you how to easily create a 3D text in just a few steps then use it in a photo manipulation with some splatters and grunge textures.

The software used to create the 3D texts was Xara 3D 6 and then did the photo manipulation in Photoshop. To create photo manipulation we will use a lot of stock images, your imagination and basic and advanced Photoshop tools. So, try to create this effect.

You May Be Interested In The Following Posts

Final Image Preview

3d text effect

Stocks Used:


Create a New PSD file with the following settings:
Width: 900px;
Height: 1200px;
Resolution: 72 px/in;
Color mode: 8bit RGB;


Let’s start with this breakdancer here. I named the layer as “Breakdancer”. We don’t need the background so I removed it by using Pen tool then mask it out.

3d text effect


Creating the 3D text in Xara 3D 6. This application is one of the easy ways to create 3D text and has a lot of options and design effects to choose from and you can animate the text then render it as SWF animation or a video file or even create a custom screensaver. Anyways here are the steps that I did.

Step 3.1:

Select “Plain text” (Alt+T) in the Design options.

3d text effect

Step 3.2:

In the Text Options menu I used the following settings:
Font Type: Arial Black;
Font Style: Bold;
Tracking: -50;

3d text effect

Then click OK to apply the settings.

Step 3.3:

Click the “Bevel Options” (Alt+B) in the Options Toolbar.
Select “None” in the Bevel styles.

3d text effect

Step 3.4:

Click the “Shadow Options” (Alt+S) then uncheck the checkbox to remove the shadow.

3d text effect

Step 3.5:

Click the “Extrusion Options” (Alt+E) then set the extrusion depth to 70.

3d text effect

Step 3.6:

Now to align the perspective of the text to our stock image view, we can temporarily set it as the background so we see it as we work on our 3D text.
Click the “Texture Options” (Alt+X) in the Options Toolbar.

3d text effect

Select “Background” in the dropdown menu then check the “Texture” checkbox then click “Load Texture” button to browse and load it. X: 6%| Y:-9%.
So as we can see the breakdancer in the background, we can now follow its perspective view then align our 3D text to it.

3d text effect

In this case I set the Horizontal (X) rotation to 10° and 11° Vertical (Y) rotation.

Step 3.7:

Click the Light bulb button in the Standard toolbar or you can just simply press CTRL+TAB on your keyboard to show the Lightings option.

3d text effect

Step 3.8:

Click the “Colors Option” in the options toolbar then change the color of the lights to the following settings in the dropdown menu:

3d text effect

Light 1: White (FFFFFF);
Light 2: Black (000000);
Light 3: white (FFFFFF);
Then you can click and drag the light source according to where you like them to be.

3d text effect

Then press CTRL+TAB on your keyboard to hide the Lightings option.
Disable the temporary background as a guide that we used by unchecking the Texture checkbox of the Background option in the Texture Options (in Step 3.6).
Now we have to export the image as PNG file to save its transparency. Go to File -> Export (CTRL+SHIFT+E). Select PNG as the file type.
In the Export Window, set the following settings:
Size: Current window size;
Color depth: True Color (24-bit);
Options Checkbox: Transparent, Interlace;

3d text effect

Click Save.
Then I created one more group of 3D text “Take a” with the same settings as the “BREAK” 3D texts except that I change the angle of the 3D text (done in Step 3.6) and the lights position (done in Step 3.7-8).

3d text effect


Import the “BREAK” 3D text image in to Photoshoop. Then rotate and resize it up a bit.

3d text effect

Then bring the "Break" layer below the "Breakdancer" layer and skew it a little bit to reduce the Italic appearance of the Break’s layer texts.

3d text effect


Import the “Take a” 3D text image then resize it down as it would look like it is a little bit far and skew it a little bit as well. Place the “Take a” layer below the “Break” layer.

3d text effect


I added some free clouds background found on dreamstime.com then created a new layer on top of the “Breakdancer” layer and applied some clouds brush on it.

3d text effect


Add some concrete wall texture on the 3D texts.
Place the texture image on top of the “Break” layer then set its Blending mode to “Multiply”.
Now we need to mask it with the "Break" layer’s shape. Hold CTRL key on your keyboard then click on the "Break" layer’s thumbnail,

3d text effect

While the “Texture” layer still selected (if not, you should select it), press the Add Layer Mask button beside the fx button at the bottom of the layers’ palette.

3d text effect

Unlink the "Texture" layer to its mask by pressing the chain icon between the "Texture" layer’s thumbnail and the mask so then you can freely move the texture layer without having to change the mask’s position as well but when you want to reposition the "Texture" layer, you have to be sure that the texture’s thumbnail is selected not the mask thumbnail by simply selecting or clicking on it.

3d text effect

Apply Step 7 to the “Take a” layer. You can just duplicate the "Texture" layer that we used on our “Break” layer or you can use another texture layer that you want.

3d text effect


Create a new layer on top of our "Breakdancer" layer then paint some shadow on the head and the hand of the "Breakdancer" with the soft round brush.

3d text effect


Set the foreground color to 0090ff and the background color to white (FFFFFF). Duplicate the "Breakdancer layer" then apply Filter “Neon Glow”
Neon Glow settings:
Glow Size: 0;
Glow Brightness: 50;
Color: 0066ff;

3d text effect


I masked some parts of the "Breakdancer" copy layer with a glossy blood splatter brush. But of course you can use any splatter brush in this step and it might give you different results.

3d text effect


Create a new layer below the "Breakdancer" layer then add some splatter brush. I used the same color 0066ff (we used in the Neon Glow filter) for the brush.

3d text effect


Create a new layer on top of the “Breakdancer copy” layer then add some splatter brush as well but try changing the light blue color to a darker one. I used 003c69 as the foreground color.

3d text effect


Now that we have added some splatters on our "Breakdancer" we should add some on our 3D texts as well. What I did was created the new layer (layer 3) on top of the "texture" layer then applied some splatters brush. I used 003c69 as the foreground color.

3d text effect


Create a new layer on top of the "Clouds BG" layer then add some splatters but this time try to use the light blue color 0066ff but of course you can use the color of your choice.

3d text effect


I reduced the darkness of the Clouds background by creating a new layer on top of the "Clouds BG" layer then applied a soft round brush for about 675px size and 0% hardness with the forground color of white FFFFFF.

3d text effect


I added some grungy texture at the back of the 3D texts.

3d text effect

The image I used has a white background so I changed the layer Blending mode to "Multiply" then changed its color with the Hue/Saturation (Image -> Adjustments -> Hue/Saturation):
Hue: +38;
Saturation: +9;
Lightness: +3;
As you can notice, I am trying to blend the color of the grunge texture with the color of the 3D texts.

3d text effect

Somehow the color of the 3D texts looks pale so I adjusted it a little bit increase in its Saturation for about +25. (And remember that the color of the 3D texts is from the Concrete wall texture [Layer name: texture])

3d text effect


I duplicated the "grunge" layer then changed its position and rotation.

3d text effect


I added some grass renders on top of the 3D texts downloaded from deviantart.com.

3d text effect


Added some birds images from Sxc.

3d text effect


Create a new top most layer then apply some clouds brush on it.

3d text effect


I added some vertical lines on the “Take a” 3D text about 1px thick, 30% opacity then duplicated it and moved it a little bit to the right and reduced its opacity to 10%.

3d text effect


I just sharpened it a bit. Duplicate al layers, then merge it all then apply Filter -> Sharpen -> Smart Sharpen:

Amount: 35%;
Radius: 1.0px;
Remove: Gaussian Blur;

3d text effect

Well that’s it! Hope you like my simple tutorial.

Final Result: Breakdancer

3d text effect

Download Psd file


31 Responses

  • dugs say:

    woah! ang galing kuya jasper! nagmana ka talaga sa kaibigan mong si Aljon Paulus.. hehehe! congrats! pang international na talent mo.. noon, musmos ka pa lang sa PS, ngayon, mutmot na.. :)) ung ‘s’ mo naging ‘t’ na.. hanggaleng moh talagah! :)

  • Mars say:

    whew! so nice, can you contribute also to my website?

  • aljon say:

    Nice! Good! Great! you used all the techniques that i’ve been looking for.. thanks! ill recommend you to our other websites..

  • Ian say:

    Thanks dugs.. :D

    @Mars.. Sure :D

  • Yusuf say:

    such a brilliant tutorial post . keep it going .

  • white say:

    super cool,i must admit.

  • Clipping Path say:

    Awesome post! gr8 work my friend! thanks for sharing..

  • Sagittarius Tatoo Design say:

    It was really excellent work! I just love it :)

  • Marco say:

    Cool Tutorial, only thing i don’t like is to make people Download xara 3d when there is Illustrator that has an editor too..
    but maybe this tut was before that new illustrator version.

  • clipping image service say:

    totally cool…kool 3d text too…

  • Rida SANHAJI say:

    Thanks you This Lesson is very Nice! Good!


Leave Your Response

About PsDeluxe

Psdeluxe is a Design blog dedicated to mainly Photoshop lovers and enthusiasts. We regularly update blog with free and easy to learn free Adobe photoshop tutorials, useful freebies for design projects, powerful tools that will make your work easier and we publish showcase of most beautiful and interesting designers works around the work that hopefully will inspire. Learn Adobe Photoshop techniques with us. Talented and professional designers are always welcome to join our author team. Feel free to subscribe to our Rss feed to be first who get all valuable information for designers.

     Technology news | Wordpress templates | ThemeLabs | Review themes

Recommended Links

Wordpress review theme