You are looking at archived content. The hot new stuff is happening at Veerle's blog 3.0. You should check it out!

Aug 14

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

step 1, drawing a path

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 styles

Adding a drop shadow effect

step 2, 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

step 3, 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

step 4, 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

step 5, 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

step 6, 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?

VECTORTUTS+ Vector Tutorials and 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.




permalink this comment Asia Mon Aug 14, 2006 at 11.38 am

Wow, I didn’t know it is so easy to make such a nice buttons :) I’m just making first steps in Photoshop and your tutorials are VERY useful - thanks Veerle :)



permalink this comment matt northam Mon Aug 14, 2006 at 11.49 am

nice and succint :-) i’ve used shapes for this purpose for a while now but the border and glow bits really finish it off nicely.. can’t beat a bit of gloss.
good stuff.



permalink this comment Richard Medek Mon Aug 14, 2006 at 12.09 pm

I’ve been using Fireworks for years because it makes these things so easy and fast where it always seemed so daunting in Photoshop. But these tutorials you’ve been posting just make it seem so, well, less daunting! Thanks for sharing these fantastic tips.



permalink this comment Sugar Mon Aug 14, 2006 at 12.30 pm

A beloved trick indeed, use it almost always when making buttons…

Good job, Veerle!



permalink this comment Paul Michael Smith Mon Aug 14, 2006 at 02.40 pm

As we move forward in this industry people want things to be “dynamic” and it doesn’t stop with coders and css.

Designers should be mastering the blending options and shape tools because as you shown in this article it means you can make instant changes without “damaging” the original object.

They are good because they each have their own opacity attributes and contours.

Another good tip is to remember that fill and opactiy are different when dealing with blending options.



permalink this comment Raven Mon Aug 14, 2006 at 03.04 pm

Neat little trick, especially for the non-design-guru’s amongst us. Always a pleasure to read such articles and -more importantly- learn from them for future use.



permalink this comment Mauricio Samy Silva Mon Aug 14, 2006 at 03.40 pm

Hi Veerle,
Inspired in this article I created a Brazilian-Portuguese tutorial (using beginners level skills) showing how to make a Fireworks Veerle’s Button version.
The job is hosted at: Veerle’s Button



permalink this comment JP Mon Aug 14, 2006 at 03.56 pm

I found that the way you write your tips is very clear, concise and a joy to read.

The Photoshop zoom tip was great too and I can’t believe I’ve never noticed it before.

If you hold down SHIFT + SPACE you can also you can use the Hand tool to drag and pan over all open documents at once.



permalink this comment Nando Mon Aug 14, 2006 at 04.11 pm

Pretty! I’d use the vector combination tools in exclude mode to create the glow over it though. A cool tutorial nevertheless.



permalink this comment Jake Tue Aug 15, 2006 at 08.59 am

Great tutorial. Honing PS skills can seem to be a lost art. With practice and good tutorials, keeping sharp is no problem. Thanks and keep ‘em coming. (Also like the EE tutorials)...



permalink this comment skip wiley Tue Aug 15, 2006 at 09.29 am

Great to see this tutorial!

Is there great benefit in using Photoshop for tasks like this as opposed to Illustrator?

I’ve been dabbling in web graphics for several months now (using Illustrator entirely), though I’m starting to hit a few walls that suggest it may be entirely worth it to learn Photoshop.  For one, the vector -> pixel conversion (during “save for web”) seems to have some strange inconsistancies.  Been a nagging problem in tasks where pixel-perfection is necesssary.

If anyone could shed a little light on this, it would be great!



permalink this comment Frederikke Jensen Tue Aug 15, 2006 at 05.00 pm

Hi Skip

I often use Illustrator for a start, then if necessary to perform certain effects I will import my Illustrator document into Photoshop.

It might be a matter of personal taste but I just like making the basic layout for a site in Illustrator. Sometimes I would make buttons in Photoshop and place them in the Illustrator document and also if I do work on a photo using it as banner I will just place it in Illustrator after doing the Photoshop work.

For the final saving of the document or part of the document I would definately use Photoshop.

And to Veerle thanks again for an interesting tutorial!





permalink this comment René Kleizen Wed Aug 16, 2006 at 01.51 am

Very nice tutorial and that on my 30th birthday today! ;-)



permalink this comment thx1138 Thu Aug 17, 2006 at 12.34 am

Once you’ve created a button with this method, is there a way to change the width while preserving the corner radius? Other than rasterizing the vector object and slicing and dicing?



permalink this comment Veerle Thu Aug 17, 2006 at 12.35 am

skip wiley said:

Is there great benefit in using Photoshop for tasks like this as opposed to Illustrator?

The fact that you work in pixel is an advantage since you get a precise result. Access to all the Photoshop features is a plus too, Illustrator can limit you in that. Smart Objects in Photoshop are also vector based and you get an option when pasting art from Illustrator.

thx1138 said:

Is there a way to change the width while preserving the corner radius?

Yes there is, you need to use the “direct selection tool” and select the points on the path of one end of the button and drag it to the proper width.



permalink this comment Dmitry Baranovskiy Thu Aug 17, 2006 at 01.04 am

Very good, yet simple tutorial. I prefer to do everything in Illustrator. It’s a kind of challenge for me. Thank you for sharing.



permalink this comment Jonathan Wagner Thu Aug 17, 2006 at 02.55 am

Thanks for the awesome tutorial.  I have been wondering how to make scalable buttons like this for some time now, but am not very design minded.  Your tutorial makes it seem like child’s play. 

This one’s definitely going in the Photoshop bookmarks folder.



permalink this comment Jared Thu Aug 17, 2006 at 09.45 am

Very Nice. Much faster than my previous method. Me likey.



permalink this comment kenneth Himschoot Thu Aug 17, 2006 at 10.03 am

As always, great tip. Just that little more than what we’de come up with ourselves. Thanks!



permalink this comment Dave O'Brien Fri Aug 18, 2006 at 01.17 pm

I’ve been using layer styles for years now and I’ve used many tutorials that address gel/glass/glossy buttons before.

However I’ve not seen one as well presented, easy to follow whilst delivering the quality of end product that this one does.

Very well done. Thanks



permalink this comment Thomas Mon Aug 21, 2006 at 02.10 pm

Fireworks is rounded-corner heaven. You gotta check that out. I’ve been loving it recently. Also has a lot better PNG support. For designing interfaces it’s awesomly great!

I can’t wait for Photoshop CS3



permalink this comment J David Macor Tue Aug 22, 2006 at 07.05 am

I just wanted to say that your tutorials along with everything else are really great. You are a huge inspiration to me as a budding web designer.



permalink this comment Vipul Fri Sep 1, 2006 at 05.33 am

hey have been following your blog for a while now.. really like the way you present stuff.. smart and simple. good stuff.

Commenting is not available in this weblog entry.


buy something from my Amazon wishlist