SadMonkey’s 3D Toy Text Tutorial

This tutorial will show you how to create a 3D text design WITHOUT having to use a 3D program such as Cinema 4D or Blender. All you need is Adobe Illustrator CS2 (or higher) and Adobe PhotoShop CS2 (or higher). You will need a basic to intermediate understanding of each program for this tutorial, but I will try my best to be as thorough as possible.

STEP 1

First, we begin in Illustrator. We will be using Illustrator to create the basic structure of our design using the 3D Extrude and Bevel Feature. Create a new document and set it at 24″wide x 18″tall. Create your type keeping in mind your basic layout and depth order. (What will be in front, middle and back of the design) Final color is not necessary at this step, however you will want to use a lighter color for your elements, stay away from the darks. You will also want to make each basic element a separate color for selection ease later on in this tutorial.

SadMonkey Design 3D Text Tutorial Step 01

STEP 2

Now we will want to implement the 3D Extrude and Bevel Feature. This can be found under Effect-3D-Extrude and Bevel.

SadMonkey - 3D Text Tutorial - 02

There are many different ways that you can be manipulate your designs with this dialog box. We can rotate the image along the x,y, an z axis. We can set a perspective level, extrude depth, bevel options, and shading options. You will want to play around with this dialog box until you achieve the results you are looking for. Using the perspective and extrude depth in tandem can give you quite an extreme sense of depth, which is what I am going for in this tutorial. I have chosen not to use the bevel function. This will make later steps much less complicated. I have increased the blend steps to a higher level for a smoother blend around the shading.SadMonkey - 3D Text Tutorial - 03

Continue using the 3D function on each element until you are satisfied with your overall layout. We’ll be making it “pretty” in a few more steps, so don’t worry about that too much right now.

SadMonkey - 3D Text Tutorial - 04

SadMonkey - 3D Text Tutorial - 05

STEP 3

Now that we have a basic layout that we are satisfied with, it’s time to move this thing into Photoshop where we can start to have some fun. Open Photoshop, and create a new document matching the size you set in Illustrator. I prefer to copy and paste each element from Illustrator into my newly created document in Photoshop. Using CS2 and higher will allow you the option of retaining Illustrator editing capabilities by keeping each pasted item as a smart object. This will also allow flexibility in moving and resizing each element to perfection without any loss of quality or clarity.

SadMonkey - 3D Text Tutorial - 06

SadMonkey - 3D Text Tutorial - 07

SadMonkey - 3D Text Tutorial - 08

SadMonkey - 3D Text Tutorial - 09

STEP 4

The absolute very next step… We need to set up some basic organization in our layer’s palette. For this design, I initially have created 3 folders. Label each folder as to it’s contents. For the DESIGN letters, I have labeled the first folder DESIGN. The second folder MONKEY, and the final folder SAD. You will want to order your folders and elements according to your layout needs. The most front elements at the top of the palette. The most behind elements, at the bottom. Notice each layer is labeled as well. Everytime you create a new layer, make sure to label it immediately. If you find yourself with layer 23 and layer 57, you’re gonna develop quite a headache trying to sort through it all.

SadMonkey - 3D Text Tutorial - 10

STEP 5

Now lets put our attention onto the very most behind layer, the SAD layer. Grab your magic wand tool, “W”, and select the face/frontside of the text. (You should now have marching ants along the perimeter of your text’s face) Without losing this selection, create a new layer, CMD-SHIFT-“N”. Name this layer “SAD Face” or “SAD Front” or some derivative thereof to give you an idea that this is the front side of the SAD element.

SadMonkey - 3D Text Tutorial - 11

With the ants still marching and the empty, newly created layer selected, we are going to fill the selection. To fill, hit SHIFT-DELETE.

SadMonkey - 3D Text Tutorial - 12

STEP 6

