Graphic Fun

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

Slide 2: 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.

Slide 3: 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.

Slide 4: 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.

Slide 5: 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

Slide 6: Simple Class Banner In Dreamweaver, add a graphic using the option to insert an image.

Slide 7: 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”.

Slide 8: 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.

Slide 9: Rollover Button Click the option to generate a rollover button from the “insert palette” in Dreamweaver.

Slide 10: Rollover Button “Build” your rollover. Use tables to add and format multiple graphics into a navigation bar.