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.