Icon from gif logo - Tutorial

Log-in or register.

Icon from gif logo - Tutorial

Learn how to turn your logo into an icon. The tutorial demonstrates how to convert an image to icon and apply sharpening in the process, how to pick a part of a logo and remove the unwanted parts and create a logo only from that part.

Narration transcript

In this tutorial, I'll show you how to make an icon from your logo.

I am using logo of the Biggly diet and bodybuilding software. It already has a transparent background, but when I zoom in, I can see the dithering artifacts. This fact will cause a bit of trouble later. It is best if you have your logo in .png (pronounced ping) format.

Let's use the Create custom Vista icon button and leave all settings as they are. The resulting icon has all the image sizes and color depths required by a Vista icon and it looks OK, but we'll try to improve it anyway. Close this window and run the transformation command again.

Now change the in and out gamma to 2. The select the 16x16 pixels image and move the sharpening slider to the right by 3 steps. Do the same for the larger images, but only move the slider by 2 or 1 step. The larger images do not need so much sharpening. Click OK.

These images look better. We could end here, but after I save the icon I'd like you show you how to make a simplified icon by only using part of the logo. There are multiple ways how to choose parts for the simplified icon. In this tutorial I'll just pick colored dots and the central gear, not necessarily the best choice, but good for demonstration purposes. I'll need to delete the
other parts from the image.

I am using the Erase by Flood fill tool. When it is set to multipoint mode, I can click multiple times to select multiple sources for flood fill. Due to the dithering, I'll need to use the rectangular eraser and then delete individual pixels with pencil eraser.

An alternate way to simplify to logo would be to erase the text the dots. Never put more than one letter on an icon if you can avoid it. Icons are supposed to be pictures and they usually displayed together with text. In this case, it would be best to erase everything except the central gear and then draw a circle filled by the original radial gradient under under the gear.

Now, use the Remove empty border operation and convert the picture to icon. Uncheck the larger image formats. Copy the images to clipboard by clicking on the Copy image toolbar button. Return to our old icon and paste the images. Save the result. We could end here, but I'll show you one more think that helps when creating icons for Vista.

Open the file again and switch to the Projected Shadow tool. Drag with your mouse from bottom of the image upwards. This will create a projected shadow, which you can further modify. Save the final icon and that's all. Really.

If you have any questions, please post them in the comment section.

Thanks for watching.

The source image

The logo used in the tutorial belongs to Biggly a diet and bodybuilding software.

Recent comments

user icon Anonymous on April 15th 2012

Um,

Would you mind being a little more clear on exactly which buttons and options you are clicking please. It doesn't do much good to a novice to just say select the gamma without showing where to find it.

Thanks

user icon Vlasta site administrator on April 15th 2012

The tutorial is for the previous version. The gamma settings are now automatic and are not visible.

user icon Anonymous on May 4th 2012

OK, sorry didn't see that.
Thanks

user icon Anonymous on July 26th 2012

Bdmasty.Tk

user icon TerryConti registered user on March 1st 2014

How do I erase existing text?

user icon Anonymous
Vista & Win 7 icons
I wish there were...