Menus with Beauty and Brains 2 pg 4: Production Graphics with Wendy Peck at webreference.com

Menus with Beauty and Brains 2: Building Tab Menus

Moving the zero point in Photoshop. Click and drag at the point marked by the arrow. The dotted line shown is placed where you wish the new zero coordinates to appear.

We will only look at creating the actual tab images in this section.

General menu creation notes
The top tip for almost any menu technique is to use guides, and set your program to snap to those guides. Jumping rollover images are best prevented from the start, and when creating menus, a one pixel error can cause you great delays.

Learn to use your rulers. We usually know how many pixels we have for a total menu area. If we work to measurement from the start, we will have fewer surprises as we scale our work to final size. Many designers do not know that most graphics programs have an adjustable zero point, which means you can change the location for the zero point on the ruler. Simply click on the area between the horizontal and vertical rulers and drag the crosshair to the desired new zero location. (Paint Shop Pro does not offer this feature.) Also, take a look at the grid feature in most graphic programs. Rulers, guides and grids can all help to make the menu creation process more efficient.

Although the methods that follow are specifically for tabs, the setup and many of the techniques work for plain color bars, or bars with different colors for each menu listing.

I have included instructions for: Photoshop 6 (with variations for Photoshop 5.5), Paint Shop Pro, and Fireworks.

Work path created with Rounded Rectangle tool.

Path converted to a selection. Adding rectangular selection to bottom section. Note the + symbol indication an addition to a selection.

Finished selection above (magnified view). Filled with layer style and text added below.

Photoshop tabs
Photoshop added vector shapes with version 6, which finally gave us the ability to do an easy rounded rectangle selection. We are going to use that feature to create tabs. Note: (If you are using Photoshop 5.5, see an earlier article with instructions for creating a rounded rectangle selection, and includes an action to download.)

To start, set up your grid or guides, at least for the height of your tabs. Select the Rounded Rectangle Tool and set the corner diameter. For the sample here, I used 7 px. To complete the first tab, we will convert the vector path to a selection. Open the Paths palette (usually with your Layers Palette). You should have a path called Work Path in this palette.

Right click on the Work Path path, or select the path and click the flyout menu icon at the top right of the palette. Select Make Selection from the menu, with Antialiasing checked and Feather set to 0. Your path will become a selection. We want to add a square bottom so that our tabs can butt together tightly. Holding your Shift key down, add a rectangular selection to the lower half of the rounded rectangle as shown to the left. This is your finished tab selection. Save the selection. (See Photoshop Selections.)

Create a new layer. Fill the tab selection with your background color. This is your basic tab. You can add a stroke or a layer style to complete the effect you desire. Once you have completed one tab, you will use it to create the remaining tabs.

There are several ways to duplicate tabs in Photoshop. If you are making tabs of the same color, simply duplicate the layer containing the tab, moving the new layer into position beside the original. You can also load the saved selection to create a new tab on a new layer. Fill and copy any effects from the original tab layer. If you want tabs of different colors, loading the selection and filling with a new color is the best method. The tabs at the left were created using the saved selection.

Guides in place for tabs. Note raised area in the ruler that corresponds to each guide.

Adding a rectangular area to the rounded rectangle selection. Note the + by the cursor indicating that the selection will be added.

The selection ready to create a tab.

Tabs in Paint Shop Pro
Set guides for at least your tab height. Make sure that View>Rulers and View>Guides selection is turned on. Click and drag on the horizontal ruler to create a horizontal guide, releasing the mouse at the desired guide location. For a vertical guide, do the same, but from the vertical ruler. To move a guide once it is placed, click and drag the corresponding raised area in the ruler to the new location. A sample of the guide setup for tabs is shown at the left. To make selections snap to the guides, select View>Change Grid and Guide Properties and activate Snap to Guides.

Activate the Selection tool and choose Rounded Rectangle from the Tool Options palette. Create a selection the height and width desired for the first tab. Turn off the Snap to Guides option. Change to the Rectangle option in the Tool Options palette and with your Shift key held down, add a rectangular selection to the lower portion of the rounded rectangle as shown in the sample at the left. This will give you a square bottom for the tab, allowing each tab to butt against the next. Save your Selection. (See Paint Shop Pro Selections.)

Fill and add effects to your tab as desired. To create a second guide of the same color, simply duplicate the tab layer and reposition. If you require tabs of different colors, load the saved selection and apply the fill and effects for each new tab as you did for the original. The finished tab for this selection is shown here. The selection was filled with a solid color and a slight Outer Bevel effect added.

Guide setting for one tab with the zero point moved to the left edge of the tab position.

Rectangle drawn with a different color in front of the rounded rectangle.

The rounded rectangle and rectangle have been combined to form one object.

The final tabs.

Fireworks tabs
Vectors are the easy way to go with tabs in Fireworks. You can create a tab with a rounded top edge and square bottom edges easily by creating and combining two vector objects.

Next page

Menus with Beauty and Brains 2: Tutorial Index

Menu Graphics that Work
Making Small Text Work
Creating a Menu Framework
Building Tab Menus
Menu Bars for Liquid Design