| 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.
Styling
- 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
- 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.
- 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.
- 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.
- 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.
Harddisk |
cd/dvd |
v1 Home |
Folder |
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:PDF |
Doc: RTF |
RTF Text |
|
|
Additional
file icons
|
Generic URL |
Generic zipped |
|
|
|
|
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.
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.
| HD
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.
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.
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.
|
