[WIP]Novice, working on smileys for another board C+C welcome

[Dessa]

Hi!  I started doing pixel art when I was 12 or so years old back in 1993 or so (always 2 colors), but it's been a long time since I've done any serious work.  I started posting at another board that has just plain awful smileys, and thought "I can do better!"  I'm just rediscovering how fun pixel art can be (and how frustrating!).  I'm a much better artist when I'm given limitations, so pixel art is up my alley.

The board in question is based around the latest My Little Pony series (which I never expected to be actually good), so the smileys are all ponies based around that show's designs (although I designed this character in particular).  Some of these are translations of much larger images, and some are faces I've come up with:

Current


Well previous


I'm happy with a few of these, and a couple need a lot of work, or perhaps complete redos.  In particular, winking (5th on the top), anger and fustration/irritation (bottom row) need some more love.  I've been tweaking and retweaking those endlessly and I'm never quite satisfied.

At this point, I'm just looking for general opinions and advice.
I basically stole the palette from the cartoon itself, using the eyedropper tool, and tweaked for more contrast to make the images more readable.

The sizing is a bit arbitrary, 23px tall, with unlimited width, which was an attempt to maintain enough room to convey expression without stretching a line of text too much vertically.

Are these readable?  I don't have much experience with antialiasing; would these images benefit greatly from it?  

Edit:  A reference image from the show, so you know the basic look I'm going for here:
 

[pistachio]

IMO, yes, they would benefit more from anti-aliasing... But not so much as they would a decent job of shading or more contrast.

And for some reason the heads seem a lot rounder than they are in the picture. It may be because the forehead sticks out more, or it may be a lack of a body. Or it may be inconsistencies with the eyes.

[Dessa]

IMO, yes, they would benefit more from anti-aliasing... But not so much as they would a decent job of shading or more contrast.

And for some reason the heads seem a lot rounder than they are in the picture. It may be because the forehead sticks out more, or it may be a lack of a body. Or it may be inconsistencies with the eyes.

The lack of body certainly makes the heads seem rounder, but you're right:  In general, my images have rounder heads.  I was going for a foal, or child, sort of look, so this was somewhat intentional, but if it looks altogether wrong I could go back and try to narrow things up a bit.

I'll go back and up the contrast when I get the chance for sure (I've been working in Paint, and some of these fancier programs are really intimidating, so it's gonna take me a while to get used to them).  Shading is a bit more problematic in that the show is very flat-shaded, so it doesn't seem appropriate to do so here. 

[Ixis]

Ah, "Friendship is Magic". Anyway,

I'd draw more of the heads from 3/4ths or the side. When they're straight on like that they do tend to look rounder and I could see someone mistaking them for a cat or some other animal. Anti-aliasing would help a little, but I think some stronger contrast in your color choices would help.

[Dessa]

Ah, "Friendship is Magic". Anyway,

I'd draw more of the heads from 3/4ths or the side. When they're straight on like that they do tend to look rounder and I could see someone mistaking them for a cat or some other animal. Anti-aliasing would help a little, but I think some stronger contrast in your color choices would help.

Ha, I've thought that while watching the show more than a few times.  They get pretty liberal with what a pony is supposed to look like.  Given the context, few people will confuse these for any animal besides a pony, but I agree that the ones where the she's staring straight-on tend to be the least interesting.  The tricky part about rotating her face aside is that it's easy to lose detail because all the far stuff has to be compressed.  I start getting pixels that want to latch onto eachother and she can look wall-eyed because there's no white space beyond the far eye to tell you which way her far eye is pointed.

The features I need MOST to stand out are the eyes and the mouth, as those are the bits that do the most expressing.  The ears can convery feeling as well.  Hence most of the contrast already there is between the eyes and everything else (Black on pastels).  The risk with setting the mouth darker is that the outline color is used around the entire face, and a dark face outline doesn't contrast with the eyes.  So I'll probably go in and cheat the mouth darker than the rest of the outline color.

Or I suppose I could lighten the facial yellow more?  As for the hair, it's not generally expressive (and I'm probably going to redo anger, because it's a bit too much right now), so I'd rather it contrast the eyes more than the facial tone (although as it is, I feel like it's easy enough to tell the hair and the face apart, if y'all are telling me it isn't, then I'll futz with it).  

It's kindof a balancing act between the show's aesthetic and the limits of the medium, as well as trying to find a way to keep all the colors from bleeding into eachother.

But I definitely hear what you're saying, and it's given me some things to try.

[Tourist]

I haven't seen the show, so my comments are based only on the reference pic you included in your post.

Your pixels are two different sizes, 22 pix for the top row, 33 pix for the lower row. 

None of the creatures in the source pic have eyebrows, several of your creations do. 

