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

Creating a Button


Here we will make an awesome button to use on your web site. Step-by-step instructions proceed..

1) Let's open up a new image, 88x31. Your foreground color should be #0079C5 and background color should be white. Now, create a new layer by going to Layer>New>Layer and make sure the background is white, not transparent (Otherwise, the following steps will not work) .

2) Select the Elliptical Marquee Tool and create a small circle in the center (Hold Shift to make a perfect circle) . You should have something like this:



3) Next go to Filter>Stylize>Extrude...

...and use these settings:



4) Now, go to Filter>Blur>Motion Blur and apply the following settings:



5) Last filter to apply and it's a neon glow! So, go to Filter>Artistic>Neon Glow and use these settings:

Make sure the Glow Color is set to #00688F or it'll look gay.

6) Here, we will make a text background. Ok, now make a new layer by going to Layer>New>Layer and select your foreground color (#0079C5) . Select the Rectangular Marquee Tool and make a selection at the bottom and fill it with the foreground color (Alt+BackSpace) . You should get something like this:



7) On the same layer, go to the Layers Palette (Windows>Layers) , select the text background layer. Change the opacity to 80% and the fill to 90%.

8) Create a new layer and select your pencil tool. Make sure the brush size is 1px and the color black. Holding Shift, draw a line on top of the text bg. Should look like this:



9) Time to make the text. Select a good pixel font and make your text. After you position your text and all, go to the Layers Palette and right-click to select Blending Options. Select Stroke and use these settings:



You should have completed this tutorial and made a nice still button. For reference, here is my final copy:

Creating a Button Tutorial: Final Result

You can take this tutorial one step further and animate it. Learn Here!


Author's URL: Havenfx.com
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 "Creating a Button"

Only registered users can write comment

No comments yet...