iDevGames Forums
Creating anti-aliased sprites in Photoshop - Printable Version

+- iDevGames Forums (http://www.idevgames.com/forums)
+-- Forum: Development Zone (/forum-3.html)
+--- Forum: Designer's Studio (/forum-6.html)
+--- Thread: Creating anti-aliased sprites in Photoshop (/thread-5851.html)



Creating anti-aliased sprites in Photoshop - Malarkey - Feb 22, 2005 03:58 PM

Okay, I must be some sort of an idiot or something because I can't, for the life of me, figure out how to create anti-aliased sprites in Photoshop. All manner of alpha channel creation and manipulation has not netted the results I'm trying to achieve. Anyway, what I'm trying to do is smooth out the cat sprites I used for my "Accelerated" entry by adding an alpha mask around the cat. Could someone help me out and explain how I could accomplish this?


Creating anti-aliased sprites in Photoshop - Carlos Camacho - Feb 22, 2005 04:54 PM

Please post a picture of your sprite.

Short answer...
I assume your sprite has a "hard edge", which is obviously seen in its current form. You want to use an outline of your sprite which best matches the background color of your game world.

Look at this link:
http://sprites.fireball20xl.com/HTML/tut/art2sprite.htm

In the pict with a white background, the dark outline really stands out. In the last pict, the outline is a color that better matches the background color, so it looks smooth.

Cheers


Creating anti-aliased sprites in Photoshop - Malarkey - Feb 22, 2005 05:45 PM

Carlos Camacho Wrote:Short answer...
I assume your sprite has a "hard edge", which is obviously seen in its current form. You want to use an outline of your sprite which best matches the background color of your game world.

Well, really what I'm trying to figure out how to do is set up variable opacity levels using an alpha mask so that the sprite blends into the background around the edges. I've looked at a number of online tutorials that go into it but I don't seem to be getting any results. And the other part of what I'm trying to do is learning how to use Photoshop more effectively.


Creating anti-aliased sprites in Photoshop - Leisure Suit Lurie - Feb 22, 2005 05:49 PM

Just a guess:

Duplicate the background layer. Then delete the original. When the background shows a checkerboard instead of white, you have transparency.


Creating anti-aliased sprites in Photoshop - Carlos Camacho - Feb 22, 2005 06:43 PM

Post an image of the sprite layer and your alpha channel image.


Creating anti-aliased sprites in Photoshop - Malarkey - Feb 24, 2005 12:54 AM

Okay, this is the image I'm trying to add opacity to:
[Image: Neko-idle.png]

The background is already transparent. What I'm trying to do is if you look real close, it's rather pixelated. I'd like to use varying levels of opacity to smooth that out some. I think what I'm doing wrong is setting up the alpha channel since I create a selection and save it out to a new channel. When I adjust the levels of grey in the alpha channel, I don't see any visible results.


Creating anti-aliased sprites in Photoshop - MarkJ - Feb 24, 2005 05:05 PM

Malarkey, is that your source image? If you want to smooth that out, I don't really have any advice, since it looks like its been drawn as pixel art. If you have a much larger source image, then thats something to work with, and I would also suggest checking out Illustrator for vector based drawings.


Creating anti-aliased sprites in Photoshop - erazorhead - Mar 7, 2005 08:25 PM

right. your problem is not really with photoshop, you're just trying to make apples from oranges. the original drawing is pixel art, and you just can't change that by varying the opacity on the edges. sucks, i know. i'd say either embrace the style of art it is and go with it as it stands, or i guess you'll just have to re-draw it so it has smoother edges.

shrug


Creating anti-aliased sprites in Photoshop - aaronsullivan - Mar 7, 2005 09:20 PM

I'd resize the original pixel art by 4x or so, add a transparent layer on top. Trace the image with the paint brush. Touch it up. Once the layer below is hidden, you can turn it into whatever format you want. Oh yeah, don't forget to change the image size back to 1x. Smile


Creating anti-aliased sprites in Photoshop - arekkusu - Mar 7, 2005 09:52 PM

If that's the art, try enlarging with a scale2x/4x algo, then reducing to the original size with bilinear filtering. Looks OK: [Image: cat_aa.png]
Of course you'll get better results drawing with vectors from the beginning.