Aside from my usual job of designing logos and websites, i also have the neat little job of designing the Joomtraders icons. Joomtraders is quite new in the grand scheme of things but is very quickly growing into a great resource for Joomla! developers around the world. Joomtraders is powered by Alltraders, and is our little playground for creating useful extensions for the Joomla! CMS. If there’s a need in the Joomla! community for a new extension we try to provide a solution. Examples of this include extensions that let you send recently published articles directly to Facebook and Twitter, easy to use photo galleries, Google sitemaps, and an extension that intergrates Mail Chimp into your Joomla! powered website.

Line Drawing
This however isn’t a rant about how great Joomtraders is, even though it is pretty awesome. This is about the icons themselves. When the Joomtraders project began, we knew there would be a lot of competition, so what better way to stand out from the crowd then to design some bizarre icons to go with the products. Now i’m not actually much of a sketcher, i tend to jump straight into Illustrator with a mouse. I do a very rough line drawing with the brush tool, then take the opacity of those lines down, lock them, and then start on a new layer above, drawing a more precise line drawing with the pen tool. We’re not done there – once i’m happy with the precise line drawing, i then start bulking up the line a bit. I don’t do this by increasing the stroke, i find i don’t have as much control as i would like this way. Instead i turn the lines into shapes by drawing another line along side the existing line, and then joining them together and filling. It’s quite a tedious process, but the final result is worth it.

Colouring
I find the line drawing is always the hardest part, the actual colouring is a breeze in comparison. Still in Illustrator, with my final line drawing, i lock this layer and create a new layer below so i can start adding coloured shapes. The coloured shapes sit below the line drawing so you can’t see the messy edges and it means i can add layer upon layer until I’m happy with the result. This layering includes both the shadow effects and highlights. If you have a look at the image below you can see the different stages (from left to right: first colour layer, shadows, and then finally highlights).

The difference between the first version and the last version with highlights is unmistakable. That little bit of extra work makes all the difference. I’ve included a larger version below.

If you would like to see more of the Joomtraders family, check them out here www.joomtraders.com