much more elaborate Shadow section, with picture demonstrating shadow construction

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

src/documentation/icon_guidelines/icon_guidelines.html

@@ -50,19 +50,48 @@ 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 not a 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 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.
 </p>
 
 
 <h3>Shadows</h3>
 
 <p align="justify">
-<img src="fonts_64.png" align="left" vspace="5">
-<img src="expander_64.png" align="left" hspace="20" vspace="5">
+<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 silhouette of a body as seen from the lightsource. Cast onto the flat floor, the shadow is subject to distortion because of the viewers perspective. 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.
+<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>
+
+<center>
+<table width="66%">
+	<tr>
+		<td><img src="fonts_64.png"></td>
+		<td><img src="person_64.png"></td>
+		<td><img src="show_image_64.png"></td>
+		<td><img src="expander_64.png"></td>
+	</tr>
+</table>
+</center>
+
+<p align="justify">
+Each of the four icons shown above has something interesting to be said about their shadows:
 </p>
 
+<ul>
+	<li>
+In the Fonts icon, the shadow does not have straight horizontal lines, but this is because the A shape doesn't have edges pointing straight up. The direction of the shadow is still towards the right.
+	</li>
+	<li>
+The Person icon's shadow is simplified with the help of curves.
+	</li>
+	<li>
+The shadow in the ShowImage icon is lower than the body of the projector, but this is because it is lifted of 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.
+	</li>
+</ul>
 
 <h3>Outlines</h3>
 
@@ -137,6 +166,7 @@ You might be tempted to just copy and paste a graphic from somewhere else to use
 </td></tr>
 </table>
 
+
 <h3>Details</h3>
 
 <p align="justify">
@@ -146,6 +176,13 @@ Usually, you should avoid any detail not strictly necessary to help the meaning
 
 <!--
 
+<h3>Global Icons</h3>
+
+<p align="justify">
+<img src="people_64.png" align="left" hspace="20" vspace="5">
+Be aware of the fact that your cultural or ethnic background is likely not the same as another person's looking at and using your icon. For the same reason, names for international products are carefully chosen these days, after some costly mistakes in the past. If you think a certain object is perfect for a files meaning or purpose, and it doesn't make for the perfect choice in another part of the world, that is probably not such a big deal though, unless, of course, it is offending. But one thing that should be avoided is the use of human bodies or body parts that show skin color. If hands or faces are frequently used in system icons, and they are always the same skin color - that is more than a little ignorant. It is a subject that an icon designer should be aware of, and a problem easy to avoid with a little creativity. The best solution is when no one even notices that there was an issue to be aware of.
+</p>
+
 <h3>Abstract</h3>
 
 <p align="justify">