home |  
Sell Downloads - Ejunkie
open db network by 19.5 degrees
LYRICS | FREE E-BOOKS | SELL DOWNLOADS WITH PAYPAL
 in   
contribute for fun & profit
brink

RhysD's Pixel Art T-shirts
-Pixel art tutor..
-Misc. Tutorials..
-PHP..
-Windows..
 
See all Tutorials
 
All Resources > Tutorials > PIXEL ART
spread the word around  send this page to a friend   read/write comments/corrections/additions comments  rate this 

Pixel art tutorial

listed by 19.5 Degrees
 
 
Developer / Artist / Author: PixelFreak
 
views: 87164 | rating: 5/10
 


This tutorial will try to help you create pixel art, ISOMETRIC PIXEL ART
the word isometric means "of equal measure" so by seeing these graphics we notice that there is no perspective and it doesn't matter if a cat you drew is in the middle of your graphic or in the top or bottom corner, it will have the same size

Because not everyone's used to the isometric view, here's a graphic that shows you how a top view image can turn into an isometric X-Y plane (or "floor" if you don't get it)
Notice that the graphic kept the same width but its height is shorter by 50%.
That's important, now you know that if you want to make a 100 pixels wide circle on an isometric "floor" it has to be 50 pixels high

This is the isometric grid zoomed in and the pixels have been marked, the lines are made by two pixels of width and one of height, let's call these kind of lines horizontal lines and the pair of pixels from those lines bricks so they're easier to refer to in this tutorial

The perfect pixel lines


This star-looking group of lines is very basic and important
Just like a star it will guide you on the path to pixel art (liked that?)
They are the perfect pixel lines, even though they're jagged (or "pixelly"), they are as smooth a pixel art gets
You should try to use this kind of lines as much as possible but you will probably have to make exceptions (unless you want to use the style they use at eBoy, where everything looks like made of legos)


Here's an example of an irregular line. I'm sure you'll notice it's too jagged
Ideally, these kind of lines should be avoided.

I decided to make the roof bigger than the rest of the hut. Yes, it would have been easier if I had done that from the beggining but you might learn more with 
this.


I added two bricks to my top horizontal line, and from the ends of the top (red) line I drew the roof lines (blue) again. I recommend using color like I did, if you don't you will end up with a lot of black lines and it could get confusing.
Having the long blue lines, I decided where the roof would end and drew a green line to know where to cut the blue ones:


Take a look at the point where the green line meets the blue line, notice that the height where the green line meets the blue line has to be the same on both ends of the roof. So make a horizontal line from that point to the blue line on the other side of the roof to mark where that side should end.

Then from the point where the new line (in this case purple) meets the blue roof line you make another horizontal line to the other end in the same side of 
the roof.
and delete the unnecesary line ends

I cleaned up the old lines and unnecesary ones and made the colored lines back to black


A hut with a paper roof would suck so I copied the roof and colored it so the lines under it can't be seen (so I avoid the mess) and placed it two pixels above the original roof, and then I cleaned up the colors and corners.


THEN I decided it looked like a dog house so I made it longer by copying like half of the hut and placing it on top of itself but farther horizontaly
And drew the door and a window and to make the other window I took the first one and flipped it so that it would have the same size and height

And now we're getting somewere

Coloring!
there are lots of ways to color things in pixel art, but like I said before this is how "I" do things.
The color I chose is a lot like wood, nobody likes going blind so you should select custom colors that aren't too intense.

Now use different shades depending on where you want your lightsource to be. 
Mine is almost at noon so the roof has to be much lighter than the rest

This part is important. How to deal with the corners.

This little drawing should help you see how I deal with them. The corners that are "out" are much lighter than the rest of the object and the corners that are "in" are darker (but not black)
So that's what I did to the hut, except it doesn't have "in" corners but I made the door, window and roof outlines a little lighter.
The outline of the whole hut is still 100% black.

The windows are tricky, there are lots of way to make them. One of the best ones is probably when you can see the interior of the place but that one's hard.
I don't know what's the best way, my windows usually look different all the time so they're up to you.
I'm pleased with the style I used on the hut's though


(note the small bevel on the windows)

One of the things people say about pixel art is how much detail you can put into it, so you should always try to add that extra bit of work, it's worth it.
I'm going with a simple one though, just a shadow, but it's a bit special.

The roof is the widest part of the hut so the shadow would be the size of the roof, and to calculate the shadow you draw straight lines down from all of the corners of the roof and draw horizontal lines to create a rectangle:

Now you could place your hut on it's shadow and you could say "I'm DONE!"

but to make it a little prettier I made the shadow in an angle (after all the lightsource in my hut isn't straight up)

The light hitting the wall under the roof is something that people might appreciate, I could have also drawn some ivy on the wall, a chimney, etc.

The more you flood your graphic with little details, the more "alive" it becomes

The way the light hits the wall and the floor is geometricaly correct :-) but the process is a bit hard to explain

This is my final hut:

I decided to take out the highlight of the roof top corner line
and now I'm pleased

I hope I helped! now go make your own stuff, pixel architect.

Note: If it wasn't because I recorded the steps, the hut would have taken me a pretty short time so don't think that pixel art is too hard (because it might seem like that because of my weird and long method and explanation). Keep in mind I didn't take any shortcuts so that you could see and understand more.


« PREVIOUS
  INDEX
NEXT »

spread the word around
read comments

Thanks but...
posted by: Sacador
on: May 17, 09 2:26 am

Which program do you use to make pixel art? I used to use MS Paint but you can't really create animations with it. Do I need to buy Photoshop to create animations?

post reply | read replies (0)



Awesome Tutorial
posted by: Paul St. Amant
on: Feb 26, 09 9:48 pm

Thanks for the tutorial. I love retro art. I don't have the patience to create such little gems, but I appreciate the cool work you do.

Paul St. Amant
http://www.softomic.com

post reply | read replies (0)



http://unknownally.110mb.com
posted by: UA Anime Games
on: Jan 8, 09 6:50 am

I use this same technique.
I was making an Anime game with isometric, then quit 2% through. It took way too many measurments. Counting pixels and such.

A great tutorial, though. It explains what people need to know before even starting isometric pixel art.

I decided to make a good old fashion 2D sidescroller instead of a isometric. Come check out my work:
http://unknownally.110mb.com/wip.html

post reply | read replies (0)



Thanks....
posted by: Paul M
on: Oct 6, 08 2:52 pm

Now I'm ready to get cracking on my first piece of pixel art. Thanks for explaining the finer points - all of it made perfect sense.

P.

post reply | read replies (0)



untitled
posted by: miragana
on: Sep 17, 08 12:33 am

Good day!
It is very informative and has a very good quality in it.
I like it...

<a href= "http://www.squidoo.com/MPI"> http://www.Squidoo.com/MPI </a>
<a href= "http://mliragana.blogspot.com/"> mliragana.blogspot.com </a>

Thank you very much for your time.

post reply | read replies (0)



read more commentsread more comments   |   read more commentspost comment 



home | contact | contribute | terms of use | privacy policy |