Newbie trying to pixel elephants

[Sophistique]

Hi guys,

As the title suggests, I'm a newbie trying my hand at some pixel art - my boyfriend is working on a game & suggested I should at least give him some 'fill-in' art until he finds an actual artist. I've never done pixel art before (I'm a very traditional artist), so figured I'd have a go at this genre.

First attempt:



  (this one just had 'hue' added to the grey color)

Second attempt:



Basically going for a 'cartoon' look (they'll have the lighter spots on them all like the first attempt guy), but I'm very stuck on the shading aspect of pixel art. Trying to avoid the "pillow look" that the second guy has going on.

My first dithering attempts (with & without the black outline):







Any advice? Tips?

[YellowLime]

Was going to comment on how the first ones were all pillow-shaded and didn't look like pixelart (you didn't make those pixel-by-pixel right?), but I see you took a new direction

I don't see why you adhere to a color restriction, though. Why don't you use 5 shades of blue instead of 3, for example?

[PixelPiledriver]

Here's some incomplete thoughts:

[RiseAgainst378]

PixelPiledriver -- just to chime in here -- can you explain a little bit about your process in changing the Effelant? I brought it into Photoshop and I see it immediately went through some very drastic changes -- I'd like to know what was going through your head. The result looks fantastic and it seems like you've provided a good "launching off" point, but I'm not quite sure what to take from it other than "get better"! 

Thank you for your time!

[Sophistique]

YellowLime - No, the first coloration on the second guy wasn't pixel by pixel, which I can see was wrong as soon as it was finished lol. I didn't really limit myself to just the 3 colors, I thought it might have been better than trying to crap too many color variations in there because of the size, but I can certainly open up the pallet a lot more in the future, thank you.

PIxelPiledriver - pretty much what RiseAgainst was asking if you don't mind - the changes look fantastic, and I can see how it was slowly changed. What got you to think of those changes?

I'm working on another sketch of the same position to fix up some of the flaws of the original shape and design of the character, and I'll post some updates when I've colored them to see if I have any improvement.

Thanks guys.

Editted to add:

I done an edit on him very quickly on paint (so forgive the horrible black background it threw on there, and the other paint related issues) after PixelPiledriver's suggestions

I think it's a great improvement on him, and I like the coloration style - thanks PixelP Any other comments on him? I'll be starting fresh on another Effelant drawing for the next update to hopefully incorporate some improvements again.

[PypeBros]

Here's some incomplete thoughts:




can you explain a little bit about your process in changing the Effelant?

I wish I was behind PPD's chair as well. Yet, I can note the following tricks:
- focused on making volumes correct rather than on having soft transition (gradient) between highlights and shadow
- plain black only on the eyes, which makes them the focus point our brain expects
- used dark, but tinted shade for art lines in different places
- introduced a secondary color for the pink spots, makes the drawing feel more complete
- stylized features for the hair, but with a small number of clusters

I'm more surprised by the light outline on the back and the trump. I'd have expected him to use light (but not highlight) outline enclosing a specular cluster, instead. That may be part of the "incomplete", either in his edit, or in my study of (pixel) art

[Sophistique]

Thanks so much for putting that into words for me PypeBros - helped a lot.

This was another sitting position I was working on has gone through.

Please keep C&C up, it's helping me out a lot to find my style and what works for me.



Then with rework:

[e4r]

I thought your piece could use a bit of contrast,  I probably went a bit overboard, and then for some reason graphicsgale added more colors to it when I used the tool.. I think it was because teh alpha background messed with it. But yeah, I don't know what it was about your light source, but it seemed weird so I jsut made it come from the top. Also I wouldn't use that white as a highlight because it makes your elephant have a "metallic" look to it.

Edit: Just noticed I messed the Trunk abit its too thin, oh well. And I left the hair 1 color because I'm not proficient enough with hair atm to give you any tips on it

[RiseAgainst378]

My main concern right now is that the elephant looks like it's made out of metal -- there isn't much texture indicative of "elephant skin". The ear looks pretty detailed and the legs somewhat, but the light hitting him in the back and the subsequent shading make his body look a bit metallic.

Hopefully that makes sense -- I'm not too great at explaining things (or showing them!)

[Sophistique]

Thanks for the advice guys! I'll try it out on the next "Effelant" design (still working on getting a common 'theme' of the characters down pat as well), but I think I'll go with the light coming from the top simply because this sprite will flip in game and I can A). Take the easy way out of having a light source that will suit the character if he is facing left or right, and B). Should take out the need to have the really light blue down his back which might be take away the "metallic" look as well.

I'll update with the next one soon - thanks again guys! 

[RiseAgainst378]

Keep us updated -- I want to see where this goes!

[PixelPiledriver]

That may be part of the "incomplete", either in his edit

Yes there were some parts held over that I didn't change such as the trunk, tail, etc.

I'm not quite sure what to take from it other than "get better"!

Sorry, sometimes I am too tired to write stuff and hope that the image will explain itself.
But agreed, edits are usually better with text.
Hope some of this is more helpful.

