Smooth rounded conors and transparency

I know this is not excactly a question of how to use the UnityGUI is more a question on how to create textures for the gui correctly.

I wanna make smooth round edges on a box, for that i figured i should use the alpha channel on the texture to do the transparency and rounding. I get visible artefacts where the switch to transparency occurs.

Is there a special trick to use to create those smooth rounded edges?

PS: I use photoshop. Hmm maybe this needs to go in external tools?

Regards,
Marc

 

What I do is to slice everything up inside photoshop, then use Save For Web to save all images for my skin in one go.

 

To get smooth rounded edges you need to make sure your image has an 8bit alpha channel. If you just do a simple crop, depending on the package, it tends to feather corners very poorly. As Nicholas said you can use Photoshop which is great for editing - but for the actual creation of GUI control elements, you should consider Illustrator.

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.

Hope this is useful.
Cheers
Shaun

 

Nice work-flow Shaun. This should be in the Wiki for sure!

 

Wow thanks alot all of you. Very nice.

Cheers,
Marc

 

Wikified - http://www.unifycommunity.com/wiki/index.php?title=GUISkin_Creation_Walkthru

 

Ok, I have tried not using compression, but that hasn't actually helped me with my problem. The blending that takes place in Unity itself is not giving me the nice results that come from Illustrator/Photoshop. I am getting these thin, ugly artifacts. Any tips for destroying these monsters?

The only reason that the problem is not present in the black area around the curves is that that blend was created outside of Unity. If I use an antialiased alpha-blended edge over black using the Unity GUI, I get those tiny light streaks.

(You can also see the same effect in the pic from the original post of this thread.)

 

I had the same problem a while ago. As far as I can see, the problem is in the way the PSD file handles the alpha (or how Unity handles it... makes no difference).

I added two PSD files which demonstrate the solution. Use boxA, and you have no feathers, use boxB, and you have the problem you showed in the screenshots (border = 12). BoxA uses a filled background and an alpha channel, while boxB uses a transparant layer.

I don't know how Nicholas got the boxes so good whithout using this technique, so I assume there is a better way, but this is a workable solution...

 

I'm sorry, I am not understanding what the solution is that you are proposing. It seems from your post and these files that both of them would have coloring issues for the offending pixels.

The file that I am using resembles your "B" image, but if I were to use your "A", then the background color would have to stay static. It can't do that. :?:

 

the background of boxA is transparant, it is only defined as an alpha channel in PSD, not as a transparant layer. For me this solved the problem.

I have made a small unitypackage which uses both boxes (the PSDs I attached before). Just attach the script to the camera. The top box should look fine, while the bottom one has the 'jaggies'.

Check out the PSD files in Photoshop, and you'll see that boxA has an alpha channel in the channels tab. By making sure there is no transparant layer, Unity apparantly uses the alpha channel, with better results - at least on my computer

Please let me know if it helped.

 

I agree; I use an alpha channel more often than I rely on transparency. Sometimes transparency is OK, depending on the texture, but using an alpha channel and a solid background usually works better.

--Eric

 

Have you tried using a PNG instead of a PSD - I've found I sometimes get better results this way (just make sure color profiles are not saved in the PNG)

If this doesn't help, you probably need to reconsider the way you're creating your GUIskin elements. As I mentioned earlier, if you design the basic structure in Illustrator, slice it in Photoshop then export to a PNG, you should be fine. I've done this with all my previous skins and never had a problem.

Cheers
Shaun

 

I haven't gotten a chance to investigate the earlier methods, but the Save As PNG actually works. I don't understand why that should be, and it's an inconvenience / waste of disk space, but at least my GUI looks correct now. Thanks!

 

it seems that PNG doesnt save the color with the alpha premultiplied, while PSD does, and since Unity uses the color as it comes in the channel, then PNG is the way to go for smooth transparency

Edit: i just tried, and saving the PSD with no transparency but specifing that in the alpha channel works like a charm.. i learn something every day


.org