Photoshop
Basic Skills
Buttons and Icons
Colors
Designing
Drawing
Effects
Photo Retouch
Text Effects
Textures & Brushes
Web Graphics
Web Templates
9tuts
Home
Subscribe to 9tuts RSS
Subscribe via Email
Professional Button

197ProfessionalButton125x125This tutorial will show you how to create professional, glossy icons for your applications by using some popular techniques in design

 

 

 

Step 1: Create a new document and use the Gradient Tool to make a light gray background

197ProfessionalButton1

Step 2: Create a rounded rectangle with the Shape Tool as the image below

197ProfessionalButton2

Right click on the shape and choose make selection

197ProfessionalButton3

Step 3: Create a new layer and use the Gradient Tool with Radial Gradient option to fill it

197ProfessionalButton5

Here are my Gradient values:

 197ProfessionalButton4

Step 4: Make sure your shape is being selecting and go to Select > Modify > Contract to contract the selection about 4 pixels

197ProfessionalButton6

Step 5: Create a new layer, change the Gradient option to Linear Gradient and draw a line like this:

197ProfessionalButton7

Step 6: Choose the Elliptical Marquee Tool with Intersect with Selection option to draw an ellipse on top of the button

197ProfessionalButton8

Step 7: Create a new layer and use the Gradient Tool with the White to Transparent gradient to draw a straight line from the top to the bottom

197ProfessionalButton9

Reduce the Opacity of this layer to 85%

197ProfessionalButton10

Step 8: Add a nice shape to your button with the Shape Tool and reduce its Opacity if necessary

197ProfessionalButton11

Finally use the Brush Tool to add some leaves to your work, the final result will look great

197ProfessionalButton12

This tutorial demonstrated some very popular techniques that designers work with them daily. I hope you enjoyed this tutorial


Related tutorials:



Comments
Justin Ray 10-07-2008
Great tutorial. Nice and simple. The first step of creating a background is not
really necessary, and probably specific to that project, but this is a simpler
method than some other tutorials I've seen.
. 11-05-2008
.
Ashish Sawant 11-16-2008
hey great man. i was looking for this tutorial from quite some time. as i wanted
to use buttons for my site.
thanx dud

ashish'
http://jiyuashish.50webs.com
wanda 12-28-2008
very nice tutorial, fun colorful button. Im trying to figure out how to make
sure each one is exactly the same size for my site when I use the background
like you did. cant find an option to make the shape an exact size each time.
Alina 01-02-2009
Beautiful work :)
سكرا&# 01-10-2009
very nice
naresh 08-17-2009
good tutorial please send foe emailadress
my e-mail adress is
dasemunna@rocketmail.com
tankufor sending
Add A Comment
Name:
Website:

3.26 Copyright (C) 2008 Compojoom.com / Copyright (C) 2007 Alain Georgette / Copyright (C) 2006 Frantisek Hliva. All rights reserved."

 
(28 votes)