Edits for spelling, grammar, more consistent style, and clarity. Nice work on this, stippi!

git-svn-id: file:///srv/svn/repos/haiku/haiku/trunk@19257 a95241bf-73f2-0310-859d-f6bbb57e9c96

src/documentation/icon_guidelines/icon_guidelines.html

@@ -11,37 +11,37 @@
 <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 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.
+This document explains the artistic subtleties of Haiku icons. If it leaves something unclear to you, that is, what rules to follow when designing an icon for the Haiku operating system, please bring the issue to our attention. Existing icons should give you a pretty good idea what directions to follow. This document is meant to define the distinctive look in further detail and to be a useful resource in case of doubt. Also, this document will hopefully provide you with help on what you should change if you have designed an icon and feel it doesn't seamlessly fit in with the rest of the system.
 </p>
 
 <p align="justify">
-Please be aware that Haiku users feel very strong about a consistent look. The more you make your icon fit into the rest of the system, the more it is appreciated by your users.
+Please be aware that Haiku users feel very strongly about a consistent look. The more you make your icon fit into the rest of the system, the more it is appreciated by your users.
 </p>
 
 
 <h3>Perspective</h3>
 
 <p align="justify">
-Haiku icons inherit the perspective of the BeOS icons and add some of their own. If you imagine a cube sitting on the floor, let's define the angles of its edges: The line where the left front side and the floor meet has an angle such that for every two pixels it goes to the right, it goes one pixel down. The line of the right side meeting the floor goes one pixel up for every pixel going right. Lines pointing up are straight without any angle to help make the icons crisper (realistically, icons should be wider at the top but they aren't).
+Haiku icons inherit the perspective of the BeOS icons and add some of their own. If a cube were sitting on the floor, the angles of its edges would be defined as follows: the line where the left front side and the floor meet would have an angle such that for every two pixels it goes to the right, it goes one pixel down, and the line of the right side meeting the floor goes one pixel up for every pixel going right. Vertical lines are straight without any angle to help make the icons crisper (realistically, icons should be wider at the top but they aren't).
 
 <img src="perspective.png" border="0" align="right" hspace="10" vspace="5">
 
-The perspective that Haiku icons add to the original BeOS look comes from tweaking lines that do not touch the floor (and don't point up) to add a somewhat more dramatic perspective. So edges of the objects corner being closest to the viewer and on the floor still follow the BeOS perspective with the angles described above, all other edges are slightly tweaked to break free of the strict isometric look. The most important thing is still crispness, that's why there is no <i>strictly</i> defined perspective. Don't exaggerate too much, try to make it fit with the rest of the icons. It is sometimes easiest to design an icon with the consequent isometric look first and tweaking for perspective as the last step of work. Also, keeping the perspective consistent and correct looking throughout the icon is desirable.
+The change in perspective that Haiku icons add to the original BeOS look comes from changing non-vertical lines that do not touch the floor to add a somewhat more dramatic perspective. Edges coming from the corners closest to the viewer and on the floor still follow the isometric BeOS perspective with the angles described above, all other edges are slightly tweaked to break free of the strict isometric look. The most important thing is still crispness, that's why there is no <i>strictly</i> defined perspective. Don't exaggerate too much -- try to make it fit with the rest of the icons. It is sometimes easiest to first design an icon with an isometric look and modify for perspective as the last step of work. Keeping the perspective consistent and correct-looking throughout the icon is also desirable.
 </p>
 
 
-<h3>Lights</h3>
+<h3>Lighting</h3>
 
 <p align="justify">
-There are two lightsources illuminating a Haiku icon: The main lightsource casts a bright neutral light from the left top. A second lightsource lits the icon from the opposite side with an ambient light that can be slightly colored (for example, a warmer tone). Its effects are not seen on surfaces wich are hit directly by the main lightsource.
+There are two light sources illuminating a Haiku icon. The main light source casts a bright neutral light from the top left. A second light source shines from the opposite side with an ambient light that can be slightly colored (for example, a warmer tone). Its effects are not seen on surfaces which are the main light source directly shines upon.
 </p>
 
 
 <h3>Gradients</h3>
 
 <p align="justify">
-Gradients used on the icon should result from the effects of the lightsources as described above. You do not need to use gradients on every surface, they obviously use more storage space than solid colors. But without gradients, icons would look too stiff, you should use enough of them to give it a modern look.<br>
-As a general rule, surfaces facing towards the viewer should be lighter at the top as a result of being closer to the main lightsource there. The top surfaces should be lighter on the left side for the same reason. Surfaces on the right, which are not directly lit by the main lightsource should get the darkest colors. They are lit from the ambient lightsource and from the reflection of the floor, but the effects should be very subtile and only seen on closer examination. These surfaces get the darkest colors where they touch the directly lit surfaces. Overall, colors should be vivid and tweaked to help the contrast within the icon. Gradient directions don't have to line up with a specific angle to make icons look less stiff. Instead, you should tweak the gradient directions to help improve contrast.
+Gradients used on the icon should result from the effects of the lightsources as described above. You do not need to use gradients on every surface -- they obviously use more storage space than solid colors, but without gradients, icons would look too stiff. You should use enough of them to give you icon a modern look.<br>
+As a general rule, surfaces facing towards the viewer should be lighter at the top and the top surfaces should be lighter on the left side. Surfaces on the right which are not directly lit by the main light source should get the darkest colors. They are lit from the ambient lightsource and from the reflection of the floor, but the effects should be very subtle and only seen on closer examination. These surfaces get the darkest colors where they touch the directly lit surfaces. Overall, colors should be bright and tweaked to help the contrast within the icon. Gradient directions don't have to line up with a specific angle to make icons look less stiff. Instead, you should tweak the gradient directions to help improve contrast.
 </p>
 
 
@@ -50,7 +50,7 @@ As a general rule, surfaces facing towards the viewer should be lighter at the t
 <p align="justify">
 Colors are obviously a tough subject.
 <img src="trash_full_64.png" align="right" hspace="20" vspace="5">
-At the moment, there is no color palette defined from which you should pick the dominant colors of your icon. In the existing icons, <i>clean</i> colors are almost completely avoided, with the exception of grays, which are not toned in any way. Most dominant colors appear quite saturated somewhere in the icon. But the colors are always a mixture, never straight red, green or blue. Where they fade into a lighter tone, they are mostly desaturated and pastellic. In the shade, the colors are mostly still saturated, aiming for a believable lighting, but colors can vary in tone, to give the appearance of a warmer or colder light condition in the shadow. Which mostly depends on the overall coloring of the icon and gut feeling.
+At the moment, there is no color palette defined from which you should pick the dominant colors of your icon. In the existing icons, <i>clean</i> colors are almost completely avoided, with the exception of grays, which are not toned in any way. Most dominant colors appear quite saturated somewhere in the icon, but the colors are always a mixture, never pure red, green, or blue. Where they fade into a lighter tone, they are mostly desaturated and pastel-like. In the shade, the colors are mostly still saturated, aiming for believable lighting, but colors can vary in tone to give the appearance of a warmer or colder light condition in the shadow, which mostly depends on the overall coloring of the icon and gut feeling.
 </p>
 
 
@@ -58,10 +58,10 @@ At the moment, there is no color palette defined from which you should pick the
 
 <p align="justify">
 <img src="shadow.png" align="left" hspace="10" vspace="5">
-First of all, a shadow is the projection of a body's silhouette as seen from the lightsource. Cast onto the flat floor, the shadow is subject to further distortion because of the viewers perspective.</p>
+First of all, a shadow is the projection of a body's silhouette as seen from the light source. Cast onto the flat floor, the shadow is subject to further distortion because of the viewer's perspective.</p>
 
 <p align="justify">
-Selfshadowing on the icon objects is encouraged, because it can improve contrast. Sometimes, it works good to use gradients for these. A naturalistic shadow is preferred, unless it gets too complicated and would distract from the main icon. The people icon is one example for a simplified shadow shape. Shadows that are cut off at the right boundary of the icon are discouraged. Leave enough room for the shadow. It is not so important that the shadows have approximately the same length throughout all icons, but they all need to be the same direction, which is straight horizontally to the right. Shadows do not become wider with more distance from the object, just like shadows from the sun.</p>
+Self-shadowing on the icon objects is encouraged, because it can improve contrast. Sometimes gradients work well  for these. A naturalistic shadow is preferable unless it gets too complicated and would distract from the main icon. The people icon is one example for a simplified shadow shape. Avoid making shadows that are cut off at the right edge of the icon by leaving enough room for them. It is not so important that the shadows have approximately the same length throughout all icons, but they all need to be the same direction: straight to the right. Just like shadows created by the sun, they also do not become wider with more distance from the object.</p>
 
 <center>
 <table width="66%">
@@ -89,18 +89,18 @@ The Person icon's shadow is simplified with the help of curves.
 The shadow in the ShowImage icon is lower than the body of the projector, but this is because it is lifted off the ground.
 	</li>
 	<li>
-The Expander icon featues more self-shadowing effects than the other icons. Notable about the shadow on the right side is that it follows a different direction. That is because it is cast by the ambient light source. It could also have been realized with a gradient, because such shadows usually don't have sharp edges.
+The Expander icon featues more self-shadowing effects than the other icons. Note that shadow on the right side  follows a different direction because it is cast by the ambient light source. It could also have been realized with a gradient because such shadows usually don't have sharp edges.
 	</li>
 </ul>
 
 <h3>Outlines</h3>
 
 <p align="justify">
-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.
+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. While outlines can separate shapes within the icon if they overlap each other, use them sparingly. If every edge gets one, the icon will look too complicated. Compared to those from BeOS, Haiku icons use fewer outlines. The Magnify icon is a good example of this.
 
 <img src="workspaces_32.png" align="right" hspace="10" vspace="5">
 
-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.
+Outlines help emphasize the silhouette of an object, so skip outlines that would work against this idea. If a certain feature of an icon should not have as much emphasis as much as a black outline would give, such outlines can be darker versions of the color used for the surface they enclose. Examples of this would be the Folder and the Workspaces icons. 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>
@@ -133,7 +133,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 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>
+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 be reasonably clear at 16x16 icon size, they need to be flat symbols, much like labels. 3D objects are too blurry at such a small size. If you look closely, you will probably notice that overlays don't have exactly the same size or even position with all icons that use them. Instead, they are arranged to overlap in such a way 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 file format. If it is possible to implement the overlay with an object rather than a text label, please do so.<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>