Welcome, Guest. Please login or register.
Did you miss your activation email?

Author Topic: Pixelated Proportions Tutorial  (Read 1216 times)

Offline Thomart

Pixelated Proportions Tutorial
«: February 21, 2010, 02:59:34 AM»
Hello fellow pixel artists -

This tutorial is an attempt at shedding some understanding of how to create proportionate patches. If you are going for a consistent proportion in your dream it is important to remember that, isometric lines, and flat lines - are not related. For example a pillar that is 50 pixels vertically tall, that "falls" down, would not be 50 pixels long on the isometric line.

FIGURE ONE: Here we have a pillar that is 50 pixels tall vertically, and a similar pillar that is 50 pixels long isometrically. Look at them for a moment, notice anything strange? If you are assuming they are the same pillar, your eye should be telling you something is a little "off" about them. The vertical pillar seems too short to be the same as the one laying down.

FIGURE TWO: In figure two I have created a triangle using blue lines against the pillar. The bottom of this triangle is 50 pixels long, and the side of this triangle is 25 pixels tall. The important part of the triangle is the side with no numbers - this is called the "hypotenuse". Obviously it is 50 pixels long, but let's assume for a moment it isn't, and we need to find it's true value. To do this we use something called "Pythagoras' Theorem" http://en.wikipedia.org/wiki/Pythagorean_theorem . The theorem states a2 + b2 = c2, where c2 is the number we want to find. To do my equations for me I use a Hypotenuse Calculator at this link: http://www.1728.com/pythgorn.htm . Once we have done the math we find out that the hypotenuse is 55.9.

FIGURE THREE: Now that we know the Hypotenuse is 55.9 - I am going to round it to the nearest whole number which is 56. Using this information I can now edit my pillar to be 6 pixels taller.

FIGURE FOUR: Take a moment and look at both of these examples, and try and let your eye tell you which seems more realistic. Have you decided which looks more "true" yet? I'm about to tell you the answer so if you haven't - take a moment to do so. If you chose the example on the top, you got it correct!

Thanks for taking the time to read this tutorial.

« Last Edit: February 21, 2010, 03:01:28 AM by Thomart »