Sign Up Now
Twitter Facebook Flickr Buzz
Social Networks


Forgot Password? Go Join Now
Sign Up for Starter's Pack (Free)
Call (800) 223-8720
Need Web Solutions? Get Free Sample Issue

Library: Creative Design


Easily design customized web buttons with Layer Styles

Added on Wednesday 4th of February 2009 09:23 am EST

Application >Adobe Photoshop CS/CS2
Operating Systems > Macintosh, Microsoft Windows

Web buttons, as shown in FIGURE A, are often innovative in design, and can be fun to make. But that joy can turn to regret if you have dozens and dozens to make. For those times, Photoshop's Layer Styles not only saves you time, but ensures output accuracy as well. Let's start with a quick explanation of what web buttons are, and then we'll create a few examples.

Understand the makeup of web buttons
Typically you use web buttons for website navigation. Many times you find them located in a group of buttons called a navigation bar, i.e., nav bar, and you use them to go from one page to another. When you move your pointer over a button, known as a rollover, the button typically changes its appearance. For example, it may light up, change color, or even change size. When you click the button to activate its link, the button changes again.
Because the change happens so quickly, you get the impression that you're actually pressing a button using your pointer. But what in fact you're actually doing is rapidly switching from one image to a second, to often a third, as shown in FIGURE B. This means that for every button image that appears on a page, there are at least two to three additional button images required to support the rollover. That would mean that with two dozen buttons on a site, you'd have to create potentially 72 images. Make a change to one, and you'd have to change three. Let's now create an example, and see how you can use Photoshop to simplify the process to save you time, work, and aggravation.

Determine an image size and open a new file
Although web button design may vary from website to website, they usually appear the same throughout one site. Because of this, there are several appearance properties you first must decide on before you start:
• BUTTON SIZE. Button size should be small enough to reduce download times, but large enough to accommodate the longest button title.
• BUTTON COLOR. Button color should be distinctive enough to stand out against the background color of the page, but similar enough to complement the color scheme of the site.
• BUTTON DESIGN. Button design should be unique enough to add eye appeal to the page, but not so eccentric to detract from the layout.
Once you've determined these factors, you can begin:
1. Launch Photoshop and select File > New to display the New dialog box.
2. Enter web buttons, 600 pixels, 225 pixels, and 300 in the Name, Width, Height, and Resolution text boxes, respectively. Click OK to open a new file.
The canvas is large enough to accommodate the design of our buttons, and later when we save the various button images for the web, we'll then lower the resol...