General: How to create button images for skins.
From WinCustomize Wiki
| How to create button images for skins. | ||||||||
| ||||||||
Contents |
How to create button images for skins.
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.
Step One: Starting the button
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’.
Step Two: Button States
Now I need to determine the # of states the button image has. Different skins call for a different number of states. Rainlendar 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.
Completion
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.
