Rockstar Icon Designer - Kate McInnes [45]
Use blend and grain to add detail to the pencil.
For the surface of the pencil I created a mask with the main shape of the pencil and added three segments of gradient inside to create the flat surfaces. I added highlights along the ridges to accentuate the effect. Rather than using an opaque to transparent gradient, the main highlights are made from thin rectangles that have an opacity mask applied to it to create the subtle blend into the yellow of the pencil.
Make highlights with a transparency mask to add form to the pencil.
Tweaking Colors and Adding the Final Touches
Brushes can be used to create some nice looking effects, I've used a chalk finish brush from the default Illustrator set to create a sketch on the blueprint document. Because it's vector I can try a few different brushes to find the effect I'm looking for and tweak the line weight to balance the sketch with the document area. You can also make your own custom brushes by dragging shapes and textures into the Brushes panel.
Use a brush to draw an image onto the blueprint page.
After I positioned the pencil, the color wasn't standing out as much as I wanted it to, and it was a bit unconvincing that a standard HB pencil was being used with a blueprint. After a few rendering tests I decided that the icon would look better with some more contrast between the elements. Because the pencil was made entirely from Graphic Styles and Opacity Masks, I was able to change the color from Yellow to white in a few minutes without losing the clarity of color. If I needed to change the colors using hue sliders with a regular fill in Photoshop, the colors can become muddy fairly quickly and would need to be redrawn.
Graphic styles will allow you to change the colors of the icon quickly and easily.
Once I was happy with the design and layout of the final icon I applied a layer style to harmonize the colors. By grouping the shapes together, new Appearances can be applied to the group without changing the effects added to the individual parts of the object. This technique is used to harmonize the colors in a very subtle way, but it's amazing the difference that can be made with this simple effect. Once the objects are grouped, add a new fill in the Appearance panel, set the color to the main color used in the icon, set the blending mode to Overlay, and reduce the opacity to around 30%. The degree of the opacity will vary depending on the tone of the color, the result should be a subtle hue shift that ties all the colors of the icon together without dramatically changing them.
Group the entire icon and apply a overlay layer in the main color if the icon. This will harmonize the color palette.
The icon is now ready for scaling and export. Adding and subtracting details for the various output scales is fairly straight forward, and pasting the object into Photoshop to add further textures and details can be made easy with Smart Layers.
The final result.
Conclusion
As you have seen, there are many ways to render and view an icon. It's up to the designer to asses each method and apply the one that's best for the project at hand. Remember that it's not the software that creates a good icon, it's the foresight and planning, the knowledge of effects, the will to refine something that needs tweaks, and the wisdom to quit the impossible to make a fresh start.
Popular Platforms – Guidelines and Style Tips
Icons are a balance between creativity and usability. When you create icons for a program or application, you should always follow the developer guidelines and style guides set out by the operating system you will be using. Each OS has its own set of design rules that are created to help designers create assets that blend harmoniously into existing graphical user interface. The following section is a closer look at the various platforms and a simple explanation of the styles required for each. I'll begin with the two giants of the desktop computer world, take a look at two smartphone platforms battling to be number