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 Fri, 10 Feb 2012 11:44:38 +0100 http://creativecommons.org/licenses/by-nd/2.0/fr/ http://blogs.law.harvard.edu/tech/rss Dotclear http://www.titaxium.com/post/2008/05/17/%5BDocumentation%5D-Creer-un-bouton-Glossy-sous-Photoshop urn:md5:ac27a2bcfbf12f8ae55a76a3a7d2e68a Sat, 17 May 2008 02:00:00 +0200 TitaX Documentation brillantdocumentationglossygraphismephotoshop <p><img src="http://www.titaxium.com/public/documentation/Graphisme/glossy.png" alt="glossy.png" style="float:left; margin: 0 1em 1em 0;" /> <strong>N</strong>os créations sont souvent sublimées par un petit rien, une petite touche, un joli effet.<br /> L'utilisation d'un effet brillant (souvent nommé glossy) sur un bouton donne cette petite touche qui fait que votre interface sera belle et remarquable !<br /> Je l'utilise souvent sur <a href="http://www.titaxium.com" hreflang="fr" title="communauté graphique et de développement">TitaXium</a> pour les boutons ou pour les menus, cet effet est devenu très à la mode avec les designs web2.0.</p> <p>Nous allons voir comment réaliser en quelques minutes cet effet glossy, cette documentation s'adresse à toutes les personnes désireuses de réaliser de belles interfaces web par exemple, du débutant à l'expert.</p> <h3>Création du fond du bouton</h3> <p>Commençons donc par créer une nouvelle image (CTRL+N) de la taille que vous désirez et remplissez-le avec la couleur blanche.</p> <p><a href="http://www.titaxium.com/public/documentation/Graphisme/tuto_glossy1.png"><img src="http://www.titaxium.com/public/documentation/Graphisme/.tuto_glossy1_s.jpg" alt="tuto_glossy1.png" /></a></p> <p>Nous allons créer un rectangle aux bords arrondis grâce à l'outil "<em>Rectangle Arrondi</em>" avec un rayon de 5px de la couleur que vous souhaitez.</p> <p><a href="http://www.titaxium.com/public/documentation/Graphisme/tuto_glossy2.png"><img src="http://www.titaxium.com/public/documentation/Graphisme/.tuto_glossy2_s.jpg" alt="tuto_glossy2.png" /></a></p> <p>Agrémentons le fond de notre bouton avec une petite ombre portée avec les options ci-dessous (vous pouvez adapter en fonction de vos besoins/gouts)&nbsp;:</p> <p><a href="http://www.titaxium.com/public/documentation/Graphisme/tuto_glossy3.png"><img src="http://www.titaxium.com/public/documentation/Graphisme/.tuto_glossy3_s.jpg" alt="tuto_glossy3.png" /></a></p> <h3>Création de l'effet glossy</h3> <p>Nous allons créer un nouveau calque et le nommer glossy puis sélectionner un rectangle autour de notre fond comme ci-dessous&nbsp;:</p> <p><img src="http://www.titaxium.com/public/documentation/Graphisme/tuto_glossy4.png" alt="tuto_glossy4.png" /></p> <p>Puis le remplir avec un dégradé un peu plus clair que votre couleur de fond afin de réaliser l'effet de brillance.</p> <p><img src="http://www.titaxium.com/public/documentation/Graphisme/tuto_glossy5.png" alt="tuto_glossy5.png" /></p> <p>Reprenons ensuite la sélection de notre fond en cliquant dans votre liste de calques sur votre forme en appuyant simultanément sur <em>CTRL</em>.</p> <p><img src="http://www.titaxium.com/public/documentation/Graphisme/tuto_glossy6.png" alt="tuto_glossy6.png" /></p> <p>Une fois notre sélection récupérée, il faudra la contracter de 2 px (<em>sélection &gt; modifier &gt; contracter</em>) puis l'intervertir (<em>Maj+CTRL+I</em>).<br /> Ensuite nous allons supprimer sur le calque "glossy" tout se qui appartient à cette sélection&nbsp;:</p> <p><img src="http://www.titaxium.com/public/documentation/Graphisme/tuto_glossy7.png" alt="tuto_glossy7.png" /></p> <p>Continuons maintenant en modifiant un peu la forme de notre effet brillant pour le rendre plus rond sur le bas.<br /> Nous allons donc transformer le calque "glossy" (<em>CTRL+T</em>) puis le déformer (<em>édition &gt; transformation &gt; déformation</em>) pour le rendre rond sur le bas.<br /> N'hésitez pas à zoomer pour être encore plus précis.</p> <p><img src="http://www.titaxium.com/public/documentation/Graphisme/tuto_glossy8.png" alt="tuto_glossy8.png" /> <a href="http://www.titaxium.com/public/documentation/Graphisme/tuto_glossy9.png"><img src="http://www.titaxium.com/public/documentation/Graphisme/.tuto_glossy9_s.jpg" alt="tuto_glossy9.png" /></a></p> <p>Enfin pour peaufiner notre bouton nous allons ajouter un petit trait blanc sur le contour haut du fond du bouton pour donner une certaine profondeur.<br /> Nous ajoutons donc un contour dans <em>options de fusion</em> du calque "glossy" avec les options ci-dessous ( à adapter en fonction de vos besoins bien sûr)</p> <p><a href="http://www.titaxium.com/public/documentation/Graphisme/tuto_glossy010.png"><img src="http://www.titaxium.com/public/documentation/Graphisme/.tuto_glossy010_s.jpg" alt="tuto_glossy010.png" /></a></p> <p>Et voilà notre bouton est terminé, il nous vous reste plus qu'à ajouter votre texte.</p> <p><img src="http://www.titaxium.com/public/documentation/Graphisme/glossy.png" alt="glossy.png" /></p> <p>Vous pouvez <a href="http://www.titaxium.com/public/documentation/Graphisme/glossy.psd" hreflang="fr">télécharger</a> le fichier source de notre exemple au format .PSD</p> <p><a href="http://www.titaxium.com/public/documentation/Graphisme/glossy.psd" hreflang="fr"><img src="http://www.titaxium.com/public/documentation/Graphisme/psd.png" alt="psd.png" /></a></p> <p>Bien sûr vous l'aurez remarqué il y a plusieurs façons de réaliser cet effet et chaque option est modifiable afin de coller au mieux à l'effet final désiré.<br /> Bon courage à tous <img src="/themes/titaxium/smilies/smile.png" alt=":)" class="smiley" /></p> <p>TitaX</p> http://www.titaxium.com/post/2008/05/17/%5BDocumentation%5D-Creer-un-bouton-Glossy-sous-Photoshop#comment-form http://www.titaxium.com/post/2008/05/17/%5BDocumentation%5D-Creer-un-bouton-Glossy-sous-Photoshop#comment-form http://www.titaxium.com/feed/atom/comments/139