Rockstar Icon Designer - Kate McInnes [43]
Glass: Can have bright light reflections, objects in or under appear darker where a shadow is cast, regular light will be matte and cover most of the surface.
Water: Sparkly highlights and ultra-glossy reflective transparent surface. Can distort objects under/in it.
Metal: Chrome is ultra-glossy with subtle reflected color in it, other metals can be more textured than glossy. Gold and silver are in-between these two.
Plastic: Reflective, bright colored reflection of light rather than white shiny reflections.
Cloth: Mostly just shade and light, the fibers absorbs most of the light.
Wood: Varnished wood will have a high gloss finish, non-varnished wood and bark will absorb most light.
Creating a Glossy Desk View Icon in Adobe Illustrator
As the associate editor of Vectortuts+, I may be a bit bias towards using Adobe Illustrator, and although Photoshop and other raster based software can create amazing icons, I find vector has the flexibility of scale and convenience of advanced drawing tools which make it an attractive choice for icon design. If you want to use the drawing tools of Adobe Illustrator and the rendering capability of Photoshop, you can create the shape of your icon in Illustrator and paste it into Photoshop as a Smart Object or a Shape Layer.
For this icon I will begin by making some custom guides following the instructions in the previous exercises. I've marked out the approximate angle I would like the document to be, the pencil part of the icon will be aligned by sight.
Working with Smart Objects in Photoshop
Smart objects are special layers in Photoshop that are linked to an image outside of the main working file. If you paste a vector illustration from Adobe Illustrator into Photoshop you have the option to import the image as a Vector Smart Object. Because the imported image is linked to an external resource, any effects or transformations that are applied to the Smart Object won't permanently alter the state of the layer. To edit the contents of a Smart layer, double click the image thumbnail, this will open a version of the smart object that is linked to the Photoshop file. When you have made the edits you will need to save the linked file with exactly the same name in the exact location so the changes can be translated to the Photoshop file. Smart objects are also great for creating variations of icons with different color sets or effects.
Custom Guides
The icon I'm creating is an application icon with a pencil and a stack of paper. As with all of the icons I've made so far, I'm going to be using a custom grid. Because the desk view icon is large enough to render any angle clearly and is in a style that doesn't have a strict perspective I will set some guides to define the angle of the first sheet of paper and I'll judge the placement of the other elements from this main point.
As with the previous icons, I've set the guidelines by making a blend of lines and expanding the blend so I can transform it into custom guidelines. If you haven't read about custom guides in Adobe Illustrator, you can do so in the "Tips to Create a Flat View Pictogram Set with Adobe Illustrator CS4 and Above" section of this book.
Use blended lines to create a custom grid.
Building Graphic Styles
As I mentioned earlier, I really like the flexibility of Illustrator for icon design and the addition of Graphic Styles in CS4 has to be one of my favorite tools. Graphic Styles work like layer styles in Adobe Photoshop and will style an object with various effects and transformations that can be toggled on or off and edited freely. Once an object has an appearance applied to it, it can then be saved as a Graphic Style and used for other objects. With regular use you can easily build a library of styles and save valuable time in your design processes.
For the Application icon, I'm going to style the