Ce site est une version en lecture seule. Pour vous abonner ou gérer votre compte, veuillez vous rendre sur le site www.elephorm.com

Accueil » Infographie » Photoshop » Apprendre Photoshop CC pour le Web

Exporter une maquette de site HTML5 de Photoshop CC vers Dreamweaver

Vidéo 51 sur 81
6h09 de formation
81 leçons

Un contenu flash devrait s'afficher ici. Votre navigateur ne comporte pas de plugin flash, ou il ne s'est pas correctement initialisé.

Vous pouvez télécharger le plugin flash depuis le site d'Adobe à l'adresse suivante : http://get.adobe.com/flashplayer/.

Pour accéder à cette formation, vous devez vous abonner.

Je m'abonne
à partir de 16,6 € / mois

summary

resume

play

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

00:00 / 05:40

fullscreen

Sommaire de la formation

Teaser de la formation
- 6 tutos gratuits Exporter une maquette de site HTML5 de premier niveau, de Photoshop vers Dreamweaver
- Présentation de la formation Photoshop CC pour le Web
  
  Gratuit
- Rappel du principe bitmap/vectoriel
  
  Gratuit
- Les formats d'images à destination du Web et des mobiles
  
  Gratuit
- Gestion de l'interface (palettes, règles, plein écran, quitter un traitement en cours)
  
  Gratuit
- Sauvegardes et exports dans Photoshop CC
  
  Gratuit
- Personnalisation de l'espace de travail
  
  Gratuit
- Introduction de la formation à Photoshop CC pour le Web
- Présentation de la formation Photoshop CC pour le Web
  
  01:42
  
  Gratuit
- Rappel du principe bitmap/vectoriel
  
  02:31
  
  Gratuit
- Les formats d'images à destination du Web et des mobiles
  
  03:42
  
  Gratuit
- Les raccourcis utiles de Photoshop CC
- Gestion de l'interface (palettes, règles, plein écran, quitter un traitement en cours)
  
  05:04
  
  Gratuit
- Sauvegardes et exports dans Photoshop CC
  
  02:57
  
  Gratuit
- Personnalisation de l'espace de travail
  
  03:21
  
  Gratuit
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- Conclusion
- Photoshop CC au centre de la création numérique
  
  01:19

Détails de la formation

Dans ce tuto Photoshop, Arzhur Caouissin va appliquer ce que nous avons appris plus tôt avec une vraie maquette graphique typique HTML5.

On retrouve sur cette maquette un en-tête avec un menu qui sera dans la balise header. Tout en bas, on retrouve le pied de page qui sera dans le footer. Au centre il y a un bloc principal qui contiendra tous les éléments qui sera la balise main ou un div pour que le site soit adapté à tous les navigateurs. A l'intérieur du bloc, il y a une section qui contiendra plusieurs articles. En bas du main, toujours dans la section, il y a une navigation qui sera dans une balise nav. Et à droite, nous trouverons une balise aside pour avoir un contenu latéral qui a la même thématique mais pas directement lié au contenu de la section.

Nous retrouvons dans le panneau des calques, des calques, majoritairement vectoriels pour les balises et des bitmaps pour le header, le footer et la vague regroupés dans un dossier body. Il commence par copier le style des images du premier niveau uniquement. Il peut à présent copier le style du dossier body car le style des calques masqués ne pourra pas être copié.