Create, Explore, Expand! Learn how to create new, great-looking icons for your web project! We take a look at the Lullacons Icon Pack and detail how you can modify the free source files or create new icons of your own!
The Icon Challenge
We've all been there before. You've checked Google images for a small sized images. You just need a simple icon; maybe an arrow, file, or bullet and you don't have one that will fit just right. So you fire up Gimp, Photoshop, and yes... even Microsoft Paint to crank out that 16 pixel masterpiece.
Route 1 - Pencil Masterpiece
The canvas is small, but working with that pencil tool at 1600% you think you know what's going on. Obviously you start with a black outline and then fill in with color. After slaving away for a few minutes you zoom out, and your icon looks... like crap. The edges are hard and the details are hard to discern. Move on to route 2.
Route 2 - The Image Scale
Another common attempt is taking a larger icon or picture, popping it into your favorite image editor and scaling it down. The result is often the opposite of route 1, instead of harsh lines and colors, you have a completely blurry image. The outline is fuzzed around the edges, which makes it difficult to use on different colored backgrounds. Worse, it looks just like what it is: a scaled down image.
All About the Vectors (Route 3)
To solve the problems of the previous methods, there is a happy medium. Using vector-based tools, you can add a lot of detail and let the computer handle the scale issue. Your icons come out looking sharp and the way you expect. Best of all, you can scale an image smaller and larger without sacrificing image quality. In the Lullacons Icons Pack, the small icons were created first. Then we decided a larger version of the 'info', 'warning', and 'alert' icons might be useful. Because the icons are assembled using vectors, up scaling was a trivial matter.
Original 16x16 IconScaled Raster (Bitmap) IconScaled Vector Icon
Raster images are based on pixel information, and your image editor needs to estimate what other pixels need to be created to scale an image up or down. Vector images are based on entirely mathematics, making such estimations unnecessary. If you're not familiar with the difference between vector and raster images, this introduction to vectors by Mike Doughty might help you get up to speed.
Layer Styles
Now we're going to get into some vendor-specific methods. Although other applications may provide similar functionality, I'll focus on Photoshop for this tutorial. Layer styles provide a very easy way to add otherwise difficult effects to your icons. Letting Photoshop handle the rendering also makes it to create reproducible effects, which you can use throughout a series of icons. Watch the video below for an example of setting up a vector graphic with a few layer styles.
Creating a Vector Based Icon and Applying Layer Styles
Pixel Masking and Saving for Web
Vector based icons get us most of the way to where we want to be. Unfortunately, vector icons still need a little bit of final cleanup before they're ready for the web. Oftentimes you'll want your icons to have a transparent background, so you can use them on any color site. The PNG format will soon become the premier image format for layout when Microsoft adds support for alpha channel transparency in IE7. Until then we're stuck with just one-bit transparency, like you can create with the 8-bit PNG format or a GIF.
Unmasked IconMasked IconMasked Icons Example
Unmasked icon on a color background
Masked icon on a color background
Unmasked icon with alpha transparency
There are two tricks to getting your icons to work on a variety of backgrounds. The first is cleaning up unnecessary pixels from the outside of your image. Use a layer mask to hide these unnecessary pixels. The second trick is applying a neutral color as your background matte when you save the image for web.
Applying a Mask and Saving the Icon for Web
The Lullacon Pack Style
The Lullacon Icons have a certain 'look-and-feel' across the board. If you're interested in contributing your own icons, here are a few guidelines for creating new icons.
Icon Creation Guidelines:
- Create all shapes as vector paths
- Use color or gradient overlays for all color
- 110° is the magic number, use it for the angle of all bevels and shadows
- Use Vectors! Try to avoid using the pencil and brush tools whenever possible.
Borders:
- All icons use a 1px gray border
- Use 'stroke' style to apply border around the icon
- Stroke should only apply to the outside of the icon, no gray lines inside the icon
- The final border around icons should be 'approximately' 40% brightness. (Saturation and Hue should be 0)
- The bevel of the icon should NOT apply to the border, this is usually accomplished by creating a copy of the icon shape and applying the border to it, then set the opacity of the fill down to 0%
Shadows:
- No shadows
Bevel:
- 16x16 icons use a 2px bevel (use 1px if the total icon size is appropriately small)
- A larger bevel may to achieve a 'round' look, such as in the user icon
- 110° lighting angle, 30° (default) altitude angle
- Highlight mode screen (default) 75% opacity (default)
- Shadow mode multiply (default) 20% opacity
Color:
- There are very few regulations on color, just be consistent with your choices :)
- The 'Color Palette.psd' file included lists 5 common colors in the Lullacons Pack. Feel free to add new colors for your own reference.
- Tiny icons (10x10 pixels) usually are white-background based
Gradients:
- Subtle gradients may optional be used for visual appeal, though use should be limited
- Use linear gradients for 2D surfaces (calendar, document, envelope, etc)
- Use circular gradients for rounded surfaces (spheres, user bodies, etc)
Cleanup and Exporting:
- The most efficient method for creating an icon that works universally on any background is masking the entire icon in Photoshop to reduce unwanted edges. Then export with a 50% gray matte on the icon to eliminate the white 'halo' that occurs when you save an image with 1 bit transparency.
Playing with the Source
Let's reap the benefits of a well designed icon. Check out how easy it is to create new color variation in this video.
Creating a New Color Variation
The Lullacons Icon Pack is licensed under the GNU General Public License. This means that you can use the icons for any purpose, so long as you leave the copyright intact. If you make any modifications to the icon source files, you must also make those files available.