Rockstar Icon Designer - Kate McInnes [25]
The angle used in planometric projection.
Tips to Draw Planometric Projection in Adobe Photoshop
Let's start to make a few basic shapes using the computer. I'll be working in Adobe Photoshop to make some retro looking blocks using the Pencil tool. This quick exercise will start you thinking about layers, pixel lines and blending modes, which are fundamental to icon design. This tutorial is a good introduction to the Pencil tool and Layer Panel.
You Will Need:
A suitable drawing application. This tutorial uses Adobe Photoshop, but any pixel based graphics program is fine to use.
Prepare the Document
Create a 48px by 48px RGB document without a background color and zoom right into the canvas space. Create a new layer above the Background layer and select the Pencil tool (B), go to the settings and set the Pencil to 1px with 100% hardness.
Mark Out Some Guides
Because we're making a 48px icon, there's no actual middle pixel, instead the pixel line runs down the middle, so the first thing we have to do is set the drawing area for the icon. I like to leave a small gap around the outside of the web icons I make, so that when they're positioned next to one another there's always going to be a margin. So on the new layer take the Pencil tool and draw a square leaving 1px at the top and the left of the canvas and 2px to the right and the bottom.
You can invert this to have the 2px on the other side. I position it this way as a habit from the many years I have spent making icons for Microsoft Windows, where a slight drop shadow is applied to the design on the right and bottom of the canvas.
Use the Pencil tool to draw a square.
As mentioned in the introduction, one of the best things about planometric icons is the angle in which they are drawn. We don't have to make any settings to create a 45 degree line as one can be made by a pixel lined up corner to corner diagonally across the page.
Take the Pencil tool and draw a single pixel in the top left corner of the square we have marked out, then hold down Shift and draw another single pixel into the bottom right corner. This will draw a 45 degree line from one corner of the square to the other. Repeat this step with the top right corner of the square. You will now have the middle point of the square marked out.
Diagonal lines mark the center of the square.
Then take a horizontal and vertical line from the middle point that you have marked. This will help you work out where to draw the planometric square.
Use the center of the square to add horizontal and vertical lines.
Make another layer and in a contrasting color draw diagonal lines between each middle point, you should now have a set of guides that resembles a dissected diamond.
Add the diamond shaped guide in a contrasting color.
Draw the Basic Shape
Make another layer above the guide layers and change the Pencil color to black. Use the guidelines to make three diamond shapes at the top of the canvas.
Draw three diamond shapes on a new layer.
Turn off the visibility to the guidelines and make a duplicate of the diamond shapes you have just drawn. You can do this by dragging the layer into the little page icon (Create New Layer button) at the bottom of the layers pallet. This will make a copy of the layer above the original layer, so click on the bottom of the two diamond shape layers and using the arrow key on your keyboard move it down four or five times. This will make the side of the cubes, so the further down you move the shapes the taller the cubes will appear to be. I'm going to leave the bottom clear so I can add a few pixels of shadow at the end.
Duplicate the diamond shapes onto a new layer and move them down.
Once you have moved the duplicate layer into a position that you're happy with, it's time to merge the layers. Select both layers by clicking on them and holding down the shift button. Go to the fly out panel menu at the side of the layers palette (the small icon at the top right of the menu) and