Rockstar Icon Designer - Kate McInnes [23]
Lightly draw a line from the top left and right side corners of the box towards the vanishing point. This will form the sides of the box top.
Use the vanishing point as a reference to draw the top sides of the object.
Step 5 – Finish the Basic Shape
You will now have the top and front of the box. Draw a line where the top of the box top of the box should be. Erase the guidelines but leave the vanishing point and horizon line as we will be using them further on in the tutorial. You will now have a basic box shape.
Here's the basic box shape.
Step 6 – Adding Some Different Views
For the purpose of this exercise we will draw another two boxes, one to the left of the first box and one to the right. Draw each side using the same technique as before.
Drawing boxes to the side of the vanishing point will change the view point.
You will notice that when the box is to the side of the vanishing point you will see a different view than the first box. This is one of the reasons perspective isn't often used in regular icon design, if an element of the design is away from the vanishing point you can sometimes end up with some surprising results. For items such as boxes and folders, one-point perspective can work quite well.
Step 7 – Find the Middle Point of Each Side
I'm going to go ahead and add some more details so you can see how they are added using perspective. So draw a diagonal line from the top corners of each side, where they intersect is the middle point of that side.
Finding the middle point of each side.
Step 8 – Adding Guides
Here comes the tricky part. We're going to make a light grid across the sides of the box. This grid will help us place the details correctly. Start by drawing a square grid across the front of the boxes. A good trick is to draw a cross through the middle point then mark out the middle of the sections it makes and so on.
Adding guides.
Step 9 – Refining the Guides
Extend the vertical grid lines from the front face of the box to the vanishing point, this will make vertical grid lines for the top of the box. You will notice that the further towards the vanishing point they get the closer together the guides are. If your guides are intersecting before the edge of the box, reduce the number of guides you are using.
Use the vanishing point to create guides on the top of the box.
Step 10 – Marking out the Grid
Mark out the horizontal lines by drawing a diagonal line across the top of the box. Where the diagonal line intersects a vertical grid line, draw a horizontal grid line. If you're adding details to the sides of the box, repeat the same steps to make a grid on the side. You should end up with a box covered in a grid. This will help us place the elements.
Add more guides to the top and sides.
Step 11 – Adding the Elements
Use the grid to judge the areas you would like to add detail to. Go back to your planning sketches to look at the details you want to add. Mark out a box on the grid for the approximate area you would like to add a detail to and add it in. Once you've finished, erase all of the lines you don't need and you will be left with three boxes with different views. This is how one-point perspective is drawn.
The boxes after adding details and removing the guides.
Two-Point Perspective
Two-point perspective is similar to one-point perspective and can be used to draw objects that you want to show two sides of. Think of the corner of a building, you will see the corner as the closest part of the building with the left and right sides tapering off into the distance. This is two-point perspective. Two-point perspective is best applied to application icons as it lends itself well to complex objects. Two-point perspective shouldn't be used for icons that need to convey information such as alert icons or Toolbar icons as the double sided view is somewhat distracting.
Once you get the hang of drawing in two-point perspective it can be quite enjoyable and will add a realistic yet somewhat unusual angle to objects that you draw. Once again, I