Only one of the ponies has closed eyes (the white unicorn) and it has some sort of eyeshadow.  This works well to keep the shape and size of the eye visible while letting the dark eyelid control the expression.  Unless this character is an exception, consider adding this feature to your icons.  It serves a similar purpose to eyebrows (defining the eye socket shape).

  In the source image, the heads appear to be 5 units high.  One unit for the nose/mouth, two units for the eyes, one for the top of the head (which may be covered by hair) and one for the hair above the skull.  There is some variation, but this seems to be a reasonable average.
  Simply scaling the faces might not give you the desired results, however.  The nose and mouth are crammed into a small space, and shrinking this will make the faces less readable.  You might be able to squeeze one pixel out of this space, but I'm not sure you can get more than one pixel from here.  Losing the nostril would make the noses resemble beaks, so I think that becomes one of the limiting factors. 
  Keeping the lower part of the face means reducing the rest of the face a bit more.  With a bottom of jaw to bottom of eye distance of about 6 pixels, that leaves 26 for a 32 pixel face; 13 for the eyes, 13 for the head and hair, which should be plenty. 
  If you've only got 22 pixels for the icons then you would have to shave everything down.  Lose the nostril, shrink all of the features, possibly use a couple more colors in order not to distort the nose shape too badly.

In the source, the top of the skull is a bit higher than the base of the ear.  In some of your images this is not the case.  I think lowering the skull makes the ears look more like horns and less like ears, and should be avoided.

In the source, the mouth is never wider than the space between the eyes.  You use a wider mouth for more expression.  It's a trade between adherence to the source and your goals for expression.  I recommend trying both and see what you like better.

Hope this helps,
Tourist

[Dessa]

I haven't seen the show, so my comments are based only on the reference pic you included in your post.

Your pixels are two different sizes, 22 pix for the top row, 33 pix for the lower row.  

None of the creatures in the source pic have eyebrows, several of your creations do.  

Only one of the ponies has closed eyes (the white unicorn) and it has some sort of eyeshadow.  This works well to keep the shape and size of the eye visible while letting the dark eyelid control the expression.  Unless this character is an exception, consider adding this feature to your icons.  It serves a similar purpose to eyebrows (defining the eye socket shape).

  In the source image, the heads appear to be 5 units high.  One unit for the nose/mouth, two units for the eyes, one for the top of the head (which may be covered by hair) and one for the hair above the skull.  There is some variation, but this seems to be a reasonable average.
  Simply scaling the faces might not give you the desired results, however.  The nose and mouth are crammed into a small space, and shrinking this will make the faces less readable.  You might be able to squeeze one pixel out of this space, but I'm not sure you can get more than one pixel from here.  Losing the nostril would make the noses resemble beaks, so I think that becomes one of the limiting factors.  
  Keeping the lower part of the face means reducing the rest of the face a bit more.  With a bottom of jaw to bottom of eye distance of about 6 pixels, that leaves 26 for a 32 pixel face; 13 for the eyes, 13 for the head and hair, which should be plenty.  
  If you've only got 22 pixels for the icons then you would have to shave everything down.  Lose the nostril, shrink all of the features, possibly use a couple more colors in order not to distort the nose shape too badly.

In the source, the top of the skull is a bit higher than the base of the ear.  In some of your images this is not the case.  I think lowering the skull makes the ears look more like horns and less like ears, and should be avoided.

In the source, the mouth is never wider than the space between the eyes.  You use a wider mouth for more expression.  It's a trade between adherence to the source and your goals for expression.  I recommend trying both and see what you like better.

Hope this helps,
Tourist

Wow!  Awesome.  Thanks!  I don't get what you mean about the pixel size being different.  Both the top and bottom row are 23 pixels tall (I just went and looked to make sure), although the bottom ones are indeed one pixel wider than the top.  Mouth shapes tend to stretch in the show, like anime mouths, they can be really tiny or reeealy big.  Eyebrows aren't normally visible, but on some expressions in the show, they are.  There's a fair bit of variability to this.  Here, for instance:

(I don't intend to use this one, but it was helpful in getting me to the point I'm at now.)


But eyeshadow is a much better idea.

This was really helpful.  Thanks. 

[Tourist]

Ah, right.  23 pixels each, bad math on my part.

Squeezing these faces down to 22 or 23 pixels is going to be tough.  Increase the contrast between outline and skin color a bit, there is an inverse ratio between size and contrast.  You can also gain back some of the space spent on the outline by using a trick to make the straight lines (like the bottom of the jaw) appear curved.

