Aug 17

Nice button using GIMP

Scribbled on Sunday, August 17th, 2008

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 !


Enjoyed this post? Subscribe to Full Feeds or by Email and receive free daily updates on this Blog.

No related posts.

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

  1. 3 Responses to “Nice button using GIMP”

  2. 1

    You are having a lot of fun with this GIMP!!! Hehehe… :D

    By Nikhil on Sun 17th Aug, 2008

  3. 2

    ^^Gimpy Gimpy !

    By T on Tue 19th Aug, 2008

  4. 3

    Cool guide.I am learning Photoshop these days.Will come to GIMP in a few days.

    By Tweakwindows on Tue 25th Nov, 2008

Post a Comment

August 2008
M T W T F S S
« Jul   Sep »
 123
45678910
11121314151617
18192021222324
25262728293031