Gimp Tutorial: Creating a Tab Element

Tabs are button objects and are used both in web and interface design. The steps creating a tab is not unlike creating any other button. I wrote this tutorial because most instructions available on the web has been written for Photoshop users and expected to be familiar with the layer effects tools; but the Gimp lacks these tools. In the following tutorial we will create a tab button in the Gimp way that takes only four simple steps.
The result:


1) Create a new document with a white background. Add a new layer to the stack and create a basic tab shape as shown in the next two images.

a) In the Gimp Preferences dialogue set the Default Grid Width and Height to 10 pixels; turn on the Show grid and Snap to grid options in the View menu and construct a tab shape like shown in the images. Fill the shape with a color of your preference, mine is blue.




2) Now, duplicate the basic shape layer and fill it with a lighter tone; go to Filters>Blur>Gaussian Blur and blur the duplicate layer about 5 pixels. Next, load the selection of the basic tab shape, activate the blurred layer, inverse the selection and clear it. This will trim the overlapping pixels spreading outside the tab shape. Notice the slightly darker edge around the tab.



3) Next, create a new layer and load the selection of the basic tab shape, shrink the selection about 2 pixels and activate the new layer. Make the foreground color white and in the gradient selector choose the foreground to transparent option. Create a gradient like the one in the image, then choose the overlay mode option.



4) Finally, add white text and drop-shadow to the graphic. As a last step add a new layer beneath the text layer and create an elliptical selection that has the same width as the text, for reference look at the image below. Fill with white, blur it about 10 pixels and from the layer mode option choose overlay.



The final image.