article(s) dans votre panier VOIR

Organiser le document pour un rollOver CSS sur Photoshop CC

  • Vidéo 34 sur 81
  • 6h09 de formation
  • 81 leçons

Un contenu flash devrait s'afficher ici. Votre navigateur ne comporte pas de plugin flash, ou il ne s'est pas correctement initialisé.

Vous pouvez télécharger le plugin flash depuis le site d'Adobe à l'adresse suivante : http://get.adobe.com/flashplayer/.

Pour accéder à la suite de cette formation, vous devez vous abonner.
previous
summary
resume
next
play
Organiser le document pour un rollOver CSS
00:00 / 10:17
HD
fullscreen
Je m’abonne
à partir de 16,6 € / mois
  • Visionnage en ligne
  • Accès illimité à toutes nos formations
OU
J'achète uniquement
la formation
49,90€
  • Téléchargement + VOD à vie
  • Exercice / Validation des acquis
  • Accès uniquement à cette formation

Sommaire de la formation

Détails de la formation

Dans ce tuto Photoshop, le formateur va nous apprendre à créer un rollOver.

Ce dernier est une image qui réagit lorsque le curseur passe au-dessus de lui. Un roll-over n'est donc disponible que sur les écrans non-tactiles. Mais il réagit également lorsque l'on appuie dessus, donc ici disponible pour les écrans tactiles. Un roll-over peut être fait à partir d'un Java Script mais qui n'est pas bien optimisé car elle pré-charge l'image avant que l'action soit effectuée.

De plus, certain navigateur bloquent les roll-over des navigateurs. Pour créer un roll-over, il est plus intéressant d'utiliser le CSS. On va devoir créer une image possédant les trois états des boutons, un sans action, un qui s'affiche au survol et le dernier qui s'active lorsqu'on clique dessus grâce à la feuille de style CSS. On va commencer par créer un nouveau document dans Photoshop pour créer un bouton. Le document fera 200x40px sur un fond blanc. On va d'abord créer la forme du bouton avec le rectangle arrondi. On rajoute un contour ainsi qu'un dégradé. On rajoute un texte sur le bouton comme ''accueil'' par exemple qui n'est présent que pour aider dans la création de la maquette, le texte sera ensuite ajouté en HTML. Pour créer les autres états du bouton, le formateur place un repère à droite de l'image pour délimiter la zone du premier état.

Nous allons maintenant redimensionner le document avec l'outil de recadrage. Pour créer une symétrie lors du recadrage, vous avez juste à sélectionner le format de l'image et déplacer cette sélection vers la droite et ensuite l'agrandir vers la gauche. On place un repère et de la même manière ont créé la dernière partie. Nous dupliquons maintenant les boutons pour créer les états. On modifie ensuite le style graphique des boutons.