The following article is a slightly updated version of a feature which was originally published in RISC User magazine, issue 12:8 (November/December 1999), not very long after the initial release of RISC OS 4. Being over three years old, it is therefore somewhat out of date in certain details (Mac OS, for instance, has moved on a great deal since the icons depicted in figures 1 and 2, and the face of RISC OS has also changed somewhat with the release of Select). However, minor details aside, the fundamental points made by the article are just as relevant now as they were three years ago. Perhaps more so, in fact, in that the interfaces of both Mac OS X and Windows XP represent complete redesigns which implement many of the ideas under discussion here. This article is here, though, mainly as a preface to the complementary article about the new icon set designed for RISC OS 5.
From time to time in the past I have written about my disappointment at the lack of presentational standards in RISC OS software, and also in RISC OS itself. I believe that presentation counts for a lot, and that it accounts in large part for the popularity of Macintosh systems, for example. Whilst it's true that there are some RISC OS applications that are very well presented, there are also plenty that are not, and in general it's a consideration that is too often ignored by RISC OS programmers.
So, in this article I'd like to present some hints for creating better icons. I've drawn lots of icons for both commercial and freeware RISC OS applications over the years, and have quite a lot of experience of making successful icons.
|Figure 1: Apple's set of Mac icons for QuickTime 4|
|Figure 2: A close-up of three icons from figure 1|
Comparing them with the design attributes listed above, we can see that all the criteria have been met. The icons look extremely realistic, and the purpose of each is clear. They all sport the jigsaw puzzle 'Mac OS extension' shape and the QuickTime logo, so they're clearly a family, but each member's unique elements make it stand out from the rest. They're all the same size, and even though there's no restriction on the colours they use, they don't look garish. Colour is used mainly to create detail, and to produce nice shadows.
Now examine some of the icons that Acorn commissioned for RISC OS 4 in figures 3 and 4.
|Figure 3: A selection of RISC OS 4 file icons, designed by Acorn for the Phœbe Risc PC 2 (and in some cases touched up slightly by RISCOS Ltd to replace the original Acorn nut logo with the RISC OS 4 'cube')|
|Figure 4: A close-up of three icons from figure 3|
By now you will probably have got used to them, or to their RISC OS Select-based derivatives (some of which have been improved in terms of clarity). Nevertheless, try to look at them here with a fresh and critical eye, and compare them in particular with Apple's QuickTime icons, shown above.
Are they realistic? Well, look at the finger in the Squash file icon; need I say more? What about clarity? Some are clear, but the Draw file icon is hopelessly overcrowded, and the edges of all the icons are indistinct on the grey window background. The icons look very flat and two-dimensional, even though some of them contain 3D elements like drop-shadows. There is no real attempt at any kind of anti-aliasing, and the edges of the curled corners look very blocky.
As for uniformity, all the file icons are the same size and have curled corners, and some have a standardised look with a dithered blue background (though the choice over which icons take this form seems arbitrary). Unfortunately, these blue icons are very hard to distinguish from one another at a glance, and the icons as a whole make excessive use of lots of particularly bright or pale colours. Also, given that a 256-colour palette is available, should such obvious chequerboard dithering as is used in the blue icons really be necessary? Overall, the RISC OS 4 icons fail to meet several of the criteria listed above; and apart from that, they just don't appear very well drawn or artistic.
|Figure 5: The Photodesk icons make a feature of the colours blue and yellow; they may only be 16-colour icons, but the clarity of their designs and uniformity of their colour scheme makes them excellent|
In general you should avoid using too many different colours; an excess of colour can convey a sense of childishness. When using colour, it's often a case of 'less is more': you should not go overboard. Sometimes you don't need to use any colour at all, as in figure 6. Often the greatest advantage that 256 colours (or more) provide is to allow you to apply more subtle shading than would be possible in 16 colours, even though the icon doesn't appear, superficially, to use any more colours. See figures 8 and 9, below, for an example.
|Figure 6: Realistic dustbin icons, drawn using just eight grey levels; notice how the edges have been anti-aliased (more obvious on the bulging bin)|
In the icons in figures 1 and 2, notice how the Q logo casts a shadow in every icon. This is very nicely done. A less subtle example is my icon in figure 7 (left-hand side), where the shadow of the top window uses shades of the underlying colour.
|Figure 7: Ideograms created for my RISC OS 4 Configure plug-in, Cosmetix (in the right-hand icon, the jigsaw outline is Acorn's)|
When judging anti-aliasing by eye, the best approach is to imagine how much of any given pixel would be covered by the 'conceptual line' you're drawing, and then use a grey pixel that's appropriate to the amount you judge (from white for none to black for all; or use a scale of shades between foreground and background colours).
|Figure 8: I drew this icon for ErrorMon, a program published by RISC User magazine (11:6 disc). It looks as though it's designed in only 16 colours (like most other RISC OS 3 icons), but the additional colours available in the 256-colour palette are used in the warning symbol to shade some of the pixels, giving the impression that the edge of the magnifying glass is casting a shadow. Note also that the background has been made from the real text of actual error messages; they're too small to read, of course, but they convey an appropriate impression.|
|Figure 9: This icon is for a utility called Examine, which provides lots of information about Draw files. Obviously it's in the same style as the icon in figure 8, and demonstrates that even the simplest idea can be very effective. Here, the small-size version of the standard RISC OS 3 Draw file icon is used in the background, with a portion of the full-size file icon shown within the magnifying glass to give the impression of magnification. It's a 16-colour icon; 256 colours could have improved the shadow effect by darkening the red and blue lines inside the glass.|
|Figure 10: This may look like a haze of pixels, but it's actually a fairly accurate representation of the cover artwork of Acorn's RISC OS 3 PRM; it's surprising what you can do with 34×34 pixels and just 16 colours!|