Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Graphic Fun

1,706 views

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

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>

×