Date post: | 18-Dec-2014 |
Category: |
Technology |
Upload: | jkchapman |
View: | 1,453 times |
Download: | 1 times |
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.