can you explain a little bit about your process

Software
I used Graphics Gale for this.
There are plenty of good pixel editors.
Mess around and find some you like.

Reduced the number of colors from 35 to 13
This kind of happened over time by just painting over with eye dropped colors.
A lot of the 35 seems to be accidental duplicates.
I think one of the 13 was also a random pixel.


Use frames as versions
When I make a change that I like I duplicate to a new frame.
This let's me go back to previous version quickly and compare.
Also I have a process animation ready to export when I'm done.


Time
I consider myself to be somewhat slow.
This took about 40 minutes.

What got you to think of those changes?

PypeBros did a good break down but I'll throw in some thoughts.

Surfaces and Forms
Surface normals face in different directions and reveal light and create shadow.
This helps the viewer understand the objects shape and depth.


Non uniform color balance
While the balance is determined by light its important to also think of them as just colors.
Variety in balance creates more visual interest.


Variation in size
I shrank the ear a little to create different overlapping sizes.

Same idea with the hair


Overlap/ tension lines
Lines that show where forms intersect, connect and push against each other, such as the joints and creases in the skin.

Iconic elephant stuff
I looked up a couple photos and looked for details that stood out to me.
Little toenails, ripples at bottom of ears, scrunchy trunk lines, etc.


Cartoony features
Round socketless eye, eye brow, puffy hair, little bit of blush for cuteness, simple lighting - basically 2 tone.

While a lot of the stuff I drew over was based on analyzing your image, some of it was rather random, and perhaps even out of personal habit.
I tend to over exaggerate surfaces and intentionally separate forms.
For me the most important tool in art is comparison.
Put something down and then flip back and forth.
Is it better? Keep it.
Is it worse? Change it.

Try stuff and see what happens.
It's improved quite a bit already. 

[Sophistique]

Thank you very much for the detailed explanation, it helped out a lot.

Had a few more attempts at the overall 'character' and shading, and this was one that make it past outlining stage.




Sorry for the multiple posts - done more work on the above guy and I think it's really changed him up nicely. The Game Designer said there was something "alien" about the face, so I tried to work on it a little more. Added other small details like toe nails, knee wrinkles, trunk wrinkles, shadowed front leg in the background, changed his eye and gave him a forelock/hair-do again. I think that's what was missing from him face which changed it a lot.

Please C&C again - I really appreciate the advice, it's helped a lot & I can really see the differences in each new piece I work on.

[YellowLime]

Well, the frown looks kinda weird, but if you must leave it, think of how the muscles of the face would be placed if elephants could frown.
Also remember that in this case the frown would be a fold in the head's skin, and not an eyebrow as it usually is...
I would place the "frown line" closer to the front of the face.

Also, I think you should try a different method for conveying the shine in the eye. Maybe cover a wider area of the eye, and use a darker tone...

[Sophistique]

Thanks for the feedback YellowLime - the frown is more to portray 'sadness' in the character before they are "cheered up", why I have the frown line above the eye to act as an eyebrow to help show this emotion as well.

I'll try messing around with the frown itself and the lines around it - and to see if I can change that shine as well to make the eye feel a little better.

Thank you

[Facet]

Some more ideas; way too many maybe

An outsize head to body ratio is usually good for youth/cuteness, but it is looking a bit like a regular adult with a tiny body atm; perhaps because the ears are so big and there's little puppy fat. I noticed the babies in PPD's ref looked adorable with that ratio inverted so I gave that a go.

More junk in that trunk! ie, a bit chubbier in the rear, seems a bit mismatched atm, and you could also try demonstrating weight and contact with the ground by flattening out there.

Cleaner lines: you had a few stray 'jaggies' - bits of lines that look rough or stand out from the rest. I'd also avoid using the same weight of line for internal details as for external outlines for clarity's sake.

Generally I tried to simplify things; I removed the outlines from the hair because it felt like a separate, solid object to me rather than an insubstantial accessory to the body; I removed the light patches entirely just because I didn't really know what they were and I flattened out the ear a bit. The previous combined I thought were more prominent than the expression was.

Speaking of the expression: I gotta agree, I'm getting sort of a worried/forced smile vibe. If you wanted gloomy I'd turn those brows and mouth downwards.

If there's one thing I think you could do with practicing generally I'd be form/lighting; you're using a bit of a tentative 'embossing' method (lighting one edge, darkening the other, middle left alone.) rather than diving in and establishing a 3D source.

I didn't polish everything up properly in my example because I like to take my sweet time with that, but I'd probably finish the rest of the outlines, maybe up the contrast overall and reintroduce some other, stronger colour for a bit more zing/individuality.

[Sophistique]

Hi Facet,

That helped a LOT - little things that just weren't standing out to me that made a lot of sense, thank you very much for the insight!

I did do a few of the changes mentioned below, and the difference really is great. He's still a "first pass" art I think but the overall character design I'm really liking.



