oldpoxbox.com

STUFF TO BUY:

GOOD vs EVIL poster

Shirts!

Pixel Posters 4 pack

The Alphabet of Manliness

FRIENDS:

How to make Isometric Pixel Drawings

by:Pox

2009/02/12

TODAY I SHOW YOU HOW TO MAKE THIS:

Tempting!
This is called an isometric perspective. It's especially easy for a computer to reproduce with pixels!

All you need is an image editing program that can do pixels.

WARNING THIS IS FOR PHOTOSHOP USERS. IF YOU ONLY HAVE PAINT, YOU CAN GO CHECK THESE OUT: MSPAINT TUTORIAL

Ok let's start!

SETUP PHASE:

WHY DO THIS?:

On the left are clean pixels made with the PENCIL TOOL and on the right is a shitty blurry cloud made with the BRUSH TOOL.

ALRIGHT, SO HERE IT COMES:

- Open a new document
- Create a new layer
- Select the Pencil tool
- Make the pencil tool ONE PIXEL IN SIZE
- Zoom into your image as much as you possibly can

Replicate this drawing:

Alright, if you've made it this far, you know everything you need to know to make isometric drawings. Good day.

Oh, you want more? Pfff fine.

Well isometric pixel drawings work on one very simple principle:

TWO PIXELS LONG, ONE PIXEL HIGH:

All lines that are parralel to the ground have to be made up of 1 X 2 sections. Simple. Let's make a square:

What's a square? It's a figure with 4 sides of the same lenght. So there you have it! Make one line and just copy and flip it until you have a square. If you can't figure this shit out, you're hopeless.

Now make a cube! All you have to do is copy your original square and put it on top. All vertical lines in isometric perspectives are 100% straight. So it's easy to do the sides. Just two lines:

And now just shade it with 3 different colors and you're set!

Of course, there's more than one way to shade a cube. Try things out.

You have now mastered the straight lines and the right angles. You can now draw just about anything that doesn't have curves or slopes! Good for you.

So what about slopes? Observe:

Starting with a vertical line. We then have a line that moves 1 pixel foward for each 8 pixels it goes up. Then a 6 x 1, 5 x1 and so on. Easy!

There's no limit to the weird shapes you can create now!

Ok, so what about curves? Well curves are tricky. For starters, you can make cylinders as seen from the front. All you have to do is use the ellipse marquee tool. THIS IS WHY YOU HAD TO TURN THE ANTI-ALIASING OFF! So just take your marquee and make a couple of circles, then join them with isometric lines.

Like this:

The applications of this are pretty limited. You can mostly use it to make spheres.
I'll show you how to make circles in the correct perspective. You can use it to make wheels, water slides and giant rockets filled with dildos.

First, make a square. Then use the marquee tool to make a circle ON A DIFFERENT LAYER.

Then, select the circle and go into transform mode ( ctrl + t ) or EDIT > TRANSFORM > SKEW

Then pull each corner of your transformation square onto a corner of your isometric square. Hold CTRL while you drag the little corners.

Now deselect. Bam, circle! But now Photoshop has made it all blurry. Boo hoo, what to do?

Select the circle again ( marquee tool ) then cut and paste it into a NEW DOCUMENT. Then DELETE THE BACKGROUND LAYER. You want just the circle.

Now go into IMAGE > MODE > INDEXED COLOR...
Use these settings, which basically tell your image "Don't use more than 4 colors".

Apply that shit. Now you have a clean circle! Copy/paste it back into your main document.

You'll notice some stray pixels on the edges. Clean those up!

You have made a circle! You are the master. Use this technique whenever you want to fit a curve into the perspective. It's a real pain in the ass, so when you make a circle, save it into some other document in case you want to use it later.

And that covers the basics. There's a lot of other little tricks I could tell you about, but it's mostly just using your head. So good luck with that and go check out these awesome isometric images to see how they deal with most advanced problems:

HOLY SHIT!
HOLY SHIT2

Follow My Stuff ( cause it's rad, and you are rad, therefore must do this):