Les masques vectoriels

de : Adobe Fireworks CS3 pour le web

Acheter

À propos de cette vidéo

Ils permettent d'utiliser une forme vectorielle pour servir de masque sur une couche bitmap. Ultérieurement, ce masque pourra être animé pour réaliser une animation.

Un extrait de : Adobe Fireworks CS3 pour le web

Illustrator, Photoshop, Dreamweaver, lequel choisir pour mettre en place vos idées et matérialiser votre créativité ? Fireworks rassemble à lui seul une partie des fonctionnalités des trois ténors de l’édition web, avec lequel il reste parfaitement compatible. Vous pourrez ainsi réaliser en quelques clics des diaporamas professionnels utilisant les technologies Flash ou Spry/Ajax.

EUR 29,95

Acheter

Formations similaires

Bonus en ligne

Vous voulez générer facilement un diaporama pour enrichir vos pages WEB? Fireworks CS3 propose un assistant de création de diaporama dans lequel vous pouvez choisir entre plusieurs types de présentation et de nombreux paramètres.

Création de diaporamas

08:36
Vous voulez exploiter la richesse des styles et des effets de Fireworks dans Flash? Il suffit de créer un symbole Fireworks pour tout récupérer dans Flash.

Exporter vers Flash

04:05

Logiciel de la gamme CS3, Fireworks est un outil atipyque permettant la manipulation d'images bitmap et d'objets vectoriels. Il est particulièrement adapté pour l'optimisation des images pour le WEB et l'élaboration d'interfaces utilisateurs, ainsi que de prototypes.

En quoi consiste Fireworks CS3

env. 52 min
- Complément de Photoshop et d'Illustrator sa facilité d'emploi et son ergonomie permettent de réaliser des interfaces professionnelles pour le WEB.
  
  Présentation de l'application
  
  02:31
- L'interface de Fireworks est parfaitement cohérente avec celle de ces compagnons de la gamme CS3. De la sorte le graphiste retrouve les habitudes acquises dans Photoshop ou Flash.
  
  Prise en main de linterface du logiciel
  
  06:54
- Un nouveau travail commence par un nouveau document. Dans cette vidéo le formateur explique les différents moyens de créer et de modifier un document Fireworks.
  
  Créer un nouveau document
  
  06:14
- Adobe Bridge CS3 est un gestionnaire de supports visuel, à la fois performant et convivial, qui facilite le classement, l'exploration, la localisation et la visualisation des ressources de création.
  
  Visualiser vos documents
  
  05:18
- Les possibilités de dessin vectoriel étonnantes de Fireworks permettent aux graphistes et créateurs d'interface d'exprimer leur créativité en toute liberté.
  
  Dessiner des formes
  
  06:22
- L'outil de combinaison de formes ressemble plus à celui d'Illustrator qu'à celui de Flash. Dans Fireworks, vous pouvez aisément combiner des formes par fusion ou par exclusion pour créer des formes complexes.
  
  Combiner des formes
  
  04:56
- La bibliothèque de textures intégrée à Fireworks permet de produire des effets plus surprenants les uns que les autres. Avec toujours de nombreux points de contrôle.
  
  Appliquer des textures
  
  03:10
- Comme dans Photoshop, une modification sur la couche bitmap se fait sur une sélection. Plusieurs outils et techniques sont à votre disposition.
  
  Sélectionner un bitmap
  
  06:00
- Si votre image vous semble terne ou sans contrastes, vous pouvez l'optimiser avec les différents réglages chromatiques disponibles à travers les différentes palettes.
  
  Correction chromatique sur une image
  
  03:53
- Le panneau Propriétés permet la gestion du texte. Pour plus de souplesse et de contrôle, Fireworks possède un éditeur de texte intégré.
  
  Travailler avec le texte
  
  04:28
- Fonctionnalité particulièrement pratique pour associer un texte à un trajet, vous gardez néanmoins toutes les possibilités de modifications typographiques en passant par l'éditeur intégré.
  
  Affecter un texte à un trajet
  
  01:58
Lors de la réalisation d'une interface WEB complexe, il est nécessaire d'organiser sa création en utilisant des calques ou des pages. Une bonne structure de calque permet d'optimiser un flux de production lors des étapes de validation et de modification.

Travailler avec calques et pages

env. 21 min
- Ce panneau permet d'organiser la structure de son interface WEB en distribuant les éléments de l'interface sur des calques. Mais attention, le concept de calques dans Fireworks diffère de celui de Photoshop.
  
  Présentation du panneau Calque
  
  04:04
