27
Jan

3D Styled Text

January 27th, 2008

If you're looking for a clean custom web design, then visit the incredible team over at Captain Marketing Thanks for visiting!

Step 1

First of all add some normal text into your document (works best on a white background), I have used a font called Delicious Heavy. Choose a font that is bold and clear.

Step 2

Now because we want to adjust the text using the transform option we need to rasterize the text layer so go to the layers window and right click on the text layer and select Rasterize Type. Now we can go Edit > Transform > Perspective. Drag one of the bottom corner boxes outwards while holding the shift key (this does the other side too to keep the sides even).

Hit enter to set the transformation.

Step 3

Duplicate the text layer and move it up by one pixel. The short cut for duplicating a layer is Ctrl + J and the short cut for moving it up a pixel is Ctrl + Up arrow key (while keeping the text tool selected). Repeat this process 15-20 times until you have something like…

Step 4

Now we are going to be doing the top of the text – the colour. Select the top layer (the most recent duplication of the text layer) and add a gradient overlay (Layer > Layer Style > Gradient Overlay).

Step 5

On the bottom text layer (the original one) add an outer glow (Layer > Layer Style > Outer Glow).

Step 6

Now merge all of the text layers left (the ones without layer styles) and add a gradient overlay to the merged layer (Layer > Layer Style > Gradient Overlay).

Step 7

To finish with we are going to give it a shine, so using Elliptical Marquee Tool make a selection above the text on a new layer and fill it with white. Select the area of the top text layer (the coloured one) and invert the selection and hit delete. Lower the opacity of the shine layer to 33% and you are finished!

Posted by PSFreak! at 01:01 on January 27th, 2008 in Text Effects

14 Responses to 3D Styled Text

  1. David Newby says:

    This is well written, and i found easy to achieve, i found a site with the font on but i assume you can use any heavy font to achieve the same thing

    Great and thanks

  2. Alecal says:

    Kinda nice.. :)

  3. James says:

    Thanks guys, yea I couldn’t remember which site I got the font from. I’ll be making a post with a collection of different fonts on it which I will be referring to in future tutorials so you can use the exact font that I’ve used :)

  4. ridwan says:

    i like it … thanks

  5. alex says:

    this was really good for me much appreciated mate. You’ve got a good way of explaining things :)

  6. keith says:

    I don’t understand the last step.

    Select the area of the top text layer (the coloured one) and invert the selection and hit delete.

    What exactly do you mean by select the area of the top text layer?

  7. James says:

    keith, what you are wanting to do is get rid of the excess white outside of the text area (even though you can’t see it on the white background).

    Go to the layers window and Ctrl + Click the text layer at the top’s icon – this gives the marching ants around the text, then invert that selection to select everything outside of that and then hit delete.

  8. Greats stuff mate,thanks:)

  9. John says:

    thanks a lot for the tutorials….
    i wish you got more…….
    text styles……

  10. James says:

    Thanks Parithosh and John, and yea I’ll have a look at making some more text effect tutorials over the coming week.

  11. Chris says:

    Great Tutorial!!!
    Thanks

  12. tom says:

    there’s nothing i hate more then when people make tuts dont explain something, we look at tuts to get a good understanding of it – how are we suppose to know what invert the selection mean? you’re suppose to act as if you’re making a tut for a complete idiot so that they understand everything. every tut maker knows that.

    so, what is invert the selection?

  13. PSFreak! says:

    Go to Select >> Inverse.

    At what point did the post say to invert?

Leave a Reply

Your email address will not be published. Required fields are marked *

*

* Copy this password:

* Type or paste password here:

4,485 Spam Comments Blocked so far by Spam Free Wordpress

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>