Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Very Simple Button

Very Simple Button


Today we're going to create some very simple buttons. I'm basically giving you the know-how to create the style. You can then apply it to what ever size button you want.

For the tutorial, i will present it as a mini-menu, but we'll only be working on one button. So let's get started.

Create a new canvas size 70x15.

Fill in the background with any colour, and open up the blending options. Use these settings.

image 1

image 2

image 3

That's it! You've got your button. Now we can add some little icons, and of course text.

I created this little arrow (don't take notice of the black beneath it, it's a drop shadow.)

image 4

I used the font Silkscreen, and added the same drop shadow to it than the arrow.

image 5

image 6

That's really it! I created a little menu with the button to see what it could look like. Notice how i changed the colour of the arrow and gradient for the portfolio. This would be for a rollover effect.

Very Simple Button

Hope that wasn't too hard. Have fun!



Author's URL: Soushi
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "Very Simple Button"

Captcha