- Pour des compositions ou des interfaces originales, vous pouvez utiliser les modes de fusion afin d'enrichir vos créations.
  
  Modes de fusion
  
  04:35
- Le concept de Page est apparu avec Fireworks CS3, il permet d'organiser efficacement la conception d'un site WEB en partageant les ressources communes à des pages multiples.
  
  Le nouveau panneau Page
  
  03:13
- Une interface WEB complexe nécessite une utilisation commune des 2 panneaux. A travers cette vidéo, vous pourrez voir comment structurer la création de votre site WEB.
  
  Travailler avec les Pages et les Calques
  
  04:18
- Comme dans InDesign, vous pouvez définir une page maîtresse qui peut être partagée avec plusieurs autres pages, permettant ainsi une plus grande souplesse dans le prototypage de votre interface WEB.
  
  Définir une page maîtresse
  
  03:59
Les masques et les effets jouent un rôle important dans la réalisation d'une interface WEB. Il peuvent permettre de masquer ou de révéler des portions d'image, ou d'enrichir graphiquement votre interface WEB.

Masques et effets

env. 18 min
- Ils permettent d'utiliser une forme vectorielle pour servir de masque sur une couche bitmap. Ultérieurement, ce masque pourra être animé pour réaliser une animation.
  
  Les masques vectoriels
  
  05:15
- Pour gérer des masques avec transparences, on préférera les masques bitmap, permettant ainsi de gérer la couche alpha du masque sur l'image sous-jacente.
  
  Les masques bitmap
  
  04:14
- Ces 2 types de filtres peuvent êtres appliqués, mais les filtres dynamiques ont un effet non destructeur sur votre image.
  
  Filtres ou filtres dynamiques
  
  04:10
- Lors de l'élaboration d'une interface WEB, il est fréquent de travailler simultanément avec Fireworks et Photoshop. Dans cette vidéo, le formateur explique la comptabilité entre les 2 logiciels.
  
  Travailler avec Photoshop avec des filtres dynamiques
  
  04:06
Eléments clés pour l'optimisation d'un flux de production, les symboles permettent de faciliter la création d'interface WEB et d'en optimiser la maintenance. Issus du concept fondamental de Flash, dans Fireworks, ils héritent de fonctions similaires.

Travailler avec les symboles

env. 30 min
- A partir d'éléments bitmap ou vectoriels, les symboles permettent l'utilisation de plusieurs instances ayant chacune leurs propriétés. La modification du symbole entraîne la modification de toutes les instances.
  
  Créer des symboles
  
  07:22
- Elément essentiel dans une application interactive, le bouton permet à l'utilisateur de déclencher des actions. Fireworks permet la définition des différents états d'un bouton dans son interface WYSWYG.
  
  Création d'un bouton
  
  04:40
- Conçus pour la réalisation d'éléments d'interface devant être redimensionnés, l'utilisation de cette option de symbole permet de faciliter la réalisation de vos applications WEB et d'optimiser vos flux de production.
  
  Repères d'échelle à 9 découpes
  
  04:19
- Cette bibliothèque propose une large gamme de symboles déjà réalisés et utilisables selon vos besoins. Ils permettent en outre la réalisation de formulaires pour applications WEB
  
  Eléments de bibliothèque commune
  
  05:33
- La puissance de Fireworks CS3 vous permet de réaliser vos propres composants intelligents et personnalisables. Avec cette fonctionnalité, certaines tâches répétitives deviennent un amusement, et en plus vous capitalisez votre expérience.
  
  Les symboles enrichis
  
  08:02
Le principal atout de Fireworks par rapport à son cousin Photoshop est d'intégrer de puissantes fonctionnalités permettant de préparer vos interfaces ou prototypes d'application WEB pour une exploitation dans Dreamweaver ou pour une diffusion directe sur le WEB.

Fonctionnalités orientées Web

env. 73 min
- Le découpage des zones interactives est le principal soucis du webdesigner. Fireworks offre différentes manières de réaliser ses découpages de tranches et de générer ainsi le code HTML.
  
  Travailler avec des tranches
  
  06:15
- Une fois le découpage des zones interactives réalisé, il faut définir les paramètres d'exportation pour une utilisation dans Dreamweaver.
  
  Optimisation et exportation des tranches
  
  07:06