Next we will want to work on the sides and back of the text. Create a new layer under SAD Front but above the SAD Smart Object Layer. Name this new layer SAD Back. This will hold the color for the back of the text. CMD Click on the SAD Smart Object Layer Thumbnail in the layers palette. This should give you marching ants around the entire outside perimeter of the SAD element. We want to fill this selection on the SAD Back Layer. Use the same color you used for the front. I know, It now appears to be some funky shaped solid block of color, but it’s about to make sense using the next step.

SadMonkey - 3D Text Tutorial - 13

(Note: This image is after the selection has been made, but before the back fill has been applied)


STEP 7

Now for the shading. Duplicate the SAD Smart Object Layer. Rename the Layer to SAD Shade. Rasterize the layer. Under menu, Layer-Rasterize-Layer. Make sure this shade layer is below the SAD Front layer and above the SAD Back Layer.

SadMonkey - 3D Text Tutorial - 13

With the layer highlighted in the layer’s palette, click CMD-“U” to bring up the Hue/Saturation Dialog box. We are going to want to completely desaturate this layer.

SadMonkey - 3D Text Tutorial - 15

After this layer has been desaturated, set the layer’s transparency mode to multiply with an opacity level around 60%.

STEP 8

Now it’s time to start working on a little bit of shine. Still working in the SAD folder, highlight the SAD Front layer. Double click the thumbnail to bring up the layer effects palette.

SadMonkey - 3D Text Tutorial - 15

We will begin by working with the stroke. Click stroke bringing up that dialog box. We want the position of the stroke to be on the inside, and the fill type to be gradient.

SadMonkey - 3D Text Tutorial - 16

We want to give the stroke a shiny metallic feel. This can best be achieved by placing a hard stagger of lights and darks near both ends and a few softer steps in the middle, like so.

SadMonkey - 3D Text Tutorial - 17

And while we have the layers effect dialog box open, we’re going to add a Gradient Overlay. Set the Gradient Overlay to Screen Blend Mode and lower the opacity to around 35% at a 90 degree angle.

SadMonkey - 3D Text Tutorial - 18

(Note: You will see that Satin has also been checked. Originally I had intended on using this to aid in the overall design, however a few steps down, I decided to remove this effect. So instead of having you add Satin, then remove it later on, you should just disregard it for now. Feel free to experiment. Sometimes it adds a nice touch, but for this design, it was a big NO) If you’re interested, below is the setting I used for the satin effect.

SadMonkey - 3D Text Tutorial - 19

You should now have something along the lines of this.

SadMonkey - 3D Text Tutorial - 20

STEP 9

Now you are going to need to repeat Step 5 – Step 8 for the MONKEY layer.

SadMonkey - 3D Text Tutorial - 21

STEP 10

Before moving any further and repeating these steps on the DESIGN Letters, lets set up a nice background to begin anchoring these elements just a bit. For this background, I simply created a new layer, moved it to the bottom, filled that layer with a solid blue and played with the burn, dodge, and sponge tool until I had something I was pleased with.

SadMonkey - 3D Text Tutorial - 22

I did this step now because I knew I wasn’t going to be happy with the colors I had originally planned on using for the DESIGN Letters. Getting the background down now, allows us to see the relationship between the background and the current letters in use. It also lets us move forward with a little more color confidence. Since I wasn’t confident in my previous choice, I double clicked each individual DESIGN smart object thumbnail. This allowed me to change the color of each DESIGN letter in Illustrator without causing any more unnecessary modifications and steps. I changed each letter to white.

STEP 11

Now that you see some of the steps it’s going to take to get our DESIGN letters prepped it would serve us well to add a few more folders to our layers palette. Inside the DESIGN folder we are going to want to add 6 new sub folders. We want a “D” folder, a “E” folder and so on… We will want to place each layer in it’s folder accordingly.

SadMonkey - 3D Text Tutorial - 23

STEP 12

Now we are going to want to apply steps 5 – 8 to each individual letter. Adding a Front layer, and a back layer. You may not need a shade layer. I was happy with the white shades that illustrator produced, so I duplicated the smart object layer, rasterized it, and left it as is. That serves as my back layer. (You may need to go in with your brush tool to smooth out any unsatisfactory banding that illustrator may have produced)

