5 easy steps to create a Web 2.0 icon using Gimp

This blog will teach you how to create a button for your website that has a nice look and feel to it.  The contents of this post were created using Gimp version 2.6.2. So, the screens might look a little different than your version.  You can get the latest version and documentation from the Gimp website.  Please leave a message with your feedback about this blog, I’m curious to get others opinions.

Step 1 – create the canvas to work with

Create a new image that is the size of the button that you wish to create by clicking on File from the drop-down menu and then select New.  For this example I’ve chosen 200px by 100px.  I recommend a tranparent background so that your button with seamlessly integrate with whatever color website you place it on.  To set the backgroug transparent click on the “Advanced Options” and choose transparent from the “Fill with” field.  The default “Fill with” is background color (white) which will make your button have a white background even if you put it on a website that has a different color.

Step 2 – create the shell of the button

Before we get started with the button you need to create a new transparent layer and call it “Button”. From the drop-down menu Layer select “New Layer” and change the name to Button.

This will be for applying a shadow later.  Without this first additional layer the shadow affect will apply to the full canvas instead of just your button.  Now using the rectangle tool () create a rectangle.  Then, select the rounded corners option .  The higher the radius the larger the rounded corners will be.  You can move the slide bar left and right and watch the results on the canvas.  Now pick a color to fill your button with.  For this example I chose the color #FCAF3E which is the color of the banner of Gimp’s home page.  Choose the fill tool () and then click on the foreground () and set the color that you want by either pasting the HTML code or just picking from the color palet.  Now, just click in the center of your rectangle and it should look like this:

Step 3 – create glossy affect

Select the rectagle tool again and this time create a rectangle inside the rectangle that you already have.  Make the bottom of this new rectangle start around the middle of the existing rectangle and draw upwards leaving a little bit of room at the top like this:

Now select the gradient tool () and draw a line from the bottom of this new rectangle to the top.  This will create a fading affect from the colors that are in your foreground/background (). It will fade from the foreground (orange in my case) to white (in my case).  Now your image should look like this:

Step 4 – Add some text

Select the text tool () and draw a rectangle where you want your text.  This should be centered vertically and horizontally.  Don’t worry worry if you draw it wrong, it can be moved.  Now, type the text you want in your button.  There are several text options on the left panel that I’m not going to go into.  They are your typical MS word-like tools (font, colors, size, bold, italics, etc.) that allow you to put some pizaz in the text.  Now your button should look like this:

Step 5 – add shadow

Select the layer that you created in the beginning called “Button”.  From the filters drop-down menu select “Light and Shadow”, then “Drop shadow…”.

Now your button should look like this:

Here is an example of the button after saving as PNG and putting it to use on a website .

Here is a copy of my XCF file that I used to create this button.  You can download it and manipulate it within Gimp if you wish.

 

Filed Under: Gimp