Session 4: Photoshop 3d Text Effect Tutorial

Photoshop CS2 Tutorial COMM/CISS 271

Advanced Web Design

Fall 2008 – Class Session #4                      

Instructor: C. M. Sturgeon

P a g e  | 2   

Table of Contents  Text Effects .................................................................................................................................................... 2  3D Text Effect with Photoshop ..................................................................................................................... 2  Creating a new file .................................................................................................................................... 3  Photoshop Tools ........................................................................................................................................... 4  Blending Options ........................................................................................................................................... 5  Creating / applying shapes ............................................................................................................................ 7  Creating 3D effect ....................................................................................................................................... 12  Applying gradient overlay ........................................................................................................................... 14  Applying a stroke to 3D text ....................................................................................................................... 16  Your completed text ................................................................................................................................... 16   

Text Effects    Photoshop is very powerful and has many optional techniques built in.  As many users will  purchase the extra third‐party applications, I want to make it possible for everyone in this  class to learn how to use it as‐is without extra cost.  In trying to accomplish that, I want to  introduce a technique that appears as if it was only by use of a 3D application.     Text effects can add to your already existing website.  Viewers are attracted to a website  first by it’s appearance.  The making of interesting text helps also with making logos or  unique text that indicates the name of your organization.      This handout is to help everyone on each team understand the steps and have a references  in order to be empowered for designing within whatever site you are working. The handout  is divided into several sections with a header dividing them.   

3D Text Effect with Photoshop    There are several routes one use to attain a 3D text effect for their site.   3D applications are frequently used for 3D text, even inexpensive applications that do 3D text are common.  However, the usually produce true 3D images.  In photoshop we will produce a pseudo‐3D  image, technically speaking. Be appearance and to your viewers, this is 3 dimensional.       

P a g e  | 3   

 

  Creating a new file  To start the tutorial, create a new file of 1280 x 1024 px and 72 dpi. Follow the screen shots below to see the steps for creating the new file with these specifications.  Begin by going to the option “File” and select “New” as in figure 1 below.   

Figure 1 

   In Figure 2 you now type in the  settings.  Make sure they are 1280 for  Width and 1024 for Height.  If your Resolution  is set to anything  other than 72, reset it here to 72.      Figure 2 

   

P a g e  | 4   

    Photoshop Tools  • •

Select the rectangle tool in order to make the background of our image  As on the screenshot following on the next page, you will see how to select the  rectangle tool.   

Additionally, you will learn in this section how to add and use shapes.  Just as in this image, click on the image on your PS tools that appear as a  square. This is referred to as the rectangular tool and / or the rectangular  marquee tool.  It can be accessed by simply pressing (M) on the PC.  Now, with this tool selected, click in the upper‐left corner of the blank  rectangle on your screen and holding the left mouse key down, draw a  rectangle.  When you let go of the mouse, you will see the full background is  selected.  This is indicated by the moving edge.    While the background area is selected, click on the gradient tool on your left‐hand tool  bar.  The gradient tool look like this Æ   Upon clicking on this tool, you will have  to go to the “Blending Options” found on the “Layers” as in the screen shot below: 

P a g e  | 5   

 

Blending Options   

From the “Blending Options” you will see a screen similar to this one. 

P a g e  | 6   

 

Follow the above steps, then click on the actually “Gradient” option – as the one that  appears in the above screen shot. When  you click on it, a “Gradient Editor” will  open.  With this component open  change the colors to either the set hex  codes on my image, or to a color with a  similar effect.  The output image of the  one these colors are applied to is as the  one on the following screen.     

 

P a g e  | 7   

  Creating / applying shapes  The custom shape tool (U), opens options of shapes. This is the “small” collection of shapes.  We want the complete collection. In order to attain the complete PS collection of custom  shapes, follow the next page’s instructions, which give details.  

P a g e  | 8   

From the above image, click on the tiny arrow, then scroll down the menu to select “All” –  there you will see the option to “Append” – select “append” for the next step. 

Now that you have the complete collection, you need a specific shape, referred to a the  “pinwheel”  from these shapes.  It appears in the collection as the screen located on the next page. 

P a g e  | 9   

Hold left mouse key down and begin to drag from the center (guess on location) of the  screen.  After you begin to drag and see the image appear, hold the “Shift” + “Control” and  continue drag from the center of the screen to enlarge the pinwheel image to full size.  At  the completion, your image should appear as on the following image. 

 

P a g e  | 10   

Go back to the “Layers” on the right side of your screen. Here you, should change your  settings in two areas, first reduce the “Opacity” to 70% as seen below. 

  Next, you should change the “Fill” to 0% as below. 

  Go the blending options on the layer when the pinwheel is located.  Right‐click on this and  go to “Blending Options” again. Drag the colors around and full “white” portions till have  you have a gradient image that is light in the middle and fades out on the tips. 

   

P a g e  | 11   

After moving the colors around on the gradient tool, you should ultimately have an image  that appears similar to the following: 

  Now we are going to type some text on a new layer that will be ultimately turned into 3D  text – pseudo‐3D that is.    On the following screen – there you will find an image of a screen shot with the text.  There  entailed are three steps to begin transforming – in this case, skewing, your text.       

P a g e  | 12   

Creating 3D effect 

  Begin to skew the text by dragging the upper handles to the left, then some of the lower  handle on the box, to the right.  It should be similar to the following screen shot. 

 

P a g e  | 13   

  Right‐click on the layer containing the text; select “Duplicate Layer” from the options, just  as the screen show illustrates below. 

  Now click on the lower layer and follow the commands for extruding the text.  The  commands are CTRL + Alt as you press the downward arrows on your keyboard. You  should ultimately see an image similar to the one demonstrated below: 

P a g e  | 14   

  The image that I created was done by pressing the down arrow 24 times.  This created 24  additional layers, which is what we need to take care of next.  We need to merge the layers  downward to one flat image.  I have demonstrated that below:  First, select all layers that were just created (be sure to avoid the top layer)  When they are all highlighted as seen below, press Ctrl + E 

 

Applying gradient overlay  After the layers are merged down to one for the 3D portion of your text, with it still  selected, go to your gradient tool from the “Blending Options” found in the layers with a  right click.  

 

P a g e  | 15   

  This time I created a gradient with multiple highlights and shadows using the color scheme  you decided upon using.  Here is an illustration of what mine looks like. 

  Now select the top layer and make sure it is white.  Here is the image I ended up with after  these steps. 

 

     

P a g e  | 16   

Applying a stroke to 3D text  Let’s now return to “Blending options” for the 3D text. Once you get the dialog box open,  click on the option to the lower‐left and click on”Stroke” as seen below. 

   

Your completed text