Create your own icons

jjones | Guides | 14/08/2008 10:07am
2 Comments

Windows Vista introduced lots of visual innovations. The Windows Aero interface features partial transparency, program previews in the taskbar and high-resolution icons. Open up Windows Explorer and you’re given a choice of views. In List or Detail views, the folder icons are a very small 16×16 pixels. That’s the standard size as used in Windows XP and previous versions of Windows. Choose Extra Large icons, though, and they scale all the way up to a whopping 256×256 pixels.

If you check out standard, built-in Windows icons at this size you’ll notice the intricate detail put into each image. Scale them down by selecting the Large or Medium sized options, and they should retain this level of detail at every size. You can see how well standard icons scale up and down with a simple trick. Go to your desktop and click on the background. Now, hold down the Ctrl key and move the mouse wheel to resize the icons on your desktop.

You may also notice that the transparency present elsewhere in Windows Vista is in the icons, too. That’s because Windows Vista supports the PNG (Portable Network Graphics) format for icons – an image type that includes ‘alpha transparency’. This enables designers to set transparency levels for areas of an image.

All for one and one…

The icons you see on your desktop or in Windows Explorer actually contain multiple images – one for every stage of magnification. Although using the scroll wheel trick on your desktop scales your icons through dozens of transitions, only four sizes are actually required. These are 256 pixels, 48, 32 and 16. In Windows Explorer these dimensions correspond to the Extra Large, Large, Medium and Small sizes.

When creating icons, then, you have to create four separate images rather than just one. This helps preserve the integrity of the icon as it scales up and down. Why would you want to do that when Windows Vista has built-in icons? Creating your own icons enables you to personalise your folders. Put your picture on your Documents folder, or replace the desktop icon with an actual image of your PC! Or you may not like the icons that came with some software, and want to replace them with your own. Windows Vista makes this easy with a Change Icon button in the Properties section of every folder.

The images are stored in the special *.ico format. To convert images to this, you’ll need dedicated software. There are several commercial tools that will do the job. One of the best known is a bundle called Microangelo (www.microangelo.us), which costs $79.95 (£41.08). Alternatively, you can take our route and use entirely free software to create detailed, high-resolution icons.

Our tutorial uses two free programs. The icon is designed using Inkscape (www.inkscape.org), a vector-drawing package with professional tools. We use this to design and create resizable icons and export them in the PNG format we need for Windows Vista. The icons are then assembled using a free conversion and creation tool called @icon sushi (www.towofu.net/soft/e-index.php). In fact, you could use this tool to create Windows Vista icons from beginning to end – but our method gives much
better results. Give our tutorial a whirl and you’ll be able to personalise any folder icon you like without having to mess around with the Windows registry or install any further software.

Creating your icons

Use this simple free program to create stunning personalised icons

1 INSTALLATION

Install Inkscape from http://www.inkscape.org/download/. It may be free software, but it’s as powerful as many commercial vector-drawing packages – as we’ll discover. The first thing to do is set up your document.

2 RE-SIZING

Go to File > Document Properties. By default, the ’page’ is A4-sized. In the Custom size section change both Height and Width to 256. Make sure the units are ‘px’ (pixels – they should be by default).

3 FILL THE SCREEN

Still in Document Properties, click the Grids tab and click the Grid | New button, then close the dialogue. In the Toolbox on the left, choose the Zoom tool. Zoom in on the ‘page’ so it fills the window.

4 CIRCULAR LOGIC

Select the Circle tool and place the crosshair in the top-left corner of the drawing area. Click and drag towards the bottom-right. Hold down Ctrl as you drag to make sure of a perfect circle.

5 COLOURING IN

Right-click on the new circle. Choose Fill and Stroke from the menu. In the Fill tab, click on the Flat colour tab then select a medium blue from the palette running along the bottom of the screen.

6 OUTLINING

Click the Stroke paint tab and make sure the Flat colour tab is selected. Set the colour to black – making sure Alpha transparency is 255, which switches it off. On the Stroke style tab, change the width to 8px.

7 CREATE A COPY

Now you know the basics, we can move more quickly. Choose the Select tool from the tool box. Right-click on the circle and choose Duplicate. Click and drag on the duplicate to move it to one side.

