CATALOGUE Design et Infographie Formation Photoshop Apprendre Photoshop CC pour le Web - Photoshop orienté Web et mobile Convertir des calques Photoshop en pages HTML5

Convertir des calques Photoshop en pages HTML5

Organiser un document Photoshop pour un export HTML5 à l'aide de différents conteneurs

Vidéo non disponible ! Réessayez plus tard

6h 9min

81 leçons

Transcription

Cette leçon fait partie de la formation

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

59,90€ Paiement unique • Accès à vie Acheter cette formation

Formation incluse dans l'abonnement Elephorm

Je m'abonne à Elephorm

PRO : J'en fait profiter mon équipe

DescriptionProgrammeAvis

6h 9min

81 leçons

Cette leçon fait partie de la formation

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

59,90€ Paiement unique • Accès à vie Acheter cette formation

Formation incluse dans l'abonnement Elephorm

Je m'abonne à Elephorm

PRO : J'en fait profiter mon équipe

Introduction aux mécanismes de calques dans Photoshop

Objectifs

Les objectifs de cette vidéo sont de :

Comprendre les différents types de calques dans Photoshop
Apprendre à convertir et externaliser des calques dynamiques
Maîtriser l'exportation de maquettes graphiques vers HTML5

Résumé

Apprenez à transformer rapidement des calques Photoshop en pages HTML5 structurées grâce à des méthodes efficaces et pratiques.

Description

Dans cette leçon, nous explorons les différents mécanismes de Photoshop qui permettent la conversion rapide de calques en pages HTML5. Vous découvrirez comment :

Travailler avec des bitmaps et des pixels
Utiliser des formes vectorielles primitives
Convertir des calques en calques dynamiques et externalisés
Rassembler les éléments dans des groupes de calques

Chaque méthode produit des feuilles de style et des balises HTML structurées différemment. Nous fournirons également une démonstration pratique d'exportation HTML5 en utilisant Dreamweaver. Vous verrez comment éditer et gérer les calques dynamiques externalisés pour apporter des modifications centralisées à vos projets.

Questions fréquentes

Quel est l'avantage de convertir un calque en objet dynamique dans Photoshop ?

Il permet des modifications non destructives et centralisées, facilitant les mises à jour sans altérer l'original.

Comment créer un objet dynamique externalisé ?

Convertissez d'abord le calque en objet dynamique, puis cliquez sur 'Exporter le contenu' pour l'enregistrer dans un fichier PSD séparé.

Quelles sont les différences majeures entre un calque bitmap et un calque vectoriel ?

Un calque bitmap est basé sur des pixels, offrant une qualité optimale à taille fixe, tandis qu'un calque vectoriel est basé sur des formes géométriques, adaptables à différentes résolutions sans perte de qualité.

Programme détaillé

Accueil de la formation

Module 1 - Introduction de la formation à Photoshop CC pour le Web

Présentation de la formation Photoshop CC pour le Web 01:42

Rappel du principe bitmap/vectoriel 02:31

Les formats d'images à destination du Web et des mobiles 03:42

Module 2 - Les raccourcis utiles de Photoshop CC

Gestion de l'interface (palettes, règles, plein écran, quitter un traitement en cours) 05:04

Sauvegardes et exports dans Photoshop CC 02:57

Personnalisation de l'espace de travail 03:21

Manipulation des calques (création, suppression, sélection, fusion, groupes) 08:11

Outils de sélection, déplacement et transformation 03:01

Outils de tracé Plume et conversion en sélection 02:30

Module 3 - Création de formes vectorielles, édition de formes

Outil de découpe, de recadrage 01:55

Créer masques de fusion à partir d'une sélection 02:49

Outil texte, pixellisation, conversion en sélection 03:36

Module 4 - Les réglages élémentaires de Photoshop

Les niveaux dans Photoshop CC 04:37

Teinte, luminosité et saturation dans Photoshop CC 02:33

Les courbes dans Photoshop CC 02:42

Les balances de couleurs dans Photoshop CC 01:20

Le noir et blanc nuancé dans Photoshop CC 01:26

Module 5 - Exporter individuellement les images bitmaps pour le Web

Présentation de la fenêtre d'enregistrement pour le Web 05:28

Exporter en Jpeg depuis Photoshop CC 10:06

Exporter en PNG depuis Photoshop CC 05:35

Exporter en Gif depuis Photoshop CC 10:13

Module 6 - Exporter un SVG depuis Photoshop CC

Exporter un fichier vectoriel à partir de Photoshop CC 05:12

Exporter au format SVG via le moteur d'Illustrator 06:08

Module 7 - Créer plusieurs versions dune composition Photoshop CC

Conception d'un projet multi-écran (impression, web, tablette, bannière) 02:05

Création dun document Photoshop Master (dimensions, résolution, ratio, mode) 03:35

