Font used in GH component icons

Replies to This Discussion

Permalink Reply by Danny Boyes on March 12, 2014 at 9:18am

You should read David's other blog Ieatbugsforbreakfast inparticular his UI tags

http://ieatbugsforbreakfast.wordpress.com/tag/ui/

Permalink Reply by David Rutten on March 12, 2014 at 10:26am

For large letters I tend to use typical fonts such as Times New Roman, perhaps editing each letter slightly to make it align to the pixel-grid. Icons like Factorial and Absolute.

For small letters and numbers I have my own font which I designed to be exactly 7 pixels high. Icons like Division. Occasionally I have to compress even this font to 6 or 5 pixels high to make it fit, but it becomes all but unreadable at that size.

All icons are drawn in XaraX and drop shadows (and other rare pixel operations such as adding noise or blurring) are added using Paint.NET.

It is unlikely that this will be the same in GH2. To accommodate ever higher resolutions of display-devices we'll probably have to switch to some form of vector icons. There is as far as I know at present no system which does this well for icons that are smaller than 40 or so pixels. Resizing small icons tiny amounts tends to introduce lots of blurry edges because the vector render-engines employed are not smart enough to make discrete changes that keep the final image as readable as possible.

--

David Rutten

david@mcneel.com

Permalink Reply by David Rutten on March 12, 2014 at 12:53pm

Out of habit. I came into XaraX after switching from Acorn RiscOs computers and the !Draw and !Artworks applications to Windows.

In fact XaraX has fewer features than most vector graphics packages, it does however allow me to work very fast. The tools I need are easily reachable and the vector renderer they have is WAY faster than the one Adobe uses for Illustrator.

--

David Rutten

david@mcneel.com

Permalink Reply by David Rutten on March 12, 2014 at 1:48pm

Xara is primarily a vector graphics editor. They do support bitmap objects and these days even bitmap effects (for better or worse), but I almost exclusively use the vector tools.

Of course the vector graphics get saved as 24x24 pixel images before they are put into the grasshopper application, which means the icons look like crap when you zoom in. This is the aforementioned problem that needs to be addressed in GH2. There have historically been two approaches to this issue:

1. Provide pixel images with several sizes.
2. Render vector graphics directly.

Option 1 is common for apps that do not have variable levels of zoom, such as Windows Explorer. When explorer shows file icons it either shows them in 16x16, 32x32, 48x48, 96x96, or these days, various HUGE sizes. As a result *.ico files allow you put in different images for all these target sizes. Since Grasshopper has variable zoom levels, this is not an ideal solution. Also, it requires a lot more work per icon.

Option 2 is becoming more and more popular as increased graphics speed now allows for the real-time rendering of vector graphics. Yet, you still need a renderer that knows how to draw vector geometry crisply at low sizes. All vector renderers I know just interpolate the geometry linearly and if a line happens to end up 'between pixels' it's just fuzzy. 

I don't have hard and fast rules for the icons, but I try to adhere to at least these:

• Keep a border of 2 pixels free around the icon content. So basically only use the inner 20x20 pixels rather than the 24x24 you're allowed. This is needed because the drop shadow needs to go there.
• Only draw silhouette edges around shapes, not inner creases. Typically a 1-pixel line will do. I prefer to use a dark version of the fill colour rather than black for edges.
• Loose curves can be drawn in 1 or 2 pixel thicknesses, depending on how important the curve is.
• Try to avoid text in your icons (not always possible).
• Stick to 1 colour family per icon, preferably per icon family. You can add highlights with another colour if you must, but too many hues make an icon hard to read (for the example the [Voronoi] icon, it has red, green and blue and it's a bit of a mess, on the other hand [Colour Wheel] has the full spectrum and seems to work quite well...).
• Very roughly speaking, if there's both black and red geometry in an icon, it means the red is component input and the black is component output.
• Drop shadows are pixel effects, applied to the 24x24 image. They have a blurring radius of 2 pixels, a horizontal offset of 1 pixel to the right, a vertical offset of 1 pixel to the bottom and they are 65% black.
• When you use high contrast shapes (for example black edges on a light background) the anti-aliasing provided by vector renderers such as Xara or Illustrator won't be enough to make it look smooth. I'd recommend avoiding high contrast if at all possible, but if not possible then draw a 1-pixel line around the dark bits in 95% transparent black. This effectively extends the anti-aliasing range from 1.5 to 2.5 pixels and it helps make things looks smoother.

--

David Rutten

david@mcneel.com