Rockstar Icon Designer - Kate McInnes [38]
How line angles affect anti-aliasing.
Modify the Basic Shapes
This is where a bit of planning comes in. In the image below you will see that the roof and the body of the house overlap. I want the roof of the house to have a line running diagonal to the pixel grid so that the anti-aliasing is kept to a neat 1px. So I've added points in the shape where I want the roof to have corners and aligned them neatly to the pixel grid. Once that's done I repeat the same thing with the body of the house.
Modify the basic shapes by adding and moving points.
As you can see, when the background is turned off there are some transparent pixels where the house body and the roof meet. To fix this I'm going to move the lines on the roof in order to further refine the shape and fill the pixel gap between it and the house.
Move the lines to further refine the shape and fill pixel gaps.
When designing icons at a small scale such as 32, 24 or 16px it's ideal to make any sharp points into flat lines. This will create a visual point with the pixels even if it isn't a true point in the artwork.
Take special care when arranging the points of your shapes. Sometimes the limited number of pixels will require some compromise with the design. For example, I've designed my house to have a window in the middle of the front wall. For the visual balance to be maintained I will need to line it up with the gable of the roof. My first roof shape was made from a point aligned between two pixels, this then required me to either change the style of the gable to have a flat 1px shape in the middle, or to draw the window with a 3px windowsill. Because I only have a 32px icon to work with I will have to change the roof so I can maintain a uniform line style for the window and the door. If I was designing the icon for a larger scale, such as a 96px icon, then the alignment wouldn't be too much of an issue.
Tweak the lines that need to align with other design elements.
With small scale icons, pixel alignment issues will occur from time to time, but this shouldn't be a worry as with time and experience you'll be able to anticipate it.
Add some Color and Outlines
Once you have the shapes blocked in, add some subtle gradients from light at the top to dark at the bottom, with a matching outline that's the same colors, but darker than the fill. Because I'm using Photoshop, the gradients I'm using are layer styles. I like this method of coloring for smaller icons as I can save the styles in the Graphic Styles palette for later use. Adobe Illustrator CS4 and above has a similar feature which is useful if you're creating icons in vector.
Use layer styles to color the different elements. As you make the styles, save them to the styles palette.
Saving styles, colors and even elements to use in further designs or projects is one of the most important things to remember. As an icon designer, the time you will spend on creating designs can be dramatically reduced with a good library of assets.
Adding Details
If you're working with a small scale icon, it doesn't mean that it should be simple and dull. Adding decorative elements like patterns and highlights will make the design stand out without looking over complicated. For this design I've added some very subtle highlights and patterns, plus two cute looking plants to give the house a more homely feel and to add some more color.
Add decorative elements like patterns and highlights to make the design stand out without looking over complicated.
Remember to plan the colors for your icon set before you begin to render the icons. Doing this will ensure that the entire set uses the same tones and hues and works as a coherent set.
Scaling the Design
So here's the trick I use to scale Toolbar icons. The handy thing about icons is that they scale in percentages i.e. 16px is 50% of 32px and 64px is 200% of 32px and so on. Once you save the source file of the main icon, go to the Image Size dialogue to scale the design for the 16px icon. For this tip to work you need to change the Pixel Dimensions