Intégration et Structuration des Contenus Web
Objectifs
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.
Résumé
Apprenez comment adapter les mécaniques graphiques HTML5 dans Photoshop et les intégrer efficacement dans Dreamweaver.
Description
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.
Questions fréquentes
Programme détaillé
Module 1 - Introduction de la formation à Photoshop CC pour le Web
Module 2 - Les raccourcis utiles de Photoshop CC
Module 3 - Création de formes vectorielles, édition de formes
Module 4 - Les réglages élémentaires de Photoshop
Module 5 - Exporter individuellement les images bitmaps pour le Web
Module 6 - Exporter un SVG depuis Photoshop CC
Module 7 - Créer plusieurs versions dune composition Photoshop CC
Module 8 - Réaliser un Gif animé
Module 9 - Réaliser un rollOver CSS
Module 10 - Réaliser un Sprite Sheet (animation pelliculée)
Module 11 - Exporter une page XHTML statique à laide de loutil Tranches
Module 12 - Réaliser une composition HTML5 sémantique à partir de Photoshop
Module 13 - Gérer les styles CSS de formes primitives avec Photoshop
Module 14 - Gérer les styles CSS de textes éditables avec Photoshop
Module 15 - Exporter les calques par lot à laide de lextension Photoshop Generator
Module 16 - Générer automatiquement les icones dune application mobile
Module 17 - Exporter une composition Photoshop vers les autres logiciels Adobe
Module 18 - Réaliser un Gif vidéo
Module 19 - Réaliser un montage vidéo pour le Web avec Photoshop
Module 20 - Conclusion
