Wednesday, 10 September 2014 13:52

Design: How to create ReactOS compatible icons

Written by 

Hello everybody

After my last blogpost I didn't achieve much to tell you about. I 'Faenzanized' some control panel applets and the comctl32.dll and wordpad toolbar bitmaps. All apps which make use of the default toolbars should have faenza icons now.

After that my HDD died and I wasn't able to continue my work.

Sadly I have to tell you that I will be unavailable for work reasons for at least 3 months. What I'll do in this post is to tell you how I created the icons. Of course there are more elegant and maybe easier ways to do it but this is the way that worked for me without breaking ReactOS.

So let's stop talking and get to it.

Needed Resources

Introduction to Windows icons

An ICO file contains several resolutions and color depths. We will use 16px, 32px and 48px sizes with each color depth of 16, 256 and 32bit colors. Windows 2003 (and also XP) supports 256px big icons too but ReactOS doesn't (yet), so we will ignore this size. in fact you will need 9 layers inside the icon.

More information about icons can be obtained from MSDN here.
This article describes the same things I'll show you here but there is only proprietary software used. We'll use free software instead.

Create icons with Greenfish icon editor

As I use the Faenza iconset due to my community work, I'll use it at this tutorial too. After downloading and extracting it, it should contain several directories as devices, actions, apps and more. We will create an icon for the mouse control panel so we head to the devices folder. After opening it we can see that there are subfolders for every size. We need 48, 32 and 16px as already stated above so go into all these directories and look for the file input-mouse.png. Copy the three files to another directory and rename them respective to their size. e.g. input-mouse_16.png. Repeat this with all other files you need. now, your directory should look like this:

Now that you have all the images you need, you can start Greenfish icon editor. It should look like this:

Now click on the papersheet, labeled with ICO, to create a new icon project. Choose a size of 48px and use the following settings

Now we have to import our png files. Click in the menu on Icon → import pages. Now navigate to the location where you saved the png images before and choose them.

After we imported our files, we can delete the empty page which was added. To do so, just right click it and click on 'Delete Page'

Now we have our three different sizes, each in 32bit color depth. Let's create the other color depths too. right click the 32bit image and select 'new page...'

Another window appears. Be sure that you keep the size of the image you right clicked and that 'Create from selected page' is checked. At 'color reduction' choose '256 colors (adaptive)' and click on OK. Repeat this step but this time choose '16 colors (Windows palette) instead.'

Repeat the last step with the other both images, so that finally you'll have a total of 9 pages

Now click on 'File → Save' and name the file input-mouse.ico.

Congratulations! You created your first ReactOS compatible icon file!

One of my next blog post will tell you how to create toolbar bitmaps. This can take some time, just be patient...

Best Regards!

Robert Naumann

sometimes providing general help in the form of small patches regarding translation, resources and stubbing missing functionality. Also helps out with PR related things.


Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.