website view artwork/index.html @ rev 75
Improved menu for the French part (en will follow)
| author | Christophe Lincoln <pankso@slitaz.org> | 
|---|---|
| date | Thu Jun 26 23:27:04 2008 +0200 (2008-06-26) | 
| parents | 787d1e7289cf | 
| children | 9db15af4ad78 | 
 line source
     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     2     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
     4 <head>
     5     <title>SliTaz Art et graphisme</title>
     6     <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
     7     <meta name="description" content="SliTaz artwork images logo graphisme wallpaper" />
     8     <meta name="keywords" lang="fr" content="opensource, image, logo, slitaz, spider" />
     9     <meta name="robots" content="index, follow, all" />
    10     <meta name="revisit-after" content="7 days" />
    11     <meta name="expires" content="never" />
    12     <meta name="modified" content="2008-06-12 12:00:00" />
    13     <meta name="author" content="Christophe Lincoln"/>
    14     <meta name="publisher" content="www.slitaz.org" />
    15     <link rel="shortcut icon" href="../favicon.ico" />
    16     <link rel="stylesheet" type="text/css" href="../slitaz.css" />
    17     <link rel="Content" href="#content">
    18 </head>
    19 <body bgcolor="#ffffff">
    21 <!-- Header -->
    22 <div id="header">
    23     <a name="top"></a>
    24 <!-- Access -->
    25 <div id="access">
    26     Language:
    27     <a href="../en/artwork/" title="English Artwork page">English</a>
    28 </div>
    29     <a href="http://www.slitaz.org/"><img id="logo"
    30     src="../pics/website/logo.png" title="www.slitaz.org" alt="www.slitaz.org"
    31     style="border: 0px solid ; width: 200px; height: 74px;" /></a>
    32     <p id="titre">#!/GNU/Linux</p>
    33 </div>
    35 <!-- Navigation menu -->
    36 <div id="nav">
    37 <div id="nav_top"></div>
    38     <ul>
    39         <li><a href="../about/" title="Informations au sujet du projet SliTaz">A propos du projet</a></li>
    40         <li><a href="../get/" title="Téléchargements - LiveCD et sous projets">Obtenir SliTaz</a></li>
    41         <li><a href="../doc/" title="Handbook, Cookbook et manuels">Documentation</a></li>
    42         <li><a href="../packages/" title="Paquets logiciels disponibles">Paquets</a></li>
    43         <li><a href="../mailing-list.html" title="Support, contact et collaboration">Liste de discussion</a></li>
    44         <li><a href="../devel/" title="Le coin du développeur">Développement</a></li>
    45         <li><a href="../artwork/" title="Artwork, couleurs et images">Art & graphisme</a></li>
    46         <li><a href="../search.html" title="Rechercher des infos et/ou de la doc">Recherche</a></li>
    47         <li><a href="../sitemap.html" title="Vue globale du site web">Plan du site</a></li>
    48         <hr />
    49         <li><a href="http://forum.slitaz.org/" title="Forum d'aide et support">Forum de support</a></li>
    50         <li><a href="http://wiki.slitaz.org/" title="Wiki collaboratif">Ressources Wiki</a></li>
    51         <li><a href="http://wiki.slitaz.org/doku.php?id=bts:bts" title="Bug Tracking system">Suivi des Bugs</a></li>
    52     </ul>
    53 <div id="nav_bottom">
    54 <div id="nav_bottom_img"></div>
    55 </div>
    56 </div>
    58 <!-- Content top. -->
    59 <div id="content_top">
    60 <div class="top_left"></div>
    61 <div class="top_right"></div>
    62 </div>
    64 <!-- Content -->
    65 <div id="content">
    66 <a name="content"></a>
    68 <h1><font color="#3E1220">Artwork</font></h1>
    70 <h2><font color="#DF8F06">Art & graphisme</font></h2>
    72 <ul>
    73 	<li><a href="screenshots.html">Captures d'écrans.</a></li>
    74 	<li><a href="#art4taz">Artwork pour SliTaz.</a></li>
    75 	<li><a href="#logos">Logos, spider & icons.</a></li>
    76 	<li><a href="#wallpapers">Fond d'écrans.</a></li>
    77 </ul>
    79 <p>
    80 Cette partie du site web est déstinée à l'art et au graphisme en rapport et
    81 destiné à SliTaz. Les images sont libres, vous pouvez par exemple, les
    82 réutiliser pour réaliser votre propre fond d'écran ou afficher un logo sur
    83 votre site pour aider à populariser le projet. Les logos et icônes SliTaz sont
    84 disponibles en différentes tailles et directement téléchargeables via cette
    85 page et via <a href="../pics/artwork/">le répertoire artwork</a>. Vous
    86 trouverez aussi dans cette partie <em>artwork</em>, quelques
    87 <a href="screenshots.html">captures d'écrans</a> réalisées avec mtPaint ou The
    88 Gimp.
    89 </p>
    91 <a name="art4taz"></a>
    92 <h3>Artwork pour SliTaz</h3>
    93 <p>
    94 Comme beaucoup de choses avec SliTaz, les graphismes, logos, thèmes, ou fonds
    95 d'écrans, sont entièrement réalisés par la communauté et les développeurs. Le
    96 projet tient à proposer un graphisme élégant, sobre et de qualité. Réaliser
    97 un logo, un fond d'écran ou autre, est un bon moyen de participer au projet sans
    98 mettre les mains dans le code ou les relecture de document xHTML. Si vous avez
    99 envie de créer pour SliTaz ou si vous avez mis des oeuvres en ligne, il est
   100 vivement conseillé de nous le signaler via
   101 <a href="../mailing-list.html">la liste de discussion</a>. Mais attention à ne
   102 pas envoyer de trop gros fichiers sur la liste.
   103 </p>
   104 <h4>Artwork du LiveCD</h4>
   105 <p>
   106 Pour le fond d'écran du LiveCD, il y a des contraintes, l'image ne doit pas
   107 dépasser les 200 Ko. De plus il faut deux images identiques mais de taille
   108 différentes : une fois 1024x768 et une fois 1280x1024, cela est du au fait que
   109 le rapport des 3/4 n'est pas respecté par les écrans ayant 1280 pixel de
   110 largeur et résulte dans une déformation de l'image ou des bords noirs. Pour
   111 finir, chaque version propose un nouveau thème/fond d'écran qui doivent suivre
   112 la même ligne graphique et il va sans dire, que les outils de la distribution
   113 doivent être utilisés. Pour travailler en mode LiveCD vous avez mtPaint et
   114 avec un système installé vous avez the Gimp sur le miroir. A noter que le
   115 format libre PNG est privilégié.
   116 </p>
   118 <h3><font color="#6c0023">RGB colors</font></h3>
   119 <ul>
   120     <li>Beige-gris : <code>d4d191</code> et <code>bfb06b</code></li>
   121     <li>Bordeau : <code>6c0023</code> et <code>522222</code></li>
   122     <li>Gris : <code>242424</code> et <code>222222</code></li>
   123     <li>Orange : <code>df8f06</code></li>
   124     <li>Jaune : <code>f0ba08</code></li>
   125 </ul>
   127 <a name="logos"></a>
   128 <h3><font color="#6c0023">Logos, spider & icons</font></h3>
   129 <div>
   130 <p>
   131 SVG: <a href="../pics/artwork/slitaz-logo.svg">slitaz-logo.svg</a> |
   132 <a href="../pics/artwork/slitaz-spider.svg">slitaz-spider.svg</a>
   133 </p>
   134 <img
   135    src="../pics/artwork/slitaz-logo-whitebg-320x118.png"
   136    alt="SliTaz spider"
   137    style="width: 320px; height: 118px;" />
   138 <img
   139    src="../pics/artwork/slitaz-tux-124x126.png"
   140    alt="SliTaz Tux"
   141    style="width: 124px; height: 126px;" />
   142 <img
   143    src="../pics/artwork/powered-by-slitaz-orange-small.png"
   144    alt="SliTaz Powered"
   145    style="width: 65px; height: 104px;" />
   146 <img
   147    src="../pics/artwork/slitaz-spider-48x48.png"
   148    alt="SliTaz spider"
   149    style="width: 48px; height: 48px;" />
   150 <img
   151    src="../pics/artwork/tazpkg.png"
   152    alt="Tazpkg package logo"
   153    style="width: 32px; height: 32px;" />
   154 <img
   155    src="../pics/artwork/slitaz-minilogo-80x15.png"
   156    alt="SliTaz mini logo"
   157    style="width: 80px; height: 15px;" />
   158 </div>
   160 <a name="wallpapers"></a>
   161 <h3><font color="#6c0023">Wallpapers</font></h3>
   162 <p>
   163 <img
   164    src="../pics/wallpapers/slitaz-first-wallpaper-160x120.png"
   165    alt="SliTaz first wallpaper made with mtPaint"
   166    style="width: 160px; height: 120px;" />
   167 <a href="../pics/wallpapers/slitaz-first-wallpaper-1024x768.png">1024x768</a> -
   168 <a href="../pics/wallpapers/slitaz-first-wallpaper-1280x1024.png">1280x1024</a>
   169 (8 Ko) | mtPaint
   170 </p>
   172 <p>
   173 <img
   174    src="../pics/wallpapers/slitaz-green-wallpaper-160x120.png"
   175    alt="SliTaz green wallpaper"
   176    style="width: 160px; height: 120px;" />
   177 <a href="../pics/wallpapers/slitaz-green-wallpaper-1024x768.png">1024x768</a> -
   178 <a href="../pics/wallpapers/slitaz-green-wallpaper-1280x1024.png">1280x1024</a>
   179 | mtPaint
   180 </p>
   182 <p>
   183 <img
   184    src="../pics/wallpapers/slitaz-20071106-160x120.png"
   185    alt="SliTaz cooking 20071106 wallpaper"
   186    style="width: 160px; height: 120px;" />
   187 <a href="../pics/wallpapers/slitaz-20071106-1024x768.png">1024x768</a> -
   188 <a href="../pics/wallpapers/slitaz-20071106-1280x1024.png">1280x1024</a>
   189 | mtPaint
   190 </p>
   192 <p>
   193 <img
   194    src="../pics/wallpapers/slitaz-darkblue-160x120.png"
   195    alt="SliTaz cooking 20071106 wallpaper"
   196    style="width: 160px; height: 120px;" />
   197 <a href="../pics/wallpapers/slitaz-darkblue-1024x768.png">1024x768</a> -
   198 <a href="../pics/wallpapers/slitaz-darkblue-1280x1024.png">1280x1024</a>
   199 | Gimp
   200 </p>
   202 <p>
   203 <img
   204    src="../pics/wallpapers/slitaz-redyellow-160x120.png"
   205    alt="SliTaz cooking 20080107 wallpaper"
   206    style="width: 160px; height: 120px;" />
   207 <a href="../pics/wallpapers/slitaz-redyellow-1024x768.png">1024x768</a>
   208 | Gimp
   209 </p>
   211 <p>
   212 <img
   213    src="../pics/wallpapers/slitaz-choco-160x120.png"
   214    alt="SliTaz cooking 20080114 wallpaper"
   215    style="width: 160px; height: 120px;" />
   216 <a href="../pics/wallpapers/slitaz-choco-1024x768.png">1024x768</a> -
   217 <a href="../pics/wallpapers/slitaz-choco-1280x1024.png">1280x1024</a>
   218 | Gimp
   219 </p>
   221 <p>
   222 <img
   223    src="../pics/wallpapers/slitaz-tinycenterflame-160x120.png"
   224    alt="SliTaz cooking tiny flame wallpaper"
   225    style="width: 160px; height: 120px;" />
   226 <a href="../pics/wallpapers/slitaz-tinycenterflame-1024x768.png">1024x768</a>
   227 | Gimp
   228 </p>
   230 <h4>Community walls</h4>
   232 <p>
   233 <img
   234    src="../pics/wallpapers/community/slitaz-viking-160x120.png"
   235    alt="SliTaz wallpaper by Viking"
   236    style="width: 160px; height: 120px;" />
   237 <a href="../pics/wallpapers/community/slitaz-viking-1024x768.png">1024x768</a> -
   238 <a href="../pics/wallpapers/community/slitaz-viking-1280x1024.png">1280x1024</a>
   239 | Inkscape
   240 </p>
   242 <p>
   243 <img
   244    src="../pics/wallpapers/community/slitaz-sylver-160x120.png"
   245    alt="SliTaz sylver wallpaper by Erjo"
   246    style="width: 160px; height: 120px;" />
   247 <a href="../pics/wallpapers/community/slitaz-sylver-1024x768.png">1024x768</a> -
   248 <a href="../pics/wallpapers/community/slitaz-sylver-1280x1024.png">1280x1024</a>
   249 | Inkscape
   250 </p>
   252 <!-- End of content with round corner -->
   253 </div>
   254 <div id="content_bottom">
   255 <div class="bottom_left"></div>
   256 <div class="bottom_right"></div>
   257 </div>
   259 <!-- Start of footer and copy notice -->
   260 <div id="copy">
   261 <p>
   262 Dernière modification : 2008-06-12 12:00:00 -
   263 <a href="#top">Haut de la page</a>
   264 </p>
   265 <p>
   266 Copyright © 2008 <a href="http://www.slitaz.org/">SliTaz</a> -
   267 <a href="http://www.gnu.org/licenses/gpl.html">GNU General Public License</a>
   268 </p>
   269 <!-- End of copy -->
   270 </div>
   272 <!-- Bottom and logo's -->
   273 <div id="bottom">
   274 <p>
   275 <a href="http://validator.w3.org/check?uri=referer"><img
   276    src="../pics/website/xhtml10.png" alt="Valid XHTML 1.0"
   277    title="Code validé XHTML 1.0"
   278    style="width: 80px; height: 15px;" /></a>
   279 </p>
   280 </div>
   282 </body>
   283 </html>