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

Introduction aux animations Sprite Sheet dans Photoshop CC

Vidéo 39 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

Introduction aux animations Spritesheet

00:00 / 02:49

fullscreen

Sommaire de la formation

Teaser de la formation
- 6 tutos gratuits Introduction aux animations Spritesheet
- 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 nous apprendre à créer un Sprite Sheet.

Ce dernier est une animation représenté à l'aide d'une suite d'images collé dans un seul document. L'objectif est de créer l'image dans un format léger avec lequel on peut facilement interagir. Ici, le personnage saute, il est donc très difficile à reproduire en Java Script ou CSS. Nous allons donc utiliser le document Photoshop pour créer la suite d'images.

Il faut tout de même faire attention que l'image ne soit pas trop grande surtout lorsqu'on développe sur iPad car il a du mal à gérer des animations si l'image est plus grande que sa résolution. Si votre image est trop grande, il va falloir la couper en deux pour que l'iPad puisse la lire correctement.

Grâce au Java Script ou au CSS, on pourra couper le sprite sheet en affichant seulement la partie utile et de décaler dans le temps selon la cadence, l'image pour afficher l'animation.