Graphic Fun with Photoshop and Dreamweaver

Presented byRoger L. Runquist, WIU

Quick TipsUse File->Save and keep a copy of your

Photoshop Document (.psd). This will retain your layers and text

Use File->Save for Web to save a web- ready COPY of your graphic to be used in

Dreamweaver.

Simple Class BannerFile->New. If you are unsure about the size of the

graphic, make the window quite large. Use 72 pixels/inch and RGB Color Mode.

Simple Class BannerUse the Zoom (Z) tool and zoom the

window until the title bar reads 100%. The 100% means that the

graphic you are creating will be on the web the same proportions from Photoshop as it is on the webpage. No more guessing at how large a

graphic is.You will now notice that the graphic is

very large. Use the Crop Tool (C) to crop the window to the size you

want you final graphic.

Simple Class BannerDesign Your Graphic.

Save your graphic as a .PSD fileExport the graphic for the Web using File-

>Save for Web.Use GIF or JPG. Try a variety of

compression settings.Save this file to the “images” folder

of your web site

Simple Class BannerIn Dreamweaver, add a graphic using the

option to insert an image.

Rollover ButtonRepeat the steps to create an image area the

size you would like your button to be.You are now going to use this image area to

create two different buttons, each the same size.

Create your button in the “Normal State”.

Rollover ButtonSave the graphic. Export a copy using “Save

for Web”. Save the exported image to the images folder of your website.

Modify the graphic to be the “Over State” of your button. “Save As” the original

graphic. Export a copy using “Save for Web”. Save the exported image to the

images folder of your website.

Rollover ButtonClick the option to generate a rollover

button from the “insert palette” in Dreamweaver.

Rollover Button“Build” your rollover.

Use tables to add and format multiple graphics into a navigation bar.