Log In
Sign Up and Get Started Blogging!
JoeUser is completely free to use! By Signing Up on JoeUser, you can create your own blog and participate on the blogs of others!
SK Originals
"Computers are useless, they can only give you answers." Pablo Piccaso
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.
Article Tags
tutorials
Popular Articles in this Category
Popular Articles from SKoriginals
Copy/Cut/Paste is not available
Comments
1
Bichur
on Jan 13, 2007
nice.
bookmarked..
2
SKoriginals
on Jan 13, 2007
3
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!
Sign Up Now!
Meta
Views
» 8938
Comments
»
3
Category
»
Tutorials
Comment
Recent Article Comments
I'm Getting Another 'New' PC...
Google Begins Tracking All Y...
Let's start a New Jammin Thr...
LightStar Design Windowblind...
Welcome to 2025!
Which A.I. Software Are You ...
Adventures With MacOS
Modding Ara: History Untold
DeskScapes 11: The Dream Mak...
ChatGPT 4o vs. o1 vs. o1 Pro...
Sponsored Links