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

Pixel Button


Start with a new document, it doesn't have to be very large.

Make a new layer and call it: "white". Make a selection of 150px X 25px. Fill it with white and give it a 1px black stroke.

You should now have this(the green is my background color):

image 1

Ctrl + click the "white" layer. Go to select > modify > contract in the new window, fill in "1" and hit ok. Make a New layer, called: "Gradient". Set your foreground color to #FDC303 and your background color to #FD8D03. And draw a gradient from the top to the bottom of your selection. Give this layer a 1px black stroke

You should now have this:

image 2

Looking cool already huh? :D zoom in a couple of times and make a selection of 3px X 25px. Delete a small piece of the "Gradient" layer, like this:

image 3

Ok, now CTRL + click your "Gradient" layer. Delete the big part of the selection and draw a gradient from top to bottom with foreground color: #AACE3C and background: #7D982D:

image 4

That's practically it. Add some text and apply another 1px black stroke. You could also apply a pattern to it. Here is my result:

Pixel Button



Author's URL: Frankenkill
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 "Pixel Button"

Captcha