Comment convertir un PSD en PNG (et aplatir les calques correctement)
Pourquoi la conversion PSD vers PNG est plus complexe qu'il n'y paraît
Un fichier PSD n'est pas une simple image. C'est une recette complexe : une pile de calques, de calques de réglage, de masques, d'objets dynamiques et de modes de fusion qui ne prennent forme que lorsqu'une application compétente comme Photoshop les traite. Si tu essaies de convertir un PSD en PNG sans comprendre ça, les choses vont mal tourner. Tu risques de te retrouver avec un fond blanc opaque là où il devrait y avoir de la transparence, de voir du texte manquant parce qu'un calque de texte n'a pas été rendu, ou de remarquer des changements de couleur bizarres parce qu'un calque de réglage a été ignoré. Le PNG est un format matriciel simple. Il stocke une grille de pixels, pas une liste d'instructions. La conversion est en réalité un travail de rendu. Tu es en train de condenser toutes ces instructions Photoshop en une grille de pixels finale, puis de sauvegarder cette grille en tant que PNG sans perte. La qualité de ton image finale dépend entièrement de la manière dont ce rendu gère tout ce qui est contenu dans le fichier source. Les échecs les plus courants sont faciles à repérer une fois que tu sais quoi chercher. La transparence est souvent remplacée par un aplat blanc ou noir. Les effets de calque comme les ombres portées et les lueurs peuvent disparaître complètement. Les objets dynamiques peuvent être rendus à une faible résolution parce qu'ils n'ont pas été pixellisés au préalable. Et les profils colorimétriques supprimés peuvent donner à tes images un aspect délavé sur des écrans calibrés. Connaître ces pièges à l'avance t'épargnera une tonne de frustration et de travail à refaire.
Aplatir les calques dans Photoshop avant l'exportation
Si tu as Adobe Photoshop, l'aplatissement et l'exportation manuels te donnent un contrôle total. Le choix crucial se situe entre 'Aplatir l'image' et 'Fusionner les calques visibles'. Leurs noms se ressemblent, mais leurs actions sont très différentes. 'Aplatir l'image' (Calque > Aplatir l'image) fusionne absolument tous les calques, même ceux qui sont masqués, et remplit toutes les zones transparentes avec du blanc. Pour un PNG qui nécessite un fond transparent, c'est presque toujours la mauvaise décision. Utilise plutôt 'Fusionner les calques visibles' (Maj+Ctrl+Alt+E sur Windows / Maj+Cmd+Option+E sur Mac). Ce raccourci génial crée une copie fusionnée de tous les calques visibles dans un nouveau calque au sommet de ta pile, laissant tes calques originaux intacts en dessous. Tu peux ensuite exporter uniquement ce nouveau calque fusionné, avec sa transparence et tout le reste. Pour l'exportation elle-même, n'utilise pas l'ancienne commande 'Enregistrer sous'. Va directement dans Fichier > Exporter > Exporter sous. Dans cette boîte de dialogue, règle le Format sur PNG et assure-toi que la case 'Transparence' est cochée. Pour une utilisation à l'écran, 72 PPP est la norme. Pour tout ce qui est en haute résolution, comme pour l'impression ou les écrans Retina, utilise 144 ou 300 PPP. N'oublie pas que la valeur PPP n'est qu'une métadonnée ; une zone de travail de 2000×2000 pixels à 72 PPP exporte un PNG de 2000×2000 pixels. Les dimensions physiques ne changent pas. Un dernier conseil de pro : si ton PSD utilise un profil colorimétrique conçu pour l'impression, comme CMJN ou Adobe RGB 1998, tu dois absolument le convertir en sRVB avant de l'exporter pour le web. Va dans Édition > Convertir en profil, sélectionne sRVB IEC61966-2.1, et utilise le rendu Colorimétrie relative avec la Compensation du point noir cochée. Sauter cette étape est la raison numéro un pour laquelle des designs soigneusement créés ont l'air ternes et délavés dans un navigateur web.
Convertir un PSD en PNG en ligne avec CocoConvert
Tout le monde n'a pas d'abonnement à Photoshop, et même si c'est ton cas, convertir un dossier rempli de PSD un par un est une tâche abrutissante. Le [convertisseur de PSD en PNG](/convert/psd-to-png) de CocoConvert résout ce problème en gérant le rendu sur un serveur. Tu n'as qu'à téléverser le PSD pour récupérer un PNG correctement aplati, sans avoir besoin d'un logiciel de design de ton côté. Le convertisseur fusionne intelligemment tous les calques visibles tout en préservant le canal alpha. Cela signifie que les zones transparentes de ton fichier Photoshop restent transparentes dans le PNG final, sans ce redoutable fond blanc. Il gère de manière fiable les types de calques courants, y compris les images matricielles, les calques de texte (qui sont rendus à la résolution native du document) et les calques de réglage de base comme Niveaux, Courbes et Teinte/Saturation. Son utilisation est simple. Va sur /convert/psd-to-png, fais glisser ton PSD sur la page ou clique sur 'Choisir un fichier', puis appuie sur Convertir. L'outil prend en charge des fichiers jusqu'à 50 Mo. Le traitement ne prend généralement que 5 à 15 secondes pour un fichier typique, après quoi tu obtiens un lien de téléchargement pour le PNG sans perte. Si tu traites un lot de fichiers, comme un jeu d'icônes ou un kit d'interface utilisateur, tu peux téléverser plusieurs PSD à la fois. Chacun est traité séparément, et tu peux télécharger les PNG résultants individuellement ou les récupérer tous dans une seule archive ZIP. C'est un gain de temps énorme.
Ce que CocoConvert ne peut pas gérer (soyons honnêtes)
Les outils automatisés ont leurs limites, et il vaut mieux les connaître à l'avance que de les découvrir après avoir livré des fichiers à un client. Les objets dynamiques sont le principal point de vigilance. Si ton PSD contient des objets dynamiques incorporés ou liés, CocoConvert les rend à leur taille dans le document, et non à leur propre résolution native. Par exemple, un graphique vectoriel de 4000 px placé comme objet dynamique dans une zone de travail de 1000 px sera rendu à 1000 px. Tu ne perds pas en qualité par rapport à la zone de travail, mais tu ne bénéficies pas non plus de la résolution interne plus élevée de l'objet dynamique. Pour cela, tu dois d'abord pixelliser l'objet dynamique dans Photoshop (Calque > Objets dynamiques > Pixelliser). Les calques 3D et les calques vidéo ne sont pas pris en charge. Tout PSD en contenant verra ces calques spécifiques omis du PNG final, laissant apparaître ce qui se trouvait en dessous. Certains modes de fusion complexes peuvent être délicats. Plus précisément, les modes Fondu, Mélange maximal et certains modes basés sur la luminosité peuvent avoir un rendu légèrement différent de celui de Photoshop. La différence est généralement mineure (quelques valeurs de couleur par canal), mais pour un travail au pixel près, tu devrais toujours vérifier le résultat en le comparant à un export de référence depuis Photoshop. Les PSD en CMJN sont automatiquement convertis en sRVB pendant le traitement. Cette conversion utilise un profil ICC standard, qui est précis pour la plupart des utilisations web et écran. Cependant, elle ne correspondra pas parfaitement à un flux de travail personnalisé et calibré pour l'impression. Si tu prépares des fichiers pour l'impression offset, effectue la conversion colorimétrique toi-même dans Photoshop pour un contrôle maximal.
Choisir les bons paramètres PNG : profondeur de couleur et compression
Le PNG existe en deux versions principales, 8 bits et 24 bits (souvent appelées PNG-8 et PNG-24), et il est important de choisir la bonne. Le PNG-24 est l'option de haute qualité. Il stocke 16,7 millions de couleurs plus un canal alpha complet de 8 bits pour une transparence fluide. C'est ce dont tu as besoin pour les photographies, les dégradés complexes et toute image avec des variations de couleurs subtiles. CocoConvert utilise par défaut le PNG-24, ce qui est le bon choix pour convertir des fichiers PSD riches en détails. Le PNG-8 est l'alternative légère. Il est limité à une palette de 256 couleurs et produit des fichiers beaucoup plus petits, souvent de 60 à 70 % plus légers. Le compromis est un effet de bande visible sur les dégradés et une transparence de type tout ou rien (un pixel est soit entièrement transparent, soit entièrement opaque, sans entre-deux). Le PNG-8 ne convient qu'aux graphiques simples comme les icônes en aplats de couleurs avec des bords nets. Pour obtenir un PNG-8, tu devrais traiter le fichier PNG-24 obtenu avec un outil comme Photoshop ou utiliser un utilitaire en ligne de commande comme pngquant. La compression PNG est toujours sans perte, ce qui signifie qu'elle ne réduit jamais la qualité de l'image. Le réglage du niveau de compression est purement un compromis entre la taille du fichier et le temps nécessaire pour l'enregistrer. CocoConvert utilise automatiquement un niveau de compression équilibré. Si tu es obsédé par la performance et que tu as besoin de la plus petite taille de fichier possible pour un projet web, tu peux encore gratter 10 à 20 % en passant le résultat dans un optimiseur dédié comme oxipng ou pngcrush. Ces outils recompressent les données de manière plus agressive sans toucher à un seul pixel. Enfin, demande-toi toujours si le PNG est vraiment le bon format. Si tu n'as pas besoin de transparence, un JPEG de haute qualité sera radicalement plus petit. Pour une utilisation web moderne avec transparence, les formats WebP et AVIF offrent une meilleure compression. Mais pour les fichiers maîtres, les transferts de designs et tout ce qui pourrait nécessiter une nouvelle modification, le PNG-24 reste le roi.
Gérer correctement la transparence : un examen plus approfondi
La transparence PNG fonctionne via un canal alpha, une carte en niveaux de gris de 8 bits supplémentaire où chaque pixel se voit attribuer une valeur de transparence de 0 (complètement transparent) à 255 (complètement opaque). C'est ce qui permet d'avoir des ombres portées aux bords doux et du texte lissé qui s'affichent bien sur n'importe quel arrière-plan. L'une des erreurs de conversion les plus courantes est liée à l'alpha prémultiplié. Dans une image prémultipliée, les valeurs de couleur ont déjà été mélangées avec une couleur de fond, ce qui peut entraîner des halos sombres ou clairs sur les bords si l'application de visualisation s'attend à un alpha non prémultiplié (straight alpha). Quiconque s'est déjà battu avec d'affreuses franges noires sur ses icônes connaît cette douleur. CocoConvert produit des PNG avec un alpha non prémultiplié (straight alpha), ce qui est la norme attendue par les navigateurs web et la quasi-totalité des logiciels modernes. Pour être sûr que ta transparence a survécu à la conversion, teste le résultat. Le moyen le plus rapide est d'ouvrir le PNG dans un navigateur web avec un arrière-plan coloré. Il suffit de créer un fichier HTML ultra-simple avec un `body` coloré et une balise `<img>` pointant vers ton PNG. Si les parties transparentes affichent la couleur de l'arrière-plan et que les bords sont nets, c'est bon. Si tu vois un cadre blanc ou des halos sombres, c'est que le canal alpha a été mal géré. Vérifie aussi le calque 'Arrière-plan' de ton PSD, le calque par défaut avec une icône de cadenas. Ce calque est toujours 100 % opaque. Si tu as besoin de transparence dans ton PNG final, tu dois soit supprimer ce calque 'Arrière-plan', soit le convertir en calque normal (il suffit de double-cliquer dessus dans le panneau Calques de Photoshop et de valider). CocoConvert est assez intelligent pour vérifier cela ; si un PSD ne contient qu'un calque 'Arrière-plan' opaque, le PNG de sortie n'aura pas de canal alpha, ce qui est le comportement correct et le plus efficace.
Un flux de travail pratique pour des résultats reproductibles
Si tu convertis régulièrement des PSD pour un kit d'interface utilisateur, une bibliothèque de marque ou pour le travail d'un client, un flux de travail cohérent est ton meilleur allié. Il te fait gagner du temps et élimine les erreurs stupides. Pour des fichiers uniques ou de petits lots avec Photoshop sous la main, reste sur la méthode manuelle. Utilise la copie fusionnée des calques visibles (Maj+Cmd+Option+E), vérifie que le profil colorimétrique est bien sRVB, puis utilise 'Exporter sous' avec la transparence activée. Cela prend moins d'une minute par fichier et te donne un contrôle maximal. Pour les gros lots ou quand tu n'as pas Photoshop, utilise le [convertisseur de PSD en PNG](/convert/psd-to-png) de CocoConvert. Il fait le gros du travail. Avant de téléverser, c'est une bonne idée de parcourir rapidement tes PSD à la recherche d'objets dynamiques complexes ou de calques 3D. Si une précision au pixel près n'est pas négociable, pixellise d'abord ces calques. Après avoir téléchargé le lot, vérifie au hasard quelques-uns des PNG obtenus dans un navigateur pour confirmer que la transparence est correcte. Pour les ressources web en production, la taille du fichier est primordiale. Après la conversion, passe tes PNG dans un optimiseur comme oxipng. Une commande simple comme `oxipng -o 4 --strip safe *.png` offre un excellent équilibre entre compression et vitesse, et supprime en toute sécurité les métadonnées inutiles. Enfin, rends service à ton équipe (et à ton futur toi) : documente tes paramètres. Lorsque tu livres des fichiers, inclus une note d'une ligne sur le format. Quelque chose comme : 'Tous les PNG sont en sRVB, PNG-24, avec transparence, optimisés avec oxipng -o4'. Cette simple étape évite la redoutable conversation du type 'pourquoi ces couleurs ont l'air bizarres sur mon écran ?' qui fait perdre du temps à tout le monde.