Creating anti-aliased sprites in Photoshop

Member
Posts: 257
Joined: 2004.06
Post: #1
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?

The brains and fingers behind Malarkey Software (plus caretaker of the world's two brattiest felines).
Quote this message in a reply
Founder
Posts: 1,138
Joined: 2002.04
Post: #2
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

Carlos A. Camacho,
Founder
iDevGames
Quote this message in a reply
Member
Posts: 257
Joined: 2004.06
Post: #3
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.

The brains and fingers behind Malarkey Software (plus caretaker of the world's two brattiest felines).
Quote this message in a reply
Moderator
Posts: 529
Joined: 2003.03
Post: #4
Just a guess:

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

"Yes, well, that's the sort of blinkered, Philistine pig-ignorance I've come to expect from you non-creative garbage."
Quote this message in a reply
Founder
Posts: 1,138
Joined: 2002.04
Post: #5
Post an image of the sprite layer and your alpha channel image.

Carlos A. Camacho,
Founder
iDevGames
Quote this message in a reply
Member
Posts: 257
Joined: 2004.06
Post: #6
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.

The brains and fingers behind Malarkey Software (plus caretaker of the world's two brattiest felines).
Quote this message in a reply
MarkJ
Unregistered
 
Post: #7
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.
Quote this message in a reply
Member
Posts: 35
Joined: 2002.11
Post: #8
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
Quote this message in a reply
Member
Posts: 233
Joined: 2003.05
Post: #9
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

"Pay no attention to that man behind the curtain." - Wizard of Oz
Quote this message in a reply
Sage
Posts: 1,232
Joined: 2002.10
Post: #10
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.
Quote this message in a reply
Post Reply 

Possibly Related Threads...
Thread: Author Replies: Views: Last Post
  Photoshop sizing and dpi Chamse 5 9,024 Apr 13, 2011 10:35 PM
Last Post: Anomalous Interactive
  Photoshop Sprites With Alpha Channel Nick 22 18,194 Nov 26, 2006 06:25 PM
Last Post: jarfish
  Your favorite Photoshop tutorials Carlos Camacho 6 6,051 Nov 18, 2005 04:08 AM
Last Post: Fenris
  Photoshop transparency/alpha channels willman256 17 12,468 Oct 29, 2005 05:21 AM
Last Post: TomorrowPlusX
  Generating Skybox Images in Photoshop Nick 9 14,163 Feb 24, 2005 08:15 AM
Last Post: jamie