This section discusses some aspects about icons: sizes, format, hints for good quality.
First of all, the menu supports icons in any image format that is supported by the browser. That is, JPEG, GIF, PNG, whatever. In order to support PNG icons with variable transparency in IE, you need to load the “PieNG.js” file at the end of the page—the script fools IE to think that it supports PNG images (and actually it does, the “Microsoft-way”).
About icon format, we highly recommend PNG. It's really the most efficient format for storing icons, both because the files are small (many times smaller than the “equivalent” GIF) and more important, because you can have “semi-transparent” areas. This is a feature of the PNG format, and it means that you can have pixels that are neither opaque neither fully transparent. For instance, you can have a pixel which is clearly red, but allows whatever is behind it to be visible. This is also called “alpha transparency”.
PNG icons are very good because they can avoid rough edges that you usually see in GIF icons that have transparent background. GIF's transparency is reduced to “either transparent, either fully opaque”, but as we all know, there are more colors than just black and white. This (and others) major limitations of the GIF format makes us wonder how come that a company the size and power of Microsoft can't even say when PNG support will be available in their browser, let alone availability itself. But anyway, with our PieNG you can have it in IE too, bypassing it's brain-dead way of including transparent PNG-s. Before the </body> tag in your documents, just add the following line:
<script type="text/javascript" src="/path/to/hmenu/PieNG.js"></script>
The dimension of the menu icons is established through the CSS file (it's not hard-coded in the JS file). If you want to use smaller (or bigger) icons, you'd have to edit the CSS file that you're using (or even better, create another one) and add the following rule:
div.dynarch-popup-menu tr.item td.icon img { width: 18px; height: 18px; }
The above shows the default icon dimensions (18px) when inside the popup menus. Icons displayed in the horizontal menu bar can basically have any dimension (it's not expressed in the CSS files) but we highly recommend to make them 14 pixels high, at any width but leave 2 columns of pixels empty in the right side (for spacing). You should not declare padding through the CSS files, or else PNG icons would be messed up in Internet Explorer (bless its heart).
First of all, we are not experts at this point (graphic design) but however, even given our limited experience in the field, we figured out some small details that simply make icons look better.
To exemplify the above, here are 2 icons showing the dollar sign. The first one uses all the techniques above and it's a PNG image, and the second one is a GIF image that doesn't use any of the specified techniques (note that you have to be using any browser other than IE/Win 5.0 in order to properly see the transparent PNG image):
We won't ask which one do you like most. :-)
If you are using PieNG.js to include PNG icons, it would be good if you specify the icon size in the <img> tag, like this: <img src="/path/to/img.png" width="18" height="18" /> (of course, replace 18 with the actual dimensions of your image). Otherwise the PNG-s might have strange (sometimes bigger) dimensions in Internet Explorer.
All our graphic stuff is made with GIMP (the GNU Image Manipulation Program). Though its name speaks for itself, we would also add that it's a highly evolved digital image processing program which runs on a lot of platforms and operating systems and, in our opinion, it can successfully rival with commercial sacred monsters such as “Adobe Photoshop” or “Corel Photopaint”.