Convertir PSD en CSS

Une maquette Photoshop doit être transformée en interface de navigateur lorsqu’un designer remet un fichier .psd avec calques à un développeur web. Le résultat n’est pas un autre format d’image : il s’agit de HTML mis en forme avec une feuille de style .css, ainsi que d’éléments graphiques image ou vectoriels exportés lorsque cela est nécessaire.

Qu’est-ce que le format PSD ?

PSD est le format natif d’image matricielle avec calques d’Adobe Photoshop. Il peut stocker des calques de pixels, du texte modifiable, des formes vectorielles, des masques, des calques de réglage, des repères, des effets de calque, des objets dynamiques et d’autres données de modification dans un même document.

Les photographes, illustrateurs, graphistes, designers UI et agences web utilisent les fichiers PSD pour les compositions modifiables, les maquettes d’interface, les créations publicitaires et les mises en page destinées à l’impression. Un PSD peut représenter une page complète ou un écran d’application, mais il ne définit ni la structure HTML, ni la signification sémantique, ni l’interaction, ni l’accessibilité, ni le comportement responsive.

Qu’est-ce que le format CSS ?

CSS est un format de feuille de style en texte brut qui contrôle la présentation et la mise en page de HTML et SVG. Ses propriétés comprennent color, font-family, font-size, margin, padding, display, grid-template-columns, les bordures, les ombres, les transformations et les règles de média responsive.

CSS rend le design modifiable dans un site web ou une application, permet au texte et aux mises en page de s’adapter à différents écrans et sépare la présentation du contenu HTML. Une feuille de style ne peut pas stocker les calques Photoshop, l’historique des réglages, le texte PSD modifiable ni des données de pixels arbitraires.

Comment convertir PSD en CSS

Il n’existe pas de conversion PSD vers CSS complète et sans perte, car PSD décrit une composition visuelle modifiable tandis que CSS décrit des règles appliquées aux éléments d’un document. La conversion pratique consiste en une transmission du design suivie d’une implémentation front-end.

1. Ouvrez le fichier dans Adobe Photoshop et organisez les calques en groupes pertinents tels que l’en-tête, la navigation, la carte et le pied de page. Renommez les calques afin qu’ils identifient les éléments d’interface correspondants.
2. Examinez les dimensions, les espacements, les couleurs, la typographie, l’opacité et les effets à l’aide des repères, des règles, du panneau Caractère et de l’échantillonneur de couleurs de Photoshop. Utilisez un système de mesure cohérent basé sur les pixels ou les rem.
3. Pour les calques de texte, de forme et d’image compatibles, utilisez la commande Copy CSS du menu contextuel du calque. Collez les déclarations dans un fichier tel que styles.css, puis supprimez les sélecteurs et les propriétés qui ne correspondent pas au balisage réel.
4. Créez des éléments HTML sémantiques représentant le design, puis reliez-les à la feuille de style avec des classes ou d’autres sélecteurs appropriés. Remplacez les coordonnées du canevas de Photoshop par Flexbox, CSS Grid, le flux normal ou un autre modèle de mise en page.
5. Exportez les éléments graphiques que CSS ne peut pas reproduire directement. Utilisez File → Export → Export As pour les photographies au format .jpg, les graphiques matriciels nécessitant de la transparence au format .png et les créations vectorielles simples appropriées au format .svg. Référencez-les avec <img> ou background-image selon le cas.
6. Testez l’implémentation dans les navigateurs aux dimensions de viewport requises. Comparez la typographie, le retour à la ligne, les espacements, le recadrage des images et les effets visuels avec le PSD, puis ajoutez des règles responsive au lieu de forcer un canevas fixe unique.

Adobe Photoshop est l’option de bureau la plus directe, car il lit les données PSD natives et fournit l’export d’éléments graphiques ainsi que la copie de CSS. Photopea est une alternative réputée basée sur un navigateur pour une utilisation occasionnelle : il ouvre les fichiers PSD, expose les propriétés des calques et peut copier le CSS des calques pris en charge. Il nécessite toutefois toujours du HTML manuel, un travail de mise en page, l’export des éléments graphiques et des tests responsive.

Les outils d’inspection et de transmission de designs tels qu’Avocode peuvent exposer les mesures des calques, les couleurs, la typographie et des extraits de CSS, mais les fonctionnalités d’importation et d’exportation PSD varient selon le produit et l’abonnement. Vérifiez la prise en charge actuelle de PSD avant de vous en remettre à l’un d’eux. Les convertisseurs génériques en ligne « PSD to CSS » génèrent généralement uniquement des déclarations de base ou des extraits à position fixe ; ne téléversez pas de fichiers de design confidentiels vers un service inconnu.

Limites de qualité et de compatibilité

Le CSS copié depuis Photoshop représente souvent un canevas fixe avec des positions absolues. Il peut correspondre à une capture d’écran, mais échouer lorsque le viewport rétrécit, que la longueur du texte change, que le contenu augmente ou que les utilisateurs agrandissent la taille de la police. Reconstruisez la mise en page avec du HTML sémantique, Flexbox ou Grid, des unités relatives et des media queries.

Les styles de calque, les modes de fusion, les masques d’écrêtage, les filtres dynamiques, les calques de réglage et les ombres complexes peuvent ne pas avoir d’équivalent CSS direct. Reproduisez-les approximativement avec des dégradés, des ombres, des filtres, des pseudo-éléments et des propriétés de fusion lorsque cela est possible ; sinon, exportez le résultat concerné sous forme d’élément graphique matriciel ou vectoriel.

La typographie dans le navigateur dépend d’une police web sûre disponible, d’une webfont sous licence ou de @font-face. Une police absente ou remplacée modifie les retours à la ligne et peut altérer toute la mise en page. CSS ne peut pas non plus préserver l’historique modifiable des calques Photoshop : conservez donc le fichier source .psd d’origine.