8 NOW YOU SEE It…

With the duplicate selected, return to the Fill and Stroke box. First, set the fill colour to white. Click the Stroke tab and set to No Paint (‘X’ in a box). The circle will seem to vanish – but it’s still there.

9 CENTRE POINT

The selected shape has handles at each corner. Click the top-left handle and click and drag to reduce the size of the circle by about 10 pixels. Now position the white circle centrally over the blue circle.

10 BRING TO LIFE

With the white circle selected, go to the Fill and Stroke dialogue box and select the Linear gradient icon next
to Flat colour. You’ll instantly get a 3D effect on the circle.

11 MOVE GRADIENT

Select the Create and edit gradients tool in the Toolbox (shown as a line with a handle at either hand). Position the line so it runs diagonally across the inner circle.

12 OUT OF FOCUS

As before, make a duplicate of the main circle and drag to one side. Turn off the stroke and set the fill to a dark grey. While in the fill dialogue, set the Blur slider to 1.5 and Opacity to 75.

13 SHADOW-BOXING

With the blurry circle still selected, click Object > Lower to bottom. Now you can position the shape beneath the 3D circle, making a shadow. Go to File > Save to save your work.

14 HERE’S ONE I MADE…

Go here and go to File > Save as. Save it to your computer as ‘folder.svg’ (making sure the Save as type: drop down box is set to All Files (*.*). In Inkscape select to File > Open and find ‘folder.svg’ where you saved it. This is an image we made in Inkscape earlier. Hit Ctrl and A to select all the artwork, then Ctrl and C to copy it to your clipboard.

15 BRING TOGETHER

Switch back to the 3D icon artwork you were working on previously, and hit Ctrl and V to paste the folder artwork over the top. Position it over the 3D sphere carefully.

16 PERFECT ALIGNMENT

Select the folder, then the sphere. In Align and Distribute, choose Last selected from the Relative to menu, then the Centre on vertical axis and Centre on horizontal axis buttons.

17 HIGHLIGHTS

Make the 3D effect more convincing by adding a couple of highlights. Just select the white swatch from the colour palette and draw a couple of circles at the top left of the icon.

18 SIZE IT UP

See how this finished artwork will look when converted to a Windows icon. Go to the View > Icon Preview to see the image automatically rendered at different sizes.

Prepare your icon and use it in Windows Vista

It’s time to see the fruits of your labour…

1 BIG AND SMALL

Windows Vista supports several preset icon sizes. The default dimensions range from the tiny 16×16 pixels, to 32×32, 48×48 up to the gargantuan 256×256.

2 EXPORT

We need to create four versions of our image. In Inkscape open your icon and go to File > Export Bitmap, then select Page. Save the file as folder256.png

3 GOING DOWN

Now go to File > Document Properties. Change the Custom Size dimensions to height 48 and width 48. Hit Ctrl and A, then Ctrl and G to group it all together.

4 FITTING IN

Holding down Ctrl, resize the icon so it fits the smaller page. Centre it when done. Go to File > Export Bitmap again, select Page and save as folder48.png.

5 FILL IT OUT

Replace the gradient fills with solid colour and make the black a couple of pixels thicker. Then reduce the document and artwork to 32×32 and export as folder32.png.

6 TIME FOR SUSHI

Download, install and run @icon sushi from http://www.towofu.net/soft/e-aicon.php. Click Open File and open folder256.png, folder48.png and folder32.png. They will load into the program as a list.

7 CATCH THEM ALL

The final icon, folder16.png, is on the cover disc. Open that, too. Select all the files by clicking on the first then pressing Shift and clicking on the bottom file.

8 ALL-IN-ONE

Go to File > Save as Multiple Icon, and save as a *.ico file. Give it the name myfolder.ico. Now right-click on your desktop and choose New > Folder.

9 AND WE’RE DONE

Right-click on the new folder and choose Properties > Customise > Change Icon and browse for myfolder.ico, clicking OK when you’ve found it.

This entry was posted on Thursday, August 14th, 2008 at 10:07 am and is filed under Guides. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a comment, or trackback from your own site.