Gestion des objets dynamiques 06:15

Exporter un poster 30x40 cm pour l'impression 09:43

Exporter une interface Web de 980x1000 pixels 06:17

Exporter une interface iPad de 1024x768 pixels 06:31

Exporter une bannière de 768x90 pixels 03:53

Module 8 - Réaliser un Gif animé

Organiser le document pour une animation Gif 03:17

Animer à laide de la fenêtre de Montage 04:45

Exporter et optimiser lanimation Gif pour une bannière Web 03:08

Module 9 - Réaliser un rollOver CSS

Organiser le document pour un rollOver CSS 10:17

Exporter les images du rollover 01:08

Générer le code CSS du rollover et structurer le lien en HTML 05:35

Adapter laffichage au survol, au clic et à l'état visité, à l'aide des pseudos classes CSS 04:50

Localiser le style du lien à l'aide d'une classe contextuelle 01:45

Module 10 - Réaliser un Sprite Sheet (animation pelliculée)

Introduction aux animations Spritesheet 02:49

Configuration et exportation d'une animation Sprite Sheet 04:18

Intégration CSS et jQuery dune animation SpriteSheet avec Animate 11:00

Module 11 - Exporter une page XHTML statique à laide de loutil Tranches

Préparer la composition Photoshop CC pour une découpe en tranches 04:06

Définir les zones de découpe 05:07

Echantillonner les zones de découpe 05:43

Configurer l'export HTML 04:57

Mettre à jour une découpe 01:39

Avantages et limites de l'outil Tranches 02:18

Module 12 - Réaliser une composition HTML5 sémantique à partir de Photoshop

Analyse de la structure d'une page HTML5 02:20

Organiser un document Photoshop pour un export HTML5 à l'aide de différents conteneurs 09:28

Identifier les spécificités HTML5 de chaque type de conteneur Photoshop dans Dreamweaver 21:43

Exporter une maquette de site HTML5 de premier niveau, de Photoshop vers Dreamweaver 05:40

Intégrer les éléments de premier niveau dans Dreamweaver (header, main, footer) 06:28

Gérer le positionnement contextuel du contenu imbriqué, dans Photoshop (section, article, nav, aside) 02:46

Intégrer les éléments imbriqués dans Dreamweaver (section, article, nav, aside) 04:10

Module 13 - Gérer les styles CSS de formes primitives avec Photoshop

Identifier les styles de forme pris en charge 00:37

Ajouter des styles et des effets à des formes primitives dans Photoshop CC 04:40

Placer les styles d'une forme sur un élément HTML5 isolé dans Dreamweaver 02:23

Placer les styles dune forme sur un élément de liste pour un menu dans Dreamweaver 04:34

Module 14 - Gérer les styles CSS de textes éditables avec Photoshop

Identifier les styles de textes pris en charge 01:15

Créer un nuancier de couleurs pour Photoshop CC, à partir dune feuille de styles CSS externe 02:15

Rationnaliser la mise en forme à l'aide des styles de paragraphe et de caractères dans Photoshop 06:08

Obtenir le code CSS des styles de textes et les appliquer dans Dreamweaver 05:55

Module 15 - Exporter les calques par lot à laide de lextension Photoshop Generator

Conventions de nommage des fichiers image pour un export Gif, Jpeg et PNG 03:07

Organiser le document Photoshop CC pour un export via Generator 06:06

Organiser les fichiers pour une gestion dynamique des images au sein d'une page HTML 01:34

Organiser les fichiers pour une gestion dynamique au sein de Edge Animate 04:18

Module 16 - Générer automatiquement les icones dune application mobile

Identification des formats d'images pour applications mobiles 01:06

Configuration du document Photoshop CC pour un export automatisé d'icônes d'applications mobiles 06:11

Module 17 - Exporter une composition Photoshop vers les autres logiciels Adobe

Positionnement des logiciels compatibles HTML5, de la suite Adobe 02:20

Exporter vers Edge Reflow 06:29

Exporter vers Edge Animate 08:41

Exporter en HTML pour un projet digital vers InDesign et DPS 05:41

Exporter en natif pour un projet digital vers InDesign et After Effects 04:30

Exporter vers Flash Pro pour un export HTML5 Canvas 04:08

Exporter vers Muse 03:55

Module 18 - Réaliser un Gif vidéo

Rappel des contraintes de la vidéo et de l'intérêt du format Gif vidéo 01:09

Convertir une séquence vidéo en suite d'images, dans Photoshop CC 07:04

Exporter et optimiser la vidéo au format Gif 01:44

Module 19 - Réaliser un montage vidéo pour le Web avec Photoshop

Organiser le montage vidéo et l'animation de propriétés de calques dans un document Photoshop CC 05:53

Exporter la vidéo pour le Web 02:28

Module 20 - Conclusion

Photoshop CC au centre de la création numérique 01:19