in Icon design

6 advanced icon design techniques + freebie

Making an icon is a delicate process that not everyone is able to complete, there’s a series of techniques that need to be mastered before becoming an icon expert.

Iconshock has made a great freebie and will take you through the process of designing these great Christmas icons. These guys are behind one of the largest collections of icons and I’m sure you can find icons for your next project over at They have also launched a useful site for WordPress themes Also, you should follow them on twitter @iconchock.

Download sources (AI) | Download images (PNG) | Browse through them all on Iconfinder

Grab a cup of tea, open Illustrator or Photoshop and try to follow Iconshock’s techniques:

1. Realistic gradients

Every gradient that was utilized on the making of these icons was specially created to give realism and a nice look to every object that compounds every single icon. Using gradients does not mean using simple black and white gradients, there’s actually a conscious color theory behind that’s being utilized to generate lovely tonal harmonies and realistic lighting effects.

When you begin using gradients, it’s important to understand the main parameters that need to be adjusted during their making. On the type bar you can define the style of the gradient, which oscillates between linear (unidirectional gradient) and radial (concentrically executed gradient); the other parameters that you can define are the angle and aspect radio, which can affect the direction and size of the gradient. Finally you are able to set the opacity for each color marker (they can be as many as they fit on the gradient bar) to create nice transparences and textures.

2. High quality details

Although the primary application for icon sets is the web and digital devices, the design team have spent a lot of time working in every single detail, even in those that cannot be appreciated at simple view. The quality of an icon can be determined among others with the look displayed when zooming in, and these beautiful elements have definitely passed the test.

A good way to determine the details inside a real life icon is to take a look to actual objects or photographs and then conceptualize them in vectors and bitmaps. Another interesting practice is to scan or photograph the objects and then draw over them, this will guarantee the realism and proportion of the objects in all the cases. Remember that if you work with a 72 dpi resolution, there will be problems when zooming beyond 100 %, so we suggest you to use higher resolutions or even better, higher canvas sizes.

3. Embedded bitmap files

Sometimes it’s hard to generate things like shadows and highlights using exclusively vector programs such as Illustrator, and in those cases is when it’s important to know how to create them with pixel programs such as Photoshop. With the curse of the years, the integration between the different Adobe applications has become impressive and thanks to that, you can easily insert bitmap files on Illustrator and embed them so they can travel along with the whole icon file.

To embed a bitmap file into Illustrator, you can follow many different ways and they all work kind of well. The basic tactic is to copy paste the object but that usually damages the artwork; the most effective way is to properly export the artwork into a PNG or TIFF file, which ensures a minimal lost of information once it gets imported inside the vectorial space, make sure that you embed the file before sending it to your buddies because if you don’t do it, your friend’s Illustrator will ask for the specific bitmap file in order to display it.

4. Compound paths

On previous versions of Illustrator, the high detailed icons used to have tons of layers and folders, because there was no way of join them, but know there’s a way to join them using tools like the pathfinder and the compound paths. Regarding compound paths, this technique allows to the designer connect several objects into a single group and customize it as if they were a single element, which means that you can play with the appearance with a lot of ease. Not only saves time but also leaves your Illustrator files with a way more professional and organized aspect.

Compound paths are very simple to make, first you need to generate the vector objects that will become part of the group and that you’re thinking about a similar appearance for all of them. Once you have the elements ready, select them and right click, then choose Make Compound Path and the magic will be done, don’t worry if you regret later because you can always right click on the group and select Release Compound Path.

5. Blending modes

This tool is often forgotten by designers and it’s tremendously helpful, because it’s like if you had the power of light in your hands. You can change between color burn, multiply, screen and many more instances that make your objects switch its appearance dramatically; a good example is the creation of highlights, which on this case were created with a black and white gradient but thanks to the blending mode adjustment, it ended with this great appearance.

You can combine blending modes in many ways, for example placing an object with a normal appearance and then a duplicate with color burn and a little higher size, that will give some sort of halo to the original object. There’s also the option of combining blending modes and opacities to create richer textures and graphics; you can do all of this from the Appearance window, which can be activated from the Window menu.

6. Smooth shading

Mixing crispy elements with more diffused textures and appearances gives a lot of richness to the icons; on this case, the main elements of the cookie icon were created with a pixel perfect appearance, but the part of the shades and highlights was created using bitmap images that display a blurred appearance, which helps the icon to obtain a smoother appearance.

We recommend you Photoshop for the creation of shaded objects, we can’t deny the fact that you can make an object on Illustrator and then give it a blur filter, but Illustrator was not planned for that and its blur filter does not work as well as Photoshop’s does, so bottom line, you can either place your bitmap files on Illustrator or do something a little more advanced, which is taking the whole Illustrator file to Photoshop and with a pen tablet and some drawing skills start making the shades and highlights using customized brushes and more.

It’s not imperative to use this method, because you can easily generate smooth shades and highlights by just playing with gradients and textures, the important thing is to understand the concept.

We hope you enjoy this fantastic icon set specially designed for this Christmas season, please leave us your comments and share you love with us by spreading the word.

Write a Comment