In a previous article (PBDJ, vol. 12, issue 5) I wrote about the best file formats for using Windows XP icons in PowerBuilder. In the summary of that article I mentioned how to create your own XP style icons. A number of people have since contacted me asking for more detail on how to create such icons and a second article on how to go about creating icons for their own applications.

I can't commend too strongly the impact a professional icon library can have on your applications. I think it's money well worth investing. At my current employer we've purchased a library of icons from www.iconexperience.com. However, there are many good libraries on the market. Experience has shown me that companies are willing to spend countless thousands of dollars creating computer systems. But ask for $200 to buy an icon library and you'd think you'd asked for a month's holiday! As a result many people use the built-in PowerBuilder icons or spend time trying to create a suitable icon; only to wind up wondering how anyone could draw anything in a 16x16 grid of pixels and promptly give up.

The Legendary Plan B
If you don't have access to an icon library - or if you have to create an icon yourself - then this article will explain how to go about creating icons with an XP look.

When I'm creating an icon I usually look for inspiration from other software, particularlysoftware that I know my clients use since they'll be familiar with its look-and-feel and its concepts. For this I usually turn to Microsoft applications. Most people use Word and Excel and so if my icons look like those applications or follow a similar pattern, then it can only make my application easier to use.

So for basic functions like cut, copy, and paste I don't stray too far from the standard icons established by Microsoft. However, our own applications exist because there's probably nothing on the market that will perform the same function and have their own unique features and functions. This is where creating our own icons comes in.

Tools of the Trade
I use Paintshop Pro from Corel for my graphic editing; however, most mainstream graphics packages should have a similar feature set. I also use Icon Workshop from Axialis to convert the images into icon files for use in PowerBuilder. This article will show you how to create a number of icons using those two tools and explain a few basic techniques you can use to create your own icons.

Symbols
Symbols such as the stop sign and warning triangle can be adapted for your own purposes. In PBDelta I used this kind of symbol to highlight changes for the user. There are many different combinations of shapes and symbols you can use to create buttons for VCR type actions and notes and visual warning cues for your application. In this example we'll create a variation of a circular-based symbol:

1.  Create a new 16x16 image. Always start off with the maximum amount of colors so you can use the package's full capability. Depending on the target file format we'll reduce the number of colors later.

2.  Choose the primary color of your symbol from the color palette; in this example I used red. Then use the shape tool and create a circle as large as will fit the image area. Ensure that the anti-alias is switched off since we just need a basic circle. We then want to highlight the circle so use the wand tool and click the red circle. You should now have something that looks like Figure 1.

3.  We now need to make the circle look 3D. So we have to add a bevel to the circle. Select the inner bevel from the effects menu and enter the following settings (width=1, smoothness=5, depth=1, ambience=1, shininess=75, light=red, angle=315, intensity=25, elevation=40). You'll wind up with something that looks like Figure 2.

4.  Now use the text tool to add a symbol using white text. Then, keeping the text selected, apply the same inner bevel with the light set to white and you'll have something like Figure 3.

You can use different colors, text, and symbols such as the built-in wingding and webding fonts to create a wide variety of icons. Figure 4 shows a few other example icons created using the exact same approach.

Adapting Existing Icons
If you have an existing icon with the old 16-color toolbar look, these can be cleaned up to have the new XP look. This next section will explain how to rework an existing icon. One of the people who e-mailed me attached an image he wanted to be used as an example (see Figure 5), and this is how I went about improving the look:

1.  The first thing I did was to increase the number of colors to the maximum and double the image size. This lets us work with more colors and smooth out any rough edges since we have multiplied the pixels. Later we'll use the power of the graphics package to resize the icon back to 16x16 and allow it to alter the color of the various pixels to smooth the overall affect. When you resize up you have to use a pixel resize since we want an exact copy with just twice as many pixels. (See Figure 5.)

2.  In this case the image has a lot of black so I toned down the black to a slightly lighter color. I also went around the outline and smoothed the edges using the same dark black for the outside and a gray color on the inside. I also cleared out the old gray pattern for the skin tone. Since we have lots of other colors at our disposal we can use a brighter color for the skin tones. (I also gave our guy a haircut! (See Figure 6.)

3.  Finally I added a lighter strip to the bottom of the guy's shirt and added a light tone to the face and a darker color to his neck. (See Figure 7.) At this stage the picture looks worse that the original! The clever bit comes next. The smoothing effect we added and the additional tones around the edges of the image will be taken into account when we size the image down and will really help improve the look of the image.

4.  So finally resize the image to 16x16. Make sure you use the smart resize (not the pixel resize) or whatever the clever resize is called in your package. What you end up with should look something like Figure 8.

Documents
A final trick to use when creating icons is for items that relate to documents. You can easily create an XP-effect document using a gradient flood fill. This same basic icon can then be elaborated with other smaller icons and buttons created by the techniques described earlier. This is a great way of creating a whole set of similar icons.

1.  Start with a 16x16 image with a maximum number of colors. Create a basic rectangle and draw a fold on the top right-hand corner, then add a dark gray border to the right for a 3D effect. (See Figure 9.)

2.  Set up a gradient fill using a light blue and dark blue and set the angle to 315 degrees. Now fill the rectangle. This will give the main document an XP look. Now just fill in the corner fold. I also used the lighten tool and painted a single pixel line just inside the top and left-hand edges. (See Figure 10.)

Wrapping Up
The final step is to take the images and convert them into icons. Create a new 16x16 icon in Icon Workshop using full color. Now copy and paste the image to the icon editor via the clipboard. Inside the Icon Editor select the paint tool, set the working color to transparent (gray/white check) and paint the transparency onto the image. This will ensure that the background of the toolbar fills around your image and doesn't leave a white rectangle.

Hopefully this article has given you some basic techniques that you can use to create icons for your own applications. I created around 60 new icons for PBDelta using them, particularly the buttons and document icons that combined for great effect.