If you take a straight line of darker edge pixels: XXXXXXX
and replace some of the ones in the middle of the line with a lighter shade: XXXxxxXXX
you can generate the illusion of a small curve.  Call it a half-pixel sized curve.  Adjust the length and position of the lighter pixels as needed to get slightly different curve shapes.  This does increase your color count, but I don't think that will be a problem here.

Also consider removing the outlines altogether.  It's less cartoon-like, but if the target background is already a strong contrast with the shades you are using, the outline isn't needed, and it can save you a pixel or two here and there.

Good Luck!
Tourist

[Dessa]

Dude, Pro Motion is the shit.  It's totally worth the effort.  One question I'm having trouble finding the answer to:  is it possible to reassign a set of pixels to a different location in the palette editor?  I'd like to be able to arrange the colors how I like spatially, but if all the yellow pixels are looking to the palette slot row 1, column 3, it limits how I can arrange them.  The help menu and Google haven't yielded an answer.

And FWIW, increasing the contrast is making everything make just a bit more sense.  Previously, I was making an effort to adhere as strictly as was sensible to the palette of the show, which is pretty tonal.  While the show's designs make for clear, understandable animation, they weren't intended for such small designs (although, it appears that some of the same things that make animated characters read well help out with teensy weensy things too, which is nice).

I've messed with the shapes a little here and there as well, moving that hairline around like Tourist suggested (is there a paint-style selection tool in promotion?  I can't seem to just pick up a part of an image and shift it -- it always turns into the brush), which has been really illuminating, so I've got plenty of crap to do now.  I'll post again when I'm stuck or when I'm satisfied.  What I've got right now could use some tuning, but it does look better.

[Basketcase]

To rearrange PM's palette:

Mostly self-explanatory. 4 is the part where you select your blocks and drag them around.

edit: warning. this might not work. I fiddled around a bit and sometimes it worked, sometimes it didn't. Not sure why.

[Dessa]

Well, I should confess I'm working with a pirated copy of it, and I can only find Pro Motion in 4.7.  Suffice it to say I'm too broke at the moment for the real deal, or I'd buy a legit copy.  It either works differently or doesn't seem to be available in this version.

[trough]

Have you tried using Grafx2? It's free, cross-platform, and easy to use. The only downside I can think of is the lack of animation support.

[Dessa]

This being my first project and all, work has been haphazard, and if I'm learning anything, it's how to plan a project better next time around. 

I've tweaked a few of them and trashed a few of them, but I'm starting to feel like one image will become a template for the others:


 
1st > Current

Does anyone else ever feel like "I just did all that work, and all I managed to fix was four or five millimeters?"  I feel like that.  But them's pixels, I suppose.

I added colors, like Tourist suggested, to make lines cleaner and to help distinguish adjacent elements from one another.  I increased contrast between the face and face outline, and between the face base and the hair base (and the background), and I tweaked her hairline.  I'm leaving her yellow because she is a smiley, and some things are sacred in this world.

I also did that little half-pixel trick on the bottom of the face, and while I'm not settled on it being necessary in this particular image, it's working for some others (they need more love before I'll post them here though).  Also, that's a really neat trick.

I stole a technique I saw in Pokémon to suggest depth by making the "furthest" outline pixels lighter than the "nearest" ones.

And although it wasn't suggested by anyone, I restyled the hair so it didn't look like a Donald Trump Shredded Wheat biscuit.  This matches the hairlines of the references a bit more closely (the first one was more "human" looking), and isn't as Picasso-ey with the weird juxtaposed perspectives.

On the right track?

[Dessa]

Major revision:



Basically I started over from near scratch.  The originals were an amalgam of various reference images, but they weren't built on a solid foundation.  I restarted by sketching on paper the main viewing angles so that I had something I could rotate and reposition easily, then translating those:


I also changed the hair.  Instead of trying to draw straight lines that sometimes merge at oblique angles, now there are fluffy curls that don't need every last pixel in place to look like fluffy curls.  This had the added advantage of fitting into the theme that she assumed early on of sun, clouds, and sky.  As a bonus, "cloudy" hair lets me use the HAIR to help express, as negative emotions can use darker clouds to look "stormy."  And to give credit where it's due, this hair is a lot more along the lines drawn out by my friend.

She also hews more closely to the geometry of the cartoon characters, with some compromises for pixels sakes.

From here, it was easy to conceptualize different expressions.  I was still dead set on yellow as a base color, and on "silver" hair, which don't contrast well, but I added shading to the hair to put darkness against the yellow's light.

Beyond that, the color scheme was tightened to improve contrast, with the primaries used for distinct elements.  Reds, mouth - yellows, face - blues, eyes - greys, hair.

I still need to shade the faces, particularly crying.  Beyond that, I can't see much else to be done here except add to add more expressions.

Edit:  Wow, she looks like a Rabite (from secret of mana).  Unintentional!