Sorry your browser is not supported!

You are using an outdated browser that does not support modern web technologies, in order to use this site please update to a new browser.

Browsers supported include Chrome, FireFox, Safari, Opera, Internet Explorer 10+ or Microsoft Edge.

2D All the way! / Yak - A Pixel Art Tutorial...

Author
Message
Jess T
Retired Moderator
20
Years of Service
User Offline
Joined: 20th Sep 2003
Location: Over There... Kablam!
Posted: 26th Mar 2005 19:59 Edited at: 27th Mar 2005 19:02
Howdy-ho!

NOTE: After some constructive critizism from a more experienced pixel artist, Calypson ( Thanks ), I have changed some of the content of this to be more correct

This is Not a tutorial.
I run through how I did a particular image, and you follow, learning some ( possibly bad ) techniques along the way

Ready?
Here we go...


Step 1 - Ideas


First! I have an idea... A YAK!
I do a google for 10 minutes to find out what a YAK actually looks like.
I get an image that is B&W ( really shocking quality... it could have been anything, really ) which showed the body-shape.
I open the image.
I put it in the corner of my screen as a reference point.


My Yak reference image.



Step 2 - It Begins!


Now, we start drawing!
Open up MS Paint ( a new window if you reference is also in MS Paint ), and size your canvas to however big you want the sprite to be.
For this, I went rougly at about 128*128 to start, and if I needed more space, I'd resize the canvas to fit it in

First off, do a rough ( hold down the pencil and drag ) outline of the reference image, in Black ( with a White background ).


Basic outline copy.


Give it some legs.


Needs two more to stay balanced.


Re-shape its Butt.


You probably noticed by now that your outline is alot ... crappyer... than what mine is. This is because after every time I draw a line ( unless it's with the line tool ), I have to

go over it and get rid of all those jagged edges, making it a single pixel thick all the way along!


Get rid of them jagged Edges!


Note: It is said that black lines are generally a no-no, so you may only want to use the lineart you have so-far as a guide to where your shading will go


Step 3 - Simple Detail


Once we are happy with the basic outline of the object ( remember, this could be anything from a person to a peice of furniture to an architectual masterpeice! ), we now want to put some basic detail into the outline.
Don't go overboard, and don't expect that you wont change it all again later. This is pretty much testing the waters and seeing what looks and feels right.


Basic hair outline.


Oops, can't forget that other horn!


From here, just play.
Put in as much or as little as you want, pretty much, but, again, don't go overboard, as you can destroy it
Any and all defining features should be put in by now.
Any hard lines, or even basic ones that will be shadowed need to be in there, in black, on the white background.
( If you're going for the massively complex image, I would imagine alot of this comes in as you think of it, but for this size project, you should have it done and in.


Step 4 - Colour!


Before I start, you may want to skip this section, and read these instead;
http://www.happyfez.com/~crappygames/index.php?view=tutorials/index.html
Pick your base colour.
Fill the thing with it, and test out different shades.
A good practice is to stick with colours that are in the lower third of the colour picker in Paint ( and other drawing apps ), as these tend to be pastel colours and not harsh on

the eyes.
If you find a colour, but you don't think it fits quite right, try making it lighter or darker and see if that makes any odds ( you'll be surprised at the difference the shade makes!

).


A possible colour.


As these graphics are intended for a "cartoonish" feel, then go for broke, don't stick to just realistic colours! Choose anything you want

Note: The Colour picker is your friend!
Quote: "'no two shades should be the same hue'.
Never (unless its your direct intension to do so) just slide the shade bar up and down without moving the color around as well."




Step 5 - Shades and Light


Note: You'll notice from the next pictures that I skipped a few steps between saving ( oops ), and that I also changed the shade of the base colour ( this is simply a

lighter version of the darker one... lol ).

Ok, now you have your base colour, it's time to decide a few things... Will this base colour be the lightest possible, the middle ( recomended ) or the darkest possible?
Also, where is your lightsource?