SadMonkey - 3D Text Tutorial - 24

If you need it, here are the settings I used for the layer effects for the DESIGN letters. They are pretty much the same that were used for the SAD and MONKEY layers, only the colors have changed.

SadMonkey - 3D Text Tutorial - 25

SadMonkey - 3D Text Tutorial - 26

SadMonkey - 3D Text Tutorial - 27

Your result should be similar to this.

SadMonkey - 3D Text Tutorial - 28

STEP 13

Okay, we’re getting close now. Just a few more things to go. Now we’re going to make the faces/fronts all shimmery. Let’s go back to the SAD folder. Highlight the SAD Face layer. Duplicate the layer. Rename the duplicated layer to SAD Front SHINE. Remove the layer effects completely from the SAD Front SHINE layer. Move this layer underneath the SAD Front layer. With the SAD Front SHINE layer highlighted we are going to run the plastic wrap filter on it. Filter-Artistic-Plastic Wrap. Depending on your colors, font choice and other variables, your settings will differ. Find what looks best to you. It may take a little practice to get it just right.

SadMonkey - 3D Text Tutorial - 29

Apply the filter to the SAD Front SHINE layer. Highlight the SAD Front layer and lower the fill percentage to 0% (Note: not the opacity, but the fill. The opacity affects the whole layer, the fill affects the layer contents but not the layer effects.) Now, the stroke and gradient overlay are still visible on top of the newly plastic wrapped SAD Front SHINE layer.

SadMonkey - 3D Text Tutorial - 30

STEP 14

Repeat Step 13 on the MONKEY layer.

SadMonkey - 3D Text Tutorial - 31

(Note: the settings may need to differ a bit from the SAD layer. Again, it all depends on your preference and variables in play.)

STEP 15

Okay, it’s time to add some shadows to anchor all the elements down so they’re not floating away. The first shadow I went after was underneath the MONKEY layer. It was the simplest and gave me a good reference to follow for the DESIGN letters. I simply created a new layer underneath the MONKEY Back Layer. You can name it MONKEY Shadow. I chose a dark grey color, a large round brush with 0 hardness and simply brushed in a base. Set the layers blend mode to multiply and fiddle with the opacity level of that layer until you find a good result.

SadMonkey - 3D Text Tutorial - 32

STEP 16

That was easy, now we gotta add shadows to the DESIGN letters, still simple, but a little more involved… just a bit. I will use the letter G for this process, but it will need to be repeated for each letter. First go the the G folder. Create a new layer and name it G Base Shadow. CMD Click the G Base thumbnail. This should give you marching ants around the entire G. We want to fill this selection with the same color we used to brush in the previous shadow in the MONKEY folder.

SadMonkey - 3D Text Tutorial - 33

Now we want to deselect. Move this layer below the G Base Layer. Nudge the shadow down and to the left. (Be sure to remember exactly how many pixels you go down and how many pixels you go left, you’re going to repeat this process exactly for the other layers.) Apply the Gausian Blur Filter to this shadow.

SadMonkey - 3D Text Tutorial - 34

Set the layer to Multiply and the same opacity percentage as the previous shadow layer in the MONKEY folder. It needs to stay consistent. Repeat this step to the remaining DESIGN letters.

You may need to erase a little of the shadow from some of the letters that are “standing up” and not “laying down.” To do this, select your eraser tool with a fairly large size and 0% hardness. Gently, erase away the parts of the shadows where the letter is not supposed to meet the ground.

Picture-50.5

Now you should have something that looks a bit like this.

SadMonkey - 3D Text Tutorial - 35.5

STEP 17

Almost there, but we need to finish the shadows off. This will take a little practice, but shouldn’t be too difficult. Again, I will use G as the example. So, back to the G folder. Duplicate the G base layer. CMD click the thumbnail (again, marching ants) and fill this layer with your shadow color. Deselect. Grab your Dark Arrow from your tool box,”V”, make sure your “Show Transform Controls” check box is checked in your toolbar. This should give you a transform/bounding box which allows you to resize and transform your selection. Holding down the CMD key, you can select the corner points and manually distort and move each corner one at a time. We are going to want to “distort” this layer to “lay flat” on the ground. You need to pay attention to your angles to keep everything uniform.

