Creating 3D Icons

I just finished an application and as I included a window styles manifest, my icons now look like they don't fit and as a result I now have to upgrade my icons to match. Can anyone explain to me the advancements in graphics and what packages I can use to create shiny smooth icons and graphics?

Specifically I have noticed that the icon packages I have rely on a pixel map of say 16x16 pixels and as a result the resolution is relatively poor and drawing a circle is very blocky. By contrast when I imported a 3D graphic from the web into my icon editing package I noticed that the round edges are perfectly smooth and there is no blocky pixelation effect whatsoever. This makes me think there must be a more progressive technology that avoids blocky pixelation problems altogether.

IcoFx is a good basic icon editing tool but even there I seldom try to rely on it for "effects" like drop shadows and highlights.

Most of the trick until you're dealing with large-format icons involves anti-aliasing and such to visually simulate higher resolution than actually exists. Your best bet there is higher-end drawing tools, but maybe somebody else can recommend a specfic product.

There are limits to what you can do even so, mostly because you don't always have control over the variety of backgrounds your icons may have to sit on. That's where alpha-blended icons come in, but these aren't supported everywhere either.

Hi dilettante, thanks for the reply, I downloaded version 1.6 of IcoFx (chargeless version) from the net, as the brush icon graphic looks quite nice, however, after I imported an equivalent quality graphic 256x256 using true colour + alpha blending (which worked) and then I tried to draw a circle using their circle tool it became clear that there is a large difference in the resolution of the imported icon and the graphics that can be created by the icon package, which is the reason for this thread. I did not even try to add any effects. I am left wondering if the icon for IcoFx was even created by itself.

All of these higher quality graphics and effects seem to involve higher resolutions per metric i.e. more pixels or dots per inch (PPI/DPI). Thus an icon 0.5 x 0.5 inches constructed on a much higher DPI/PPI system will give a much clearer, and more detailed result. At least this is how the bitmap format seems to function.

Windows has used a default PPI (Pixels Per Inch) of 96, while Apple has used a default of 72 PPI (windows having 1/3 more PPI). This meant that a 10 point font on an Apple used 10 pixels where as the same 10 point font used 13 pixels (approx 1/3 more) in windows making the fonts appear more detailed in Windows. Although this also depended on the screen resolution being capable of displaying at 96 PPI. If the screen resolution was only 72 PPI the Microsoft fonts appeared larger taking up 1/3 more screen real estate than the Apple fonts.

So the key to higher quality graphics, at least from a bitmap perspective, seems to involve getting to more PPI from the OS together with a higher res screen (leaving to one side the issue that in some graphical systems the pixels only store one of their RGB values and the image then has to be interpolated or demosaiced resulting in lower resolutions for the same PPI). As the smallest sized monitors with 1920x1080 pixels actually have a higher PPI than larger monitors with the same number of pixels an image that is free of any blocky pixelation on a 32" 1920x1080 screen might appear blocky and low res on a 50" 1920x1080 screen.

The other issue is the number of bits of data that is used to describe the colour value from 4bit(16 colours) to true colour where 1 btye is used for each of the RGB values or 256x256x256 =16,777,216 colours (humans can only discriminate approx 10 million colours) and a fourth byte is used for the alpha channel (transparency value). Thus the bits per pixel describes the colour potential of an image.

The next issue is the ability to resize an image upwards or downwards. If raster graphics (bitmaps) are used a 48x48 pixel image, although it will scale to say 128x128 pixels and display an enlarged version of the graphic, will nonetheless appear to lose resolution and become pixelated and blurry. By contrast vector graphics are founded on points, lines, curves, and shapes such as polygons, which are then rendered to scale allowing for the resolution to be maintained regardless of the image size meaning the image only has to be created once with a vector editing package, where as a raster graphic would have to be recreated for each display size which sounds exhausting.

"Raster-based image editors, such as Painter, Photoshop, MS Paint, and GIMP, revolve around editing pixels, unlike vector-based image editors, such as Xfig, CorelDRAW, Adobe Illustrator, or Inkscape, which revolve around editing lines and shapes (vectors)" source: http://en.wikipedia.org/wiki/Raster_graphics

SVG or Scalable Vector Graphics is the W3C (World Wide Web Consortium) standard.
OpenOffice.org Draw can export SVG graphics.
Other options are listed here:
http://en.wikipedia.org/wiki/List_of...aphics_editors

Most of the current browser support SVG with the exception of MS Internet explorer version 8 and below which can in most cases be hacked to render SVG using the google frame plugin: http://en.wikipedia.org/wiki/Chrome_Frame. IE9 supports SVG natively.

