Loadboy's

Graphic Design Studio
The Right Choice in Web Design!
Get Your FREE Quote Today...
Search:  

Step 1

First we'll create the base to our tab.

Start by creating a new image 300 X 300 with a white background.

Layers > New Raster Layer... > Ok

On the Tools toolbar, select the Selection (S)

On the Tool Options palette set Selection type: Rounded Rectangle

Draw a rounded selection in the middle of the canvas:

Now on the Tool Options palette set Selection type: Rectangle

While holding down on the Ctrl key on your keyboard, remove the bottom rounded portion like this:

You should end up with a remaining piece similar to this:

Selections > Load/Save Selection > Save Selection To Alpha Channel... > Save

On the Materials palette, click on the Foreground color and select the Gradient tab. Click on the image to open the available gradients. Select gray and use the following settings:

On the Tools toolbar, select the Flood Fill Tool (F) and fill the selection:

Step 2

Now we'll add the highlight to the top of the tab and make this example our first style tab.

Layers > New Raster Layer... > Ok

Because we haven't modified the selection with any blurring or anything, we won't need to reload it.

Selections > Modify > Contract... > Numbers of pixels: 2 > Ok

On the Tool Options palette set Selection type: Rectangle

While holding down on the Ctrl key on your keyboard, remove about 2/3 of the selection like this:

Now to make it real pretty like..

Selections > Modify > Feather... Numbers of pixels: 2 > Ok

TIP: The idea here is to keep increasing the feather until the width of the selection is the same as the image itself:

For the purpose of creating the other style tabs, lets go ahead and save this.

Selections > Load/Save Selection > Save Selection To Alpha Channel... > Save

On the Materials palette, click on the Foreground color and select the Gradient tab. Click on the image to open the available gradients. Select Fading white and use the following settings:

On the Tools toolbar, select the Flood Fill Tool (F) and fill the selection.

Selections > Select None

Layers > Merge > Merge Down

You should end up with a nice crisp image similar to this:

If you are happy with this easy tab, you can easily duplicate the layer ( Layers > Duplicate > )for each tab that you want and use the Move Tool (M) to line them up along side of each other. Here is a small example:

All I've done here is create an image the width that I needed for the tabs. For this example I used 500 x 100, created a selection about half the height of the canvas and selected Multi-red from the list of gradients on the Materials palette, adjusted the color to a blue using Adjust > Hue and Saturation > Colorize... then I created a tab using the steps above, duplicated it four times ( Layers > Duplicate ) and colonized them to a lighter blue. Simple enough right? OOPs.. almost forgot to mention, I often play around with the drop shadow just to add to the overall appearance. For the example above:

Effects > 3D Effects > Drop Shadow... I used the following settings:

Step 3

This style is similar to the one above, but adds a nice border style around the tab itself. Going back to our original tab:

Layers > Duplicate

On the Tools toolbar, select the Pick Tool (K)

Your image should now have a box around it with several smaller square boxes (called nodes):

Bring both the left and right side inwards slightly:

Now, pull the top down slightly:

Note: I personally don't like to work on the image with the nodes around it as I find it confusing. After I reshape an image I'll select what I call my "default tool" which is the Move Tool (M) .

Colorize it to the color of your choice.

Adjust > Hue and Saturation > Colorize... Hue: 81 Saturation: 255

Layers > Merge > Merge Down

You should end up with something similar to this:

Haven't fallen asleep on me yet have you?

Step 4

Now the final style(s), lets use the tab from step 3 above.

On the Tools toolbar, select the Pick Tool (K)

While holding down on the Ctrl key on your keyboard, bring the upper left corner inwards:

to produce this style tab:

Or if you prefer, while holding down on the Shift key on your keyboard, bring the upper left corner inwards:

to produce this style:

Step 5

TIP: tapering the top.

You may want the top of your tab to look slightly tapered back along the top. Let me show you an example using the blue colored button from step 3 above.

Layers > New Raster Layer... > Ok

Selections > Load/Save Selection > Load Selection From Alpha Channel... > Click on the image and choose Selection #2 > Load:

On the Materials palette, click on the Foreground color and select the Gradient tab. Click on the image to open the available gradients. Select Fading white and use the following settings:

On the Tools toolbar, select the Flood Fill Tool (F) and fill the selection.

Selections > Select None

Layers > Merge > Merge Down

So we get tabs totally out of our system can you guess how I did this one?

Here it is. BEFORE you merge the layer down:

Adjust > Brightness and Contrast > Brightness/Contrast... > Brightness: -255 Contrast: 15 > Ok

Play around with it and see what all styles you can come with. Enjoy!