In this tutorial I am going to show you how to make this nifty little web button:
- Firstly, create a new image and select the select tool (shortcut: “R”)
- Choose two complimenting colours, I chose #1c3f47 and #2a6976
- Go to the main Gimp window and tick the box that says rounded corners.
- Create a new layer
- Click and drag a rectangle with the dimensions 217 x 43, you can check how big the selection is by looking at the bottom of the window.
- Press Ctrl and comman (Ctrl + ,), this will fill the curved rectangle with the darker of the two.
- Select the gradient tool (shortcut: “L”) and click and drag from the bottom to the top, you should now have something that looks like this:
- Now duplicate this layer by pressing the duplicate button on the Layers window (4th button across on the bottom)
- Click and drag a rectangle over the bottom half of the button:
- And press delete
- Now press Ctrl + A (selects the layers content), Ctrl + X (cut) and then Ctrl + V (pastes it and makes the content selected.
- Go to the main Gimp window and change the fore-colour to white and then fill the selected region (Ctrl and ,)
- Go to the layers window and change the opacity of this layer to 3.0
- Now go back to the previous layer and change the opacity to 70.0
- Now add a drop shadow, Filters, Light and Shadow, Drop Shadow, change the offsets to 0 and the opacity to 60 and click OK, it should now look like this:
- Finally, it is just a case of adding the text, I used font Arial Bold, size 18px to deliver my text but you can do whatever you want. To select the Text tool press “T”.
- And there you have it, a very nice looking web button: