CATALOGUE Design et Infographie Formation Photoshop Apprendre Photoshop CC pour le Web - Photoshop orienté Web et mobile

Exporter des Compositions Photoshop en HTML

Retour à la formation
Chapitre 11 Leçon 6
Précédent
Suivant

Cette leçon explique comment l’exportation de fichiers Photoshop en HTML fonctionne, en abordant les noms de fichiers, les styles CSS, et les comportements automatisés.

Détails de la leçon

Description de la leçon

Dans cette leçon, nous explorons le processus d’exportation d’un document Photoshop nommé Composition.psd en une page HTML. En utilisant l’outil tranche de Photoshop, nous pouvons créer une page nommée automatiquement Composition.html, avec des noms d'images incrémentés. Nous expliquons comment accéder au code source de la page HTML via un navigateur et examinons la structure du fichier, mettant en évidence les styles CSS en haut et les balises en bas. Les identifiants des images et des balises suivent une logique de nommage cohérente avec des ajustements mineurs. Cependant, cette méthode présente des limites pour la personnalisation, la rendant plus adaptée aux prototypes ou aux pages fixes. En fin de compte, cette leçon vous apporte une compréhension approfondie des avantages et des contraintes de l’outil tranche de Photoshop pour des exportations HTML standard.

Objectifs de cette leçon

Les objectifs de cette vidéo sont de comprendre le processus d'exportation, identifier les limitations de l’outil tranche, et apprendre à structurer le code HTML et CSS généré.

Prérequis pour cette leçon

Les prérequis pour cette vidéo incluent une connaissance de base de Photoshop et des notions fondamentales en HTML et CSS.

Métiers concernés

Les usages professionnels pour ce sujet concernent les web designers et les développeurs front-end qui souhaitent intégrer efficacement des visuels créés dans Photoshop aux sites web.

Alternatives et ressources

Des alternatives à l’outil tranche de Photoshop incluent Dreamweaver pour une personnalisation plus poussée, ou des éditeurs de code comme Sublime Text et Visual Studio Code.

Questions & Réponses

Les noms des images sont incrémentés automatiquement pour assurer l'unicité et la gestion facile des fichiers lors de l'exportation depuis Photoshop.
L'outil tranche permet une exportation rapide et structurée de compositions graphiques en éléments HTML, facilitant ainsi la création de prototypes.
La limitation principale est la difficulté de personnalisation des styles et des structures HTML/CSS générés automatiquement, ce qui peut compliquer les ajustements futurs.