Cet article a été publié sur le site graphuccino.com
Trouver des effets de rollover originaux à appliquer sur les boutons lorsqu’on s’occupe d’un webdesign n’est pas toujours chose facile.
Je trouve personnellement que l’effet utilisé dans Firefox est particulièrement réussi. Bien sûr, il ne conviendra pas à tout les types de webdesign, mais avec quelques modifications, il pourra sûrement vous être très utile un jour.
Voyons donc comment reproduire cet effet sous Photoshop en y ajoutant quelques modifications.
Étape 1 : créer les bases du bouton
Cette étape dépendra partiellement de votre webdesign, et du rendu final que vous souhaitez. Ici, vous devrez simplement dessiner sous Photoshop votre bouton tel que vous le souhaitez. Dans notre exemple, nous partirons du principe que le bouton sera un texte « Acheter ce produit » sur un fond de dégradé gris.
Il est conseillé pour ce tutoriel que le fond de votre bouton soit un dégradé !
Voici comment créer les bases du bouton utilisé dans notre exemple :
Créez un nouveau document Photoshop de 320px par 100px. Notre bouton ne fera que 50px de hauteur, mais nous anticipons l’étape d’intégration html/css lors de laquelle il sera plus efficace d’avoir les 2 états de notre boutons (état normal et état de survol) sur une seule image.
Création d'un nouveau document Photoshop
Nous allons dès maintenant placer un repère au milieu de notre document pour séparer les 2 zones des 2 différents états du bouton. Si cela n’est pas déjà fait, affichez les règles de Photoshop (ctrl-r ou pomme-r ou « affichage > règles »). Une fois les règles affichées, cliquez sur la règle horizontale, et faites glisser votre souris au centre de votre document, à 50px. Un repère doit maintenant apparaître au centre de votre document.
Placement des repères sur notre document Photoshop
Utilisez l’outil « rectangle de sélection » de Photoshop (touche « m ») pour sélectionner toute la zone qui se situe au dessus de notre repère. Remplissez cette zone de la couleur de votre bouton (dans notre exemple : #514c48). Double cliquez sur le calque pour ouvrir la fenêtre de style. Cliquez sur « Incrustation en dégradé », choisissez « incrustation » comme mode de fusion du dégradé, définissez une opacité de 65%, et sélectionnez un simple dégradé allant du noir au blanc.
Les bases de notre bouton
Toujours dans la fenêtre de style de calque, on va ensuite ajouter un contour à notre bouton. Pour cela, sélectionnez l’onglet « contour », choisissez une taille de 1px, une position intérieure, et cette couleur : #918d89. Cliquez maintenant sur « Ok » pour confirmer tous vos réglages.
Il faut maintenant dupliquer le calque du bouton (ctrl-j ou pomme-j). Sélectionnez ce nouveau calque, et choisissez une opacité du fond de 0% (attention de bien modifier l’opacité du fond et pas l’opacité générale du calque !).
Passage de l'opacité du fond du calque à zéro
En ne passant que l’opacité du fond à 0%, on va pouvoir continuer à afficher les styles que nous appliquerons à notre calque sans que le fond soit pour autant affiché. Ouvrez justement la fenêtre du style du calque. Les paramètres que nous avons précédemment appliqué sont conservés. Rendez-vous dans l’onglet de réglage « Incrustation en dégradé » et changez le mode de fusion de l’effet en « Incrustation ». Vous pouvez également supprimer l’effet de contour appliqué à ce calque.
Le changement du mode de fusion du dégradé du second calque
Sélectionnez maintenant l’outil texte ( »t »). Tapez le texte de votre bouton sur un nouveau calque. Choisissez une couleur de texte de #c3c0be. Essayez de bien centrer votre texte dans le calque du bouton grâce aux repères, et tachez de laisser beaucoup de vide autour du texte. On va également ajouter une petite ombre portée à notre texte grâce aux styles de calque (couleur noire en mode produit, opacité de 88%, distance 0, grossi 0, taille 2).
Le texte de notre bouton
Voilà , nous venons de créer notre bouton tel qu’il sera affiché au repos, sans survol. Nous allons maintenant entrer dans le coeur du sujet en ajoutant un effet de rollover sympa.
Étape 2 : l’effet au survol
La première chose à faire est de grouper tous les calques qui composent notre bouton : le fond, le dégradé, et le texte. Nommez ce groupe « bouton repos » par exemple. Dupliquez le groupe (clic droit sur le groupe dans la fenêtre des calques et « Dupliquer le groupe »). Nommez ce nouveau groupe « bouton survol ».
Nous allons maintenant pouvoir utiliser la moitié inférieure de notre document (la zone sous le repère que nous avions placé) pour créer le visuel au survol. Déplacez précisément le groupe « bouton survol » pour qu’il remplisse parfaitement la moitié inférieure du document.
Les 2 groupes de calques identiques avant l'application de l'effet
Nous allons commencer l’effet de rollover en modifiant légèrement la couleur de notre texte. Assurez vous de bien être dans le groupe « bouton survol » et modifiez le calque du texte « Acheter ce produit » pour lui donner la couleur #c3c0be.
Créez maintenant un nouveau calque sous le calque de texte. Utilisez l’outil « Rectangle arrondi » de Photoshop ( »u » ou alors « shift-u » jusqu’à sélectionner le bon outil). Dans la barre de réglages de l’outil du haut, choisissez « Pixels de remplissage » et un rayon de 10px. Utilisez n’importe quelle couleur de 1er plan (de préférence une qui se démarquera du fond pour vous faciliter la tâche) et tracez un rectangle qui entoure totalement le texte du bouton.
Le rectangle arrondi sous le texte
Double cliquez désormais sur le calque du rectangle arrondi pour ouvrir la fenêtre de style de calque. Dans l’onglet « Options de fusion personnalisées », mettez une opacité de fond à 0%.
On commence par passer l'opacité de fond du calque à 0%
Ajoutez une « Ombre interne » de couleur noir, d’une opacité de 75%, et à une distance nulle.
On ajoute une ombre interne à notre calque
On ajoute maintenant une « Incrustation en dégradé » : choisissez un mode de fusion « Incrustation », une opacité de 65%, et un dégradé allant du blanc au noir en inversé.
Le dégradé que l'on ajoute à notre rectangle est le même que celui du fond en inversé
Les bases de notre effet commencent à se dessiner… mais le dégradé n’est pas assez prononcé. On va donc dupliquer le calque du rectangle arrondi et masquer l’effet d’ombre interne. Notre dégradé est désormais plus intense.
Le dégradé est désormais plus intense
Le fond de notre effet semble en place, il ne nous reste plus qu’à y ajouter un contour réaliste !
Dupliquez à son tour le calque rectangle que vous venez de créer. Double cliquez sur ce nouveau calque pour ouvrir la fenêtre des styles de calque et décochez tous les effets. rendez-vous dans l’onglet « Contour », et ajoutez un contour de taille égale à 1, de la couleur la plus claire de notre dégradé (ici #6d6660). Validez, créez un nouveau calque et placez le sous le calque de contour clair. Sélectionnez de nouveau le calque de contour clair, et écrasez le sur le calque vide que vous venez de créer (ctrl-e ou pomme-e). Le contour entoure pour l’instant la totalité de notre rectangle mais ce n’est pas tout à fait ce que nous voulons. On va donc créer un masque sur notre calque de contour.
Assurez vous que le calque du contour soit bien sélectionné. Ajoutez un masque vectoriel (en bas de la fenêtre de calques ou « Calque > Masque vectoriel > Tout apparaître »). Sélectionnez le masque vectoriel qui vient d’être crée, et ajoutez un dégradé linéaire qui va du noir au transparent en partant du haut de notre rectangle et en s’arrêtant au bas de ce rectangle de manière à ne laissez apparaître que la partie inférieure de notre contour.
Notre contour clair recouvre seulement la partie inférieure du rectangle
Pour finir, il faut répéter l’étape de création du contour clair, mais en choisissant cette fois une couleur de contour sombre, et un dégradé pour le masque du contour inversé par rapport à celui que nous venons de réaliser.
Voici le résultat final de notre effet de rollover
Notre bouton avec ces 2 états (normal en haut et survolé en bas) est prêt, il n’attend plus qu’à être intégré !
