Christmas time is upon us again. To mark the glitteriest (definitely not a word) time of the year, here is a quick tutorial I put together to show you how I made a Christmas icon set. You’ll be able to follow along if you are so inclined, or you can simply download the finished product and use as you please!
Set up the design
Before you even start creating your designs in Illustrator, take some time to sketch out your designs on paper.
Have an idea what icons you would like to create, how they will look and be styled etc.
Get some inspiration online if this process doesn’t come easy to you or your creativity has run dry.
Set up the Illustrator project
Start with a new Illustrator file and set up each artboard for the number of icons you wish to create. In my case, I created 8 boards but only ended up creating 7 icons:
For each icon, use a different layer to make it easier to keep track of your components. Keeping track of layers by naming them is an efficient way to work on an icon set.
If there are any guides to set up, take some time to do this now.
Start drawing out your icons
Now its time to get started creating each icon. I knew I wanted each icon to be circular so I started with a large circle outline and repeated this across each artboard.
Next, I just worked through each icon at a time and started drawing out the shapes that make up each item. I tried to keep this simple by using defined shapes like squares, rectangles and circles. Things are not set in stone yet so feel free to play around with shapes until you are happy with each design. Use your sketches to help you out if you need to, that’s why you made them.
Add some color
Adding color to your icons really brings them to life! To get some color inspiration I used FlatUIcolors.com and chose some christmassy colors to suit each icon.
Again, be sure to play around with a variety of colors and gradients until you are happy with your icons.
Tidy up and finishing touches
To give the icons a flat look, I added a pronounced shadow to each icon as is the style of flat icons. This really made the icons pop.
Export and use
Once you are happy with your icons it is time to export them for use!
Depending on its use, you can export these icons in a variety of formats and sizes.
SVG can be useful as it is vector based which means it is very scale-able without losing out on quality.
PNG is also useful as it supports transparency.
In the instance of this project, I exported the icons in a few different sizes of PNG and in SVG.
Some uses for these Christmas Icons
There are a number ways in which you can use these icons:
- On your blog if you are writing about anything Christmassy
- On a Christmas themed website
- If you are creating a Christmas themed piece of artwork in Photoshop
- You could even print them out and hang them on your Christmas tree or use them in any Christmas craft work.
- If you are looking for some Christmas coloring pages for kids, simply leave the icons black and white and then kids can color them in!