Creating CRM icons

David Sutton, 26 April 2010

Custom icons in CRM are a main visual point of customizing CRM for a company or organisation. Over the next blog I will explain how to create these icons, what sizes these icons need to be and what formats these icons need to be saved in. I will guide you through with an icon that I will create over the course of this blog. The icon I will be creating will be settings – a simple icon just so you can see what I am getting at.

The below table show the sizes of each icon and what format they need to be.

	.GIF	.ICO
16x16
32x32
66x48

Before you even start you must get the setting right or you may have trouble saving, firstly make sure you set the colour profile to 8 bit RGB colour. A resolution of 100 dpi is fine.

In creating these icons it is a good idea to come up with several concepts so if they work at one size and don’t work at another you can always change the style to suit with minimal time delays. So I have drawn up some concepts below.

Now as you can see I have drawn them up quite small 32x32 pixels to be exact. They will hardly ever get any larger than they are now even though I will create a larger icon. Any way I’ve done these concepts and they all look ok so I think I’ll use one of them in the next steps.

Ok now I am going to start off with the largest icon which is going to be 66x48 pixels and will be saved in a .gif format. Ok for a start I will look a CRM currently and see how they have done this icon. So below I have a screen shot showing the contact icon. From what I can see is that there is a drop shadow behind the contact card and a reflection in front of the contact card. So from that I will create my 66x48 icon for settings.

So there we have it my newly created icon with drop shadow and reflection. Now one problem I found at the very beginning of this was that you have to save with the blue background because if you save it without it the shadow will all but disappear and the reflection will not have that nice glossy look so always save with a blue background and you’ll retain that nice look. If you are wondering what colour blue that is, it is -#D6E8FF.

When putting the icon into perspective you may be wondering what angles I use, well the truth is that I really make it up on the spot, just make sure that it looks good and not warped in the wrong direction. As a guide refer to the below image or the CRM SDK.

With the shadow here I have simply stretched a black circle out behind the main image and dropped the opacity down to 10%. If you want to replicate the CRM drop shadow all you have to do is make a gradient that stretches out on an angle out behind the main image, the colours that you should use is #AFBDD0 to the background colour of #D6E8FF.

Now that I have finished the hardest of all the icons I will move onto doing the 32x32 pixel icon which is saved in an .ico format. If you are using Adobe Photoshop to create these icons like I am, you will need to download a file format plugin to save as .ico and that plugin can be found at http://www.telegraphics.com.au/sw/ along with many other plugins for different file formats.

Anyway back to creating this icon. Because I made it the right size earlier I can easily save it as a .ico straight away, now that’s only if you have made concepts up and done them at the right size otherwise you may have to enlarge or decrease the size but even that is not a big deal.

And now that I have that done I can move onto the next icon which I a tiny 16x16 pixel size, this icon is saved in a .gif format. All there has to be done now is to either shrink the icon to 16x16 or remake the icon all together. But for the sake of time I’m just going to shrink it. Now this can be done in two ways in Photoshop either by copying it onto a smaller canvas or by going up to image menu and then going to the image size dialog box and changing the dimensions to 16x16 from 32x32. If the icon looks good then it’s finished but if you find it is blurry or pixelated you may need to make it simpler or remake it at that tiny size of 16x16.

For a more in depth explanation and other ways to further customize Microsoft CRM visit: http://www.microsoft.com/downloads/details.aspx?FamilyID=82E632A7-FAF9-41E0-8EC1-A2662AAE9DFB&displaylang=en

This site will provide you with the software development kit for CRM.