Vectorials
Flash Perfection
3D Lessons
Tutorialkit
Markup Tutorials
Learn PHP
network
Beveled Button
by Axialabs.com
Useful Button (and a bit about gradients)
by Adam Priestley
Fancy Buttons
by Atul Thakur
Texture Buttons
by Atul Thakur
Free Web Designs
A collection of free web templates. Premium quality web designs, easy to browse.
Photoshop  Home Photoshop Web Layout Trendy Buttons
rss

Trendy Buttons

Author: Netcubo More by this author

Added: Mar 16, 2005 Rating:  Average Rating: 3.66 Votes: 29 Position: 2474 of 11901Average Rating: 3.66 Votes: 29 Position: 2474 of 11901Average Rating: 3.66 Votes: 29 Position: 2474 of 11901Average Rating: 3.66 Votes: 29 Position: 2474 of 11901Average Rating: 3.66 Votes: 29 Position: 2474 of 11901 Level: Beginner Software:  Photoshop

Introduction
Make great trendy buttons to go with your website.

Step 1
Start off with a new document 500x300 and make a new layer and make the background a light grey colour, so we know what we are doing. Grab your Rectangle Marquee Tool and make a fixed size of 85x20. Fill that in with the colour white. You should have something that roughly looks like ours.. It is? Great, lets move on..


Step 2
Now on your layers palette, find a little symbol that looks like this then go straight to stroke. This will now add a stroke effect to the button, making it look a little more dynamic. You should now enter in these settings:

You now should have something that looks like this..


Step 3
Now go straight to Gradient Overlay and enter in these settings:

You should have something that looks quite Gradient. If you do then please.. move on.


Step 4
Now for the Bevel and Emboss, go straight to it and enter in these settings:

You should have something that looks similar to this..


Step 5
Now to add a little shadow to it. Go to Drop Shadow and enter in these settings:

Now you can save your style so you don't have to go through it all again. This is simply done by clicking "Style" on the right of the window and name it whatever you want to call it, and then click "Ok". When done, click "Ok" and you should have something that looks like this..


Step 6
As you can see your finished, but the thing is it needs something else, something more trendy. I know adding text to it. Select your Text tool, and select a font. Once you've done that enter in anything you want to add to it. I chose to add "Submit >>" which makes it look a little trendy.


Final Result
Now to add a little shadow to it. Go to Drop Shadow and enter in these settings:

Now you can save your style so you don't have to go through it all again. This is simply done by clicking "Style" on the right of the window and name it whatever you want to call it, and then click "Ok". When done, click "Ok" and you should have something that looks like this..

Trendy Buttons Tutorial: Final Result


Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Photoshop  More Photoshop: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials
Add comments to "Trendy Buttons"