- Fireworks CS3 permet de générer des styles CSS lors de l'exportation des tranches. Cette possibilité vous offre la possibilité d'être pleinement compatible avec les recommandations du W3C.
  
  Exportation CSS
  
  01:43
- Il est parfois nécessaire d'exporter une portion de votre interface. Fireworks vous permet de définir une zone polygonale et de l'exporter en HTML vers Dreamweaver.
  
  Exportation de zones
  
  04:44
- Dans Fireworks, vous pouvez créer une image interactive en définissant des zones d'une image pouvant recevoir ses évènements souris. Ces zones ne sont pas forcément rectangulaires.
  
  Définition de zones réactives
  
  03:31
- Lors de la création d'une maquette ou d'un prototype, l'utilisation de pages Fireworks permet d'optimiser le temps de mise au point sans pour autant générer systématiquement les pages de votre projet, grâce à la commande « Aperçu de toutes les pages ».
  
  Zone réactives et pages
  
  02:10
- Fonctionnalité de base liée à l'interactivité, les rollOver ou survol d'image permettent d'enrichir l'interface utilisateur en changeant l'aspect d'une zone lors de différents évènements souris.
  
  RollOver simple
  
  06:22
- Outre le changement d'aspect de l'élément actif, il est aussi possible de gérer le changement d'aspect d'une zone déportée, permettant ainsi d'enrichir de façon interactive une application ou une présentation pour le WEB.
  
  RollOver complexe
  
  04:57
- La richesse des fonctionnalités WEB de Fireworks vous permet de réaliser des menus contextuels entièrement paramétrables et sans avoir à écrire une ligne de code javaScript !!!
  
  Menus contextuels
  
  06:48
- Malgré la présence de Flash et After Effects pour l'animation, Fireworks est doté de fonctions d'animation permettant de répondre à des besoins simples et ponctuels, comme la réalisation d'un gif animé pour une page WEB.
  
  Animation simple
  
  05:18
- L'interpolation de mouvement est un moyen simple et automatique de produire l'animation d'un objet en fonction de plusieurs étapes-clés.
  
  Animation par interpolation
  
  03:42
- Comme dans Flash, il est possible de définir des images-clés pour un symbole, chaque symbole ayant sa propre structure.
  
  Animation de symboles
  
  04:31
- En intégrant Fireworks CS3 dans votre flux de production, vous vous donnez la possibilité de modifier à tout moment votre interface graphique, sans pour autant pénaliser l'intégration HTML déjà réalisée.
  
  Modification depuis Dreamweaver
  
  04:20
- Fireworks permet de mettre en place des interfaces d'applications WEB devant être développées avec Flex, et les symboles de la bibliothèque commune sont compatibles avec Flex.
  
  Intégration avec Flex
  
  06:16
- Outre ses possibilités d'intégration avec les outils WEB, Fireworks offre d'intéressantes fonctionnalités d'intégration avec Director, puisque ses calques peuvent êtres convertis en acteurs Director en gardant l'encodage sur 32 bits.
  
  Intégration avec Director
  
  04:46
Une fois terminée, votre composition ou votre interface doit être exportée pour le WEB. Fireworks CS3, vous offre différents moyens de paramétrer et de visualiser les différents réglages.

Optimisation et exportation pour le Web

env. 16 min
- C-#est dans ce panneau que vous pouvez spécifier vos réglages par défaut de votre document ; la fenêtre aperçu de l'image vous permet également de vérifier les paramètres de compression avant l'exportation.
  
  Le panneau Optimiser
  
  04:11
- Fireworks vous permet de définir des zones de votre image qui seront affectées de paramètres de compression différents, ceci afin de préserver certaines parties de votre image.
  
  Compression sélective
  
  02:21
- Du fait de la multiplication des images dans un Gif animé, il faut être particulièrement attentif aux paramètres d'optimisation choisis, puisque ceux-ci affectent toutes les images de votre animation.
  
  Optimiser des Gif animés
  
  03:22
- Si vous rencontrez des difficultés à faire un choix pour l'optimisation de votre image, vous pouvez activer l'assistant d'exportation pour vous aider à prendre le meilleur algorithme de compression.
  
  L'assistant d'exportation
  
  02:11
- Par l'intermédiaire de cette fenêtre, vous pouvez spécifier et tester les différents paramètres d'optimisation pour votre image.
  
  La fenêtre Aperçu d'image
  
  03:20