How to create button images for skins.

Published on January 13, 2007 By SKoriginals In Tutorials

No matter what you're skinning some where along the line your going to probably make a button. This is a quick guide on how to make a multi-state button image quickly in Photoshop. The concepts here can be used in many programs from WindowBlinds to Rainlendar.

First off you need to decide the size of your button. For this simple tutorial I’m going to make a small 25x25 pixel button. So first I start a new image at 25x25. Before I do anything I’m going to make a ‘Set’ to put all my images into (you’ll see why here shortly).

Next I make a full solid background. I like to use the shape tool for buttons, this way I get smooth shapes for my button. For the sake of simplicity I’m just making a round button for the tutorial. If your following along you should have something like I currently do in the image below.

If I have to put an object on the button such as an ‘X’ for a close button I would also include that IN the ‘set’.

Now I need to determine the # of states the button image has. Different skins call for a different number of states. Rainlender has 3, SysMetrix has 4 and WindowBlinds can be anywhere from 2 to 9 or more states. It just depends. For this tutorial I’m going to have it as a 3 state image. First is normal, 2nd the mouse over and last the pressed state.

I placed all my current layers into the set because now I can create as many ‘states’ as I want and not worry about everything lining up right. Plus as a bonus if I have say 6 layers for this one button (and yes I have created buttons with that many layers) I can easily recreate and modify the button for its many states.

So I need to make my other states. To do this I go to ‘Image > Canvas size’, change the width of the canvas (from 25 to 75 = 3x the current size for the 3 states) and move the ‘Anchor’ to the left. See image.

Now I can click on my layer, drag it to the ‘copy’ on the bottom of the layer pallet to make 2 more sets (for my other states).

Next I take the sets and move them to the proper spots. My solid backgrounds help me line them up quickly and accurately. I can now change my images slightly to give me the different states and make the solid layer unseen.

That’s it… I now have my button with its 3 states and don’t have to worry about it lining properly or anything else. I can save it like this as a transparent PNG (used in many programs). I can also use that PNG imported into WindowBlinds having WB changed to a TGA or I can create the TGA here which gives me better control over the final image.

To create the TGA in Photoshop I can simply merge all the visible (on a PC the shortcut is Ctrl+Shift+E). Then select the layer while holding the Ctrl key, go to the channels pallet and click the ‘Save selection as a channel’ (second icon from the left on the bottom of the pallet, it looks like a square with a white circle in it). Lastly add a background to my image and save as a TGA making sure the ‘Alpha channels’ option is selected. Why go through all that? More control over your image, that simple.

I hope this tutorial helps you to make buttons a little easier and faster.

Comments

Bichur

on Jan 13, 2007

nice.
bookmarked..

SKoriginals

on Jan 13, 2007

Disturbedcomputer

on Jan 02, 2010

@ SKoriginals nice guide can you please put the images back up? thanks

Welcome Guest! Please take the time to register with us.
There are many great features available to you once you register, including:

Richer content, access to many features that are disabled for guests like commenting on the forums.
Access to a great community, with a massive database of many, many areas of interest.
Access to contests & subscription offers like exclusive emails.
It's simple, and FREE!