Graphic Fun

Graphic Fun with Photoshop and Dreamweaver
Presented by
Roger L. Runquist, WIU

Quick Tips
Use 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 Banner
File->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 Banner
Use 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 Banner
Design Your Graphic.
Save your graphic as a .PSD file
Export 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 Banner
In Dreamweaver, add a graphic using the option to insert an image.

Rollover Button
Repeat 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 Button
Save 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 Button
Click 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.

Graphic Fun

by jkchapman

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 3

Statistics

Graphic Fun Presentation Transcript