Générer du CSS à partir des calques

Dernière mise à jour le 29 oct. 2026

Apprenez à extraire le code CSS des calques de forme et de texte pour convertir les propriétés de conception en feuilles de style prêtes pour le web dans Adobe Photoshop.

La fonctionnalité Copier le CSS génère directement des propriétés CSS à partir des calques Photoshop, en capturant les spécifications de conception que vous pouvez coller dans vos fichiers de feuille de style.Ce workflow fait le lien entre le design visuel et la mise en œuvre du code, en particulier lors de la préparation des asset pour les projets web ou de la collaboration avec les développeurs et avec les développeuses qui ont besoin de spécifications de style précises.

Servez-vous de Copier le CSS lorsque vous devez traduire des éléments de design visuel en déclarations de style prêtes pour le code.Cette fonctionnalité fonctionne avec des calques de forme individuels, des calques de texte ou des groupes de calques contenant ces éléments. Elle génère du CSS que vous pouvez coller directement dans votre feuille de style, en capturant les propriétés de design avec une précision parfaite au pixel près.Pour des workflows de design vers le web plus larges, découvrez les effets et styles de calque pour bénéficier d’options de style supplémentaires et l’exportation des asset pour d’autres formats de sortie.

Propriétés CSS capturées à partir des calques

Copier le CSS extrait différentes propriétés selon le type de calque sélectionné.

Les calques de forme génèrent du CSS pour :

  • Coordonnées de taille et de position
  • Couleur du contour
  • Couleur de fond, y compris les définitions de dégradé
  • Effets d’Ombre portée

Les calques de texte capturent les propriétés de forme ainsi que les spécifications de Typographie :

  • Famille de polices
  • Taille et épaisseur de police
  • Hauteur de ligne
  • Décoration du texte (soulignement, barré)
  • Alignement vertical (exposant, indice)
  • Alignement du texte

Les groupes de calques créent des classes CSS structurées représentant les relations parent-enfant.Le groupe lui-même devient un div parent, tandis que chaque calque du groupe génère un div enfant.Les valeurs de position top et left des éléments enfants sont calculées par rapport au conteneur parent, reproduisant le comportement standard de positionnement CSS.

Limites de Copier le CSS

Copier le CSS ne fonctionne pas avec les objets dynamiques. Si votre calque est un objet dynamique, double-cliquez pour modifier son contenu et copier le CSS à partir des calques du document d’objet dynamique, ou rasterisez d’abord le calque si cela convient à votre workflow.

La fonctionnalité ne peut pas traiter plusieurs calques de forme ou de texte sélectionnés simultanément, sauf s’ils sont regroupés. Pour copier le CSS de plusieurs calques à la fois, placez-les d’abord dans un groupe de calques.

Générer le code CSS à partir des calques

Dans le panneau Calques, cliquez avec le bouton droit sur un calque de forme, un calque de texte ou un groupe de calques, puis sélectionnez Copier le CSS dans le menu contextuel. Vous pouvez également sélectionner le calque, puis sélectionner Copier le CSS dans le menu du panneau Calques.

Ouvrez votre document de feuille de style et collez le code généré à l’aide des touches Ctrl + V (Windows) ou Commande + V (macOS).

Le code CSS se trouve maintenant dans le presse-papiers et est prêt à être intégré dans le projet web. Vérifiez les propriétés générées pour vous assurer qu’elles répondent aux exigences de développement, et ajustez les valeurs selon les besoins pour un rendu en responsive design ou la compatibilité des navigateurs.