For all of my art so far, I've had the source in the upper-right corner ( about a hand's length off the top of the screen is where I imagin it to be [ Oh, and I have big hands, so

it's a fair way off ] ).

Be careful with multiple light sources, as they make shades hard to work out in your head sometimes

Never pick a source that is inbetween the image and the viewer.

Once you've decided these things, you can put in a bit of a basic shade.
Pretty much just divide the image into 3 parts ( closest to light, middle, and furthest from light ) then scale the shade of your base colour and fill in some area's that need it.
If it's an object with lots of flat sides, this is the easy part. Simply flood-fill the faces closest to the light source with the lighter colour, and the opposite for the ones furthest

from the light.
If it's an object that is rounded, or irregular ( as in the shape of my Yak ), then you need to use common sense and think about "cartoon shading" for this part. Just pick an

area, draw a line, fill it in, round it off.


Shading the Yak's belly.



Step 6 - Internal Lines


You'll notice in the image above that most of the black lines inside the ouline of the yak are now shades of my base colour. This is what you need to do too.
However, here are a number of guidelines that *I* follow ( meaning, you should come up with your own );



A new colour for the hooves and horns.



Step 7 - Detailing with Shades


Next up, we want to detail the image with shades of our base colour.


Note the shades on the belly and thigh.


This is pretty simple. It's all just a matter of selecting the right shade ( not too far either way from the base colour ) and putting it in the right spot.
For the belly of this beast, I reasoned it would be the most shaded, thus I chose one of my darkest shades to go along the base outline.
I chose a slightly lighter shade to put up a little bit, and did the same again with a lighter shade ( all darker than our base colour ).
It's not hard once you get the hang of it, but there are a few things to note here also;
1. Avoid using single pixels - they are more noticable than pixels in groups of two, beleive it or not.
2. Step your shading unless a high contrast ( for example; white on black with no grey inbetween ) is what your after.
3. Depending on the size of your image, use different thicknesses for each "layer" of shade ( the bigger the image, the thicker each layer, etc ).


Shade it's chest and butt.


Tweak the shading.


Shade the Chin.


Darken the inside of the legs.


Darken the inside of the hooves.


Shade the hump.


Shade the forehead and give the hump some character.


Shade the snout.


Add Highlights to back and forehead ( closest to light source ).


Add Highlights to snout and create new ( shaded ) eye.


Soften Highlights by adding a border of an intermediate colour and tweak thigh shading.


Add shading to hooves and Horns.


Add some more highlights on the Hump.


Just an image resize


Added shading just above hooves.


Lighten the internal lines.



...And we're done!


Hopefully this helped out some people who want to get started on Pixel Art.
I, by no means, claim to be an expert. I did only start doing pixel art around 20hrs before starting this image ( which took me 1.5hrs, btw ).

Enjoy!






[Footnote] Thanks to Calypson for the corrections, and suggestions. You're probably best off looking at his work ( next few posts ) after ( or probably before ) following this post [/Footnote]


Team EOD :: Programmer/All-Round Nice Guy
Aust. Convention!

Attachments

Login to view attachments
RougeCat
19
Years of Service
User Offline
Joined: 13th Jul 2004
Location: Xdrome
Posted: 26th Mar 2005 22:32
Nice one there Jess!! Keep the good work up!

Baggers
19
Years of Service
User Offline
Joined: 31st May 2004
Location: Yonder over dem dere hills
Posted: 26th Mar 2005 22:46
Very nice tutorial, well done !
Indigo
21
Years of Service
User Offline
Joined: 9th Mar 2003
Location: United States
Posted: 27th Mar 2005 04:04 Edited at: 28th Mar 2005 08:13
This is indeed a good tutorial especially since you are a beginning pixel artist. There are a few things I see wrong that i'd like to mention to help you learn a little more.

first off, I did a color count on your finished piece and its a whomping 18 Colors!!! That is not good at all. Just so you know, you can do a TON with a limited amount of colors. I decided to color this lineart myself and document it as i go, and for this piece i'm using 6 colors + background.

secondly, alot of the colors are very close to each other. A fix in contrast would help this animal very much so.

Another important thing to remember in the world of pixel art is that black lines are usually a no-no. Unless you have full knowledge of what your doing with them, it usually degrades a piece. In this piece, I'd go without them.

Alrighty, Now that I got my 3 main points out of the way, lets go through my process and adapt these concepts...

NOTE: This is ONLY an alternative route of coloring. Either route is okay since, as mentioned before, each is a different stylistic choice.

1)
you did a great job at the line-art, so i decided to keep that the same, but in this step, we'll just fill everything inside the lines a solid black to create a silhouette:


2)
As i said before, black is usually a no-no. Lets switch black with our base color of brown:


3)
In this step we simple outline a rough estimation on where you think the dark and light areas are:


4)
Adjust things a little to make them look right and add in another color or two for some highlights:


5)
this is a big jump from the last step, but not all that complicated. I added a few more colors to make a total of 6, and then I textured the animal to make it appear like it has fur.


