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