Web 2.0 style graphics - cool buttons

Posted by Raoul Snyman on January 2, 2008 on 4:22 pm | In Design |

So you want to be cool and have a Web 2.0 style site? How do you make those fancy graphics? Quite simply, really, and all you need is the GIMP, an open source graphics tool.

For this tutorial, we’ll run through how to make a cool button background image. Using this principle, you can extend it to link bars, text and other things. For the purpose of this tutorial, however, we’ll stick to buttons.

  1. Open the GIMP, and create a new image. Set the image dimensions to 50×30 pixels.
    Figure 1
  2. Use the Rectangular Select tool (press “R”) and select the top half of your image, so that your selection is 50×15.
    Figure 2
  3. Click on the foreground color on the main panel, and choose your base colour.
    Figure 3
  4. Swap the colours, by clicking on the little arrows next to the colour boxes, and then select a lighter colour than your base colour.
    Figure 4
  5. After the last 2 steps, the main panel of the GIMP should look like this:
    Figure 5
  6. Click the gradient tool, and then make sure that your gradient type is the FG-BG type, as seen below.
    Figure 6
  7. Inside the selected area on your image, click and drag your mouse down, so that the line that appears stretches from the top of the select to the bottom of the selection.
    Figure 7
  8. Invert your selection, so that the bottom half of your image is selected. Then click on the foreground colour, and select a colour that is darker than your base colour.
    Figure 8
  9. The colours on GIMP’s main panel should look like this again:
    Figure 9
  10. Make sure the gradient tool is selected, and using the current settings, click and drag your mouse down from the top to the bottom of the selected area.
    Figure 10
  11. If we zoom out, it should look like this:
    Figure 11
  12. Now, if this is going to be a button background, it only needs to be about 4 pixels wide, since the browser will automatically repeat the image for us. So resize the canvas to 4×30 pixels.
    Figure 12
  13. Of course our main layer is bigger than our image size after we resized the canvas, so the last move is to fit the layer to the image size (in the layers menu).
    Figure 13

I hope this helps those of us who aren’t so pro with the graphics to create nice looking graphics for their sites.

No Comments yet »

RSS feed for comments on this post. TrackBack URI

Leave a comment

You must be logged in to post a comment.

Powered by WordPress with websitewriters.co.za theme, design by Saturn Laboratories.
Entries and comments feeds. Valid XHTML and CSS. ^Top^