Perspective - Part 1

Perspective is awesome. It adds depth and a certain “something” that makes designs nice. Combine this with a “vector look” and we have the makings of greatness…or at least the makings of cuteness. Ever see those servers on hosting templates? Or the pretty colorful 3D icons? We’re going to make something like that. It’s not that difficult and it sure is impressive.

Illustrator CS has this great feature called “Extrude and Bevel.” Basically what it does is make 3D objects out of your paths. It’s nowhere near as complex as a real 3D application but the basics are there. It also adds perspective to the objects created. However in order to learn something you first need to learn the basics. It’s like in school when you learn to add and subtract and divide and multiply. Pocket calculators do it much faster and are more reliable…but you have to know how. So what we’re going to do in the first part of the tutorial is learn how to make a 2 point perspective the hard way (very useful if you don’t have Illustrator CS or if you want to use it inside Photoshop or even on paper) and in the second part of the tutorial we’ll learn how to cheat and do it fast and dirty.

We’ll open a new document and start making our object. We’ll do the server box thinghy. Take the pen tool and try and make a path similar to mine. To keep things simple we’ll only use 90 and 45 degree angles. Just keep Shift pressed to restrict the paths. And just click – don’t click and drag or you’ll be making curves instead of straight lines. We’ll only need half of our border – the rest we’ll duplicate and reflect. To duplicate a path or object in Illustrator you can select it then copy and paste the windows way (Ctrl+C - Ctrl+V) or you can copy it – Ctrl+C and pastre it in place – Ctrl+F – this will paste exactly in the same location as the first object (very useful feature). Do this – then go to Object – Transform – Reflect – choose “Vertical.” Then move the reflected shape a little to the right until you have something like my picture and join the endpoints – like the pic shows. You should now have a nice closed path representing an outline of our server box. You can even fill the shape with a color if it helps you. I’ll do mine blue-grey.

perspective

So let’s start putting things in perspective (I know, I know – cliché.)

First we’ll use the free transform tool (E) to perspective distort our object. It’s a little tricky to get it right. You need to start dragging with the tool from the corner of the bounding box (not from a side handle) then when the thing starts distorting – you press Ctrl, Alt and Shift and keep them pressed so that the distortion will occur symmetrically. If you’ve been successful you should have come up with something like my drawing.

perspective

You now need to learn about another great feature of Illustrator: guides. Ah but Photoshop has guides too right? Well not this kind of guides. In illustrator you get bent or even curved guides. Any path you create has what it takes to become a guide – it’s just a mouseclick away. So in order to add 3D perspective to our box thinghy we’ll grab the Line Segment Tool (shortcut is ) and starting from a random point we’ll pass through every corner on the left side (the first path we made). Don’t stop at the corner – go beyond it – as much as you can – it helps if you zoom out a little. You shouldn’t have either fill or stroke active so in order to see the lines bring out the outlines view (Ctrl+Y) while you’re doing it. When you passed through all the corners select all the line segments with the selection tool (V) and get ready for magic. Right click and select “Make Guides” from the context menu. That’s all there is to it. Once you finished press Ctrl+Y again for the pixel preview.

perspective

For the other end we already have two perspective lines. So we’ll simply continue the upper and lower lines with line segments until the segments meet. Where they meet we will have our secondary point. And starting from that point pass through all the corners of the (initially) reflected shape. I think you won’t be very surprised to see that the segments will unite the corners on both sides… When you have your segments… make them guides too. The guides can be hidden and show just like in Photoshop (CTRL+;) which is very useful.

perspective

From now on it gets a lot easier. What we’ll do is copy and paste in place our shape. Then resize the original shape and move it to the left so that it coincides with our guides. Lock the pasted shape in the layers palette so that you can move the first easier.

perspective

From now on it’s as easy as “connect the dots.” Which is exactly what we’ll do. We’ll lock everything in the layers palette and start making shapes with the help of our guides. To help you out Illustrator has this awesome feature called “Smart guides” You can turn it on with CTRL+U. What it does is tell you when you are near a guide or an angle.. it even tells you the angle..and helps with the snapping. Bear in mind that you need some illusion of light for the 3D to look realistic so .. make the shapes darker – or lighter according to the lightsource position you prefer. This is what I did in my pic – I made simple shapes and filled them with color – then on top I added a highlight – which is just another white shape.

perspective

We have to do something about the “face” of our server. It’s gotta have some features too. So we’ll use another cool feature to give the face a frame first. Unlock your object – the face – and click on it to select it. Then go to Object – Path – Offset Path – and choose a negative value – minus something. The actual number depends on how big your document is – just try and see what fits best. What this does is duplicate your path but smaller. So – do it again – and change the color of the first offset path. We now have a frame. You can now use your imagination to add shapes on the frame to coincide with the lighting you chose. I only put some highlights but you can be as detailed as you wish.

perspective

Anyway – to make a long story short, with the help of my guides, and a few extra vertical guides (which can be conjured by dragging from the ruler bars on the side of the canvas just like in Photoshop) I added some more details. Oh – I also added some more perspective lines and made them guides…

The more guides you have – the more details you can add. It looks frightening but once you zoom in – you’ll see it’s only helpful.

perspective

Now if you group everything (except the guides) and duplicate the group several times– you can resize it and make it look like you have a room full of servers. That’s what I did. The fiberoptics cable is another such example – what you can do with a bit of fancy footwork and a lot of perspective guidelines .

perspective

Check out part 2 of this tutorial … when you’ll learn how to do this and more…much easier…