Gimp Tutorial: Creating a Brushed-Metal Button

The following tutorial shows you how to create a push button with brushed-metal effect that can be used in both web-page and application interface design.

The button.


1) Start the Gimp and open a new document with 377 x 233 pixels dimensions. Fill the background with medium gray.

2) Add a new layer and click the rectangle selection tool; in the tool options menu tick the Rounded corners check-box and set the Radius about 20; then create a selection and fill with white. Look at the image for reference. (If you work with an older version of the Gimp look at my previous tutorial about creating rounded rectangles)


3) Because you need this selection for later use, it is a good idea to save the selection into a channel. To do this go to Select>Save to Channel. Name it Base.

4) Back to the layer palette, duplicate the base layer and load its selection; then go to Select>Shrink; shrink the selection about 5 pixels. Invert the selection and clear; invert again and fill it with white; now, you should have a selection like the one in the following image.


5) Save the selection in a channel as you did with the base selection and name it Top; then Select>None. Now, your channel palette should look like the one in the image below.


6) Make the top layer active and go to Filter>Blur>Gaussian Blur, blur the top layer about 5 pixels. Then go to Filters>Distorts>Emboss and emboss the top of the button using the following settings.


7) Now, click on the channel icon and load the top selection (right-click on the top channel and select the Channel to Selection option from the list), invert and clear. This trims the embossed button.

8) Make the base layer active and repeat steps 6 and 7, except use the following settings when embossing.


9) Now, you should have an image like the one below.


10) Create a new layer, load the top selection and fill the selection with noise.


While still selected go to Filter>Blur>Motion Blur, in the Blur Parameters option set the Length to 5 and the Angle to 0, then click OK. Deselect and from the Layers Mode menu choose Overlay.

11) Finally, create a new layer and add some white text, blur it slightly (1-2 pixels) and emboss it just like you did with the base and the top button components.


The final image.

Gimp Tutorial: Creating a Push Button

Push buttons are widely used both web and interface designers. You can see all kinds of push buttons on the web varying in design and shape. In the following tutorial we are going to create one particular kind of push button that is attractive and easy to make even in the Gimp.

This is what you are going to create:

1) Start the Gimp and create a new document with white background. Add a new layer and make a circle by using the ellipse tool. Fill the circle with a light Gray linear gradient. For reference look at the image below.


2) Duplicate the current layer, load its selection and go to Select>Shrink, in the dialogue box enter 10. The actual value depends on the size of the button you are creating. Just remember, maintain good proportions when you are designing your button. Invert the selection and clear. Invert again and now, you should have a selection like the one in the following image. Fill the selection with blue (or any color you like). Then select none.


3) Duplicate the current layer and fill it with white. Go to Filters>Blur>Gaussian Blur and set the Blur Radius somewhere between 10 and 20 depending on the size of your design. Now, activate the blue layer and go to Filters>Map>Bump Map and in the Bump Map drop down list select the white layer you blurred in the previous step. Then play around with the dialogue settings and try to create an effect similar to the one below. When you are done hit OK. If you are satisfied with the result you can delete the white layer.


4) Duplicate the Mapped layer, load its selection and go to Select>Shrink and in the dialogue box enter about 5. Invert selection and clear. Invert again and fill the selection with blue linear gradient, look at the image below for reference.


5) Then blur the gradient somewhere between 3 to 5 pixels. This blends nicely the middle part of the button with the shiny edges.


6) Create a new layer underneath the blue one, load the blue layer selection and go to Select>Grow, in the dialogue box enter 2. Fill the selection with the same light Gray gradient like the base, except inverse the direction of the gradient. Look at the image. This will create a thin edge around the button.


7) And finally, create a new layer just beneath the base layer, load the selection of the base and go to Select>Grow, enter 2 in the dialogue box. Fill the selection with light Gray. For reference look at the image. This will create an edge around the base of the button. Then add text and drop shadow like I did.


The final image.

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.

Gimp Tutorial: Creating Glassy Buttons

Most Photoshop techniques make heavy use of "layer effects" when it comes to creating glassy buttons. I modified one of those techniques so that it could be applied to the Gimp environment that lacks this feature. The following tutorial shows you how to create a glassy button in 5 easy steps.
The result:



1) First, open a new document in the Gimp and create a basic button shape on a new layer. One way of creating a button shape is shown in the following image. When it is done fill it with medium gray.


2) Duplicate the button shape layer 2 times. Name the layers as shown below.


3) Create a selection similar to the one in the following picture; while still selected make the top layer as your active layer and clear the selection (Edit>Clear).


4) Next, fill the top and the bottom layers with gradient to look similar to the image below. If you want you can blur the top layer a bit (1 or 2 pixels) to make the gloss line smoother.


5) And lastly, load the selection of the base shape, go to Select>Shrink and shrink the selection about 2 pixels; invert the selection, activate the bottom and the top layers in subsequent steps and clear the selection. This creates an edge around the button.


And this basically completes the tutorial. If you want you can add text to the button as I did but this is not absolutely necessary.