SadMonkey - 3D Text Tutorial - 36

Once you have the shape the way you like. We will need to blur the shape. Use the same Gaussian Blur settings used on the previous shadows.

SadMonkey - 3D Text Tutorial - 36

Again, apply the same layer settings, multiply, opacity settings, etc… You may find the shadow still a tad too harsh. I good way to soften the long shadows is either to use a clipping mask or the eraser tool. Both give the same effect, the clipping mask is re-editable. Either one you chose, the process is the same, select a large size brush with zero hardness and a lower opacity setting. Gently brush across the top end of the shadow gradually and slightly lightening the shadow with each pass.

SadMonkey - 3D Text Tutorial - 38

Repeat the shadow steps accordingly to each remaining letter, and we’re pretty much done.

SadMonkey - 3D Text Tutorial - 39

STEP 18

Now you can call this job done, but I never call my jobs “well” done before I apply a few sharpening and color corrections, regardless of the job.

First thing, I merge all layers into one layer by hitting ALT-CMD-SHIFT-“E” . I then duplicate this layer, run a high pass filter at 1.6. Set that layer to a transparency mode hardlight. I duplicate this layer once more. Then I go back to the ALL MERGED layer, and duplicate once more. I run the high pass filter on this one at a higher setting, generally between 5.0 and 8.3. I set this layer to softlight with an opacity level between 65% and 80%

SadMonkey - 3D Text Tutorial - 40

Next, I generally use the Selective Color Adjustment Layer Option. I play a bit with the settings to bolster my color just the way I like them.

SadMonkey - 3D Text Tutorial - 41

And now… I… WE ARE DONE!

SMD-3D-TUTORIAL
I tried to make this tutorial pretty detailed so even the most novice could follow. If you feel any points would benefit from some extra clarification, please feel free to let me know.

ENJOY! A full-size version of the finished design can be found at SadMonkey’s Flickr Page.

Advertisements

16 responses to “SadMonkey’s 3D Toy Text Tutorial

  1. Pingback: 13 Awesome Photoshop 3D Text Tutorials | [Re]Encoded.com

  2. i try but not sukses…

  3. Pingback: 40 Photoshop Tutorials To Create Gorgeous 3D Text Effects |

  4. Pingback: 40 Photoshop Tutorials To Create Gorgeous 3D Text Effects « Design Works

  5. Pingback: 40 Photoshop Tutorials To Create Gorgeous 3D Text Effects | Afif Fattouh - Web Specialist

  6. Pingback: 30 Best Photoshop 3D Text Effect Tutorials | Graphic Design Free Resources

  7. Pingback: 30 Photoshop 3D Text Effect Tutorial |

  8. Pingback: 35 Best 3D Text Effect Tutorials With Photoshop  | Tips For Designers | Design Inspiration | Design Help

  9. Pingback: Amazing 3D Tect Effect Tutorials « Free PSD Tutorials for Photoshop, Graphics,Freebies

  10. Pingback: 20 Amazing 3D Text Effect Tutorials « GraphicBull | Design | Graphics | Layout | Illustration | Web | Advertising | SEO

  11. Just want to say your article is as astounding. The clearness to your publish is simply nice and that i could assume you are knowledgeable on this subject. Fine with your permission let me to grasp your RSS feed to stay up to date with drawing close post. Thanks 1,000,000 and please continue the rewarding work.

  12. Nice, good tut! Thanks a lot

  13. Pingback: 10 Useful and Easy 3-D Typography Tutorials | 1webdesigner.net

  14. Pingback: 10 Useful and Easy 3-D Typography Tutorials : Web design

  15. Can u post the style for this effect? I’ve tried to no avail to duplicate..

  16. Pingback: » Archive » 30 Melhores Tutoriais Photoshop Efeito 3D texto