Nice button using GIMP
Scribbled on Sunday, August 17th, 2008Looks like am loving GIMPing. So am trying different variations. This time its about making a nice button or tab for your website.
Here is the outcome:

looks nice !
Here are the steps:
- First create a Rectangular Selection on a New Layer name “ButtonMain” over white “Background Layer” by Rectangle Select Tool

- Use the Blend Tool and fill with gradient, foreground color value is #e31e28 and background color is #f69999

- Now select the Round Rectangle option to get a round edge selection

select Round Rectangle option

select 55 as value for Radius
- So we got a round selection

- Press “CTRL+I” to invert selection and erase the outer edges using Eraser Tool. Hide the “Background Layer”. Note: We could have filled the gradient after selecting a round selection and saved this step, but it noobish me. So please don’t yell at me…lolz

So this is how it looks now !
- Hide the Background layer. Now create a new Transparent layer named “BackGradient“. And focus on it by clicking on it in “Layers” window.

remember to make Backgradient layer active by clicking on it
- Select Blend Tool and color, foreground as #d7d4d3 and background as #acacac

- Make a nice gradient like this

- Now create a “Shine” layer and focus on it by clicking on it.

Remember to make Shine layer active by clicking on it
- No make a small round rectangle selection at top, it will be used to create shine. See below

Remember how we created round selection before ?
- Select the Blend Tool and colors, foreground as white and background as anything. Remember to select Gradient as FG to Transparent and opacity to near 60, it’s important.

- Now by pressing CTRL button click the make a vertical gradient as shown below:

CTRL constrains the vertical
- This is how it will look. Now select the button by making “ButtonMain” layer active and clicking “Fuzzy Select Tool” to make a selection.

- Create another layer named “Border“. Remember now only border is left and everything else is done.

- Select “Border” option from menu.

give a value of 4 in the Border Dialog Box
- Now hide the “ButtonMain” layer to see the border clearly. Select Blend Tool and colors, foreground as #fce8e5 and background as #ca5958. Remember the opacity is near 60.

- Now make the Gradient using “Blend Tool” by pressing CTRL key and making a vertical line.

remember to make a vertical line using Blend Tool by pressing CTRL

looks like a cool border gradient
- Now just un-hide the “ButtonMain” layer and here is the cool shiny button :p

Its final and better !
- A little modification and experimenting leads to another subtle variation

tab button for website !

No related posts.
Related posts brought to you by Yet Another Related Posts Plugin.





3 Responses to “Nice button using GIMP”
You are having a lot of fun with this GIMP!!! Hehehe…
By Nikhil on Sun 17th Aug, 2008
^^Gimpy Gimpy !
By T on Tue 19th Aug, 2008
Cool guide.I am learning Photoshop these days.Will come to GIMP in a few days.
By Tweakwindows on Tue 25th Nov, 2008