Créer un site web avec Photoshop puis l’exporter en HTML et CSS

Je cherchais depuis des lustres comment faire un thème WordPress sous Photoshop, mais je ne trouvais pas comment l’exporter depuis Photoshop vers du code HTML/CSS. Or, dans les jolis sites que je voyais sur le web (ceux qui sont fait sous Photoshop, et ça se voit), on pouvais assez facilement voir que les images du thème étaient parfaitement bien découpées, que le code HTML/CSS était très propre. Donc il devait y avoir un moyen de faire ça (j’avais pensé au départ à Divine) mais je ne le trouvais pas. Jusqu’au jour où j’ai fini par trouver. Voici comment faire.

Une fois que votre fichier Photoshop est fini (de préférence réalisé avec des calques différents pour chaque partie de la page), allez dans Fichier > Enregistrer pour le web (ou en anglais File > Save For Web & Devices) :

Une fenêtre s’ouvre. Cliquez sur le petit bouton en haut à gauche (ce bouton est en haut sur les dernières versions de Photoshop comme ci-dessous, mais avant il était placé plus bas) :

Puis cliquez sur « Modifier les paramètres de sortie » (ou en anglais « Edit output settings ») :

Une autre fenêtre s’ouvre. Cliquez sur « Tranches » (ou en anglais « Slices »)

Et sur Generate CSS choisissez dans la liste déroulante « By ID ».

Cliquez sur OK, et c’est fini !

2 réflexions sur « Créer un site web avec Photoshop puis l’exporter en HTML et CSS »

  1. Moui, enfin ça reste très très limité et très loin des bonnes pratiques d’intégration. Photoshop ne peut absolument pas deviner la nature des éléments et va bêtement faire des tranches à la mode de 1999 dans une structure fixe. Si cette méthode était magique, des milliers d’intégrateurs perdraient leur emploi 😉

    RépondreRépondre
  2. @dew: Oui, mais c’est toujours moins dégueulasse que d’y aller en mode modifier/constater comme je le fais depuis des années 🙁

    RépondreRépondre

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.