CATALOGUE Design et Infographie Formation Photoshop Apprendre Photoshop CC pour le Web - Photoshop orienté Web et mobile

Création de Rollovers Optimisés avec CSS

Retour à la formation
Chapitre 9 Leçon 1
Précédent
Suivant

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.

Détails de la leçon

Description de la leçon

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.

Objectifs de cette leçon

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

Prérequis pour cette leçon

Pour suivre cette vidéo, vous devez avoir des notions de base en :

  • HTML
  • CSS
  • JavaScript (optionnel)
  • Utilisation de Photoshop

Métiers concernés

Les compétences développées dans cette leçon peuvent être appliquées dans les métiers et professions suivants :

  • Développeur Front-End
  • Web Designer
  • Intégrateur Web
  • UI/UX Designer

Alternatives et ressources

En plus de Photoshop, vous pouvez utiliser des logiciels tels que :

  • GIMP
  • Adobe Illustrator
  • Sketch
  • Figma

Questions & Réponses

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.
Le préchargement des images évite une latence au moment où l'utilisateur survole l'image, ce qui améliore l'expérience utilisateur.
Le format PNG 24 est recommandé car il préserve la transparence sans introduire d'artefacts de compression comme le GIF.