Rockstar Icon Designer - Kate McInnes [55]
A custom created drop shadow using a shape layer.
Problem: I'm creating an icon in Adobe Illustrator and the Drop Shadow Effect looks pixilated.
If you've applied a drop shadow effect in Adobe Illustrator and it appears to be pixilated, you've more than likely come across a common problem that happens when the document raster settings are set too low.
Adobe Illustrator has a default setting of 72dpi on all raster effects, and this is because the raster effects at full quality can significantly affect your computers processing power. If you've finished working on your icon and you would like to change the effects to full quality, go to Effect > Document Raster Effects Settings and change the DPI from 72 to 300. If you're still working on your design, then I would recommend that you save the blocky looking effects for when you've finished. This will keep illustrator running smoothly.
Raster effects at 72 dpi appear to be pixilated.
Raster Effects at 300dpi are smooth.
Problem: I'm creating a 100% vector icon and I would like to avoid using bitmap drop shadows.
This one is pretty easy if you're using Illustrator CS4 and above as it has the ability to make a gradient from 100% opacity to 0% opacity. If you're using an older version of Illustrator, then you can make a transparency mask, much like you do in Photoshop. I'll explain both methods:
Method 1: 100% Vector Drop Shadow with Adobe Illustrator CS4 and Above
This is fairly simple. Create a shape of the drop shadow you would like to create and apply a radial gradient from 25% black to 0% white. This will make a soft shadow that is supported with formats such as PNG, EPS, AI and PSD.
A radial gradient made with an ellipse from 25% black to 0% white.
Method 2: 100% Vector Drop Shadow with Adobe Illustrator Versions 9 to CS3
While transparent gradients are fantastic, some people may prefer this method for complex shadows, or to create a drop reflection under an object rather than a shadow. To make an opacity mask, make a shape for the area of the shadow or reflection. Draw a white to black gradient over the top with a different shape and select both. Go to the transparency fly out menu and select Make Opacity Mask. From there you can switch between the shadow shape and the mask to tweak the settings.
A drop shadow made with an opacity mask.
Note: Opacity masks are also included in Inkscape 0.44 and above.
Problem: The colors I'm using are not bright enough.
Check that your icon is created with an RGB document.
If you're mixing colors, switch from the RGB sliders to HSB in order to have precise control over the brightness and saturation of the colors.
Use the HSB slider to create bright colors and tones.
If you're using glossy light effects, try changing the blending mode to screen or change the highlight from white to a light shade of color. White can sometimes de-saturate the colors you're using, so it's always best to mix a custom highlight color rather than using semitransparent white. This is also true of shades of black to make shadows. It's always best to mix a custom swatch with the HSB sliders.
Problem: My application icon is visually confusing.
Try taking out elements that don't add meaning to the icon, if you're still unsure about the design ask people for feedback. Feedback doesn't have to come from designers, non-designers often provide the best feedback, they don't care about the style of the icon as much as they care about understanding the meaning, and this is key to an design that clearly communicates its purpose.
Avoid adding too many details to make your designs clear and easy to understand.
Problem: I'm new to icon design, what software