Pixelation

Critique => Pixel Art => Pixel Art Feature Chest => Topic started by: Dyluckk on May 29, 2014, 06:53:09 am

Title: GR#217 - Character - Sprite Process
Post by: Dyluckk on May 29, 2014, 06:53:09 am
Hello everyone,
I'm a programmer first but I love art and want to learn more about pixel art!
I was going for a Secret of Mana type of sprite here.

This is a character that I attempted to turn into pixel art.. (not sure if I'm allowed to post these links)
I've drawn him several times to get a feel for him.. these are not all of them, just the ones in my sta.sh mostly all rough.

http://sta.sh/01skawjp7e60 (http://sta.sh/01skawjp7e60) (First time)
http://sta.sh/0uuukm5v51a (http://sta.sh/0uuukm5v51a) (sorta Chibi)
http://sta.sh/0229fveyxl8s (http://sta.sh/0229fveyxl8s) (Drew him on a note card to work on smaller scale)


As a pixel sprite:

Did him without an outline first
(http://i.imgur.com/Vk7N01b.png)

Added an outline just because I felt he did not look very dynamic. (like the first one better though)
(http://i.imgur.com/TArvz7y.png)

I understand my colors are weird.. (they suck)
I feel he doesn't read well, but I'm not sure what to change  ???

Looking forward to being part of this community, and hearing the feedback ;D
Title: Re: First Pixelation(can I call it that?), [C+C]
Post by: HarveyDentMustDie on May 29, 2014, 03:06:56 pm
Hi, welcome.

First you need to decide what you want to make, cause you posted three totally different references. Your drawing is not "dynamic" as you said, because lack of contrast and saturation in your colors. You've tried to create shading but colors are too similar so you can't notice it.

I combine couple things from your references and made an quick mouse edit (it's not perfect but I don't have more time  :crazy:), just to show you how can you make it look good at small resolution without switching to chibi style.

(http://i.imgur.com/lbFHo1j.png)
Title: Re: First Pixelation(can I call it that?), [C+C]
Post by: Dyluckk on May 29, 2014, 05:02:21 pm
Thanks for the reply  :D

Going to try it again today!
I want the 3/4 rpgs look, but your style was cool too :)
I can see what you meant by the contrast.
Title: Re: First Pixelation(can I call it that?), [C+C]
Post by: Dyluckk on May 31, 2014, 05:06:32 am
Here is the newest sprite!
I feel he pops a little bit more here.. what do you think??
Still think I could fix a few things though. (need moarrrr timee)  :'(

(http://i.imgur.com/Ys1I0Bh.png)
Title: Re: First Pixelation(can I call it that?), [C+C]
Post by: namunamnom on May 31, 2014, 06:35:29 am
Is the blue thing on the last edit a mouth, a mask, or what?

I'm so confused orz
Title: Re: First Pixelation(can I call it that?), [C+C]
Post by: Dyluckk on May 31, 2014, 06:43:48 am
Is the blue thing on the last edit a mouth, a mask, or what?

I'm so confused orz

Yes, it is indeed a mask of some sort.
Title: Re: First Pixelation(can I call it that?), [C+C]
Post by: astraldata on May 31, 2014, 03:21:58 pm
He looks like a martian.

You really need to do something about his head. No sense in having a large head if the details are unclear. If that's his hair stringing out like that, why does it look like tentacles and why is it almost exactly the same color as his face?

These are important observations you will need to be able to suss out for yourself eventually. The key to being able to do that is to look at your pixel drawing objectively. Just because you want it to be hair, doesn't mean it looks enough like hair for others to tell it's hair.

I'd suggest practicing conveying different textures and forms with pixels before trying to convert a drawing into such a low-res sprite. I can't give you a one word answer for how to fix this sprite. The closest I can come to that is silhouette, color-contrast, and lighting-contrast. That is, if your "hair" *looks* like hair in the silhouette (i.e. if your sprite is colored completely black except for the transparent pixels, and the "hair" still comes across as hair), it's easier to add lighting to that to make it appear more 3 dimensional. With that said, no amount of shadow colors can make up for the lack of contrast in such a small canvas area. That means you need a few highly separate gradiations for shadowing/lighting and your colors need to be clearly different at a single super-fast glance. At the moment, none of this is true in your sprite, thus your sprite reads very poorly to others.

You should try again, but do practice the techniques mentioned above if you want to get better at pixel art -- especially concerning the rendering of materials and form.
Title: Re: First Pixelation(can I call it that?), [C+C]
Post by: Dyluckk on May 31, 2014, 08:23:22 pm
You really need to do something about his head. No sense in having a large head if the details are unclear. If that's his hair stringing out like that, why does it look like tentacles and why is it almost exactly the same color as his face?

I changed the color of his hair and face so they would have some contrast.
I changed his hair.. is this better? I think it looks more like hair at least.  ;D

(http://i.imgur.com/gsHwsPZ.png)



What about this?
(http://i.imgur.com/8G9Zgs8.png)


This is my most recent edit.
(http://i.imgur.com/Uq10cYR.png)

This is.
(http://i.imgur.com/Q9C3LEH.png)
Title: Re: First Pixelation(can I call it that?), [C+C]
Post by: HarveyDentMustDie on June 01, 2014, 01:19:08 pm
You have 27 colors here, which is a lot. Few of those colors you've used only in one pixel. A lot of these colors are too similar and they can't be noticed here. And why did you give up of his breathing mask after only one comment?

Here is 11 colors edit.
(http://i.imgur.com/Q9C3LEH.png)(http://i.imgur.com/ZWYMek2.png)
Title: Re: First Pixelation(can I call it that?), [C+C]
Post by: alex pang on June 01, 2014, 01:36:34 pm
(https://pbs.twimg.com/media/BpDFwRyCAAAd7Hb.png)
Your first one was faaaar better than your edits. But here is my edit combining your new one and old one into one + more
(http://i60.tinypic.com/256w712.png)
updated
Title: Re: First Pixelation(can I call it that?), [C+C]
Post by: Dyluckk on June 01, 2014, 06:00:53 pm
You have 27 colors here, which is a lot. Few of those colors you've used only in one pixel. A lot of these colors are too similar and they can't be noticed here. And why did you give up of his breathing mask after only one comment?

Here is 11 colors edit.
(http://i.imgur.com/Q9C3LEH.png)(http://i.imgur.com/ZWYMek2.png)

Hmm I think he's just too dark in your edit, and I don't want to use the same color for his hair and the armor pieces. I see what you mean by them not being noticed, apparently I'm having an issue with the replace color feature in photoshop because he should only be 20 colors. What tool did you use to see the colors being used? Your edit uses better light source so I'll try and implement it in my next edit.

I just didn't finish the mask because I think I want it to be more of a helmet, just haven't got to it.

Thanks for the feedback I think he is coming along. Considering changing his idle pose, he looks like he is on his tippy toes.


(https://pbs.twimg.com/media/BpDFwRyCAAAd7Hb.png)
Your first one was faaaar better than your edits. But here is my edit combining your new one and old one into one + more

I'll respectfully have to disagree, the original looks terrible silhouette, color, and definition are non existent.


Title: Re: First Pixelation(can I call it that?), [C+C]
Post by: alex pang on June 01, 2014, 06:53:37 pm
the silhouette is better and proportions are somewhat more correct than your new one.
(http://i60.tinypic.com/nzfxy1.png)
Here I made you a simplified version of both. removed unnecessary colors and tweaked them a bit on the old one.
Make the light from the top, keep the new head and arms and you got yourself a better sprite.  :)
Ill make an edit with that in mind for ya
(http://i57.tinypic.com/6h5ohi.png)
there, a quick edit for you. its simplified by a lot. But its more clear.
Title: Re: First Pixelation(can I call it that?), [C+C]
Post by: astraldata on June 01, 2014, 08:00:31 pm
As far as Alex's opinion that the first sprite was better, I have to disagree entirely. On the other hand, he was correct about the color count. The more colors you use on a canvas area of this size, the more blurry your image appears and the less clear your forms become, which, arguably, defeats the purpose of using pixel-art to render the piece to begin with.

I'd suggest aiming for about 16 colors (including transparency) for him to read as clearly as possible without strain on the viewer to have to put forth the extra effort to understand what each color means (that means you actually have 15 palette entries to work with color-wise.) Doing this will force you to worry more about function and form instead of just its final design -- which should always come later, once you have rough idea of the dominant features of the character you want to keep no matter what (and what features are leftover to remove, which, incidentally, WILL happen the smaller you get with the canvas area.)

Visual strain on the viewer is something not enough people take into account. If you put too many details scattered all over the place, that will work okay for a still image, but not for an animated character -- your viewers' brains just wont have the time to process it all before the frame changes in, say, a walk animation. Thus is the reason I mentioned that you put your focus into a strong silhouette and a few strong design elements that characterize your subject -- even still images can benefit from these simplifications.

In this particular char, I would suggest emphasizing the 'wings' like in Alex's edit a bit more. It's a cool enogh feature to characterize your guy with it (i.e. I wanna play as the guy in the armor with the wings!")


As a side note, the torso and hips are sectioned off into 4 separate areas (waaay too many for this size of sprite) -- some details need to be omitted or blended into others at this size. The middle sprite in Alex's lineup is a great start to this sort of simplification. The other issue that strikes me is that this is supposed to be a slightly top-down sort of view I'm assuming, so the chin and chest area will slightly overlap things below them. Alex's edit addresses this issue too (perhaps a little too extremely), which makes the tops of the feet look correct (and not like he's standing on his tippy-toes like in your version.)

Hopefully this helps you out. Lots of beginner mistakes here, but none that can't be fixed easily enough. :)
Title: Re: First Pixelation(can I call it that?), [C+C]
Post by: Dyluckk on September 28, 2014, 04:46:23 am
Hey Guys,
It's been a while!

I've been experimenting with other styles.
Currently my character looks like this:

(http://i62.tinypic.com/i5dxqf.png)

a little rough.. He's 24 colors.. I know he should be wayyyy less that's my own critique and what I'm going to fix first.
What else do you guys see that is weird?

Thanks for the replies everybody!!
Title: Re: First Pixelation(can I call it that?), [C+C]
Post by: Daimoth on September 28, 2014, 04:57:03 am
Massive improvement. Way to stick with it.
Title: Re: First Pixelation(can I call it that?), [C+C]
Post by: yaomon17 on September 28, 2014, 05:37:21 am
I do agree that it is a massive improvement. I think there are a few issues with readability. I'm not quite sure what is going on with the attire right under the knee. Also I think his left arm is a bit too high up.
(http://i.imgur.com/G6yZnyM.png)
Here is my edit with ~ 10 less colors. Good luck!
Title: Re: First Pixelation(can I call it that?), [C+C]
Post by: Dyluckk on September 28, 2014, 06:46:00 am
I do agree that it is a massive improvement. I think there are a few issues with readability. I'm not quite sure what is going on with the attire right under the knee. Also I think his left arm is a bit too high up.
(http://i.imgur.com/G6yZnyM.png)
Here is my edit with ~ 10 less colors. Good luck!

Wow that looks much better.
I thought mine looked a little dull.
Your colors brought it more life.
 ;D

He is supposed to be a little asymmetric if you look at the other models.
I think I might scratch that idea if I animate him though!
Title: Re: First Pixelation(can I call it that?), [C+C]
Post by: NowvaB on September 28, 2014, 10:28:05 am
I like where you are taking it!

but... 23(I checked) is way too many colors, definitely.
(http://i.imgur.com/OzHwvhc.png)
my edit has only 11 colors. (took away darkest color, merged 2 colors from hair & skin. simplified armor detail to B&W)

I recommend that you stay away from really dark colors w/ black outlines to prevent blur.
also notice after I took away detail I started to add it back in on the shoulders w/ the same colors.

After, I decided to push the color count and made a version with 8 colors(wait, whoa only 8?)
(http://i.imgur.com/MJHAQ3E.png)

I completely merged the face x hair colors and I think it looks even better than my shiny shoes version(completely on purpose)

In all,
Clarity & Contrast over Color Count (Completely not on purpose... no really)
Title: Re: First Pixelation(can I call it that?), [C+C]
Post by: Dyluckk on September 29, 2014, 12:36:19 am
Your forms came out really good in your edit! I implemented some of them! Really good feedback. I'm still trying to work on being minimal with colors, however some of the extra colors are just mistakes because of photoshop. I just changed editors though, hopefully that fixes it.

Here is my most recent edit:
(http://i60.tinypic.com/2nlwxth.png)
I kept the gold and the dark purple! ( I like how they look  :D )
Changed/eliminated some colors!
Added a sword ( Not 100% sure I like the style of it )

-------------------------------------------------------------------------

changed the sword and one pixel that was driving me crazy on the face.

Most Recent:
(http://i58.tinypic.com/2drgc2v.png)
Title: Re: First Pixelation(can I call it that?), [C+C]
Post by: AlcopopStar on September 29, 2014, 07:40:07 am
Nice work so far,

I notice you have a tangent with the sword handle and his leg that at a glance makes it look like the sword is sitting behind his leg.
Title: Re: First Pixelation(can I call it that?), [C+C]
Post by: Dyluckk on September 30, 2014, 12:23:06 am
Nice work so far,

I notice you have a tangent with the sword handle and his leg that at a glance makes it look like the sword is sitting behind his leg.

Where do you see the tangent exactly? I'm not seeing what you are  :-[
Title: Re: First Pixelation(can I call it that?), [C+C]
Post by: yaomon17 on September 30, 2014, 02:50:47 am
EDIT: my bad wrong area.
AlcopopStar is talking about the intersection between the character's right leg and the sword handle between the blade and handle I think.
Title: Re: First Pixelation(can I call it that?), [C+C]
Post by: Dyluckk on September 30, 2014, 03:17:22 am
EDIT: my bad wrong area.
AlcopopStar is talking about the intersection between the character's right leg and the sword handle between the blade and handle I think.

Do you think it looks weird too??
Title: Re: First Pixelation(can I call it that?), [C+C]
Post by: yaomon17 on September 30, 2014, 06:15:11 am
He did say at a quick glance. If you look closer it is fine, but I would recommend increasing the contrast between the two parts.
Title: Re: First Pixelation(can I call it that?), [C+C]
Post by: Dyluckk on October 01, 2014, 05:12:16 am
I changed the pallet around a bit.

And tried to make the handle pop out a bit more by trimming a few things.
How is this??

(http://i.imgur.com/3Hw6jYR.png)
(http://i.imgur.com/TPJxwv9.png)

EDIT 1:
I actually think it made it worse hahahaha

UPDATE:
Redrew the hair, and went back to the old colors.
Recolored the eyes (I should Probably be using the darker shade the contrast with the white is awful).
I wanted to reform the hair because I felt the last was really sloppy and didn't read as well.
(Thoughts?)


(http://i.imgur.com/g5MoF2X.png)
(http://i.imgur.com/4f6KhT5.png)

UPDATE:
DID A RECOLOR! I feel like he jumps out a little more here.

(http://i.imgur.com/h4hMnFk.png)
(http://i.imgur.com/AvSPOG0.png)


Update:
Some animated breathing (not really sure what else I should make move.. TRUST ME IT WAS A LOT WORSE XD)

(http://i.imgur.com/QMKf4GM.gif)
(http://i.imgur.com/mtNTMrU.gif)