Creating flexible buttons using Photoshop shapes and styles
2006 at 10.12 am posted by Veerle Pieters
Not sure about you, but when I create buttons for a web site, I always use shapes, especially if the button has rounded corners. These vector shapes have the advantage that they are easy to scale or resize. Combine them with effects and you have the most flexible button ever. Not sure what I mean? I hope I can share something useful with you here…
Drawing the button using the rectangle shape
Select the Rounded Rectangle Tool, enter 4 or 5 px as radius for the rounded corner and draw your rectangle button shape. Double click the layer name, enter a name and then double click to the right of the layer to active the Layer Styles options.
Adding a drop shadow effect
Check the Drop Shadow style and enter 8% opacity, 90 degrees for the angle, 5 px distance and 0 px size (in case you don't want a blurry shadow). Feel free to enter what you think is nice.
Adding a gradient overlay
Check the Gradient Overlay option and click the gradient image. That will bring up the Gradient Editor. Click the first Color Stop and click in the Color below to change it. I used #a4cee6. Do the same for the Color Stop to the right. I've used #56add6. Now add a Color Stop in the middle by clicking right below the gradient in the middle. If it's not 100% the middle you can correct it by entering 50% in the location field. I've used #468bcc for this Color Stop. Now add another Color Stop at this same location. To do this just link to the right of it (below the gradient). I've used #81b3e2 for this new Color Stop. Now change its location to 50%. You should now get the effect shown in the image above.
Adding a border
Check the Stroke style at the bottom and select 1 px for the size and white as color (or the background color you are using).
Adding an extra glow
To finish the button off I added an extra glow on top by drawing a path using the Pen tool. I've filled this path with white and added a little mask to make it fade a bit and less hard. I set the transparency to 50%.
If needed, change the tone of the color
Sometimes you come to the conclusion that the color of the button is not exactly what you had in mind. You can experiment by using the Hue and Saturation Adjustment Layer. I de-saturated the button to make the button less blue and more grey. If you command/control + click on the Layer icon in the Layers palette of the button layer, your button will be selected. If you then select the Adjustment layer and click the Add vector mask option at the bottom of the Layers palette, only your button will get effected and not the rest of your layout.
This is just one way of doing things, it's one way of adding certain effects but there are a zillion possibilities and things you can try out.
PS: in case you have multiple Photoshop documents open, try this : hold down shift + command/control + space and click in the active document. You'll see that you zoom in on all of the documents. If you hold down shift + option/alt + command/control + space and click you'll zoom out on all of them. This is a tip I got from Roger Johansson who accidentally hit the shift key when he was zooming in.
Want to learn more?
A good and not expensive source to learn more about Illustrator, Photoshop, or web design is by joining the Tuts+ sites. You get access to the source files for just $9 a month. So your ONE membership gives you access to members-only content for ALL the Plus sites. I've written a tutorial for the Vector Tuts section.