Rockstar Icon Designer - Kate McInnes [29]
Add shades to the sides of the cubes by changing the HSB values of the main tone
Opacity Masks
In the past Opacity Masks were the only way to make a transparent gradient in Adobe Illustrator, but with newer versions, the need to use this feature is lost on some designers. As with all things, it's sometimes the old techniques that yield the best results and you shouldn't overlook the effects made with the Opacity Mask.
Opacity Masks can be used to control the intensity and hue of highlights on icons, create complex reflections and mask raster effects. Using the Opacity Mask will result in a much brighter and better defined result than an Opaque to Transparent gradient and has the flexibility to add linear or radial gradients to complex color blends.
To create an Opacity Mask, select an object or group of object you want to mask, open the Transparency panel and double click to the right of the image thumbnail to go into an editing mode to edit the mask area. Draw the area you want to be the mask. White areas will show the object, black will mask it, and shades of grey will create varying percentages of opacity.
By building icons with layered transparent shapes, you can create realistic and glossy icons that are scalable and easy to edit.
Creating Clear and Precise Shadows and Reflections with an Opacity Mask
Since CS4, Adobe Illustrator has had the ability to make transparent gradients. Transparent gradients are great for object shading and simple drop shadows, but they can sometimes look a bit muddy in the transition from 100% opaque to 0%. This can be a problem with icon design, using an Opacity Mask is an alternative method to create the effect without losing clarity and color.
To create an Opacity Mask for the cubes, copy and paste a duplicate of the cubes, positioning them at the base of the main cubes. This will be the basis of the drop reflection.
Create a copy of each cube below itself.
Group the objects with Command + G, then copy and paste them in place with Command + C then Command + F. Double click into the group of the duplicate cubes and apply a fill of a white to black gradient to each.
Apply a fill of a white to black gradient to each duplicate cube.
Click back to the main art board and select all of the duplicate cubes and gradient cubes and create an Opacity Mask by going to the Transparency panel and clicking the fly out menu. Here you will see an option to make an Opacity Mask, click it and the gradient filled shapes should convert to the Mask for the cubes beneath it.
Apply the Opacity Masks.
You can edit the gradient of the mask the same way you could edit the fill of a regular shape, to edit the opacity mask, simply click the Mask thumbnail in the Transparency panel. Remember to click back to the illustration thumbnail to go back to the regular editing mode. To hide the mask, Shift + Click the Mask thumbnail and Option + Click the mask thumbnail to edit the mask without the art layer.
The final result.
View Points
Now you know a little bit about perspective, let's move on to view points. Most icons are based around a theory of views rather than the strict rules of perspective, so sometimes you will find that you will need to use your best judgment when creating a design rather than following a pre-defined set of instructions. It's for this reason that 3D models aren't often used for icon sets, each item will have its own form of perspective to make it appear to be balanced amongst a set. Not all items can have the same view applied, some icons will be required to have a different perspective depending on where they appear in an interface.
You will find view points referred to in various icon guides such as the Microsoft Developers Network (MSDN) and the Mac OS X and Human Interface Guidelines. View points are a simplified version of perspective that