http://www.titaxium.com/ TitaXium est une communauté de bénévoles désirant partager leurs connaissances et leurs compétences en apportant un service de création, d'optimisation et de conseil autour de tout ce qui touche l'Internet. Elle a pour objectif une meilleure répartition des connaissances en matière de Webdesign et de développement d'applications, partant du principe que le partage permettra une amélioration de notre navigation sur Internet. fr Thu, 28 Aug 2008 17:30:56 +0200 http://creativecommons.org/licenses/by-nd/2.0/fr/ http://blogs.law.harvard.edu/tech/rss Dotclear http://www.titaxium.com/post/2008/05/11/%5BDocumentation%5D-Realiser-une-interface-web-sous-Photoshop urn:md5:eb98b7954a8c2baae91751490d9d500b Mon, 12 May 2008 09:00:00 +0200 TitaX Documentation documentationgraphismeinterfacephotoshopsite webweb <p><img src="http://www.titaxium.com/public/documentation/Graphisme/tuto_interface0.jpg" alt="tuto_interface0.jpg" style="float:left; margin: 0 1em 1em 0;" /> <strong>L</strong>a création d'interface graphique pour un site web est souvent un exercice difficile dans lequel il faut maitriser beaucoup d'outils spécifiques à Photoshop mais aussi avoir une vision précise de l'interface de nous voulons créer afin de faciliter son intégration pour le futur développeur qui devra s'occuper du découpage de l'interface.</p> <p>Plusieurs facteurs sont donc à prendre en compte aussi bien sur l'harmonie des couleurs, la disposition des blocs mais aussi la faisabilité de la découpe de votre futur interface, nous allons vous présenter comment réaliser une interface simple, facile à découper et qui pourtant répondra à la majorité des cahiers des charges de vos demandes en interface graphique de site web.</p> <p>Cette documentation tout d'abord au débutant mais pourra aussi convenir aux utilisateurs de Photoshop plus aguerri.</p> <p>Pour cette documentation nous aurons tout d'abord besoin de ces deux images qui seront utilisées pour le haut de l'interface (<em>header</em>) et le bas de l'interface (<em>footer</em>)&nbsp;:</p> <p><a href="http://www.titaxium.com/public/documentation/Graphisme/tuto_interface1.jpg"><img src="http://www.titaxium.com/public/documentation/Graphisme/.tuto_interface1_sq.jpg" alt="tuto_interface1.jpg" /></a> <a href="http://www.titaxium.com/public/documentation/Graphisme/tuto_interface2.jpg"><img src="http://www.titaxium.com/public/documentation/Graphisme/.tuto_interface2_sq.jpg" alt="tuto_interface2.jpg" /></a></p> <p>Créez un nouveau document de 1000*600 pixels et remplissez le en blanc.</p> <p>Créez un nouveau calque "motif" et remplissez le avec ce motif&nbsp;:</p> <p><img src="http://www.titaxium.com/public/documentation/Graphisme/tuto_interface3.jpg" alt="tuto_interface3.jpg" /></p> <p>Vous devez donc avoir deux calques comme ceci&nbsp;:</p> <p><img src="http://www.titaxium.com/public/documentation/Graphisme/tuto_interface4.jpg" alt="tuto_interface4.jpg" /></p> <p>Créez un nouveau calque, que vous appellerez "body" (au dessus du calque "motif").<br /> Sur le calque "body", faire une sélection rectangulaire (M) de 692px de largeur et 600px de hauteur. Remplissez la sélection de blanc.<br /> Cliquez droit sur le calque "body" puis Option de fusion et ajouter une ombre portée de 36% d'opacité, distance 0, grossi 0, taille 6, d'un angle 90°.<br /> Puis valider&nbsp;!</p> <p><img src="http://www.titaxium.com/public/documentation/Graphisme/tuto_interface5.jpg" alt="tuto_interface5.jpg" /></p> <p><a href="http://www.titaxium.com/public/documentation/Graphisme/tuto_interface6.jpg"><img src="http://www.titaxium.com/public/documentation/Graphisme/.tuto_interface6_s.jpg" alt="tuto_interface6.jpg" /></a></p> <p>Créez un nouveau calque "header", insérez l'image "header" et mettez celui-ci en haut du calque "body".</p> <p><a href="http://www.titaxium.com/public/documentation/Graphisme/tuto_interface7.jpg"><img src="http://www.titaxium.com/public/documentation/Graphisme/.tuto_interface7_m.jpg" alt="tuto_interface7.jpg" /></a></p> <p>Créez un nouveau calque "dégradé". Faire une sélection, remplissez de blanc puis aller dans les options de fusion et mettez les mêmes valeurs que sur l'image ci-dessous&nbsp;:</p> <p><a href="http://www.titaxium.com/public/documentation/Graphisme/tuto_interface8.jpg"><img src="http://www.titaxium.com/public/documentation/Graphisme/.tuto_interface8_s.jpg" alt="tuto_interface8.jpg" /></a></p> <p>Pareil pour l'ombre portée&nbsp;:</p> <p><a href="http://www.titaxium.com/public/documentation/Graphisme/tuto_interface9.jpg"><img src="http://www.titaxium.com/public/documentation/Graphisme/.tuto_interface9_s.jpg" alt="tuto_interface9.jpg" /></a></p> <p>Dupliquez le calque "dégradé" puis mettez le en bas du design.<br /> Importez l'image "footer" et mettez là en dessous du calque "dégradé copie".</p> <p><a href="http://www.titaxium.com/public/documentation/Graphisme/tuto_interface10.jpg"><img src="http://www.titaxium.com/public/documentation/Graphisme/.tuto_interface10_m.jpg" alt="tuto_interface10.jpg" /></a></p> <p>Et voilà, le design est enfin prêt à être découpé&nbsp;!</p> <p><a href="http://www.titaxium.com/public/documentation/Graphisme/tuto_interface11.jpg"><img src="http://www.titaxium.com/public/documentation/Graphisme/.tuto_interface11_m.jpg" alt="tuto_interface11.jpg" /></a></p> <p>A vous de jouer maintenant, vous avez toutes les cartes entre les mains <img src="/themes/titaxium/smilies/smile.png" alt=":)" class="smiley" /></p> <p><em>(Merci à <a href="http://www.titaxium.com/forum/index.php?showuser=2228" hreflang="fr">Freak.</a> pour la rédaction de cette documentation)</em></p> http://www.titaxium.com/post/2008/05/11/%5BDocumentation%5D-Realiser-une-interface-web-sous-Photoshop#comment-form http://www.titaxium.com/post/2008/05/11/%5BDocumentation%5D-Realiser-une-interface-web-sous-Photoshop#comment-form http://www.titaxium.com/feed/rss2/comments/136