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

Lesson 5. Building a Web Site > Using the Tab Rectangle tool

Using the Tab Rectangle tool

ImageReady comes with tools specifically designed to help with the creation of images for Web pages. One such tool is the Tab Rectangle tool, which simplifies the creation of stylish buttons, often used for navigation bars. This tool can also be used to automatically create a new shape layer for each button placed on the page. Layer-based slices can be created based on the shape dimensions, and layer styles can be used to add rollover effects.

Select the Tab Rectangle tool from the toolbox.

In the Options palette, select Create new shape layer. Select the check box next to Fixed Size, and enter 75 px (pixels) as Width and 20 px as Height.

A. Create new shape layer. B. Fixed Size.

Click the Basics Blue RGB color swatch in the Swatches palette to select it as foreground color.

Position the cursor at the cross point of the horizontal guides, 140 pixels from top, and the vertical guide at the left edge of the letter b in the basics wordmark, and then click once on the page.

ImageReady creates in a new layer a shape in the form of a rectangle with rounded top corners, 75 pixels wide and 20 pixels high, flush with the bottom of the page (because that's how you set up the guide and the dimensions of the button).

In the Layers palette, double-click the name of the new layer and rename it home.

Set the foreground color to Basics Green RGB. With the Tab Rectangle tool still selected, and using the same settings as before (apart from the foreground color), position the cursor at the top right corner of the home button, and click once to create a second button next to it. In the Layers palette, name the newly added layer about.

In the same way, create two more buttons next to the first two, one in Basics Yellow RGB color, which you should name projects in the Layers palette, and one in Basics Orange RGB color, which you should name contact.



Not a subscriber?

Start A Free Trial

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