30 March 2008 - Posted in Gimp
Create a nifty web button
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:
cthulhu1987 said...
somebody has stolen your website via a frame! Look at this site:
http://www.tutorialized.com/view/tutorial/Create-a-nifty-web-button/34039
February 11th, 2009 at 5:38 pm
someone said...
I followed that tutorial til this sentence:
“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:”
I mean what the fuck? At first everything gets explained from step to step with shortcuts and all, and now this.
I gotta mention that I use the German version of gimp. This didn´t prevent me from following the previous steps easily though.
I´m feeling like an idiot right now because I just can´t figure out what is meant with this last step since this doesn´t make any sense.
This whole guide is like:
1. step 1
2. next step
3. next step
4. next step
5. “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:”
:-/
March 6th, 2009 at 11:13 pm
Simon North said...
@someone:
I didn’t word it correctly:
Now add a drop shadow to do this go to the Filters menu, select Light and Shadow then Drop Shadow. On the screen that shows change the offsets to 0 and the opacity to 60 and click OK
Thanks
March 16th, 2009 at 8:27 pm