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 arefrequently 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 shotsbelow 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 nextpage. 

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