CATALOGUE Design et Infographie Formation Photoshop Apprendre Photoshop CC pour le Web Création de Rollovers Optimisés avec CSS

Création de Rollovers Optimisés avec CSS

Organiser le document pour un rollOver CSS
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre Photoshop CC pour le Web
Revoir le teaser Je m'abonne
Transcription
59,90€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
59,90€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Introduction à la Technique de Rollover

Objectifs

Les objectifs de cette vidéo sont :

  • Comprendre le principe des rollovers
  • Apprendre à utiliser le CSS pour créer des effets rollover
  • Maîtriser les techniques de design de boutons sous Photoshop
  • Optimiser l'intégration des images pour le web

Résumé

Cette leçon explique comment créer des rollovers d'image optimisés en utilisant CSS. Vous apprendrez également à concevoir des boutons avec Photoshop pour vos projets web.

Description

Dans cette leçon, nous allons explorer la création de rollovers d'image en utilisant le CSS, ce qui permet de rendre vos pages web plus interactives et engageantes. Nous commencerons par comprendre le principe de base des rollovers, puis nous passerons à l'utilisation de CSS pour gérer ces effets efficacement. Vous apprendrez également comment créer des boutons en utilisant Photoshop en plusieurs étapes :

  • Utilisation des formes rectangulaires à coins arrondis
  • Application de filtres, contours, et dégradés
  • Duplication des calques pour différents états du bouton
  • Exportation de l'image finale au format PNG pour une intégration parfaite dans votre projet web

Cette méthodologie permet de créer des effets rollover qui sont compatibles avec tous les navigateurs et offre une expérience utilisateur cohérente sur différentes plateformes. Dans le cadre de cette leçon, nous veillerons particulièrement à l'optimisation pour la performance et l'apparence visuelle.

Voir plus

Questions - réponses

Quels sont les avantages d'utiliser le CSS pour les rollovers par rapport au JavaScript ?
Le CSS permet une exécution plus fluide et évite les problèmes de chargement d'images, tout en assurant une meilleure compatibilité entre navigateurs.
Pourquoi est-il important de précharger les images lors de l'utilisation de JavaScript pour les rollovers ?
Le préchargement des images évite une latence au moment où l'utilisateur survole l'image, ce qui améliore l'expérience utilisateur.
Quels formats de fichier sont recommandés pour l'exportation des images avec transparence pour les rollovers ?
Le format PNG 24 est recommandé car il préserve la transparence sans introduire d'artefacts de compression comme le GIF.

Programme détaillé