I have tested out so many free tools for creating button styles ever since I realized it cut development time down as opposed to using just Photoshop. It’s better if you need to cut development time to create a style using one of the many tools available for sure. Many CMS systems provide CSS button styles that you can just select. That said, I will kill two birds with one stone – so to speak – by showing you how easily you can create a flashy button in Photoshop and then outlining some tools.

Here is a quick button style that looks prominent on a web page and you can add text to it quite quickly. It can be useful for ‘download now’ and ‘start’ buttons. This can suit ‘action’ buttons that require the user to click the button to get started on a task or a campaign, etc.

For this example, I chose a circular button. In Photoshop, create a circle about 300 by 300 pixels. I chose #406EF1 for the color; you decide what’s best for you. I will show the progress.

Right click the layer, and select blending options. Select gradient overlay, and set the blend mode to Overlay.

Select drop shadow, inner shadow, bevel and emboss, and outer glow.

Right click inner glow, and select global light. Move the crosshair to the center.

Right click blending options again, and change the gradient overlay color to orange and yellow (or a color of your choice), and change the style to radial.

xperiment with the colors for the type of color style that suits best. This is a basic circular button that can be created very quickly. I have used it below in place of standard bullets to illustrate how it can suit a list. I recommend these free online services for creating buttons as they allow you to craft various types of buttons in no time at all.

Button Maker at http://tools.blogflux.com/buttonmaker/ produces the colors and text styles of your button choice in seconds.

Buttonator at http://www.buttonator.com/ creates web buttons in a range of styles from classical to more abstract styles.

Cool Text at http://cooltext.com/Buttons offers effects such as 3D, Gel and Glass as well as quickly applying your chosen fonts and background colors.

Where standalone applications are concerned, you cannot beat Photoshop for its expansive list of effects and layering attributes that have kept designers well fed with tools for years. Sometimes it works to combine a free tool with Photoshop to advance the button design development time. You could use the tools mentioned and then add the finishing touches in Photoshop later.

Popularity: 1% [?]

Related Posts

• The Best Graffiti Photoshop Tutorials: 15+
• Learn Icon Designing: The best of tutorials and articles