Cleaning Tiny PNGs?

[Sigurd]

So I've made a few tokens for my character.

I've carefully exported them from photoshop with a white transparency and a dither. Now I have ugly white pixels on the edges of my tokens.


What do people use to create\clean their tokens and get them ready for inclusion in the game?

Any secrets to share????


Sigurd

[Griogre]

Sigurd, I have little artistic knowledge. But I think your dithering may be messing you up. As far as I know dithering and transparency on the same layer do not mix well.

[devinnight]

If you have the option to save for web inside your version of Photoshop use that. Then choose PNG24 and transparency and you are good to go.

If you have set up your file with a white background, duplicate the background layer twice, then on the topmost layer, the one with the token delete all the white pixels. On the next layer down select all and delete, this will make the layer transparent. Then throw away the bakcground layer, making the transparent layer the new background.

Save for web and you should be good to go.

Also if you want to create drop shadows, creat a layer, draw in the shadow at 100% black. The make the layer opacity around 35%. That shadow will then overlay anything that you put the token on.

-D

[initiatezao]

In the layers palette if you double click on the background layer you can change the name to whatever you want and that unlocks the background for direct manipulation, including transparencies.

You can then use the magic wand tool to select the pixels you want to remove then delete them, changing the tolerence number as needed to select more or less pixels. Once you have the selection around token you can use select feather to give it a softer edge when deleting. Or you can use defringe sometimes under the layer>matting>defringe that can help to soften the edges up a little.

Also you can use Image>adjustment>invert to reverse the colors, then the background will be black might be easier to erase against transparent background of grey and white grid. Then when done erasing just invert back to make it right.

Also in the layers palette is an option at the bottom to add a layer effect clicking on that adds layer effects only to the image pixels after you have erased the surrounding white pixels and you can manipulate them greatly with a few slider changes.

I have never helped anyone through words in photoshop so if my help is unclear let me know and I can do up a graphic tutorial using screenshots and post on my website for you to look at. Also I use CS2 so some of the heading might work differently.

I know photoshop pretty well so if you have any other questions, if this helped let me know.

[Sigurd]

Really good advice, thank you all.

[Sigurd]

I don't know if the file size difference is significant but it is 1k vs as much as 10k.

24bit removes the problem but it multiplies the file size by 5 to 10.


Has anyone had problems they can attribute to the 24 bit format?


Sigurd

[devinnight]

You'll be fine with the file size and 24png files.
-D

Oh and thanks for the tip on changing the background initiatezao, I had never run across that little tidbit.

[Tailz Silver Paws]

I thought FG automaticaly put a little drop shadow on the tokens?

[devinnight]

no, most people make the drop shadows, PS has a layer style that makes easy dropshadows. I either paint my dropshadows, or make a selection around the object, then on a lower layer fill that selection with black and distort it by hand, blur it, and set the opacity to around 40.
-D

[kalmarjan]

If all else fails, you can use two different options with PS. One is the channels to apply a mask over your image, load it as a selection, then inverse it and delete. I find this much more acurate than using the magic wand tool, especially if you have an image where the background color is simular to the image you are trying to clean up. (The magic wand works on contrasting pixels, depending on the threshold you set it to.)

The second option that I find really works well is to forget about the drop shadow layer style altogether, and go with an outer glow effect. The problem that I have with drop shadows is that the shadow is directional, and there is no way to have an overhead light source. You will always have some sort of an angle. The outer glow can be set with the same colors as the drop shadow, with the same settings, and gets rid of your funky white outline.

If that fails, set an inner shadow with a color that is one step lower than the color of your base image. (Use the eyedropper feature, then adjust the light/darkness slider), and this will also get rid of your white outline.

Hope that helped.

Sandeman - Who one day will get off his keister and get his ACE certification. :/

[devinnight]

Cool tips Kalmarjan..
I guess the question is what kind of tokens are you making. If they are round or square then K's ideas make a lot of sense.. for tokens like the ones I've been making I use the shadow to help show the form, so an equal non-directional shadow is bad.
-D

[kalmarjan]

Yes, I concur. :)

Another way of doing so I found is to copy the layer itself, make a distortion, use variations to darken it, drop the opacity, then move it to the point where the shadow would fall. On a small scale of the tokens, you maybe would not see the difference, but then you get a realistic shadow that also has the reflection cast from the image as well. (But that is for another day :) )

Sandeman

BTW: Total Training for CS2 rocks! LOL