Wiley photoshop CS5 digital classroom split

Creating the text for the links

Lesson 12, Creating Images for Web and Video 331

12

4 Click and drag the Size slider to the right until you reach the value of 25, or enter 25

into the Size text fi eld. Press OK to close the dialog box.

Change the options for the Outer Glow style. Result.

Creating the text for the links

Now that you have the header text completed, you will create the individual text layers that

will serve as links.

1 Select the Type tool ( ) and click somewhere to the top right of the large kite the man is

holding in the image, the text cursor appears.

The Type tool remembers the last settings, such as font and size. Before typing you need

to change the text size and orientation.

2 Choose 30 from the Font size drop-down menu, then click on the Left align text button

( ) in the Options bar.

3 Type Sales, then press Ctrl+Enter (Windows) or Command+Return (Mac OS) to

commit the text entry and exit the type options.

Pressing Ctrl/Command+Enter or Return is the same as pressing the Commit ( ) checkbox in

the Options bar.

4 Position your cursor under the Sales text and click to create a new text entry. Exact

position is not important as you will reposition the text later. Type Service, then press

Ctrl+Enter (Windows) or Command+Return (Mac OS) to commit the text entry and

exit the type options.

PSCS5.indb 331 4/8/2010 5:14:46 PM

332

Creating the text for the links

Adobe Photoshop CS5 Digital Classroom

12

5 Position your cursor under the word Service and click and type About, then press

Ctrl+Enter (Windows) or Command+Return (Mac OS) to commit the text entry and

exit the type options.

6 Position your cursor under the word About, to make the last text entry, and click. Type

the word Contact, then press Ctrl+Return (Windows) or Command+Enter (Mac OS)

to commit the text entry and exit the type options.

7 Choose File > Save, or press Ctrl+S (Windows) or Command+S (Mac OS) to save the

fi le. Keep this fi le open for the next part of this lesson.

Positioning and distribution of text

In this part of the lesson, you will use the Move tool to reposition the text and then distribute

the vertical space between them evenly.

1 Select the Move tool ( ) and Ctrl+Click (Windows) or Command+Click (Mac OS)

on the word Sales (in the image). By holding down the Ctrl/Command key you have

turned on the auto-select feature. You can easily activate layers without having to go to

the Layers panel.

With the Sales layer selected, click and drag the text so that it is off to the right of the

curved edge of the kite.

2 Hold down the Ctrl/Command key and click on the other three text layers and position

them off to the right of the kite, following the curve of the kite image.

3 Make sure that the Layers panel is visible and select the Sales text layer. Then

Ctrl+Shift+click (Windows) or Command+Shift+Click (Mac OS) on the Service,

About, and Contact text layers (in the Layers panel).

Note that when you select three or more layers, the Align and Distribute options become

visible in the Options bar. Align becomes visible with two layers selected.

4 Choose Distribute vertical centers ( ) from the Options bar. The text layers are

distributed evenly.

Select the four text layers. Distribute the text layers vertically.

PSCS5.indb 332 4/8/2010 5:14:48 PM

Creating the text for the links

Lesson 12, Creating Images for Web and Video 333

12

Creating slices

A slice is a part of an image that is cut from a larger image. Think of a slice as a piece of a puzzle

that, when placed alongside other related pieces, creates an entire image. What holds the pieces

together is either an HTML table or CSS. In this example, you will use Cascading styles to

create the fi nal HTML page.

An example of a sliced image.

Slices can be benefi cial when images are large in size, as downloading smaller packets of

information on the Web is faster than downloading one large packet, and also better when you

need to save parts of an image in diff erent formats. In this exercise, you will create guides that

will then determine where the slicing of your image occurs.

1 If rulers are not already displayed, choose View > Rulers to show the rulers on the top

and left side of the document window.

2 Choose View > Snap to turn off the snapping features for the rest of this lesson. The

snapping features sometimes force the cursor to align with elements in your images such

as the edges of the text layers.

Using the rulers, you will create guides on your document that will later defi ne where

you want to slice your image.

3 Click directly on the top (horizontal) ruler and then click and drag to pull a guide from

the ruler. Continue dragging the guide; release it when the guide is just above the Sales

text layer.

PSCS5.indb 333 4/8/2010 5:14:48 PM