GNUstep Étoilé icons by Jasper Hauser 31-07-2005

Étoilé Icons
This chapter describes the overall philosophy behind the Étoilé icon style and shows how to design application, document, toolbar, and other types of icons for GNUstep. Étoilé offers a semi photo-illustrative icon style, it approaches the realism of photography but is kept at a distance using the features of illustration to simplify and make sure to convey a lot on a small surface.

Icons can be represented in 64 x 64 pixels to allow some room for detail. Anti-aliasing makes curves and nonrectilinear lines possible. Alpha channels and translucency allow for complex shading and dimensionality. All of these qualities pave the way for lush imagery that enables you to create vibrant icons, but the power lies within abstraction and simplicity.

To represent your application in GNUstep, it’s essential to create high-quality Étoilé-style application icons that scale well in the various places the icon appears—the Dock, list views, alert dialogs, and so on.

The angles and shadows used for depicting various kinds of icons are intended to reflect how the objects would appear in reality. All Étoilé interface elements have a common soft light source from directly above, not from the upper-left corner as in other systems. The various perspectives are achieved by changing the position of the object relative to the camera capturing the icon as seen below.

Icon perspective, stage and camera

Stage placement
  • File icons look as if they are sitting with their back to the wall on the stage in front of you, with an appropriate shadow behind/below the object.
  • For toolbar icons, the perspective is also straight-on, as if they are sitting with their back to the wall on the stage in front of you with the shadow behind/below it. Or when then object requires some 3d feel the object can be placed on the stage.
  • Important objects such as locations or applications (hard disk, home folder, nework, web browser) should use the 3d effect that occurs when placing an object in the centre of the stage to accentuate their importance.
  • Application icons have the freedom to place their object anywhere on the stage. But our general advice would be to choose from the 3 perspective options shown above, for consitancy.
  • The lighting in the Étoilé-style is soft, this means that highlights on various reflective materials should be soft aswell. Same goes for shading, due to the soft light source shadows should not have hard contrast rich edges.
  • Icons that represent actual objects should look as though they are made of real materials. Examine various objects to study the visual characteristics of plastic, glass, water, paper, and metal. Your icon will look more realistic if you successfully convey the item’s weight and feel, as well as its appearance.
  • Use transparency only when it is convincing and when it helps complete the story the icon is telling. You would never see a transparent piece of metal, for example, so don’t use one in your icon.
  • While shouldn't be relied to much upon (as some people have colors perception problems), colors are a very efficient in a way that they can further clarify meaning and function of an icon aswell as enhance recognition.
  • Étoilé-style icons also should have a pastel (soft) color spectrum use. In general one could suggest not to use pure primary color, or any other aggresive color. Try and make the color choise a pleasant one.
Creating an icon
  1. Sketch the icon.
    Work out the concept and details of your design to begin with on paper, not with software, this will give your more freedom and will speed up the process. You should be ready to execute the idea by the time you open an application.
  2. Create a software illustration of the icon.
    Although you may want the final icon to look like a photograph, in most cases it’s inadvisable to start with an actual photograph. An illustration provides much more flexibility for conveying a concept on a very small surface. An illustration also gives you necessary control over details, perspective, light and shadow, texture, and so on.
  3. Add detail and color.
    For each enhancement you make to a larger-version icon, consider whether it is truly adding something to the icon’s usability or whether it is just adding complexity or clutter when scaled down.
  4. Add shadows.
    Shadows give objects dimensionality and realism. They also help tie the elements of an icon together so it doesn’t look like a collage. The light source should be above and slightly in front of the object. The resulting shadow should create the sense that the icon is resting on a surface.
Tips for designing icons
  • For great-looking Étoilé icons, have a professional graphic designer create them.
  • Strive for simplicity. Try to use a single object that captures the icon’s action or represents the control. Start with a basic shape.
  • Perspective, shadows and abstraction are the most important components of making good Étoilé icons. Use a single light source with the light coming from above the icon.
  • Use universal imagery that people will easily recognize. Avoid focusing on a secondary aspect of an element. For example, for a mail icon, a rural mailbox would be less recognizable than a postage stamp.
  • Use color judiciously to help the icon tell its story; don’t add color just to make the icon more colorful. Smooth gradients typically work better than sharp delineations of color.
  • Avoid using interface elements in your icons; they could be confused with the actual interface.
  • Don’t use replicas of present hardware products in your icons. These symbols are copyrighted, and hardware designs change frequently and will cause for your icons to look outdated very quickly.
  • Don’t reuse system icons in your interface; it can be confusing to users to see the same icon used to mean slightly different things in multiple locations.
  • Design toolbar icons at their actual size (32 x 32). For other icons, concentrate on perfecting your icon’s look at 128 x 128 and work down from there. It usually works best if you scale down elements independently and then combine them rather than scale the entire icon at once.



