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.

Very Simple Button image 1

Very Simple Button image 2

Very Simple Button 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.)

Very Simple Button image 4

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

Very Simple Button image 5

Very Simple Button 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 Tutorial: Final Result

Hope that wasn't too hard. Have fun!



Author's URL: Soushi
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Very Simple Button"

Only registered users can write comment

Reader's comments