Accueil Formations Apprendre Photoshop CC pour le Web - Photoshop orienté Web et mobile

Adapter des Méthodes Graphiques HTML5 avec Photoshop

Retour à la formation
Chapitre 12 Leçon 4
Précédent
Suivant

Apprenez comment adapter les mécaniques graphiques HTML5 dans Photoshop et les intégrer efficacement dans Dreamweaver.

Détails de la leçon

Description de la leçon

Dans cette leçon, nous allons explorer l'adaptation de mécaniques graphiques HTML5 dans une maquette typique d'une page web en utilisant Photoshop. Nous commencerons par détailler la structure de notre maquette, avec un header contenant un menu, une balise main englobant plusieurs éléments, et une balise footer pour le bas de page. Nous examinerons comment organiser ces éléments en calques dans Photoshop, avec des noms de calques sémantiques correspondant aux balises HTML5. Ensuite, nous aborderons la fusion des calques pour simplifier l'export et la gestion des styles. Vous verrez aussi comment Photoshop gère les styles lorsque des calques sont masqués, et comment organiser l'export pour une intégration optimale dans Dreamweaver. Cette leçon vise à rendre votre projet web plus rationnel et facile à maintenir, en tirant parti des fonctionnalités avancées de Photoshop et Dreamweaver.

Objectifs de cette leçon

Les objectifs de cette vidéo sont d'enseigner la création de maquettes graphiques HTML5 dans Photoshop, de démontrer l'organisation optimale des calques, et de simplifier l'export et l'intégration dans Dreamweaver.

Prérequis pour cette leçon

Pour suivre cette vidéo, il est recommandé d'avoir des connaissances de base en HTML5 et en utilisation de Photoshop et Dreamweaver.

Métiers concernés

Les professionnels des métiers de développement web, de web design et de conception UX/UI trouveront cette vidéo particulièrement utile pour leurs projets de création de sites web.

Alternatives et ressources

Les alternatives à ce flux de travail pourraient inclure l'utilisation de Sketch, Figma ou Adobe XD pour la création de maquettes et leur intégration dans divers éditeurs de code.

Questions & Réponses

Utiliser des noms sémantiques pour les calques dans Photoshop permet de faciliter la génération des styles CSS correspondants lors de l'export et rend plus simple l'intégration dans une page web.
Lorsque des calques sont masqués dans Photoshop, les styles pour ces calques ne sont pas générés, ce qui simplifie la feuille de style exportée en incluant uniquement les styles des éléments visibles.
Photoshop place par défaut les éléments avec un positionnement absolu qui part du sommet supérieur gauche de la page du body, même lorsque ces éléments sont organisés en groupes.