The bigger "junk in the trunk" made a huge difference (with such a small change), and changed up the light source and shading which made a good improvement also.

Game Designer really liked the changes, which inspires me to keep working on them. (And they look GREAT in the game so far even though it's all first pass art so far).

Thank you so much everyone, I've appreciated all the help I've recieved so far! I'll certainly keep posting more "Effelants" as I work on them for more C&C to improve them as much as I can for the final game

[e4r]

The white, get rid of the white lol. It's causing too much noise, unless you're using it in the way PileDriver did. But just in big areas of white stand out too much for the colors you're using

[r1k]

problem with the white is, its making it look like the skin is pulled up into a blister, like this:
http://www.daviddarling.info/images2/blister_toe.jpg

[Sophistique]

hmm yes, I see what you mean - the white is meant to be "markings", sort of like spots on the Elephant to add to the 'cuteness' & such.

Any suggestions of a way to keep the white markings without having them look like blisters?

[r1k]

ya, try to make them look more like pokadots.  Heres a quick edit, with perhaps an excessive amount of spots:



after doing the edit, and then looking at your spots, I found the problem with yours.  Look at the spot on the back in yours.  See how the shading on the spot conforms to the shape of the spot, rather than having the same shading as the elephant's back?  This makes it look like the spot is actually a form on the elaphants back popping out.  Add to that the color and shape, and it reads as a blister.
Check how the shading on my spots differs.

edit: after looking at yours again, I can see that you didnt intentially try to shade the spots like theyre popping out.  But theyre unfortuniatly placed, such that they appear to be shaded that way.

[Sharm]

Even with R1k's edit I find the spots distracting and neither looks very cute to me.  Cute things have large foreheads, large eyes, short pudgy extremities like arms, legs, fingers, and noses.  Right now he's pretty cute but facet's edit is cuter because it has a larger, more defined forehead and the lighting gives structure to the face that emphasizes his cute features and sad expression.  BTW, at the moment your elephant's hind legs are smaller than the forelegs.  It should be the other way around.

[Facet]

Excellent, glad to help

For the markings: Indian elephants have freckles around the face which could be a nice way to add colour/draw attention facewards, either way I'd lower the contrast/shade contiguously as r1k (do check the rest of the blog for tons of excellent elephant drawings and reference)

I increased the forehead before instinctively, but bigger=cuter makes a lot of sense; first diagram on WP! I can't help seeing those two prominent folds in the ears as incisions still.

[Sophistique]

Hmm... I see what you all mean by the white markings look like blisters, I'd prefer to keep the markings if I could, seems to be a vital "characteristic" about the character, that is if I can get them to look right. I think the issue might be that the white 'spots' are sitting where the light source is hitting them (on the back, the top of the legs etc), so that might be working against me. I'll work around it, as I said, would like to keep them if I could.

I did a few more sketches for 'concepts' again, trying to add in the cuteness factor a lot more - shorter legs, heads a little bigger than the body, the body a little more oval/squared etc. Feel free to critique them - I'm going to try pixelling one or two of them up & make a few small  changes to them (the scared guy looking behind him for example needs his body position changed as I LOVE the head expression, but his body looks like he is about to fall over lol)

[Mr. Fahrenheit]

Check this out if you havent seen it already:

[Sophistique]

Thanks Mr Fahrenheit, that helps a lot, I'll try those in a few sketches - worked on a new "scared guy" a little more and pixelled him tonight - something seems a little off about him. Made a LOT of changes on him already which have made some great improvements so far, but really want to hammer home the "OMG WHAT THE F@#^ IS THAT?!?!?" terrified look (he'll be shaking/shivering in game because he's so scared).

He'll also be greyed out - the "not happy" state Effelants are grey, and they turn blue when they are happy, was colouring the other guys to get practice in.

Grey:



This was him coloured:



I think the 'lighter blue' spots look a lot better

[r4c7]

This was him coloured:



I think the 'lighter blue' spots look a lot better

This is really a huge improvement! I'm really loving your progress.



In my edit one of the first things I did was to try and emphasize the 45 degree line on the trunk and hind leg. The second was mess with the shading specifically on the ear and body. Honestly, the body should probably have a bit of a highlight, but I cheesed it and got rid of it altogether. Third I did some major changes to the trunk and hair. I added more wrinkles to the trunk, looks kinda ok, would still need a lot of work though. The hair looked like it wasn't part of him because of the outline. other than that, I did a lot of minor things like tweaking the eyes, I think I took some weight off of him, made an elbow in the background front leg, a lot of anti-alias, etc.

I hope this helps, but really, your doing a great job and I hope you continue.

[Sophistique]

Thanks r4c7 - I see what you mean with the edits, I'll keep refining this guy as I really, really like him a lot. I also fixed up the jaggies on his trunk & ears in another edit I done recently which helped a lot.

Thank you!

[Decroded]

 

My fave bit on this edit was the feet.
Makes me wanna draw a mouse now but its way past bed time 
Personally interested in how this could be rendered better without more light sources.