Académique Documents
Professionnel Documents
Culture Documents
COMM/CISS 271
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