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
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
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.
23served
1
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 :)
2
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.
3
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.
4
A beloved trick indeed, use it almost always when making buttons…
Good job, Veerle!
5
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.
6
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.
7
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
8
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.
9
Pretty! I’d use the vector combination tools in exclude mode to create the glow over it though. A cool tutorial nevertheless.
10
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)...
11
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!
12
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!
Cheers,
Frederikke
13
Very nice tutorial and that on my 30th birthday today! ;-)
14
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?
15
skip wiley said:
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:
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.
16
Very good, yet simple tutorial. I prefer to do everything in Illustrator. It’s a kind of challenge for me. Thank you for sharing.
17
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.
18
Very Nice. Much faster than my previous method. Me likey.
19
As always, great tip. Just that little more than what we’de come up with ourselves. Thanks!
20
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
21
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
22
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.
23
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 on this article.