www.CognitiveHorizons.com web address, www.CognitiveHorizons.com
capella linkstutorialsabout us

logo links to home page This is where you are:


Return to Main Tutorial

Creating an image

Optimizing an image

Creating a rollover button

Exporting to Dreamweaver




Optimizing an image in Photoshop

x-terra logoNow that we've created our logo, we want to optimize it for the Internet.




  1. Before we optimize our logo we need to create a slice--the part of the whole page that will go up to the Internet. Photoshop gives you the ability to create an entire web page and then slice it apart and through the use of tables, put the page back together in Dreamweaver.

    For this tutorial, we will select the area we want to slice.

  2. slice toolSelect the slice tool and click and drag over the shape of the logo. If you want to edit the size of the area selected, go back to the slice tool and click and hold the button. The "slice select" tool pops up (it has an arrow at the top of the knife).

    Once the Slice Select tool is active, handbars appear on the slice over the logo and you can now scale or move the slice.

  3. Click on File>Save for Web. The optimization palette will open. If it isn't already active, select the 4-up tab. If the panel on the right side of the window says "No slices selected" use the "slice select" tool to activatve the slice containing the logo.

  4. Using the 4 windows, choose different optimization choices in the right side of the window. Your goal is to find the image that looks the best and has the smallest file size.

    For our logo, I decided the best image was a .jpg High quality. The file size is 3.763 and will take approximately 2 seconds to load on a 28.8 modem. Since this image is my company logo, this is a case where quality is slightly more imporant than file size.

    I will be more concerned with file size rather than image quality in the next lesson, creating rollover buttons.

Creating rollover buttonsnext







© Copyright 2003 | Something Graphic | 20 November, 2003

Contact me:learn@CognitiveHorizons.com