So the large change in GFX appears to be the development or redevelopment of vector graphics which appears to be what I should be looking at now rather than my old pixel based raster tools.

Icon files are pixel based, so things like SVG wont be any use here.

Quote:

---

Originally Posted by Witis

Hi dilettante, thanks for the reply, I downloaded version 1.6 of IcoFx (chargeless version) from the net, as the brush icon graphic looks quite nice, however, after I imported an equivalent quality graphic 256x256 using true colour + alpha blending (which worked) and then I tried to draw a circle using their circle tool it became clear that there is a large difference in the resolution of the imported icon and the graphics that can be created by the icon package, which is the reason for this thread. I did not even try to add any effects. I am left wondering if the icon for IcoFx was even created by itself.

---

While I personally don't have the artistic skills to create their icon, I have seen enough to be sure that the program is capable.

When drawing the circle, did you use alphablending etc? (I think there are two options on the toolbar that affect this kind of thing)

I usually try to create a large-scale image using a separate tool, then import that into IcoFx to add shadow effects if not done in pre-production.

But I'm no artist.

PNG below, ICO in attached archive.

Dilettante, as your icon file contained 16x16, 32x32, 48x48 and 256x256, I realised I had to look at what sizes my icon file will have to contain.

XP 48 × 48, 32 × 32, 24 × 24, and 16 × 16 pixels
Vista 16x16, 32x32, 48x48, and 256x256 (code scales between 32 and 256)
sources: http://msdn.microsoft.com/en-us/libr.../aa511280.aspx, http://msdn.microsoft.com/en-us/library/ms997636.aspx

From playing around with the icons on the desktop in win 7, by selecting them and holding the ctrl key and using the mouse wheel, it is clear that some application icons max out at 48x48, although as almost noone has their icons set at 256x256 an application icon can probably still get away with the XP sizes.

Next was the limitations in VB6 that si_the_geek pointed out "VB does not support all icon files - it only supports a size of 32x32 or 16x16, and a color depth of "True Color" (24-bit) or "256 Colors" (8 bit) or less - it does not support icons with an alpha channel (32 bit)." here: http://www.vbforums.com/showthread.php?t=555376
Vb Accelerator looks like it might have solved that problem allowing for larger icon sizes and alpha channel transparency: http://www.vbaccelerator.com/home/Vb...ly/article.asp

So now I can look at creating and incorporating nicer icons in my application. Dilettante, you mentioned that you "usually try to create a large-scale image using a separate tool, then import that into IcoFx to add shadow effects if not done in pre-production". What application do you use to create your images prior to importing into IcoFx? So the first thing I need is to get a higher quality image, ok, open office draw seems to have some good tools in this regard and some 3D effects, although the 3D perspective is a little tricky to control with the mouse. First attempt at a 3D image attached.

If you want to display an icon in your form's titlebar, and the icon is 32bpp alpha-blended or something else VB doesn't support, then use APIs. Sample code can be found in this thread

Just note that alpha blended icons on systems less than XP will not draw correctly anyway, unless manually drawn.

Regarding 256x256 icons. Recommend never including them in your icon resource unless you use the PNG format. Vista and above are the only systems that can handle PNGs within an icon resource. Adding a true 256x256 alpha blended icon requires this amount of space:
1. 16 byte icon structure
2. 40 byte bitmap header structure
3. Color info: 256 * 256 * 4
4. Mask info: 256 * 256

I don't use any single drawing tool, sometimes even Paint is good enough. There are a few specialized tools with features specifically to support XP+ icon development. One issue to note is shadowing, for which there are Windows standards for things like the light-source angle whcih I think is "over the left shoulder" but you can look that up.

Here's one article: http://msdn.microsoft.com/en-us/library/ms997636.aspx

Another: http://msdn.microsoft.com/en-us/library/aa511280.aspx

IcoFx can scale icons down from a larger one, but you might well get better results using another tool for this. Sometimes scaling means adjusting the palette for best visual results too. And of course the small sizes are often best rendered as flat icons anyway.

Some icon sizes are important to the Shell (Explorer) and less so to your VB programs. The "rules" used by VB6 when it chooses an image from a multi-resolution, multi-size ICO resource aren't obvious to me. And of course VB6 will choke on some combinations.

I've seen others attempt to describe the "rules" and often found that their explanations have been incorrect. That probably just means their description was incomplete. It may also mean slightly different sets of rules are used in different places (Form icon vs. Toolbar icon vs. etc.).


But I also won't pretend to be any kind of graphics expert.