| In
PhotoShop: |
|
| |
|
| Environment: |
- Be sure
you can see the Layers palette. To see the Layers palette choose Window/Show
Layers.
- Be sure
you can see the Tools palette. To see the Tools palette choose Window/Show
Tool
|
| |
|
|
Steps
|
Details
|
|
|
| Create
a new file. |
- Select
File/New and specify a size in the dialog box.
- Around
500x60 pixels is good for a banner.
- 72dpi,
RGB color, White BG
- Click
OK.
|
|
|
| Make
sure the background color is the same as the page you will be putting
the banner into. |
- To choose
a color from the Tools palette, double click on the forward-most of
the two squares at the bottom of the palette to open the color dialog.
Be sure that the Only Web Colors check box is checked at the bottom
of the dialog.
- Make
a note of the hexadecimal number so that you can use it to select
your page color in DreamWeaver.
- After
choosing a color, click OK.
- Then,
select
the Paint Bucket tool from the Tools palette (6th tool down on the
right side of the Tools palette). (It may be hidden by the Gradient
tool. If so, click once on the Gradient Tool and hold, then you can
select the Paint Bucket Tool.)
- Using
your Paint Bucket Tool, click once on your image's background to fill
it with the chosen color.
|
|
|
| Enter
the text for your banner. |
- Choose
a text color from the Tools palette (see above for how to do this).
- Click
once on the “T” (the Type Tool) on the Tools palette.
- Select
your typeface and size at the top of the screen. Try Verdana, 24 -
36pt.
- Click
on your button picture and type your desired word or words. When you
click to type, a new layer is created automatically for the type.
- If you
are not satisfied with the type face, highlight the type (while the
Type Tool is selected) and try different typefaces/sizes.
- When
done, click on the Move Tool (top left of Tools palette) to unselect
the type.
- If you
need to reposition the type, hold down Control and use the arrow keys.
|
|
|
| Select
the text layer and change its Layer Style attributes. |
- On the
Layers palette, double-click on the text layer to bring up the Layer
Style palette.
- Choose
from the options on the left of the palette to give the text the look
you want. (Possible choices: Drop Shadow and Bevel and Emboss.)
- HINT:
If you move the dialog box to the side you can see the effect
your choices will have on your text as you try them out.
- HINT:
If you click on the words for the attributes you can fine-tune
the look. For example, click on the words Drop Shadow to show
that effect’s attributes.
- When
you are satisfied, click OK to close the dialog.
|
|
|
|
Save
your work as a .PSD file and as a .GIF.
|
- Choose
File/Save As…
- Be sure
Format shows PhotoShop.
- Name
the file something such as BANNER.PSD.
- Then,
save the file again as a web-ready .GIF. Choose File/Save for Web…
to open the Save for Web dialog. Choose GIF as the format at the upper
left and select at least 64 colors.
- Click
OK and you will get the Save Optimized As dialog. Give the file a
name you will remember. For instance BANNER.GIF and save it to the
appropriate Images folder.
- HINT:
If you are including a photographic element in your banner, you may
get a more pleasing result by saving as a .JPG file instead.
- IMPORTANT:
You must be sure that the file saves with the .GIF extension (a period
and the word GIF) or a .JPG extension if you are saving as that file
type.
|
| |
|
|
In
Dreamweaver:
|
|
| |
|
| Place
the banner on the page. |
- Open
the page where you wish to place the banner.
- Be sure
to make the page background color the same as the background color
of your banner using the hexadecimal number (if you want it to blend
in). You could also choose to create a banner in a contrasting color.
Choose Modify/Page Properties... from the menu bar and enter
the hexadecimal number in the Background box.
- Click
on the area (or in a table) where you want the button to go.
- From
the menu at the top of the page, choose Insert/Image. Or choose the
Insert Image icon on the Objects palette.
- Locate
your banner file, select it and click Open (or OK on a PC). Be sure
not to select the one with the .PSD extension. You want the one with
the .GIF or .JPG extension.
- HINT:
A dialog may appear offering to copy the file to your site. Choose
yes if you are selecting a file from outside your project folder.
- The
banner should appear on your page.
|
|
|
|
Preview
your work in your browser.
|
- Choose
the small globe icon on the menu bar and select "Preview in Safari" to see the result.
|