v1 Home


Generic font

Plug in

File icons:
All files have the base "paper file" look. While the type of the file is depicted by an icon which is laid on the base. Their are a variety image file types, and I think it would be best to depict those varieties using badges, instead of making special icon for each variety of a file type.

Perhaps it's a nice idea to give each file type (image, text, doc, audio, movie) different colors for their badges so that in a view with many icons people can distinguish the individual icons more ease.

So as an example, we should make 1 generic text file icon, and every text type is represented by the badge. We could however look if we maybe want a Text and a Document base file icon. Document being a file which contains text as well as images (pdf,doc, rtf,indd, etc.)

label and
type combinations

Doc: Doc


Doc: RTF

RTF Text

file icons

Generic URL

Generic zipped

v5 final

Generic audio

Generic text

Generic font


Generic image

Generic movie


64 pixel

32 pixel

16 pixel


Home folder icon:
Comments on this I think where right, it's an important location/folder that should stand out clearly amongst other folders. New icon is a more direct visualization. Again here I choose not to turn it like the plug in cube only to ensure that the icon doesn't look to constructed and cluttered. 3D feel is there just in a more simple way then suggested in the GNUstep guidelines.

round 1
+ sketches

v1 Home

Folder icon:
The perspective of the icon is frontal but because that would mean it would look very flat. So now there is a slight shift of the view to make sure that the front of the folder comes loose. To go away from the OS X look I think a) we should choose a slightly "different" looking folder, b) use a color different from OS X aqau. So my suggestion is using either Green or preferred Yellow/brown, which would be a more realistic type of color. Problem with Option 2 is that a) it's to small compared to the canvas meaning that at small sizes it will disappear, b) the outline does not look enough like what is use on other platforms this means people won't recognize it easily enough.

round 2
v2 Folder

v3 Folder

v4 Aqua Light

v4 Lime Green

v1 Folder

Option 2

round 3
v4 Classic Paper

v5 more curl

v6 square



Plug in icon: Passed!
As with previous icons I followed the given guidelines. The cube as was, the power cord was not strong enough, so latest version has a puzzle piece on it. Looks pretty good to me. Note that I do think it might be good for developers to put there application icon on the side of the cube instead of rendering the app icon in the bottom right corner.

Plug in
v1 Plug in

v2 Plug in

v3 Plug in

Harddisk icon:
The original documentation advices me to put important icons, such as the hardrive icon, in a 3d isometric perspective as shown above. The major issue with only having 2 base perspective (frontal and isometric) to work with is that in some cases one of the 2 doesn't work with the icon shape. A harddisk is a flat lying rectangle and thus will create a tiny surface compared to other (less important icons) in an isometric perspective. So my advice for this problem is to just disobey the rules :) But seriously, the solution is to turn the object 45 degrees towards the viewer. Note that this only works on flat rectangle shapes.

round 1

v1 Disk Shape

v2 Harddisk

v3 Harddisk

CD & DVD icon:
This icon is a generic cd/dvd shape. I think it might be good to perhaps but a label/badge on there so we can make a difference between cd's and dvd's for the user.

round 1

v1 CD & DVD

v2 cd/dvd

v3 cd/dvd

Blank application icon:
Very simple first sketch based on the way apple does it. I really like how they did it. I just tried choosing more Tool and less School metaphors for the objects shown.

round 1

v1 App/Tool

v1 Web browser

v1 Network

Toolbar icons:
The toolbar icons should in general have a more professional grayish, toned down, pastel look then being bright and sparkly. I'd also like the icons to refer to professional object more the to "toy" like objects or metaphors.








Copyright on all text and images on this page are owned by Jasper Hauser ©2004-2005
Note that some of the text is copied from Apple Developer pages.