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



Creating a button in Photoshop

Rollover buttons are one of the most popular images on the Internet. We will first create the initial image in Photoshop and then open ImageReady to add the rollover effects. Here is the button we will create for our web page:

sample button

  1. In Photoshop, I create a circle using the ellipse tool. By holding down the Shift key while I drag, I can constrain my shape to a circle.
  2. With the circle layer still selected, I will create a rectangle coming off the right side of the circle.

    Using the "Path Component Selection Tool" (the solid arrow next to the shape tool) I will shift-click to select both the circle and the rectangle. From the top menu I will click on "Combine". I now have one shape instead of two.

  3. Select a style from the Style palette.

  4. Select the Type tool and type "About Us" onto of the button. If the text ends up behind the button, drag the text layer above the button layer in your layers palette.

  5. Change the font, color and size of your text, repositioning it on the button as necessary with the Move tool (the arrow on the top right).

  6. Once you are happy with the button, launch ImageReady from the button at the bottom of your tools panel.

Next, making it rollovernext







© Copyright 2003 | Something Graphic | 20 November, 2003

Contact me:learn@CognitiveHorizons.com