Lines and Curves

First step is simple enough, let us start out with a single color circle with no outlines what-so-ever.

• First thing is first. There are going to be a tremendous amount of instances, particularly in perspective and technical illustrative peices, where your line work is going to require exact precision, less your image quality will suffer greatly. Here is a small example of some of the most commonly used angles in the pixel world.

First you have your straight lines at angles 0, 90, 180 and 270 degrees. Umm obviously it doesnt take much understanding to understand the significance of a straight line. The next most significant pixel lines are those at angles of 45, 135, 225 and 315 degrees. This is the "one pixel over, one pixel up" line, with a slope of either positive or negative 1. In the pixel world, this is used sometimes to skew a perspective into a "1:1 isonmetric" perspective.

Basically it is easy to draw any technical line you desire if you know its slope. A line's slope is made up of its horizontal and vertical components.Look at the line at 45 degrees. It has a slope of 1, or 1/1 in other words. Meaning that for every 1 pixel you move vertically, you must move 1 pixel horizontally. Let us say that you wanted to make the "common isometric" line, which has a 22.5 degree angle from the horizontal norm. Its slope will be one half of the slope of the 45 degree angle line, which is simply a slope of 1/2. Therefore, we know that for every 1 pixel you plot vertically, you must plot 2 pixels horizontally. This is illustrated in the figure to the left. Also illustrated is a line with a slope of 3, and as long as you know he slope of your line, you can pixel plot that line with ease.


Smoothness of curves can make or break your pixelized image.

• Now lets look at a basic curve. I have seen many sprites and smaller illustrations plagued with jagged curves which severely compromise the image's precision, which is the whole basis of appeal for pixel art, remember. This holds true even moreso with small pixel illustrations. The simple example to the left illustrates what a proper pixelated curve should look like, and gives examples to what a paint program using a circle/oval tool might interperit as the best pixelated arc. This one point is to teach you that paint program shape tools are not very suitable for pixel illustrations, and you are better off to draw curves by hand.


Lets look at a simple sine wave, notice the pattern of a simple, smooth wave. Each 1/4 of a perfectly smooth sine wave should be perfectly symmetrical with each other, after you perform flipping or inverting to orient the segments.

• let us look at a sine wave. This is a great exercise for novice pixel artists who are just picking up the craft. Look carefully at the pattern of pixels used to create a smooth wave. There are no sudden changes in the decreasing and increasing pattern of pixels within the wave. We start out with three vertical pixels, which then shifts left one pixel, and raises vertically by two pixels, then follows a "step effect" where the wave mimics a 45 degree angle for two pixels, and then the pattern inverts. In fact, you could consruct this entire sine wave by copying the first 1/4 segment of the sine wave, and then flipping or inverting (or both) to peice together the rest of the sine wave. In fact, it is this symmetry and continuity which will give you a smooth, continuous wave.

In the lower example you will see an attempt at a sine wave. The wave directly below that is the same sinewave, illustrating where the second example would deviate from the first example if they were imposed on each other, the white dots signifying where the second wave lost symmetry. Just 4 misplaced pixels, and your wave looks jagged and crooked. If you want to get a good feel for making curves, try hand pixelling different sized sine waves. remember to use gradual slope changes and keep each 1/4 segment symmetrical with each other (after some form of inversion is applied) to make crisp sine waves every time.


Circles work the same as sine waves. Practice your own circles, using the above patterns as guides. Make sure that each 1/4 segment of your circle is perfectly symmetrical with each other.

• Circles are probably the most complex of any basic shape when pixelating, due to the fact that at such small sizes, mathematical formulas used to draw a sound circle fail, due to the fact that a pixel in itself has a fixed size(which is why shape tools usually are not well suited for pixel art). To the left is a quick guide for appropriate circle patterns for special cases, namely tiny ass circles! Circles work the same as sine waves, in fact, they are basically the same shape (a circle is just a closed sine wave). Remember that as long as you keep each quarter of your circle symmetric with every other quarter of the circle, your circle should look smooth no matter what the size. Practice making your own circles, the same rules to making sine waves applies here. Once you are able to confidently draw smooth circles with ease, you should be ready to tackle any lineart task that may be required of you as a pixel artist.