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

[ 2 ] Commentaires
Share

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 !

Vous serez peut-être intéressé :

  • Faire un service web avec Netbeans et Glassfish : le tutoriel
    Je vais faire ci-dessous un tutoriel assez simple, finalement, mais avec très peu de screenshots. Je conseille d'utiliser Firefox pour tester le web service, mais ce n'est pas forcé (j'ai fait des scr...
  • Voir les connections TCP et UDP avec TCPView
    Un petit logiciel pour Windows qui peut s'avérer diablement efficace, surtout lorsque l'on travaille dans une grosse entreprise qui possède des standards de sécurisation des réseaux assez élevés. TCPv...
  • Afficher un PDF dans une page HTML (sans player Flash)
    Le problème des affichages de PDF classiques, c'est qu'ils nécessitent tous un plugin Flash fonctionnel. Or il existe un moyen d'afficher les PDF (très peu utilisé il est vrai), et sans utiliser aucu...
  • Design de sites web (HTML, CSS et Images) grâce à Adobe Fireworks
    Je cherchais jusqu'à récemment comment faire des designs de sites web grâce à Photoshop. Il s'avère cependant que c'est idiot, car Adobe a spécialement créé un outil dédié à cet usage : il s'agit de F...
  • Lire les flux RSS avec Firefox ?!
    Firefox dispose en standard d'un mécanisme de lecture et de surveillance des flux RSS. Dénommée « Marque-page dynamique », cette fonctionnalité permet de décomposer et de consulter le contenu des flux...

2 commentaires sur ce billet

  1. dew dit :

    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. Louis dit :

    @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 de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *