Rockstar Icon Designer - Kate McInnes [27]
Adjust the HSB colors to make a darker shade for the right side of the bottom diamonds and lines on the Mask layer.
Make a layer above the image and draw a white line around the top two diagonal sides of the object, 1px in from the outline. Make a mask of the layer and then set the layer mode to “Lighten” with 50% opacity. Click into the Layer Mask, this will put a highlight around the mask area on the layer you're working with to let you know that you're now working with the layer mask.
Add a highlight along the top edges on a new layer.
Take the Pencil tool and set the color to Black. Add a black pixel to the top point of the left and right cube and the middle points on the top cube. This will hide the pixels with the layer mask, but leave the option to put them back in without much hassle.
Using a mask to subtract areas of an icon is handy when you're working on detailed or small designs. By using a mask you can hide and reveal pixels without having to remix colors or draw areas back into the image.
Make another layer and draw a black line along the bottom of the top cube, 1px in from the outline and set the blending mode to Multiply with 35% opacity. This will add form to the cube and balance out the highlight area.
Add a shadow along the bottom edges of the top diamond.
Command + click the main object layer and make a new layer. With the selection still active, click the Mask button and drag the layer underneath the other layers for your document. Select the Move tool (V) and without clicking away from the layer press the down button two or three times. Fill the layer with black and set the opacity to 25%. You will now have a shadow for the cubes.
Use a selection of the entire shape to make a shadow area.
If you want to alter the shade like I have, click into the mask area and fill the areas you want to hide with black. I've reduced the left and right sides of the shadow to be a single pixel so that the inner part of the shadow stands out more.
Conclusion
If you turn on the layer guides once more, you can see how easy it is to mark out a planometric shape using the pixel grid as a guideline.
Turn the guide layers on to see how easy it is to mark out a planometric shape with a pixel line.
Here's the finished object. You will notice how even the tone can be made by using the HSB color sliders and how pure white and black with blending modes will change the colors to add highlights and shade with a consistent value.
The finished image.
Isometric Projection
In modern icon design isometric projection is a popular style. You will see it used for a variety of icons with the most popular being the 8-bit inspired mini environments and sprites made popular by early video games and more recently artists such as Eboy.
The angle used in isometric projection.
Isometric projection is also a great way to plan and draw a three dimensional object. The isometric angle lends itself well to “Desk View” application icons as there is no vanishing point to distort the image, but the angle clearly displays three surfaces of the object. You can build an isometric object by first drawing a cube the size of the object you want to create, then breaking that square gown into smaller cubes and rectangles for the different parts of the object. Using the lines as a guide you can then confidently add the details of the object knowing that it's using the correct perspective.
Isometric projection has an advantage over one-point perspective because it has equal foreshortening of each of the three axis, which results in a three dimensional image without distorting the image depending on where it is in relation to the vanishing point.
An example of a truck icon and the technique used to plan the image with isometric cubes.
Because true isometric projection uses a 30 degree line angle, which for clear pixel rendering is altered to be a fiddly 26.565 degrees so that the lines will render clearly along pixel boundaries.