6)
Yay! its done! Here is an animated progress gif, my final version, and yours for comparison:


I hope that helps. And again, you really are doing great so far as a pixel artist. Keep it up man.

-Dan-

Shoot for the moon. Even if you miss, you'll land amongst the stars.
Indigo
21
Years of Service
User Offline
Joined: 9th Mar 2003
Location: United States
Posted: 27th Mar 2005 04:44 Edited at: 28th Mar 2005 08:10
after re-reading your post, there are a few missconceptions and false statements i'd like to adress...

*edit* all of these things are now fixed in Jess's posts so there is no need to state them down here anymore. *end edit*

1) (in step 2)
*fixed*

2) (in addition to step 4) *fixed*
you want to try to limit the shades you use. It makes it easier and also makes it look neater and more stylistic, otherwise, it ends up looking pretty sloppy. Secondly, it is very important to remember the following rule: 'no two shades should be the same hue'. (although I broke this rule to some degree when coloring my yak). Never (unless its your direct intension to do so) just slide the shade bar up and down without moving the color around as well.

3) (in step 6)
*fixed*

this is pretty good for 1.5 hours of work. After you get into pixel art more you'll find yourself being able to do it alot faster. like mine took me about 30 to 45 min.

Im looking forward to see more are from you Jess! Keep it up!

Shoot for the moon. Even if you miss, you'll land amongst the stars.
Jess T
Retired Moderator
20
Years of Service
User Offline
Joined: 20th Sep 2003
Location: Over There... Kablam!
Posted: 27th Mar 2005 15:37
...you evil, evil person, you!

You just pulled apart my hard work, AND showed me up all in the same post

lol, I don't care. It's all a learning experience.

I'll edit up those points, and make some side notes about personal preference!

Also, with *MY* Yak, I was actually going for the cartoon-shaded style, I didn't want to have all the detail in there ( for two reasons, because it fits better with the game I was going to put it in, and because I don't have enough talent to do anything else )

Your YAK looks really nice

Time to fix up ... stuff

Thanks for the feedback, mate


Team EOD :: Programmer/All-Round Nice Guy
Aust. Convention!
Indigo
21
Years of Service
User Offline
Joined: 9th Mar 2003
Location: United States
Posted: 27th Mar 2005 16:11
man, i'd just like to say im sorry if i offended you. I really didn't mean to rag on ya or anything. in fact most of the stuff you said in the tutorial was amazing. The stuff you said in there people usually dont find out untill months into the pixeling hobby.

after you edit your stuff, i'll delete my posts. You truly are my hero, man. Soooooo much talent for a beginner. I wish i was that good when i started.

Shoot for the moon. Even if you miss, you'll land amongst the stars.
Jess T
Retired Moderator
20
Years of Service
User Offline
Joined: 20th Sep 2003
Location: Over There... Kablam!
Posted: 27th Mar 2005 17:22
haha, nah, you didn't offend.

I jumped in the deep-end by showing off what I thought was good, but it wasn't really good at all ( I had a look on those sites you posted in your thread, and I must say, I have a LONG, LONG way to go! ).

Don't delete your posts, keep them for others to see

If you're worried that you are publically embarissing me, or upsetting me, don't be
I'm not offended by your comments, rather, I'm humbled that you took the time to correct my mistakes and do up your own "tutorial" of sorts.

Thanks again,
Jess.


Team EOD :: Programmer/All-Round Nice Guy
Aust. Convention!
The Big Babou
21
Years of Service
User Offline
Joined: 10th Feb 2003
Location: Cyberspace
Posted: 27th Apr 2005 09:57
Somehow this reminds me of Bob Ross - The Joy of Painting

... they call it a royale with cheese ...
Hawkeye
20
Years of Service
User Offline
Joined: 19th Sep 2003
Location: SC, USA
Posted: 28th Apr 2005 03:23
Nice one, Jess Didn't see this until I saw the newsletter..

Jess T
Retired Moderator
20
Years of Service
User Offline
Joined: 20th Sep 2003
Location: Over There... Kablam!
Posted: 28th Apr 2005 10:54

Thanks Guy's


Team EOD :: Programmer/All-Round Nice Guy
Aust. Convention!
JoeB
20
Years of Service
User Offline
Joined: 9th Aug 2003
Location: Maine, USA
Posted: 29th Apr 2005 17:42
Very nice work Jess, I'd be really interested in seeing a screenshot of the game your developing!

Login to post a reply

Server time is: 2024-03-28 13:16:13
Your offset time is: 2024-03-28 13:16:13