| Accueil | Tutoriels | Forum | Chat | Liens | FAQ | Contact |
Affiché 25740 fois - difficulté : 
Un tutorial expliquant la conception d'un bouton classique, et très simple. Tutorial abordable par tous !
Source : http://www.teknopole.com
Tutorial :
| Créez un nouveau document de taille 400*200 pixels, avec un fond blanc. Créez un nouveau calque (cltr + maj + N). Puis, faites une sélection rectangulaire, prenant toute la largeur de votre document et d'une hauteur de 22 pixels. Remplissez alors la sélection de noir avec le pot de peinture, puis déselectionnez (ctrl + D) | - Illustration - |
| ---------------------------------------------------------------------------------------- | |
| Faites ensuite edition > transformation (ctrl + T) Puis, élargissez votre rectangle, en déplaçant les ancres sur les cotés vers l'extérieur. | - Illustration - |
| ---------------------------------------------------------------------------------------- | |
| Ouvrez alors les options de fusions, et commencez par ajoutez un effet biseautage et estampage. Commencez par diminuer la taille de l'effet à 0 pixel. Puis, augmentez l'opacité des tons clairs à 100% et diminuez celle des tons foncés à 29%. | - Illustration - |
| ---------------------------------------------------------------------------------------- | |
| Ajoutez ensuite une incrustation en dégradé. Réglez l'angle de provenance à 90°. Puis cliquez sur le dégradé, une fenêtre supplémentaire s'ouvre, et réglez alors les couleurs de blanc (#ffffff) à marron clair (#d0cfc3) | - Illustration - |
| ---------------------------------------------------------------------------------------- | |
| Ajoutez ensuite un contour de couleur gris (#999999), à l'extérieur et de taille 1 pixel. | - Illustration - |
| ---------------------------------------------------------------------------------------- | |
| Travaillant sur un fond blanc, ajoutez ensuite une ombre portée, pour laquelle vous diminuerez la distance à 0 pixel. Cet effet n'est pas forcément necessaire, tout dépend de la façon dont vous désirez "incruster" votre barre dans votre design. | - Illustration - |
| ---------------------------------------------------------------------------------------- | |
| Finalement, voici ce que vous obtenez : | - Illustration - |
| ---------------------------------------------------------------------------------------- | |
| Ajoutez ensuite votre texte. Pour ma part, j'ai utilisé la police hooge 05_54, de taille 8 pixels, sans lissage. Ce qui donne alors ceci : | - Illustration - |
| ---------------------------------------------------------------------------------------- | |
| Ajoutez ensuite des "séparatrices". Créez tout d'abord un nouveau calque (ctrl + maj + N) Prenez l'outil crayon, et tracez deux traits, un de couleur gris (#999999) à gauche, et un blanc (#ffffff) à droite. Pour de plus amples informations, interessez vous au tutorial "jonction de plaques metalliques" | - Illustration - |
| ---------------------------------------------------------------------------------------- | |
| Voici alors ce que vous avez. | - Illustration - |
| ---------------------------------------------------------------------------------------- | |
| Pour finir, dupliquez vos "séparatrices" (calque > dupliquez le calque) et placez en à coté de chaque lien. Voici alors votre barre, fin prête à être utilisée. | - Illustration - |
Variante :
| Une légère variante consiste à ne pas réaliser une barre, mais des boutons. La seule différence, est qu'au lieu de réaliser un grand rectangle, vous en réalisez plusieurs petits. Les effets sont exactement les mêmes, et cela vous permet d'obtenir le résultat suivant : | - Illustration - |
23 commentaires postés sur ce tutorial
----------------------------------------------------------------------------------------
JFK le 10/9/2007
Simple, rapide, joli et efficace !!
Que dire de mieux ?
Merci !!!!
----------------------------------------------------------------------------------------
Zippo le 24/9/2007
Merci pour ce tuto très simple et très compréhensif, j'ai pu aisément adapter le menu à mon site en faisant quelques variante encore merci ;)
----------------------------------------------------------------------------------------
Jaylock le 24/3/2008
j'ai pu réussir, en tant que débutant, très facilement à réaliser ce tuto. Très clair et très bien expliquer, merci !
----------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------
Poster un commentaire :