WIP (Work In Progress)
 Pixel Joint Forum : Pixel Art : WIP (Work In Progress)
Message Icon Topic: Pirate Cat Post Reply Post New Topic
Author Message
LachieD
Midshipman
Midshipman
Avatar

Joined: 24 June 2012
Online Status: Offline
Posts: 72
Quote LachieD Replybullet Topic: Pirate Cat
    Posted: 24 June 2012 at 4:33pm
Few days ago after a decade of hobbyist game development and producing below average graphics, I decided to fully concentrate on improving (or acquiring, really) pixel art skills.

This is my first practice image. Don't know how to make a GIF animation out of it. Hope you don't mind.

It supposed to be a humanoid feline space pirate, for a project I might develop in the future.

This is just practicing and WIP.

Any CC is more than welcomed.

EDIT:

The idea is that he is laying his hand on the gun that is strapped around his shoulder.


Thanks!

Edited by LachieD - 24 June 2012 at 5:12pm
IP IP Logged
LachieD
Midshipman
Midshipman
Avatar

Joined: 24 June 2012
Online Status: Offline
Posts: 72
Quote LachieD Replybullet Posted: 25 June 2012 at 9:21am
Ok. Here is the final rendition, unless I get some CC.



I know the character is rather flat, but I wanted to get a grasp of shading and AA before venturing into more complex poses, which I plan for the next space cat. :)

The background supposed to be sort of drapes/flag thing. Dunno.

Please, if you have any ideas to make this look less n00b, I would appreciate it.
IP IP Logged
FancyOctopus
Seaman
Seaman
Avatar

Joined: 10 November 2011
Online Status: Offline
Posts: 11
Quote FancyOctopus Replybullet Posted: 25 June 2012 at 11:44am
Take anything I say with a grain of salt as I'm still learning as well.

I didn't realize the background was supposed to be a flag until I read your post (I thought it was the hull of a spaceship or something similar). Look up some pictures of flags blowing in the wind for reference, and maybe zoom out the picture a bit to give some context that it's a flag.

Your character looking flat has more to do with the colors you chose than the pose he's in. The colors are kind of garish and the blue uniform doesn't have much contrast against the teal part of the background.

In addition, it feels as if you just took each color and then made it darker or light for your highlights and shadows. That is a bad practice! Linear color ramps like that tend to be bland and uninteresting. This pixel art tut by cure goes into this as well as many other important things to keep in mind.

Take a look at this grayscale version of your picture.



There's contrast between the figure and the background (with the exception of his pants), but there's not much contrast between shading/highlights and base colors for the figure.

Your light source is also unclear in both the color and grayscale versions; it sort of looks like the light is coming from directly above, but there's not enough information to tell us that for sure.

A very good way to learn is to study other pixel artists' work. Examples of things to look for when studying others' work are how many colors they used, what is the hue/saturation/values of those colors, and what is the relationships between the colors (for example, what color is used as a shade for another color or used to AA).

As a closing note, he looks a little too un-beat-up for a pirate cat. He's got the eyepatch, but he should have some nicks in his ears, maybe some scars or tattoos. Don't just tell us he's a pirate, show us.



Edited by FancyOctopus - 25 June 2012 at 11:49am
IP IP Logged
LachieD
Midshipman
Midshipman
Avatar

Joined: 24 June 2012
Online Status: Offline
Posts: 72
Quote LachieD Replybullet Posted: 25 June 2012 at 11:51am
Thanks. Didn't think to change anything but lightness for different shades. Thanks for the tip.

The light supposed to emit from top. Will try to make it more clear/obvious.
IP IP Logged
dpixel
Commander
Commander
Avatar

Joined: 26 January 2009
Online Status: Offline
Posts: 489
Quote dpixel Replybullet Posted: 26 June 2012 at 6:25am
You had 38 colors which is kind of a lot for an image this size.  I made an edit and reduced the colors to 14.  Reducing the amount of colors makes color management easier. 
I also added some more contrast...More to try to define the gun a bit better.
Take my edit for what it's worth.  Welcome to PJ!



hehe (ಠ_ಠ ) o_- :p
IP IP Logged
LachieD
Midshipman
Midshipman
Avatar

Joined: 24 June 2012
Online Status: Offline
Posts: 72
Quote LachieD Replybullet Posted: 26 June 2012 at 6:54am
Wow! Great work on this, dpixel. Thanks for the help. I will try to replicate your edits and think more carefully about colors. I was mostly winging with them in this image. Fatal mistake!

I see you also use FreeBASIC. Are you are regular there under a different nick? Would love to know if you already made any FreeBASIC games I'm unaware of.

Cheers!
IP IP Logged
dpixel
Commander
Commander
Avatar

Joined: 26 January 2009
Online Status: Offline
Posts: 489
Quote dpixel Replybullet Posted: 26 June 2012 at 7:16am
I use the same nick over at FreeBASIC.  I've never posted any games anywhere.  Although, I've been working on a fighting game for about 2 years now on and off.  It's basically a 1 round match so far written in FreeBASIC with SDL.  Still has some quirks, but kind of fun.

Screenshot:

hehe (ಠ_ಠ ) o_- :p
IP IP Logged
LachieD
Midshipman
Midshipman
Avatar

Joined: 24 June 2012
Online Status: Offline
Posts: 72
Quote LachieD Replybullet Posted: 26 June 2012 at 7:51am
Looks wicked!

