You will need to download one of the button templates to
your local computer hard drive using your browser.
Look for the links under the button graphics. Download by right-clicking
(Win) or click-and-holding (Mac) on the link, then look for the command
closest to 'download' or 'save/save...as' the 'link' or 'target,' 'as''
or 'to disk.' (Each browser is a little different). Browse to your computer's
desktop and 'Save.'
Open the button graphic in Photoshop. First, try double-clicking
the graphic file you just downloaded to your desktop. Sometimes this
doesn't work. If so, launch Photoshop and then use the File > Open
command, browse to the desktop, find the graphic file, and Open
Make sure you have the Layers palette available. Go to the Window
menu and look for 'Layers.' If you see 'Hide Layers,' the palette available
and you can unselect the menu without selecting a command. If it says
'Show Layers,' then select this command.
To edit the text, double-click on the layer called 'Text Goes Here'
A 'Type Tool' dialog box will open. (In later versions of
Photoshop, where you would simply select the text tool from the toolbar,
select the layer with the text and then click on the text you want
to edit with the text tool).
This dialog box is where you will edit your text in Photoshop 5.5.
As you can see, there are a number of controls for the font, face,
size, leading and all the various settings for your text. Changes in
settings will only be applied to the text you select, and you can have
different settings within one block of text. We'll play with these
settings a little later.
Select all of the text in the box and then type in whatever you
like. If you move this dialog box so you can see your button graphic,
you will see the text update as you type. You will only have room
for a few words. (In later versions, select the type layer on the
layers palette, then select the text tool from the toolbar. Click
on the text you want to change in the graphic. You can now select
and modify the text. Text controls are in a small panel or palette
at the top of the window. Use the return or enter keys to set your
changes).
Click 'OK' when you are satisfied.
Save the file by using File > Save As... Give the graphic
a new name, no spaces or special characters (other than dash, underline
or dot). I like to name my buttons 'something_button.psd' or 'something_subbutton.psd'
depending on the type of button. (Note: On Windows machines, you
may not need to add the '.psd' and if you do may get 'something_button.psd.psd.' )
Browse to the Desktop if you aren't already there, and click 'Save.'
You now have a new button. All you need to do is export it from
Photoshop to the GIF format using 'Save For Web...' We'll cover that a
little later in the tutorial.
