View source for GUISkin Creation Walkthru

If you are creating a GUI Skin from scratch, I can suggest this workflow: 


In Illustrator:
 
1. Develop your style/theme and drag a few different backgrounds in for alpha testing (this is important if you make semi-transparent windows). 

2. Create a mock of the complete skin including all the controls. 

3. Check the transparent elements again black, white and your other backgrounds - make sure some mock text is readable with a busy background behind. 

4. Switch to Pixel layout made and check the clarity of each control. Resize, and adjust as needed. 

5. Create a new layer and copy the skin into it. Turn off the old skin layer - its a backup incase things get funky. 

6. In the new layer, break the skin apart into functional elements (i.e. match each part to a Unity GUISkin GUIStyle. 



Exporting Illust to Pshop 

7. Copy each element and paste into a single new photoshop document. I usually do this by category to avoid confusion. You should have a big jumble of controls on one page with lots of layers - this is good. 


In Photoshop: 

8. When you paste a control in from Illustrator, it will almost never come in perfectly. There are often stray or misaligned antialiasing pixels and whatnot. You need to manually make each element "pixel-perfect". I tend to copy and rotate elements to ensure they mirror each 
other. In photoshop, if you paste pixels with less than 100% opacity over eachother, the effects are additive, so make sure your paste target area is empty. This care taken in this step is the difference between a polished and average GUI. 

9. Cut up the resizable controls to their minimum. For buttons and windows, this just means finding the last row and column of repeatable pixels before the corners kick in, deleting what's in between and merging the results. You should leave a single line of repeatable 
pixels for each corner - less than this can give odd results. 

10. Copy each element and paste it into a new document - I would suggest pasting each state of the same element into the same document and making sure they line up. 

11. Save the PSD as the element name and then export for Web as a PNG. Make sure you have a good naming convention for each control state (like buttonNormal, buttonHover etc). 


In Unity: 

12. Create the GUI skin and assign the elements. I always turn off Mipmapping, as Nicholas said, and I never use DXT compression instead opting for RBGA32. Better to sacrifice a little memory for a super-crisp GUI. 

13. You'll need a GUI script to see all your elements. You can use mine, if you don't mind C#. Its here - http://forum.unity3d.com/download.php?id=2330 

14. Adjust the margins and borders for each of the GUIStyles - the horizontal scrollers & sliders can take a bit of fiddling - for sliders use the overflow properties to get things lined up correctly. Remember: the thumb is larger than the slider, thus; left & right overflow = (slider width or height - thumb width or height) / 2. 


If you're not bad at Illust & PShop it takes around 1 day from concept to getting a skin up and running in Unity.