SlicedSprite borders

[broken]

Hi!

I have a couple of questions about the borders of the SlicedSprite, but most likely these questions have one answer.

I created a new UI (the structure by default UIRoot -> UICamera -> Anchor -> Panel).
UIRoot style set to FixedSize, manual height = 700

1. Need to make the background panel (attach1 - PanelDesign).
Solve: Add SlicedSprite (texture 28x28 attach2 - PanelTexture), add UIStretch - horizontally, add borders in atlas Left/Right/Top/Bottom = 1.
Result (attach3 - PanelResult): Top blue line is stretched UITexture (28x28) and bottom blue line is strethed SlicedSprite (28x28).
Problem: In SlicedSprite case you can see the gray border around the edges. In the case of the UITexture of this effect is not there all right.
 
2. Need to make a button with a white border (attach4 - ButtonDesign).
Solve: Add SlicedSprite (texture 28x28 attach5 - ButtonTexture), add borders in atlas Left/Right/Top/Bottom = 3.
Result and Problem (attach6 - ButtonResult): Instead of pure white border we get gray border.

Help.

Thanks!

[broken]

If I change Filter Mode (Atlas texture import settings) to Point, the borders becomes almost like the design, but now suffers a bit texture quality (attach, see gradient button content).

[ArenMook]

First of all, don't use PNGs. PNG transparency = pure white. So when any kind of filtering is used, the white bleeds through. Use PSDs with Alpha instead of transparency, or TGAs (as they can't have transparency to begin with).

Second, consider using the Unlit/Premultiplied Colored shader. It doesn't have the same issues as Unlit/Transparent Colored. It does require a slightly different approach to textures though.

Third, fixed size UIRoot does not give pixel-perfect results, so you will always have some pixel bleeding with this setting. Only the pixel-perfect root setting will give you pixel-perfect results with no pixel bleeding.

[broken]

Thanks for the answers!

1. I replaced all the textures in the psd, now the white border looks white.
2. I tried to change the shader of the atlas material to Unlit/Premultiplied Colored shader, as a result of all the textures with alpha channel are white. I read topic:
http://www.tasharen.com/forum/index.php?topic=625.msg5833#msg5833
you talk about how need a special way to do this under the texture shader and advise the TexturePacker, there are any other ways to do it and where you can read about them?

[ArenMook]

Look into the Flaming Pear Solidify A filter for photoshop. It's designed to get rid of the "white border" artifacts of PNGs.

[broken]

Sorry, I do not quite understand.

After I replaced my PNG textures to PSD, the problem with a white border for the button disappeared, she was white as needed.
But now there are other problems with transparent textures.
For example, I have a silhouette (attach1 what it looks like in design - SiluetDesign, attach2 my texture in psd - SliuetTexture).
Here's what it looks like when you add in the Sprite (attach3 - SiluetResult).

First, as I understand the level of transparency does not quite match the transparency in Unity3d (Unlit/Transparent Colored shader in atlas texture).
Secondly there is a white border around the texture (attach3).

If I change the Unlit/Transparent Colored shader to Unlit/Premultiplied Colored, all the textures that have transparency are fully (or partially) white. So I set yet on the Unlit/Transparent Colored shader.

I downloaded the filter "Flaming Pear Solidify A" and tried to apply its texture (attach2) but the effect is spread over the entire texture and not just on the border around the silhouette.
I suspect that I did not understand correctly your phrase

...Use PSDs with Alpha instead of transparency

Сurrently my texture in Photoshop (attach2) looks like a transparent background and a certain percentage of opacity of the silhouette.

[ArenMook]

There are more steps to Solidify A than just running the filter. Search this forum, this has been covered more than once. In short, you need to save your transparency as selection, then move it to the Alpha channel. Only then run Solidify A.

[broken]

I read article where explain why of what is happening and how to fix it:
http://answers.unity3d.com/questions/10302/messy-alpha-problem-white-around-edges.html

To solve this (in Photoshop) I always use the free "Solidify" tool from the Flaming Pear Free Plugins pack, like this:

Download and install the Flaming Pear "Free Plugins" pack (near the bottom of that list)
Open your PNG in photoshop.
Go to Select -> Load Selection and click OK.
Go to Select -> Save Selection and click OK. This will create a new alpha channel.
Now Deselect all (Ctrl-D or Cmd-D)
Select Filter -> Flaming Pear -> Solidify B

Your image will now appear to be entirely made of solid colour, with no transparent areas, however your transparency information is now stored in an explicit alpha channel, which you can view and edit by selecting it in the channels palette.

Now re-save your image, and you should find your white fuzzies have dissappeared!

After doing my texture was completely filled solid color in Photoshop (with alpha) and in Unity3d (attach1), and it did not help me. But below is another useful comment:

Note that there's a bug/quirk/something where sometimes the alpha channel won't show up in Unity for some reason. If this happens, you must have an actual background layer in Photoshop (labeled Background)--simply filling in a layer with solid color isn't always enough.

After I added a second layer to its texture white background and updated texture in Unity3d, the silhouette was displayed normally (without white border), but lost the opacity silhouette (attach2), probably due to the fact that I added a white background.

Looks so:
Attach1 - silhouette texture after using the filter but with no background layer in Photoshop. Do not see the silhouette, but there is opacity.
Attach2 - silhouette texture after using the filter with second white background layer in Photoshop. There is a silhouette but there is no opacity.

I attached the PSD help fix it.
https://dl.dropboxusercontent.com/u/18725174/Siluet.psd

[ArenMook]

So what is your question exactly? I'm not sure what you're trying to do with the silhouette. What is the default look you are trying to achieve and where?

[broken]

In design it is:
http://www.tasharen.com/forum/index.php?action=dlattach;topic=4413.0;attach=2022
Silhouette with opacity (You can see the objects behind the silhouette, background in this case) and without white borders around.

[ArenMook]

Oh that's trivial. The RGB channel should be pure black (and no silhouette should be visible!), and alpha channel should have a white (or grey) silhouette. If it's white, then you should set the sprite's alpha to be semi-transparent. If grey, then no additional changes need to be done.

[broken]

Thanks! You have increased my skills in Photoshop
I did not even look at that sprite is in the properties Tint alpha channel