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.

Gimp Tutorial: Creating a Navigation Button

Navigation buttons are essential features of both web pages and application interfaces. In the following tutorial, we create an attractive navigation button in a few simple steps that can be followed even with limited Gimp knowledge.

The button you are going to create looks like this:


1) First, let's create a basic button shape with rounded corners. The Gimp sucks when it comes to creating rounded rectangles. The following two examples explain one way of creating them.

a) Open the Gimp and go to Preferences>Default Grid and set the Grid Spacing Width and Height to 10 pixels. Restart the Gimp.

b) Create a new document with a white background. Add a new layer. Go to View and check the Show Grid and Snap to Grid options.

c) Using the Ellipse selection tool create four small circles like in the image below. Then with the Rectangle Select tool create a selection; look at the image. Fill the selections with medium gray.


d) And finally create another selection like the one below and fill it with the same gray. And here you have the rounded rectangle.


2) Now, that we have the basic button shape we duplicate the button shape layer two more times; name the layers as in the following image.


3) Fill the white layer with white, load its selection, go to Select>Shrink and shrink the selection about 2 pixels; inverse the selection and delete it. Do the same with the grad layer but here shrink the selection about 3 pixels. Then create a gradient similar to the subsequent image.


4) Next, we create an arrow, which for the sake of simplicity, will be a triangle; but if you want to create a more sophisticated shape go ahead and do it; here the arrow signifies action. Add a new layer to the stack and if they are not on, turn on the Show Grid and the Snap to Grid options; activate the pen tool by clicking on its icon in the toolbox and click on the grid points to create a triangle shape similar to the one on the image below. When you do the last click hold down the Ctrl key to close the path. When it is done, go to the Path dialog and at the bottom of the dialog box click on the Path to Selection button, this will make a selection out of the path. Fill the selection, this time with some color, mine is orange. If the triangle is too large scale it to fit over the button. After that, you can turn off the Grid and delete the path object.


5) Next, we create two vertical lines that sort of separating off the arrow from the rest of the button content. Add a new layer and with the Rectangle selection tool make a selection about 2 pixels wide. Fill the selection with medium gray; duplicate the layer and fill the duplicate with white; offset the white line about 2 pixels along the x-axis. Now you should have an image like the one below.


6) Finally, add white text to the button like I did; to enhance both the text and the arrow shape add drop shadow to them. That is all there is to it.

The final artwork.