Design 101: 3D Shadow Effect

January 18, 2009 at 2:25 am | Design, Design 101, Tutorials | 3 comments

In light of my last tutorial on giving text weight, here’s another text effect tutorial. This one will create a nice 3D-looking shadow, and it will probably take less than a few minutes to do. A really simple technique, but it looks nice. Here’s what the final result will look like:

Let’s begin!

1. Create a new document, 400px by 200px will do.

2. Using the paint bucket tool (hotkey ‘g’), fill the background with a color of your choice. For this demonstration, I will be using brown (#4d3818).

3. Using the type tool (hotkey ‘t’), add some text to your document. Use whatever font you’d like. I’m using “akaChen” size 60pt. You can download akaChen for free here.

4. Duplicate the text layer (’ctrl’ + ‘j’) and then select the original text layer in the layers palette.

5. With the original text layer selected, go to its blending options (right-click the layer in the layers palette and then click “Blending Options”). Add a color overlay and change the color to black (#000000).

6. With the move tool (hotkey ‘v’) selected, press the down arrow key once and the right arrow key once.

7. Duplicate the layer (’ctrl’ + ‘j’) and press the down arrow and right arrow once again.

8. Repeat step 7 about 7 times, depending on how big you want the shadow to be.

9. Merge all of the shadow layers into one layer (Note that the layers need to be rasterized before they can be merged. To rasterize them, select all of them in the layers palette, then right-click and click “Rasterize Type”). To merge layers, select all of them and in the layers palette, right-click and click “Merge Layers”.

10. Go to the blending options for the shadow layer and apply a stroke with the following settings:

This stroke will add a faint white line around the shadow, adding a bit of sharpness to it.

That’s it! You’re done! The result should look like this:

I hope you enjoyed this tutorial! As usual, here’s the source…

3 Responses to “Design 101: 3D Shadow Effect”

1. Hey Tyler,

   Stumbled across your site and really enjoy these tutorials. I’m getting into web design (finishing a degree in networking, but this is so much more fun) and enjoy em because they’re not overly daunting.

   Keep up the good work.

by Murray on February 10th, 2009 at 1:28 pm | 

2. Hi Murray,

   Thanks for the kind words. It pleases me to hear that some people find these tutorials useful. If you’re getting into web design, you may want to keep your eyes peeled because I am going to be doing an entire web design tutorial that will take you through creating a design concept, actually designing it, turning it into XHTML/CSS and finally coding it to WordPress.

by Tyler on February 10th, 2009 at 2:24 pm | 

3. Sounds good.

   I’ll keep an eye out.

by Murray on February 11th, 2009 at 7:09 am | 

Leave a Comment

Name (required)

E-mail (will not be published) (required)

Website

© Copyright 2008 Tyler E. Treat. All Rights Reserved.

Subscribe to Tyler's RSS feed