From 7e186d1140f69ba9845e05ee56d48cb488bd8473 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Stephan=20A=C3=9Fmus?= Date: Fri, 10 Nov 2006 00:24:22 +0000 Subject: [PATCH] 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 --- .../icon_guidelines/icon_guidelines.html | 45 ++++++++++++++++-- .../icon_guidelines/people_64.png | Bin 0 -> 4105 bytes .../icon_guidelines/person_64.png | Bin 0 -> 2179 bytes src/documentation/icon_guidelines/shadow.png | Bin 0 -> 11811 bytes 4 files changed, 41 insertions(+), 4 deletions(-) create mode 100644 src/documentation/icon_guidelines/people_64.png create mode 100644 src/documentation/icon_guidelines/person_64.png create mode 100644 src/documentation/icon_guidelines/shadow.png diff --git a/src/documentation/icon_guidelines/icon_guidelines.html b/src/documentation/icon_guidelines/icon_guidelines.html index 96ec5c26f2..ae0600898a 100644 --- a/src/documentation/icon_guidelines/icon_guidelines.html +++ b/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

Colors are obviously a tough subject. -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, clean 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, clean 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.

Shadows

- - + +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.

-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. +

+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.

+ +
+ + + + + + + +
+
+ +

+Each of the four icons shown above has something interesting to be said about their shadows:

+

Outlines

@@ -137,6 +166,7 @@ You might be tempted to just copy and paste a graphic from somewhere else to use +

Details

@@ -146,6 +176,13 @@ Usually, you should avoid any detail not strictly necessary to help the meaning