If you don't know, I run a FreeBASIC game dev ezine (http://games.freebasic.net/basicgaming.php), fully dedicated to FB game dev. I would love to feature your work in it, even just screenshots. Also, if you would like to share a private or public demo with me/community, email me (email address is in my profile).

Cheers!

Edited by LachieD - 26 June 2012 at 7:52am
IP IP Logged
LachieD
Midshipman
Midshipman
Avatar

Joined: 24 June 2012
Online Status: Offline
Posts: 72
Quote LachieD Replybullet Posted: 28 June 2012 at 3:55pm
Another rendition. Not sure how much I like my latest edits. Any glaring problems with it?



Maybe I should try with something new from scratch.
IP IP Logged
nivek
Seaman
Seaman
Avatar

Joined: 23 June 2012
Online Status: Offline
Posts: 34
Quote nivek Replybullet Posted: 28 June 2012 at 5:41pm
Hi Lachie, I'm new here as well so I might not have the experience to comment. I'll try though. The image might look good as an avatar pic, but maybe you could make it bigger with more scenery. Also the white highlights on the cat looks quite harsh with the lighting on the flag.

Edited by nivek - 28 June 2012 at 5:42pm
IP IP Logged
FancyOctopus
Seaman
Seaman
Avatar

Joined: 10 November 2011
Online Status: Offline
Posts: 11
Quote FancyOctopus Replybullet Posted: 28 June 2012 at 6:03pm
I agree about the white highlights (in particular the white highlights on the shirt make it look like it's made of rubber).

The image feels a bit plain, but it works now that you can tell the background is a flag (though it would be really cool if you made it bigger with some more scenery so we could get some context for why he's standing in front of a flag).

One additional complaint, the red armband kind of blends into the red part of the flag.

Aside from the things mentioned it looks pretty good now!


Edited by FancyOctopus - 28 June 2012 at 6:04pm
IP IP Logged
DawnBringer
Commander
Commander
Avatar

Joined: 20 August 2009
Online Status: Online
Posts: 262
Quote DawnBringer Replybullet Posted: 28 June 2012 at 6:27pm
Inverted AA and Banding is pretty glaring ;)
IP IP Logged
LachieD
Midshipman
Midshipman
Avatar

Joined: 24 June 2012
Online Status: Offline
Posts: 72
Quote LachieD Replybullet Posted: 29 June 2012 at 1:13am
Would you be so kind to circle these details for me?
IP IP Logged
Friend
Commander
Commander
Avatar

Joined: 02 July 2011
Online Status: Offline
Posts: 552
Quote Friend Replybullet Posted: 29 June 2012 at 9:46am


For AA, you want to do this:

1.) Look at what color the outside edge of the object is, for example white for the shoulders in this example.
2.) Look at what background color the outside edge is placed upon.  For this example, it's a medium red on the shoulders. 
Thus, you have a white edge against a red background color.
3.) Choose colors in between these two colors (value has the most effect, but hue also plays a role in choosing in between colors) and apply to the edge (how you apply is up to you, and it takes practice to get good at the applying part)

For banding, I'm not very knowledgeable at dealing with, but just try to break up the bands with AA colors or change the lines a bit to break up the bands.

I didn't fix everything, all I fixed is pointed to with the green arrows.  You can practice improving the rest of the banding and AA mistakes. 

In fact, I would suggest you take your original colored line art (which was nicely done) and simply place it on your background, then try to AA and shade and what not correctly and avoiding banding.  It may even be less of a hassle to just do that and the final image might be cleaner and more refined on a pixel level.


Edited by Frost Butt - 29 June 2012 at 12:32pm
IP IP Logged
LachieD
Midshipman
Midshipman
Avatar

Joined: 24 June 2012
Online Status: Offline
Posts: 72
Quote LachieD Replybullet Posted: 01 July 2012 at 12:57pm
This is the final version:


It's going up in the gallery.

Thanks for the advices Friend. Really useful. But as you said, I would have to restart to make it really right, and I kinda got tired of this image. Gonna try with a different character now. This was educative. :)
IP IP Logged
Friend
Commander
Commander
Avatar

Joined: 02 July 2011
Online Status: Offline
Posts: 552
Quote Friend Replybullet Posted: 01 July 2012 at 2:01pm
Hey that looks a lot cleaner.  Nice.  The shading and colors and all could still be improved of course, but it looks nice.  One thing I wanted to mention that may be common sense regarding AA- It is perfectly fine to forego AA'ing if you want to go for a crisper image rather than smooth.  In fact, it is typical for sprites to not have AA.  It is perfectly fine to just have a darker outline when spriting.  It adds crispness and defines the line art, just make sure your line art is solid.  I don't think combing AA with the dark outline (AA'ing the dark outlining to the background) is ever done, but I don't know enough to say for certain. 
With your inverted AA, it was confusing on whether you wanted to go for an outline to define the line art, or to smooth the image.  I assumed you wanted to smooth the image because the piece seemed it'd be a static piece and AA'ing is more typical for scenes and static pictures where no AA and crisp outlines are more for sprites I think.  Someone correct me on this if I'm wrong.
IP IP Logged
Post Reply Post New Topic
Printable version Printable version

Forum Jump
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot delete your posts in this forum
You cannot edit your posts in this forum
You cannot create polls in this forum
You cannot vote in polls in this forum


PixelJoint: Pixel Art GalleryPixel Art ForumThe Joint: Isometric Pixel Art ApartmentWee: Pixel PeopleLil Dudes: Pixel People