|
Note: When I tell you how to select an item from the top menubar, it will
look like this (Select --> Modify -->Border) means to go to the
Select item on the menubar, choose modify and then border). These instructions
are for the Mac, I'm sure they're similar on PC but the keyboard shortcuts
might be different.
Make a list of all the button labels you need. Choose the longest one
to make the "template."
Open Photoshop. Create a new document, 300 dpi, and a bit larger than
the button you want (typical button might be 3/4" x 1/4", so the doc would
be 1" x 1/2"). Select a white background, RGB. Save the document in a
separate folder called buttons, name it whatever the longest label is
called (e.g. about.psd) using the .psd extension to indicate that it's
a native PS doc.
Be sure that the web palette is selected. Use the small right-facing
triangle on the swatches menu (Window -->Show Swatches). Replace palette
-- then browse to the "goodies" folder inside the Photoshop application
folder, and choose web palette.
If the page your button will sit on has a colored background, choose
a color as close as possible to the background color. select the whole
window (command-A) and fill it with your chosen background color. (option-delete).
You choose a color by clicking on one of the tiles in the palette. It
should show up as the foreground color in the toolbar.
This will make your button anti-alias to that color so you don't get
the white "ghost line" around your button when you place it on the page.
You could do this scientifically with the rgb values that correspond to
the hex color you've chosen, but it's not really that important for this.
(see me if you want to know what that meant!).
Now, choose a color for the main background of your button.
Select the marquee tool (upper left on the toolbar). Select either the
rectangle or ellipse by clicking, holding and pulling out to the right
shape. If you want to be precise, pull guidelines out of the ruler (view
-->show rulers, or command-R). Now draw your shape, and fill it with
the foreground color (option-delete). Save.
Before you do anything else, save your selection (select-->save selection).
Now before you deselect, you can create a border if you want by choosing
(select-->modify-->border) and giving the border a width of anything
above 4 pixels --you can experiment with this. Now choose a contrasting
color from the palette and (option-delete) fill the border with color.
Now you can deselect (command-D). Save.
Create guidelines over your button for the horizontal center and a horizontal
line just below the center for the baseline of your text.
Now choose a text color. It should be the foreground color. Now choose
the text tool (the I-beam) and click exactly on the intersection of the
baseline and centerline.
This should bring up the text dialog box. Choose a font, and a size (start
with 12 pt). Select centered, anti-alias. Avoid using the bold, italic
etc if you can choose the bold or italic version of the font. PLEASE don't
use the outline or shadow options, they usually look really awful.
Type your button label into the text box. Click Okay. Now your text is
on a new layer (view --> show layers). You may need to delete or undo
(command-Z) and redo it a few times until you get the size and spacing
right.
When the text is to your liking, save the doc again. Now crop the image
as close to the button as you can. (drag out the marquee tool button until
you see the crop tool). Save again.
Now you're ready to create the rest of the buttons. Save as (shift-command-save
or file-->save as) the next button name (e.g. news.psd). Delete the
text layer -- with the layer selected, click on the trash can. Get the
text tool again and type the new label. Lather, rinse, repeat.
When you have all your buttons created, open all the PS files at once.
Now get the actions palette (view--show actions).
With any button window active, start recording your action -- by clicking
the new doc icon on the actions palette or selecting New Action from the
side-triangle menu. Give your action a name that will help you remember
(e.g. buttons).
Now size your image (image-->image size) to 72 dpi. The other size
parameters should be okay.
Now index your palette. (image -->mode-->indexed color) Select
Web palette. Now go back to RGB (image -->mode-->RGB) and then back
again to indexed, accepting the "exact" palette PS offers. The reason
we do this last is that resizing the image can significantly change the
colors because of the anti-aliasing.
Now stop recording (the controls are just like a vcr). Now play the action
(the main name of the action should be selected) for each of the other
button files.
Now you have to export them one by one to GIF89 -- file-->export-->GIF89.
choose the background color to be transparent. The cursor will be an eyedropper
when it's over the image, just click on the background. Click okay and
get rid of the .psd in the name, so it reads about.gif, for example, and
save it to the gfx folder of your pages.
Wallah, you're done!
|