Visio159

Nice button using GIMP

August 17, 2008 – 11:38 am

Looks 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 !