* fixed the spelling, thanks Axel and Simon!
-> still unfinished though! git-svn-id: file:///srv/svn/repos/haiku/haiku/trunk@19237 a95241bf-73f2-0310-859d-f6bbb57e9c96
This commit is contained in:
parent
1a0e92a33b
commit
8a1684f4ba
@ -12,7 +12,7 @@
|
||||
<h2>Haiku Icon Guidelines</h2>
|
||||
|
||||
<p align="justify">
|
||||
This document explains the artistic subtleties of Haiku icons. If it leaves something unclear to you, in what rules to follow when designing an icon for the Haiku operating system, please bring the issue to our intention and we will try to improve this text. The icons already in existence will give you a pretty good idea what directions to follow. This document is ment to further define the distinctive look in written form and be a useful resource in case of doubt. Also, if you designed an icon, and you feel it doesn't fit seemlessly into the rest of the system, this document will hopefully provide you with the help on what you should change to improve that.
|
||||
This document explains the artistic subtleties of Haiku icons. If it leaves something unclear to you, in what rules to follow when designing an icon for the Haiku operating system, please bring the issue to our attention and we will try to improve this text. The icons already in existence will give you a pretty good idea what directions to follow. This document is meant to further define the distinctive look in written form and be a useful resource in case of doubt. Also, if you designed an icon, and you feel it doesn't fit seemlessly into the rest of the system, this document will hopefully provide you with the help on what you should change to improve that.
|
||||
</p>
|
||||
|
||||
<p align="justify">
|
||||
@ -68,11 +68,11 @@ First of all, a shadow is the silhouette of a body as seen from the lightsource.
|
||||
<h3>Outlines</h3>
|
||||
|
||||
<p align="justify">
|
||||
Haiku icons use a main black outline at least around the silhouette of the icons shape. The outline is 1 pixel wide at 32x32 size. If shapes within the icon overlap each other, they can be separated by an outline as well, but don't overuse outlines. Not every edge gets one, or the icon will look too complicated. In comparisson to BeOS, Haiku icons use less outlines. The Magnify icon is a good example of this.
|
||||
Haiku icons use a main black outline at least around the silhouette of the icon's shape. The outline is 1 pixel wide at 32x32 size. If shapes within the icon overlap each other, they can be separated by an outline as well, but don't overuse outlines. Not every edge gets one, or the icon will look too complicated. In comparison to BeOS, Haiku icons use less outlines. The Magnify icon is a good example of this.
|
||||
|
||||
<img src="workspaces_32.png" align="right" hspacing="10" vspacing="5">
|
||||
|
||||
Outlines help emphasise the silhuette of an object, so skip outlines that would work against this idea. If a certain feature of an icon is not to be emphasised as much as a black outline would do, such outlines can be dark versions of the color used for the surface they enclose. An example is the Folder and the Workspaces icon. In the Workspaces icon, the foot of the lamp is too small to justify a black outline, in the Folder icon, the paper sheets should appear thin.
|
||||
Outlines help emphasize the silhouette of an object, so skip outlines that would work against this idea. If a certain feature of an icon is not to be emphasised as much as a black outline would do, such outlines can be dark versions of the color used for the surface they enclose. An example is the Folder and the Workspaces icon. In the Workspaces icon, the foot of the lamp is too small to justify a black outline, in the Folder icon, the paper sheets should appear thin.
|
||||
</p>
|
||||
|
||||
<table>
|
||||
@ -95,7 +95,7 @@ Outlines help emphasise the silhuette of an object, so skip outlines that would
|
||||
</table>
|
||||
|
||||
<p align="justify">
|
||||
Glossy effects and highlights should be used with care. If applied too often, an icon will lose it's simplified, stylish look. Some icons use highlight effects on metallic or glass surfaces, but usually only if the surface is curved (round or spherical). In these cases, the material itself supported the meaning of the icon in an important way. The use of gradients should usually provide enough room to make an icon look vivid.
|
||||
Glossy effects and highlights should be used with care. If applied too often, an icon will lose it's simplified, stylish look. Some icons use highlight effects on metallic or glass surfaces, but usually only if the surface is curved (round or spherical). In these cases, the material itself supports the meaning of the icon in an important way. The use of gradients should usually provide enough room to make an icon look vivid.
|
||||
</p>
|
||||
|
||||
<table width="100%">
|
||||
@ -105,7 +105,7 @@ Glossy effects and highlights should be used with care. If applied too often, an
|
||||
<h3>Overlays</h3>
|
||||
|
||||
<p align="justify">
|
||||
Some of the system icons use <i>overlays</i> to further differentiate between file system objects for the users benefit. These objects are generally the same type, and get the same base icon. A good example are the many standard folders. Since the overlays need to work reasonably well at 16x16 icon size, it was decided to make them flat symbols, much like labels. If they were 3D objects like normal icons, they would get just too blurry at 16x16. If you look closer, you would notice that the overlays don't have exactly the same size or even position with all icons that use them. Instead, they are arranged to overlap at an optimal place, so that lines with similar angles don't merge. Another good use of overlays is where they immediately provide some additional information, perhaps about a particular subtype of a fileformat. If it is possible to implement the overlay with an object rather than a text label, it should be preferred.<br>
|
||||
Some of the system icons use <i>overlays</i> to further differentiate between file system objects for the user's benefit. These objects are generally the same type, and get the same base icon. A good example are the many standard folders. Since the overlays need to work reasonably well at 16x16 icon size, it was decided to make them flat symbols, much like labels. If they were 3D objects like normal icons, they would get just too blurry at 16x16. If you look closer, you would notice that the overlays don't have exactly the same size or even position with all icons that use them. Instead, they are arranged to overlap at an optimal place, so that lines with similar angles don't merge. Another good use of overlays is where they immediately provide some additional information, perhaps about a particular subtype of a fileformat. If it is possible to implement the overlay with an object rather than a text label, it should be preferred.<br>
|
||||
You might be tempted to just copy and paste a graphic from somewhere else to use as the overlay, but please remove any unnecessary detail for the final icon.
|
||||
</p>
|
||||
|
||||
@ -141,7 +141,7 @@ You might be tempted to just copy and paste a graphic from somewhere else to use
|
||||
<h3>Details</h3>
|
||||
|
||||
<p align="justify">
|
||||
Usually, you should avoid any detail not stricly necessary to help the meaning of an icon. There should be just enough detail to make the icon look interesting. Icons are usually viewed at 32x32 or 16x16 size. With regards to the amount of detail, you should optimize for the 32x32 size. There should not be any detail that is not well seen at this size. When reusing existing vector material in an icon, make sure its details are reduced to what can actually be seen at the icon size, otherwise the icon will waste a lot of storage space and rendering time. Sometimes it is helpful to make some details of the icon disappear at the small sizes, with the help of the Min and Max LOD property in Icon-O-Matic.
|
||||
Usually, you should avoid any detail not strictly necessary to help the meaning of an icon. There should be just enough detail to make the icon look interesting. Icons are usually viewed at 32x32 or 16x16 size. With regards to the amount of detail, you should optimize for the 32x32 size. There should not be any detail that is not well seen at this size. When reusing existing vector material in an icon, make sure its details are reduced to what can actually be seen at the icon size, otherwise the icon will waste a lot of storage space and rendering time. Sometimes it is helpful to make some details of the icon disappear at the small sizes, with the help of the Min and Max LOD property in Icon-O-Matic.
|
||||
</p>
|
||||
|
||||
|
||||
@ -151,7 +151,7 @@ Usually, you should avoid any detail not stricly necessary to help the meaning o
|
||||
<h3>Abstract</h3>
|
||||
|
||||
<p align="justify">
|
||||
Haiku filesystem objects are represented by simplified real life objects that act as a symbol for the objects meaning and purpose. Try to think of a single object that is easily recognizable and helps to express the purpose of the filesystem object. It is encouraged to cross reference the icon objects with related filesystem objects and their icons. Good examples are document files that are opened by a specific application. [...]
|
||||
Haiku filesystem objects are represented by simplified real life objects that act as a symbol for the object's meaning and purpose. Try to think of a single object that is easily recognizable and helps to express the purpose of the filesystem object. It is encouraged to cross reference the icon objects with related filesystem objects and their icons. Good examples are document files that are opened by a specific application. [...]
|
||||
</p>
|
||||
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user