Log in

I forgot my password

Latest topics
» Dot Com is Back!
Sat Aug 08, 2009 8:57 pm by Dot Com

» Im back
Sun Feb 15, 2009 9:37 pm by ToXic

» Summer of '07
Sat Feb 14, 2009 7:41 pm by ToXic

» Cool website.
Sat Feb 14, 2009 12:35 am by ToXic

» ToXic Here:)
Sat Feb 14, 2009 12:34 am by ToXic

» Get your own wallpaper (Wallpaper Template)
Sat Feb 14, 2009 12:32 am by ToXic

» Acid Blue
Sat Feb 14, 2009 12:29 am by ToXic

» Hello
Mon Dec 29, 2008 8:52 pm by MrMario

» Well...
Tue Nov 25, 2008 5:10 pm by Green CoW

Keywords

rulea  sigs  naruto  phpbb  Sites  websites  rank  Palace  mod  rules  website  for  Gamer  

Search
 
 

Display results as :
 


Rechercher Advanced Search

RSS feeds


Yahoo! 
MSN 
AOL 
Netvibes 
Bloglines 


Statistics
We have 82 registered users
The newest registered user is gavmarie

Our users have posted a total of 1591 messages in 217 subjects
Poll

What genre of music are you into?

35% 35% [ 7 ]
5% 5% [ 1 ]
20% 20% [ 4 ]
30% 30% [ 6 ]
0% 0% [ 0 ]
10% 10% [ 2 ]
0% 0% [ 0 ]

Total Votes : 20

Who is online?
In total there is 1 user online :: 0 Registered, 0 Hidden and 1 Guest

None

[ View the whole list ]


Most users ever online was 31 on Mon Aug 03, 2009 9:17 am

Make a button with rounded corners

 :: Graphics :: Tutorials

View previous topic View next topic Go down

Make a button with rounded corners

Post by Van1lla on Sun Jun 29, 2008 7:44 am

Open GIMP and create a new image (I chose 420×300), create a new layer (Layer > New Layer) called ‘color’, with fill type of transparency.

We’ll begin by making a selection for the button shape. Press R for the rectangular select tool and make a selection by clicking and dragging, then release when your happy with the size and shape of the selection, mine is 200×50 (the size of the selection is displayed in the bottom of the image window when making a selection):

Now we want to round off the corners, go Select > Rounded Rectangle and set radius to 40%. Choose a color of your choice (I chose #007BFF) and fill the selection on the new layer using the fill tool (SHIFT+B) or using the CTRL+, shortcut.
Now we want to add some highlights to give the button some depth. Create another new layer called ‘topHighlight’ with fill type of transparency, then go Select > Shrink and shrink by 2px. Now press R (rectangular select tool) and change the mode to subtract in the tool options:

Then make a selection from the bottom left corner of the button to just over half way up; press L (Gradient tool) and change the gradient type to ‘FG to Transparent’:

Press D then X to reset and swap the colors so that white is now the foreground color, now click and drag (whilst holding the CTRL button to get a nice straight gradient) from top to bottom of the selection and let go to make the highlight.

Now right click on the ‘color’ layer in the layers window, and choose ‘Alpha to Selection’. Create a new layer called ‘bottomHighlight’ with fill type of transparency, then go Select > Shrink and shrink by 4px. Press R (rectangular select tool) and make a selection from the top left corner of the button to just over half way down.

Press L (Gradient tool) and click and drag (whilst holding the CTRL button) from bottom to top of the selection, then set the opacity of the layer to 20%.

Press CTRL+SHIFT+A to deselect, then go Filters > Blur > Blur to soften the bottom highlight.

Time to add some text, press T for the text tool and enter your text (mine is ‘URW Gothic L Semi-Bold Not-Rotated’ at 26px). The text looks a bit flat, so we’ll make a few tweaks; right-click the text layer and choose ‘Alpha to Selection’ then go Select > Grow and grow by 1px. Create a new layer called ‘textBorder’ and fill the selection with #4B4B4B, move the layer below the text layer in the layer stack (Layer > Stack > Lower Layer) then deselect (CTRL+SHIFT+A).

With the ‘textBorder’ layer still active, go Filters > Light and Shadow > Drop Shadow (GIMP 2.2 users go Script-Fu > Shadow > Drop Shadow) set x and y offsets to 0, blur radius to 8 and opacity to 20%.
To finish off we’ll add a soft drop shadow to the button; select the ‘color’ layer in the layer stack, then go Filters > Light and Shadow > Drop Shadow (GIMP 2.2 users go Script-Fu > Shadow > Drop Shadow) set x and y offsets to 0, blur radius to 4 and opacity to 30%.

Saving the image for use: right-click the ‘color’ layer and choose ‘Alpha to Selection‘ then go Select > Grow and grow by 5px, then go Image > Crop Image. Hide the background layer by clicking on the little eye icon to the left of the layer.

Now save it as ‘myButton.png’ (File > Save As).

NOTE: make sure that you change the select mode to normal for the rectangular select tool when finished (first button).
avatar
Van1lla
Admin
Admin

Number of posts : 449
Warning :
0 / 1000 / 100

Extra Rank: :
Registration date : 2008-06-26

View user profile http://graphics.zforum.biz

Back to top Go down

Re: Make a button with rounded corners

Post by Spear on Wed Jul 02, 2008 1:08 am

i can make rounded corners in 2 seconds
avatar
Spear
Members
Members

Number of posts : 50
Warning :
0 / 1000 / 100

Registration date : 2008-07-01

View user profile

Back to top Go down

Re: Make a button with rounded corners

Post by Dot Com on Wed Jul 02, 2008 7:48 am

Anime you may want to check your pictures I can't see them. Very Happy
Thanks
~Dot Com
avatar
Dot Com
Global Mod
Global Mod

Number of posts : 78
Location : United States, California
Warning :
0 / 1000 / 100

Extra Rank: :
Registration date : 2008-06-30

View user profile

Back to top Go down

Re: Make a button with rounded corners

Post by Van1lla on Wed Jul 02, 2008 7:29 pm

i think the link is broken.
avatar
Van1lla
Admin
Admin

Number of posts : 449
Warning :
0 / 1000 / 100

Extra Rank: :
Registration date : 2008-06-26

View user profile http://graphics.zforum.biz

Back to top Go down

Re: Make a button with rounded corners

Post by †Andrew† on Mon Aug 04, 2008 5:35 am

when you go on properties, and use the url you can see them.

†Andrew†
New Member
New Member

Number of posts : 2
Warning :
0 / 1000 / 100

Registration date : 2008-08-02

View user profile

Back to top Go down

Re: Make a button with rounded corners

Post by Helio on Sun Aug 31, 2008 9:42 pm

How do you open a 'GIMP'?

Helio
New Member
New Member

Number of posts : 7
Warning :
0 / 1000 / 100

Registration date : 2008-08-31

View user profile

Back to top Go down

Re: Make a button with rounded corners

Post by Green CoW on Sun Aug 31, 2008 10:52 pm

Gimp is a graphics application!
http://www.gimp.org/
avatar
Green CoW
GFX Designers
GFX Designers

Number of posts : 122
Warning :
0 / 1000 / 100

Registration date : 2008-08-28

View user profile

Back to top Go down

Re: Make a button with rounded corners

Post by Sponsored content


Sponsored content


Back to top Go down

View previous topic View next topic Back to top

- Similar topics

 :: Graphics :: Tutorials

 
Permissions in this forum:
You cannot reply to topics in this forum