Flux de production avec les styles et les symboles
Sorry, this page is not available
Broken link?
このURLは存在しません。
日本語のホームページにお戻りください。
他のサイトのリンクでこのページにたどりついた場合はそのサイトの
ウェブマスターにリンクが壊れている旨をお伝えください。
Error returned: 404
You may wish to try one of the following links:
Sorry, this page is not available
Broken link?
このURLは存在しません。
日本語のホームページにお戻りください。
他のサイトのリンクでこのページにたどりついた場合はそのサイトの
ウェブマスターにリンクが壊れている旨をお伝えください。
Error returned: 404
You may wish to try one of the following links:
Intégrez des styles pour augmenter votre productivité, et décuplez-la avec une riche bibliothèque de composants et symboles.
This content requires Flash
Conditions requises
Pour suivre ce tutoriel, vous avez besoin des logiciels et des fichiers suivants:
Adobe Fireworks CS4
Fichiers d'exemple
lrvid4033_fw_fr.zip (ZIP, 1.5MB)
Connaissances à avoir
Connaissance intermédiaire des symboles et styles dans Fireworks
Compréhension d’un flux de production avec l’utilisation des styles et symboles
Les symboles et les styles ont en commun la caractéristique d’accélérer votre flux de production. Dans ce tutoriel, vous découvrirez les évolutions apportées aux panneaux Style et Propriétés dans Adobe® Fireworks® CS4. Vous apprendrez également à lier les styles à une grande gamme d’objets, à créer un symbole, à travailler avec des symboles imbriqués, et à naviguer dans des illustrations imbriquées en utilisant la barre d’imbrication.
Le panneau Styles
Fireworks CS4 intègre un nouveau panneau Styles. Le nouveau panneau Styles vous permet de choisir dans un grand nombre de bibliothèques de styles :
- Allez dans le groupe de panneau situé dans la partie droite de l’interface par défaut de Fireworks.
- Agrandissez le panneau Styles. Le panneau Styles est habituellement situé dans le bas du groupe de panneaux avec les panneaux Palette de couleurs et Nuancier.
Image 1: Le panneau Styles
- Allez dans le menu Styles situé en haut du panneau Styles. Par défaut, Document actif est sélectionné. Cette fonctionnalité est nouvelle dans Fireworks CS4.
- Si vous cliquez sur Document actif, vous verrez les styles disponibles dans le document ouvert. Pour accéder à toutes les bibliothèques de styles disponibles dans Fireworks CS4, cliquez sur le menu Styles.
Image 2: Toutes les bibliothèques de styles
L’Inspecteur de propriétés
L’Inspecteur de propriétés vous permet de modifier les propriétés de vos styles. Pour accéder à l’Inspecteur de propriétés :
- Réduisez le panneau en cliquant sur l’icône du bouton de réduction du groupe de panneaux en haut du groupe de panneaux.
- En utilisant l’outil Sélection, cliquez sur différents éléments de la page. Notez que le nom du style de l’élément sélectionné apparaît dans le menu Styles à l’extrême droite de l’Inspecteur de propriétés.
- Modifiez la couleur d’un élément de la page en sélectionnant l’élément et en cliquant sur la boîte Couleur de remplissage de l’Inspecteur de propriétés. Choisissez une nouvelle couleur pour cet élément depuis la barre de couleur ou en la sélectionnant depuis la roue de couleur. Vous remarquerez que le style courant est automatiquement mis à jour avec le changement de couleur, indiqué par l’icône Plus qui est apparu à côté du nom du style.
Image 4: Modification de la couleur de remplissage
- Une fois que vous avez fait votre modification de couleur, cliquez à l’extérieur du panneau Remplissage pour le fermer.
- Cliquez sur le bouton Redéfinir le style, le second icône à partir de la gauche comme montré sur l’image n°5. La modification que vous avez faite au style (la modification de la couleur de remplissage) est appliquée à tous les éléments de la page qui sont affectés de ce style. Notez que le signe Plus a également disparu du nom du style dans l’Inspecteur de propriétés.
- Annulez la modification de style en appuyant sur Ctrl/Cmd+Z. Le style est maintenant appliqué, seulement à l’élément sélectionné avant la modification Redéfinir le style.
Image 5: La modification Redéfinir le style
- Pour affecter la modification à tous les éléments de la page sauf l’arrière-plan, cliquez sur l’arrière-plan pour le rendre actif.
- Allez dans l’Inspecteur de propriétés et sélectionnez l’icône Rompre le lien avec le style, l’avant-dernier icône de l’Inspecteur de propriétés. En cliquant sur cet icône, vous rompez le lien entre les éléments de premier plan et l’arrière-plan. Si vous modifiez le style, il n’affecte pas l’arrière-plan.
Introduction aux symboles
Les styles vous permettent d’appliquer des attributs visuels à différents objets en même temps. Les symboles, d’une autre façon, peuvent contenir plusieurs styles et objets. Ces attributs vous permettent de réutiliser des objets tels que les boutons d’une barre de navigation. Pour créer un symbole :
- Sélectionnez un objet sur la page. Appuyez sur la touche F8 pour ouvrir la boîte de dialogue Convertir en symbole. En utilisant cette boîte, vous pouvez convertir un objet en symbole Graphique, Animation, ou Bouton.
Image 7: La boîte de dialogue Convertir en symbole
Astuce: L’option Activer les repères de mise à l’échelle à 9 tranches vous permet de redimensionner les objets sans les distordre.
- Fermez la boîte de dialogue Convertir en symbole.
- Cliquez sur l’élément d’arrière-plan de la composition. Recherchez le signe Plus ou la croix indiquant la présence d’un symbole. Le signe Plus représente le point de référence du symbole.
- Double-cliquez sur le symbole sélectionné. La visualisation de la composition passe de la vue originale pour n’afficher que les éléments propres au symbole.
Remarque: Dans Fireworks CS4, les symboles sont affichés dans une barre avec l’imbrication plutôt que dans la fenêtre du document. La barre d’imbrication s’étend au fur et à mesure que vous imbriquez des symboles, permettant une navigation aisée à travers les différents états de votre projet.
Image 8: La barre d’imbrication
- Si vous avez activé les repères de mise à l’échelle à 9 tranches à votre symbole, vous remarquerez deux guides de découpe verticaux et horizontaux. Vous pouvez repositionner ces guides pour définir comment les différentes zones de votre symbole seront redimensionnées.
Image 9: Les guides de repères de mise à l’échelle à 9 tranches
- Un signe Plus à l’intérieur du symbole indique un autre symbole imbriqué. Double-cliquez sur le symbole pour passer dans le mode de modification de symbole pour le symbole imbriqué. L’Inspecteur de propriétés affiche les propriétés et styles associés uniquement à ce symbole imbriqué. Cette fonctionnalité vous permet de modifier le symbole dans son environnement.
Remarque: Le nom du symbole imbriqué apparaît dans la barre d’imbrication en haut de la page. Cliquez sur n’importe quel élément pour remonter dans l’imbrication jusqu’au niveau de votre illustration.
- Vous pouvez remonter au symbole principal en double-cliquant sur le plan de travail.
- Pour retourner à l’illustration originale, double-cliquez sur le plan de travail une seconde fois.
Nouveaux symboles dans Fireworks CS4
Fireworks CS4 intègre un grand nombre de nouveaux symboles graphiques prédéfinis. Pour accéder à ces symboles :
- Cliquez pour activer la Bibliothèque commune située juste en dessous du panneau Styles. La Bibliothèque commune intègre les nouveaux symboles graphiques, et également d’autres éléments Fireworks tels que composants Flex et animations prédéfinies.
- Cliquez sur le dossier Web et Application pour le dérouler. Utilisez les touches Flèche pour explorer les différents symboles de ce dossier.
Image 10: Le dossier Web et Application
- Cliquez sur Nouveau symbole.
- Pour imbriquer le nouveau symbole à l’intérieur d’un symbole préexistant, double-cliquez sur l’élément principal pour entrer dans le scénario de ce symbole.
- Glisser le Nouveau symbole depuis la Bibliothèque commune sur le plan de travail. Vous avez imbriqué un symbole dans un symbole avec succès.
- Pour le redimensionner, choisissez l’outil de Mise à l’échelle depuis la boîte à outils de Fireworks CS4.
Image 11: L’outil de Mise à l’échelle
- Pour modifier le symbole, double-cliquez dessus. Votre document passe alors en mode modification et tout excepté le symbole est grisé et inaccessible.
Pour aller plus loin…
- Fireworks CS4 Assistance et Support
- Apprenez Fireworks CS4
- Introduction à Fireworks CS4, par Birnou Sébarte
- Prototypage de sites Web et d’interfaces d’applications, par Birnou Sébarte
- Création d’un objet redimensionnable avec les repères de mise à l’échelle à 9 tranches, par Jean-Luc Delon
- video2brain.fr
Cette oeuvre est placée sous la licence suivante : Creative Commons Paternité-Pas d'Utilisation Commerciale-Partage des Conditions Initiales à l'Identique 3.0 Unported
A propos des auteurs
Sorry, this page is not available
Broken link?
このURLは存在しません。
日本語のホームページにお戻りください。
他のサイトのリンクでこのページにたどりついた場合はそのサイトの
ウェブマスターにリンクが壊れている旨をお伝えください。
Error returned: 404
You may wish to try one of the following links:
Sorry, this page is not available
Broken link?
このURLは存在しません。
日本語のホームページにお戻りください。
他のサイトのリンクでこのページにたどりついた場合はそのサイトの
ウェブマスターにリンクが壊れている旨をお伝えください。
Error returned: 404
You may wish to try one of the following links:
