• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 2. Working with Selections > For the Web: Creating evenly spaced buttons...

For the Web: Creating evenly spaced buttons for a Web page

One of the most common tasks when designing Web pages is to create a column of buttons that are used to link to other pages in the Web site. Using a background grid in Adobe Photoshop and the rectangular marquee tool, you can quickly create identical and evenly spaced buttons from selections. These buttons can then be stylized in ImageReady in preparation for the Web. Here's a way to create the column of buttons, and then to add a style to create the illusion of three-dimensional buttons.

In Adobe Photoshop, choose File > New. Name the new file, size it to fit the buttons you want to create (we chose 3 inches wide by 4.5 inches tall), select the Transparent option, and click OK.

Choose Edit > Preferences > Guides & Grid. Enter the height of your planned buttons in the Gridline Every text box (such as 0.5 inches), 1 in the Subdivisions text box, and click OK.


Grids are only available in Photoshop.

Choose View > Show > Grid to make the grid visible.

Choose View > Snap To > Grid if the command is not already selected. (Snap to Grid is selected if there is a check mark next to the command.)

Select the rectangular marquee tool ( ), and draw a rectangular selection one grid line high by four grid lines wide (or as wide as you want your buttons to be). Notice that the marquee snaps to the nearest grid line.

If you don't see the Color palette, choose Window > Show Color to display it.

Choose Web Color Sliders from the Color palette menu to ensure that you will choose a Web-safe color for your button.

Select a color in the Color palette (such as blue).

Select the paint bucket tool () hidden under gradient tool (), and click in the selection to paint it.

To duplicate the rectangle, hold down the Shift+Ctrl+Alt keys (Windows) or the Shift+Command+Option keys (Mac OS), and drag two grid lines down from the original rectangle. (Holding Ctrl+Alt/Command+Option as you drag duplicates the selection. Holding down Shift constrains the newly created rectangle along the horizontal or—in this case—vertical axis). Repeat this process to add the third and fourth rectangles. You should now have four buttons spaced evenly by two grid lines each.

Choose File > Save to save your new buttons.

Click the Jump To ImageReady button in the toolbox to open the image in ImageReady.

Choose Window > Show Styles.

In the Styles palette, select a style (such as the Blue Glass button) to apply it to your rectangles.

You can also apply the style by dragging it from the Styles palette onto any of the buttons in the main window and releasing the mouse button. The button style is automatically applied to all of the buttons on the layer.

If you want, you can now add text to the buttons using the type tool (). When you are finished, save your artwork. You can now use the buttons in your Web page design.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint