AuthorTopic: aliased (i.e., stair-steppy) edges on figures  (Read 4889 times)

Offline LBBL

  • 0001
  • *
  • Posts: 6
  • Karma: +0/-0
    • View Profile

aliased (i.e., stair-steppy) edges on figures

on: February 28, 2012, 02:44:37 am
Hello everyone:
I just joined the site yesterday, and I really don't know anything about pixelation. But I'm very impressed with the posts I read, especially in the manner in which members convert a drawing to an image with an aliased (i.e., stair-steppy) edge suitable for making a transparent GIF in Photoshop via GIF89a Export. (My version of PS is *really old* -- version 5.0 -- but I can do a lot with it.)
If I want to convert an image that's in a JPEG to a transparent GIF, what I do is use the eraser to remove rather quickly the background around the image and then go in with the line tool around the edges to smooth them out. Then I try to make a stair-steppy, aliased edge *by hand* with the eraser and pencil, but it's difficult to get it to look "smooth flowing", or continuous. I noticed that the little figures you all make have PERFECT aliased edges around the borders. How do you all get the edges looking so perfect? Is there a computer program or something that converts an image with an anti-aliased edge into one with an aliased edge suitable for making a transparent GIF via GIF89a Export.
I'd really appreciate any help or advice you all can give me on this question.
Thanks in advance.
LBBL  
« Last Edit: February 28, 2012, 03:04:15 am by LBBL »

Offline Ai

  • 0100
  • ***
  • Posts: 1057
  • Karma: +2/-0
  • finti
    • http://pixeljoint.com/pixels/profile.asp?id=1996
    • finticemo
    • View Profile

Re: aliased (i.e., stair-steppy) edges on figures

Reply #1 on: February 28, 2012, 04:40:54 am
That's simple: We draw it that way (rather than converting anything)

We don't, as a rule, reduce CGs in order to make pixel art -- rather, we draw a cg-style sketch or thumbnail, and once it's about right, we draw pixel art using it as a reference -- or some people just skip the sketch entirely and go straight to pixeling. Some people like to trace over the thumbnail lines directly, others don't. Regardless, there is no antialiasing to 'get rid of', because the pixel art is done.. pixel by pixel, with the pencil tool or equivalent; no antialiasing is ever created, except by hand when it's needed.

There's not really a 'de-antialiasing' filter in existence -- though you may want to investigate the various sharpening algorithms, particularly Bilateral Filtering. You may also find image segmentation helpful (I use G'MIC for that myself)

On a different topic, if you want to make non-animated, paletted images, I suggest installing the latest GIMP, and doing whatever you do, then saving the result as a PNG. Using PNG rather than GIF allows you to use >256 colors(ie. non-paletted image) if needed, and is comparable in filesize.
« Last Edit: February 28, 2012, 07:02:56 am by Ai »
If you insist on being pessimistic about your own abilities, consider also being pessimistic about the accuracy of that pessimistic judgement.

Offline LBBL

  • 0001
  • *
  • Posts: 6
  • Karma: +0/-0
    • View Profile

Re: aliased (i.e., stair-steppy) edges on figures

Reply #2 on: February 28, 2012, 07:42:45 am
Many Thanks for responding, Ai:
You all are indeed good drawers to hand draw a nice pixel curve that appears smooth. My curves are "herky-jerky". After I made my post, I got to thinking that if I went around the image -- (after I had quickly removed the background as I discussed) -- with the Photoshop line tool with anti-aliasing turned off that the tool would put in an aliased (or pixelated) edge. I tried it and it worked very well, and I could then "clean up" this aliased edge a little. This approach seems to work better for me than just starting out from scratch with the pixelation, which I'm no good at. In essence, the PS line tool, with anti-aliasing turned off, converts an anti-aliased curve to an aliased (or pixelated) curve. One just goes around the outer edges of the image with the line tool in small segments (i.e., 1 to 3 pixels, or so) choosing the local color at each segment.
I've just been on this site one day and have already benefited greatly!
Thanks,
LBBL
Added in edit:
At this point, I'm just concerned about the outer edges of the image being pixelated, so that I can make a transparent GIF via GIF89a Export. The regions of the image inside the border edges can stay as they were in the original JPEG image. (So, this isn't a *real pixelation*.) I'm certainly going to follow this site closely -- (I'm very impressed by it) -- so that I can pick up other pointers, and maybe get into real pixelation myself.
Thanks again.
« Last Edit: February 28, 2012, 07:58:15 am by LBBL »

Offline Ai

  • 0100
  • ***
  • Posts: 1057
  • Karma: +2/-0
  • finti
    • http://pixeljoint.com/pixels/profile.asp?id=1996
    • finticemo
    • View Profile

Re: aliased (i.e., stair-steppy) edges on figures

Reply #3 on: February 28, 2012, 09:51:01 am
Ah, you want to add colored outlines to the JPG image source. That's significant. Anyhow, using vectors is also a good choice for achieving smooth contours.

Now that I think of it, if you look at Grafx2, you will find it has functions for exactly this -- pixel perfect aliased curves.
If you insist on being pessimistic about your own abilities, consider also being pessimistic about the accuracy of that pessimistic judgement.

Offline 9_6

  • 0010
  • *
  • Posts: 416
  • Karma: +0/-0
    • View Profile

Re: aliased (i.e., stair-steppy) edges on figures

Reply #4 on: February 28, 2012, 10:46:06 am
You could also save as a png for alpha transparency.
You can have 255 tones of transparency that way so you can have it anti aliased.
Does scaling an image blur it?
Opera fix Firefox fix

Offline LBBL

  • 0001
  • *
  • Posts: 6
  • Karma: +0/-0
    • View Profile

Re: aliased (i.e., stair-steppy) edges on figures

Reply #5 on: February 28, 2012, 10:46:31 am
Again, Many Thanks, Ai, for taking time to respond with the good info.
I downloaded GrafX2 and will check it out. (It will be a while before I can investigate fully, because I have so many "irons in the fire" that I fear that I might get burned -- lol.)
To clarify: as far as outlining the image, I don't want to put a solid-color outline (like red or blue) all the way around it. The outline-pixel color will change as one goes around the image depending on what color the pixel is next to it inside the JPEG image. In other words, the goal is not to see any outline at all. The pixel outline is to blend in with the rest of the image, so *all* anyone would notice would be the aliased, stair-steppy edge around the image.
If I haven't made myself clear, please let me know and I'll try to rephrase, since this is the important crux of what I'm interested in now.
Again, many thanks.
LBBL

Offline LBBL

  • 0001
  • *
  • Posts: 6
  • Karma: +0/-0
    • View Profile

Re: aliased (i.e., stair-steppy) edges on figures

Reply #6 on: February 28, 2012, 10:58:45 am
@9_6
My Photoshop 5.0 (the only graphics program I have and know how to use) doesn't save PNGs with alpha transparency. Really, all that is a little over my head, since I don't consider myself to be an expert in computer graphics. Am I understanding you correctly? Many thanks for responding.
LBBL

Offline Atnas

  • Moderator
  • 0100
  • *
  • Posts: 1074
  • Karma: +2/-0
  • very daijōbs
    • paintbread
    • paintbread
    • View Profile

Re: aliased (i.e., stair-steppy) edges on figures

Reply #7 on: February 28, 2012, 02:01:56 pm
hm, I wonder if it wouldn't be better to do the outline on a new layer in black or some other noticeable color, and then after you're done the whole contour, lock layer transparency and then use the brush to color the line? Would be better than a new line every couple pixels imo. And then you could fill the area outside of that line (after unlocking the transparency) with a solid color to get rid of any AA that goes beyond it. Or! use the wand with 0 tolerance on the area outside the contour you've drawn, then go down to the jpeg layer and hit delete to clear the AA away.

I'm pretty sure your photoshop should have all these things, I used ps 5.5 for all my painting and non-pixel art editing up until a year ago.

Offline LBBL

  • 0001
  • *
  • Posts: 6
  • Karma: +0/-0
    • View Profile

Re: aliased (i.e., stair-steppy) edges on figures

Reply #8 on: February 28, 2012, 09:28:33 pm
@Atnas:
Hello, and thanks for responding.
I'm sure you have the solution to my problem, since you've used Photoshop 5.5. But, to be honest with you, I really don't understand the exact details of the steps you describe. It might be that we're using different terminologies. But, if you rephrase your comments and list the steps slowly and in order with a little more detail, that would be a big help for me. (I'm sorry for being such a "dunce".) I'm very proficient with Photoshop 5.0, knowing how to use the tools and the layers palette, etc.
So, let me rephrase what you're saying just so you can see the source(s) of my confusion.
So, I should do the outline on a transparent layer above my JPEG image? (Recall that I'm not a very good drawer and that my curves look "herky-jerky".)
What tool(s) should I use to make the black outline, and should they be used in the anti-aliased or aliased mode?
What "Options" should I use for the drawing tool(s)?
After I've done the black outline, I should "preserve transparency" on the layer (is this what you mean by "lock layer transparency")?
And then I go back in and re-color the black outline so that the outline-pixel colors match the colors next to them within the JPEG image? I could use the pencil for this as well as the brush, correct?
And then I fill the area outside the outline with black (after turning off "preserve transparency", of course). I could use the paint bucket or even the pencil (with a large-diameter setting in the brushes palette) to do this, correct? I can certainly see that at this point we don't have any anti-aliased pixels on this layer, since everything is black outside the line I've drawn.
This is what I don't understand: my outline around the image (on the transparent layer above the image) now is aliased, or stair-steppy, exactly as I've drawn it. Correct? The outline probably won't be very good, since I'm not a good pixel-drawer. So, I really don't see how these steps give me a better outline than I'm capable of making on my own?
You say, "Or! use the wand with 0 tolerance on the area outside the contour you've drawn". This implies that the tool(s) I used for drawing the contour was in the anti-aliased mode, correct? Then the magic wand (with 0 tolerance) would remove the AA.
You say, "then go down to the jpeg layer and hit delete to clear the AA away." I don't understand this comment at all. If I hit delete on the JPEG layer, wouldn't it just disappear leaving me with what I'd done one the layer above, which would have the outline (which I'd colored in) and black outside of this. I'd want to preserve my image and not have it disappear.
I sure hope helping me and answering all my "lame-brain" questions hasn't turned into a big headache for you. Like I said, I really think you can solve my problem, once I understand you fully.
Many Thanks,
LBBL

Offline Ai

  • 0100
  • ***
  • Posts: 1057
  • Karma: +2/-0
  • finti
    • http://pixeljoint.com/pixels/profile.asp?id=1996
    • finticemo
    • View Profile

Re: aliased (i.e., stair-steppy) edges on figures

Reply #9 on: February 28, 2012, 09:59:07 pm
@9_6
My Photoshop 5.0 (the only graphics program I have and know how to use) doesn't save PNGs with alpha transparency. Really, all that is a little over my head, since I don't consider myself to be an expert in computer graphics. Am I understanding you correctly? Many thanks for responding.
LBBL

That's one of the reasons I recommended GIMP -- because it does a better job at saving PNGs than all of the comparable alternatives, including even the latest Photoshop. Because Adobe wrote their own PNG encoder rather than using libpng, it's rather less capable, particularly WRT getting good compression levels.

To be precise:
* PNGs support alpha transparency (even for paletted/indexed images)
* however, if you want gif-style transparency, that is known as 1-bit, 'boolean' (on or off), or 'indexed' transparency. PNGs support that too. If you are saving indexed rather than RGB images, then I recommend sticking to boolean transparency, as not all programs understand how to treat alpha transparency on an indexed image.
If you insist on being pessimistic about your own abilities, consider also being pessimistic about the accuracy of that pessimistic judgement.