Graphic Fun


Published on

by Roger Runquist
Learn the basics of creating graphics for your website and when to use a jpeg and gif. Hands-on activities include building simple graphics for the web using a variety of tools in Photoshop, creating and adding rollover buttons to your web site using Dreamweaver as well as how to create simple animations.

Published in: Technology, Art & Photos
  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Graphic Fun

  1. 1. Graphic Fun with Photoshop and Dreamweaver <ul><li>Presented by </li></ul><ul><li>Roger L. Runquist, WIU </li></ul>
  2. 2. Quick Tips <ul><li>Use File->Save and keep a copy of your Photoshop Document (.psd). This will retain your layers and text </li></ul><ul><li>Use File->Save for Web to save a web- ready COPY of your graphic to be used in Dreamweaver. </li></ul>
  3. 3. Simple Class Banner <ul><li>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. </li></ul>
  4. 4. Simple Class Banner <ul><li>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. </li></ul><ul><li>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. </li></ul>
  5. 5. Simple Class Banner <ul><li>Design Your Graphic. </li></ul><ul><li>Save your graphic as a .PSD file </li></ul><ul><li>Export the graphic for the Web using File->Save for Web. </li></ul><ul><ul><li>Use GIF or JPG. Try a variety of compression settings. </li></ul></ul><ul><li>Save this file to the “images” folder of your web site </li></ul>
  6. 6. Simple Class Banner <ul><li>In Dreamweaver, add a graphic using the option to insert an image. </li></ul>
  7. 7. Rollover Button <ul><li>Repeat the steps to create an image area the size you would like your button to be. </li></ul><ul><li>You are now going to use this image area to create two different buttons, each the same size. </li></ul><ul><li>Create your button in the “Normal State”. </li></ul>
  8. 8. Rollover Button <ul><li>Save the graphic. Export a copy using “Save for Web”. Save the exported image to the images folder of your website. </li></ul><ul><li>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. </li></ul>
  9. 9. Rollover Button <ul><li>Click the option to generate a rollover button from the “insert palette” in Dreamweaver. </li></ul>
  10. 10. Rollover Button <ul><li>“ Build” your rollover. </li></ul><ul><li>Use tables to add and format multiple graphics into a navigation bar. </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.