Transcript PowerPoint

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.