| <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> |
| <html> |
| <head> |
| <meta http-equiv="Content-Type" |
| content="text/html; charset=ISO-8859-1"> |
| <title>Visual Design :: Galaxy Icons</title> |
| <link href="sts.css" rel="stylesheet" type="text/css" media="screen"> |
| <style type="text/css"> |
| <!-- |
| .Stil4 {font-size: 10pt} |
| .Stil5 {color: #5382A1} |
| .Stil7 {font-size: 12px} |
| .Stil10 {color: #5382A1; font-size: 12pt; } |
| .Stil12 {color: #5382A1; font-size: 10pt; } |
| --> |
| </style> |
| </head> |
| <body> |
| <table width="75%" border="0" cellspacing="2" cellpadding="5"> |
| <tr> |
| <td colspan="2"><a href="http://ui.openoffice.org/VisualDesign/"><img src="gifs/visualdesign.png" width="485" height="47" border="0"></a><a name="top"></a></td> |
| <td width="37%"><div align="right"></div></td> |
| </tr> |
| <tr> |
| <td colspan="3"><table width="100%" border="0" cellspacing="2" cellpadding="5"> |
| <tr> |
| <td colspan="5"><div align="right"><span class="Stil7"><a href="index.html">Visual |
| Design</a> | |
| <a href="OOo_ui.html">UI</a><a href="OOo_ui.html"></a> | |
| Icons </span></div></td> |
| </tr> |
| <tr> |
| <td colspan="5"><img src="gifs/nada.gif" width="50" height="30"></td> |
| </tr> |
| <tr> |
| <td colspan="5"><span class="head1_black Stil5">The Galaxy Icons </span></td> |
| </tr> |
| <tr> |
| <td colspan="5"><p class="Stil10"><img src="gifs/blue_next.png" width="18" height="19" border="0" align="absmiddle"> The |
| new style:: <a href="OOo_galaxy.html#style">Characteristic</a> | <a href="OOo_galaxy.html#design">Design</a> | <a href="OOo_galaxy.html#colors">Colors</a><span class="Stil10"> | </span>Comparison |
| | <a href="OOo_galaxy_mimetype.html">MimeType</a> </p> </td> |
| </tr> |
| <tr> |
| <td colspan="5"><span class="Stil10"><img src="gifs/blue_next.png" width="18" height="19" border="0" align="absmiddle"> Behavior: |
| <a href="#disabled">Disabled icons</a> | Selected icons </span></td> |
| </tr> |
| <tr> |
| <td colspan="5"><img src="gifs/nada.gif" width="50" height="50"></td> |
| </tr> |
| <tr> |
| <td colspan="5"><strong><a name="disabled" id="disabled"></a>Disabled |
| icon state </strong></td> |
| </tr> |
| <tr> |
| <td width="21%" valign="top"><img src="gifs/nada.gif" width="30" height="8"></td> |
| <td colspan="4" valign="top"> </td> |
| </tr> |
| <tr> |
| <td valign="top"><span class="Stil10">Normal</span></td> |
| <td colspan="4" valign="top"><span class="Stil4">Example of new Galaxy |
| icons:</span></td> |
| </tr> |
| <tr> |
| <td valign="middle"><img src="gifs/nada.gif" width="50" height="40"></td> |
| <td colspan="4" valign="middle"><img src="gifs/Icons/OOo_Galaxy_disable_00.png" width="366" height="27"></td> |
| </tr> |
| <tr> |
| <td valign="top"> </td> |
| <td colspan="4" valign="top"><p class="Stil4">The new Galaxy style |
| have a lot of decoration effects (light reflex, gradient, drop |
| shadow, etc.) These effects make the icon shapes more blurry than |
| the older "Classic" |
| icons (Andromeda).</p> </td> |
| </tr> |
| <tr> |
| <td valign="top"> </td> |
| <td colspan="4" valign="top"><span class="Stil4">A new way of drawing |
| disable icons get more necessary than ever... </span></td> |
| </tr> |
| <tr> |
| <td valign="top"><img src="gifs/nada.gif" width="30" height="33"></td> |
| <td colspan="4" valign="top"> </td> |
| </tr> |
| <tr> |
| <td valign="top"><span class="Stil10">Current disable style </span></td> |
| <td colspan="4" valign="top"><p><span class="Stil4">See how the new |
| Galaxy icons will look as disabled:</span></p></td> |
| </tr> |
| <tr> |
| <td valign="middle"><img src="gifs/nada.gif" width="50" height="40"></td> |
| <td colspan="4" valign="middle"><img src="gifs/Icons/OOo_Galaxy_disable_02.png" width="366" height="27"></td> |
| </tr> |
| <tr> |
| <td valign="top"> </td> |
| <td colspan="4" valign="top"><p class="Stil4">• The icons |
| lost their meaning<br> |
| • Different icons looking similar <br> |
| • The huge grey area |
| is too prominent, sometimes more than a normal icon <br> |
| • And it looks terrible bad </p> </td> |
| </tr> |
| <tr> |
| <td valign="top"><img src="gifs/nada.gif" width="30" height="33"></td> |
| <td colspan="4" valign="top"> </td> |
| </tr> |
| |
| <tr> |
| <td valign="top"><span class="Stil10">Proposals for "disabled" </span></td> |
| <td colspan="4" valign="top"><p><span class="Stil4">The disabled |
| Galaxy icons should be look like one of these: </span></p></td> |
| </tr> |
| <tr> |
| <td valign="middle"> </td> |
| <td colspan="4" valign="middle"> </td> |
| </tr> |
| <tr> |
| <td valign="top"><div align="right"><img src="gifs/nada.gif" width="50" height="40" align="top"><span class="Stil12">Proposal |
| #01</span></div></td> |
| <td colspan="4" valign="middle"><img src="gifs/Icons/OOo_Galaxy_disable_01-20.png" width="366" height="27"></td> |
| </tr> |
| <tr> |
| <td valign="top"> </td> |
| <td width="9%" valign="top"><span class="Stil4">Color: <br> |
| </span></td> |
| <td width="21%" valign="top"><span class="Stil4">greyscale<br> |
| </span></td> |
| <td width="24%" valign="top"> </td> |
| <td width="25%" valign="top"> </td> |
| </tr> |
| <tr> |
| <td valign="top"><img src="gifs/nada.gif" width="30" height="8"></td> |
| <td valign="top"><span class="Stil4">Opacity:</span></td> |
| <td valign="top"><span class="Stil4">20% </span></td> |
| <td valign="top"> </td> |
| <td valign="top"> </td> |
| </tr> |
| <tr> |
| <td valign="middle"> </td> |
| <td colspan="4" valign="middle"><img src="gifs/Icons/OOo_Galaxy_disable_01-20b.png" width="366" height="27"></td> |
| </tr> |
| <tr> |
| <td valign="middle"><img src="gifs/nada.gif" width="30" height="66"></td> |
| <td colspan="4" valign="middle"> </td> |
| </tr> |
| <tr> |
| <td valign="top"><div align="right"><img src="gifs/nada.gif" width="50" height="40" align="top"><span class="Stil12">Proposal |
| #02</span></div></td> |
| <td colspan="4" valign="middle"><img src="gifs/Icons/OOo_Galaxy_disable_01-30.png" width="366" height="27"></td> |
| </tr> |
| <tr> |
| <td valign="top"> </td> |
| <td valign="top"><span class="Stil4">Color: <br> |
| </span></td> |
| <td valign="top"><span class="Stil4">greyscale<br> |
| </span></td> |
| <td valign="top"> </td> |
| <td valign="top"> </td> |
| </tr> |
| <tr> |
| <td valign="top"><img src="gifs/nada.gif" width="30" height="8"></td> |
| <td valign="top"><span class="Stil4">Opacity:</span></td> |
| <td valign="top"><span class="Stil4">30% </span></td> |
| <td valign="top"> </td> |
| <td valign="top"> </td> |
| </tr> |
| <tr> |
| <td valign="middle"> </td> |
| <td colspan="4" valign="middle"><img src="gifs/Icons/OOo_Galaxy_disable_01-30b.png" width="366" height="27"></td> |
| </tr> |
| <tr> |
| <td valign="middle"><img src="gifs/nada.gif" width="30" height="66"></td> |
| <td colspan="4" valign="middle"> </td> |
| </tr> |
| |
| <tr> |
| <td valign="top"><div align="right"><img src="gifs/nada.gif" width="50" height="40" align="top"><span class="Stil12">Proposal |
| #03</span></div></td> |
| <td colspan="4" valign="middle"><img src="gifs/Icons/OOo_Galaxy_disable_01-40.png" width="366" height="27"></td> |
| </tr> |
| <tr> |
| <td valign="top"> </td> |
| <td valign="top"><span class="Stil4">Color: <br> |
| </span></td> |
| <td valign="top"><span class="Stil4">greyscale<br> |
| </span></td> |
| <td valign="top"> </td> |
| <td valign="top"> </td> |
| </tr> |
| <tr> |
| <td valign="top"><img src="gifs/nada.gif" width="30" height="8"></td> |
| <td valign="top"><span class="Stil4">Opacity:</span></td> |
| <td valign="top"><span class="Stil4">40% </span></td> |
| <td valign="top"> </td> |
| <td valign="top"> </td> |
| </tr> |
| <tr> |
| <td valign="middle"> </td> |
| <td colspan="4" valign="middle"><img src="gifs/Icons/OOo_Galaxy_disable_01-40b.png" width="366" height="27"></td> |
| </tr> |
| <tr> |
| <td valign="middle"><img src="gifs/nada.gif" width="30" height="66"></td> |
| <td colspan="4" valign="middle"> </td> |
| </tr> |
| |
| <tr> |
| <td valign="top"><div align="right"><img src="gifs/nada.gif" width="50" height="40" align="top"><span class="Stil12">Proposal |
| #04</span></div></td> |
| <td colspan="4" valign="middle"><img src="gifs/Icons/OOo_Galaxy_disable_01-50.png" width="366" height="27"></td> |
| </tr> |
| <tr> |
| <td valign="top"> </td> |
| <td valign="top"><span class="Stil4">Color: <br> |
| </span></td> |
| <td valign="top"><span class="Stil4">greyscale<br> |
| </span></td> |
| <td valign="top"> </td> |
| <td valign="top"> </td> |
| </tr> |
| <tr> |
| <td valign="top"><img src="gifs/nada.gif" width="30" height="8"></td> |
| <td valign="top"><span class="Stil4">Opacity:</span></td> |
| <td valign="top"><span class="Stil4">50% </span></td> |
| <td valign="top"> </td> |
| <td valign="top"> </td> |
| </tr> |
| <tr> |
| <td valign="middle"> </td> |
| <td colspan="4" valign="middle"><img src="gifs/Icons/OOo_Galaxy_disable_01-50b.png" width="366" height="27"></td> |
| </tr> |
| <tr> |
| <td valign="middle"><a name="a11y"></a><img src="gifs/nada.gif" width="30" height="66"></td> |
| <td colspan="4" valign="middle"> </td> |
| </tr> |
| <tr> |
| <td valign="top"><span class="Stil10">A11y – disabled icons </span></td> |
| <td colspan="4" valign="top"><p><span class="Stil4">See how the |
| disabled high contrast icons will look: </span></p></td> |
| </tr> |
| <tr> |
| <td valign="middle"> </td> |
| <td colspan="4" valign="middle"> </td> |
| </tr> |
| <tr> |
| <td valign="top"><div align="right"><span class="Stil12">The high contrast version of<br> |
| Proposal |
| #02</span></div></td> |
| <td colspan="4" valign="middle"><img src="gifs/Icons/OOo_Galaxy_disable_05-30.png" width="366" height="27"></td> |
| </tr> |
| <tr> |
| <td valign="top"> </td> |
| <td valign="top"><span class="Stil4">Color: <br> |
| </span></td> |
| <td valign="top"><span class="Stil4">greyscale<br> |
| </span></td> |
| <td valign="top"> </td> |
| <td valign="top"> </td> |
| </tr> |
| <tr> |
| <td valign="top"><img src="gifs/nada.gif" width="30" height="8"></td> |
| <td valign="top"><span class="Stil4">Opacity:</span></td> |
| <td valign="top"><span class="Stil4">30% </span></td> |
| <td valign="top"> </td> |
| <td valign="top"> </td> |
| </tr> |
| <tr> |
| <td valign="middle"> </td> |
| <td colspan="4" valign="middle"><img src="gifs/Icons/OOo_Galaxy_disable_05-30b.png" width="366" height="27"></td> |
| </tr> |
| <tr> |
| <td valign="middle"><img src="gifs/nada.gif" width="30" height="66"></td> |
| <td colspan="4" valign="middle"> </td> |
| </tr> |
| |
| <tr> |
| <td colspan="5"><div align="right"><a href="#top"><img src="gifs/green_top.png" width="18" height="19" border="0"></a></div></td> |
| </tr> |
| <tr> |
| <td colspan="5"><img src="gifs/nada.gif" width="166" height="48"></td> |
| </tr> |
| </table></td> |
| </tr> |
| <tr> |
| <td> </td> |
| <td width="32%"> </td> |
| <td><div align="right" class="body_black"> |
| <div align="right" class="body_black"><span class="Stil4"><font face="Arial, Helvetica, sans-serif" color="#666699"><font color="#000000">Last |
| change: |
| <!-- #BeginDate format:Am3 -->08/16/2007<!-- #EndDate --> |
| by</font> </font></span><font face="Arial, Helvetica, sans-serif"><a href="mailto:stella.schulze@sun.com?subject=VisualDesign">sts</a></font></div> |
| </div></td> |
| </tr> |
| </table> |
| <p align="right" class="Stil3"> </p> |
| </body> |
| </html> |
