ADOBE Utilisation de Fireworks MX User Manual [fr]
™
®
Utilisation de Fireworks MX
macromedia
Marques de commerce
Afterburner, AppletAce, Attain, Attain Enterprise Learning System, Attain Essentials, Attain Objects for Dreamweaver, Authorware,
Authorware Attain, Authorware Interactive Studio, Authorware Star, Authorware Synergy, Backstage, Backstage Designer, Backstage
Desktop Studio, Backstage Enterprise Studio, Backstage Internet Studio, Design in Motion, Director, Director Multimedia Studio,
Doc Around the Clock, Dreamweaver, Dreamweaver Attain, Drumbeat, Drumbeat 2000, Extreme 3D, Fireworks, Flash, Fontographer,
FreeHand, FreeHand Graphics Studio, Generator, Generator Developer’s Studio, Generator Dynamic Graphics Server, Knowledge
Objects, Knowledge Stream, Knowledge Track, Lingo, Live Effects, Macromedia, Macromedia M Logo Design, Macromedia Flash,
Macromedia Xres, Macromind, Macromind Action, MAGIC, Mediamaker, Object Authoring, Power Applets, Priority Access, Roundtrip
HTML, Scriptlets, SoundEdit, ShockRave, Shockmachine, Shockwave, Shockwave Remote, Shockwave Internet Studio, Showcase, Tools
to Power Your Ideas, Universal Media, Virtuoso, Web Design 101, Whirlwind et Xtra sont des marques de commerce de Macromedia,
Inc. et peuvent avoir été déposées aux Etats-Unis ou dans d’autres pays. D’autres noms de produits, logos, conceptions, titres, mots ou
expressions mentionnées dans cette publication peuvent être des marques de commerce, des marques de service ou des dénominations
commerciales de Macromedia, Inc. ou d’autres entités et peuvent être déposées dans certains pays.
Le présent manuel comporte des liens vers des sites Web d’autres tiers, Macromedia ne peut en aucun cas être tenu pour responsable du
contenu de ces sites. Vous accédez à ces sites sous votre propre responsabilité. Macromedia mentionne ces liens pour faciliter votre travail
et l’inclusion de ces liens n’implique pas que Macromedia approuve le contenu de ces sites tiers ou en accepte la responsabilité.
Déni de responsabilités Apple
APPLE COMPUTER, INC. NE FOURNIT AUCUNE GARANTIE, EXPRESSE OU IMPLICITE, CONCERNANT LE LOGICIEL INCLUS, QUANT A SA QUALITE LOYALE ET MARCHANDE, OU SON ADAPTATION A UN OBJECTIF PARTICULIER. L’EXCLUSION DES GARANTIES IMPLICITES N’EST PAS AUTORISEE DANS CERTAINS ETATS. L’EXCLUSION CIDESSUS PEUT NE PAS S’APPLIQUER à VOTRE CAS. CETTE GARANTIE VOUS CONFERE DES DROITS JURIDIQUES
SPECIFIQUES. CES DROITS PEUVENT VARIER D’UN ETAT à L’AUTRE.
Copyright © 2002 Macromedia, Inc. Tous droits réservés. U.S. Brevets 5,353,396, 5,361,333, 5,434,959, 5,467,443, 5,500,927,
5,594,855 et 5,623,593. Certaines parties du logiciel sont licenciées aux Etats-Unis Brevet n°4,558,302 et duplicatas étrangers. Autres
brevets en cours d’homologation. Copyright de certaines parties 1988, 2000 Aladdin Enterprises. Tous droits réservés. Ce logiciel est
basé en partie sur le travail du groupe indépendant JPEG. Copyright de certaines parties 1998 Soft Horizons. Tous droits réservés. Ce
manuel ne peut pas être copié, photocopié, reproduit, traduit ou converti sous n’importe quelle forme électronique ou lisible par une
machine, dans son intégralité ou en partie, sans un accord écrit préalable de Macromedia, Inc.
Numéro de référence ZFW60M200F
Remerciements
Rédaction : Dale Crawford, Tonya Estes, David Jacowitz, Kenneth Price
Edition : Rosana Francescato
Gestion de projet : Stuart Manning
Production : Caroline Branch, John Francis, Patrice O'Neill
Responsable production de la localisation : Masayo Noda
Responsable de la localisation : Sami Kaied
Chef de projet localisation : Gloria Figueroa
Photographie : Chris Basmajian
Multimedia : Aaron Begley
Première édition : Juin 2002
Macromedia, Inc.
600 Townsend St.
San Francisco, CA 94103
2
TABLE DES MATIÈRES
INTRODUCTION
Bien démarrer
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Configuration requise . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Installation de Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Nouveautés de Fireworks. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
CHAPITRE 1
Didacticiel des bases de la conception graphique
. . . . . . . . . . . . . . . . . . . . . 15
Objectifs du didacticiel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Prérequis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Copier le dossier Tutorials . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Afficher le fichier final . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Créer et sauvegarder un nouveau document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Explorer l’environnement de travail de Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Créer et modifier des objets vectoriels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Importer un bitmap et sélectionner des pixels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Ajouter et modifier des effets en direct . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Travailler avec des calques et des objets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
Créer et modifier un masque . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Créer et éditer du texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
Exporter le document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
Récapitulatif . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
CHAPITRE 2
Didacticiel des bases de la conception Web
. . . . . . . . . . . . . . . . . . . . . . . . . . 45
Objectifs du didacticiel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
Prérequis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
Copier le dossier Tutorials . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
Affichage de la page Web finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
Ouvrir le fichier source . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Importer un graphisme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Découper le document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Créer un survol par glisser-déposer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Créer et modifier des boutons pour constituer une barre de navigation . . . . . . . . . . . . . 54
Créer et modifier un menu contextuel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
Optimiser le document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
Exporter du HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
Tester le fichier terminé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Récapitulatif . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
3
CHAPITRE 3
Concepts de base de Fireworks
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
Graphiques vectoriels et de bitmap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
Travailler avec Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Création d’un nouveau document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
Ouverture et importation de fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
Enregistrement de fichiers Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
L’environnement de travail de Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
Modification du document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
CHAPITRE 4
Sélection et transformation d’objets
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
Sélection d’objets. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
Sélection de pixels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
Edition d’objets sélectionnés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122
Transformation et distorsion d’objets sélectionnés et sélections . . . . . . . . . . . . . . . . . . 123
Organisation des objets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
CHAPITRE 5
Traitement des bitmaps
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
Traitement des bitmaps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
Création d’objets bitmap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
Traçage et modification d’objets bitmap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
Retouche de bitmaps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
Réglage de la couleur et du ton d’un bitmap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139
Application d’un flou et accentuation des bitmaps. . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
CHAPITRE 6
Utilisation d’objets vectoriels
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
Traçage d’objets vectoriels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
Modification des trajets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166
CHAPITRE 7
Utilisation d’un texte
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
Saisie de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
Modification d’un texte. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177
Applications de traits, de trames et d’effets à un texte . . . . . . . . . . . . . . . . . . . . . . . . . 186
Rattachement de texte à un trajet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187
Transformation du texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189
Conversion de texte en trajets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189
Importation de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190
Correction orthographique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191
Utilisation de l’Editeur de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193
CHAPITRE 8
Application de couleurs, de traits et de trames
. . . . . . . . . . . . . . . . . . . . . . . 195
Utilisation de la section Couleurs du panneau Outils . . . . . . . . . . . . . . . . . . . . . . . . . 195
Organisation des groupes d’échantillons et des modèles de couleurs . . . . . . . . . . . . . . 196
Utilisation des puits de couleurs et des fenêtres contextuelles. . . . . . . . . . . . . . . . . . . . 203
Utilisation des traits. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
Utilisation des trames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210
Application de trames et dégradés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
Ajout d’une texture aux traits et aux trames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216
Table des matières4
CHAPITRE 9
Utilisation des effets en direct
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219
Application directe des effets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219
Modification des effets en direct . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224
CHAPITRE 10
Calques, masquage et fondu
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227
Utilisation des calques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227
Masquage d’images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233
Fondu et transparence . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251
CHAPITRE 11
Utilisation des styles, des symboles et des adresses URL
. . . . . . . . . . . . 255
Utilisation des styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255
Utilisation de symboles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259
Utilisation des URL. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264
CHAPITRE 12
Découpes, survols et références
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269
Création et modification d’une découpe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269
Affectation de comportements interactifs aux découpes . . . . . . . . . . . . . . . . . . . . . . . . 277
Préparation des découpes pour l’exportation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285
Utilisation des références et des cartes images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290
CHAPITRE 13
Création de boutons et de menus déroulants
. . . . . . . . . . . . . . . . . . . . . . . . 295
Création d’un symbole de bouton . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295
Création d’une barre de navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 305
Création de menus contextuels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 306
CHAPITRE 14
Création d’animations
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317
Création d’une animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317
Utilisation des symboles d’animation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 318
Utilisation des images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322
Interpolation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328
Aperçu d’une animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328
Exportation d’une animation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 329
Utilisation d’animations existantes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 331
Utilisation de fichiers multiples pour une animation . . . . . . . . . . . . . . . . . . . . . . . . . . 331
CHAPITRE 15
Optimisation et exportation
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333
Optimisation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333
Utilisation de l’Assistant Exportation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 334
Optimisation dans l’espace de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337
Exportation depuis Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 356
Utilisation du bouton Exportation rapide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 371
Table des matières 5
CHAPITRE 16
Utilisation de Fireworks avec d’autres applications
. . . . . . . . . . . . . . . . . . . 373
Utilisation de Macromedia Dreamweaver MX. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 373
Utilisation de Macromedia Flash MX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 388
Utilisation de Macromedia FreeHand . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 393
Utilisation de Macromedia Director . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 397
Utilisation de Macromedia HomeSite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 400
Utilisation de Microsoft FrontPage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 403
Utilisation avec Adobe Photoshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 406
Utilisation avec Adobe GoLive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 411
Utilisation avec les éditeurs HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 411
CHAPITRE 17
Automatisation des tâches répétitives
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 413
Recherche et remplacement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 413
Traitement par lots . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 419
Utilisation du journal du projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 427
Extension de Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 428
CHAPITRE 18
Préférences et raccourcis clavier
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 433
Définition des préférences . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 433
Modification des raccourcis clavier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 436
Utilisation des fichiers de configuration. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 439
INDEX
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 445
Table des matières6
INTRODUCTION
Bien démarrer
Macromedia Fireworks MX est la solution de conception et de production de graphiques Web
professionnels. Il s’agit du premier environnement de production permettant de faire face et de
résoudre les défis posés aux concepteurs et aux développeurs de graphiques Web.
Créez, modifiez et animez des graphismes Web avec Fireworks, ajoutez des fonctions d’interactivité
avancées et optimisez les images dans un environnement professionnel. Dans Fireworks, vous
pouvez créer et modifier des graphique bitmap et vectoriels dans une seule application. Tout reste
entièrement modifiable, à tout moment. En outre, vous pouvez automatiser vos procédures de
travail pour faire face aux exigences de longues mises à jour et modifications.
Fireworks s’intègre aux autres produits Macromedia, tels que Dreamweaver, Flash, FreeHand et
Director, ainsi qu’à vos applications graphiques préférées et aux éditeurs HTML pour offrir une
solution Web réellement intégrée. Exportez facilement vos graphismes Fireworks avec les codes
HTML et JavaScript qui ont été personnalisés pour l’éditeur HTML que vous utilisez.
Configuration requise
Avant d’installer Fireworks, assurez-vous que vous disposez des matériels et des logiciels suivants :
Microsoft Windows™
•
Processeur Intel® Pentium® II de 300MHz
•
Windows 98 SE, ME, NT® 4 (Service Pack 6), 2000 ou XP
•
64 Mo de RAM disponibles (128 Mo recommandés) plus 80 Mo d’espace disque disponibles
•
Résolution 800 x 600 pixels, affichage 256 couleurs ou supérieur
•
Adobe Type Manager® Version 4 ou supérieure pour utiliser les polices Type 1
•
Lecteur de CD-ROM
Macintosh
•
Processeur Power Macintosh G3, fonctionnant sur OS 9.1 ou supérieur, ou OS X version 10.1
ou supérieure
•
64 Mo de RAM disponibles (128 Mo recommandés) plus 80 Mo d’espace disque disponibles
•
Résolution 800 x 600 pixels, affichage 256 couleurs ou supérieur
•
Adobe Type Manager Version 4 ou supérieure pour utiliser les polices Type 1 (SE 9.x
uniquement)
•
Lecteur de CD-ROM
®
7
Installation de Fireworks
Lisez le document LisezMoi figurant sur le CD-ROM Fireworks pour prendre connaissance des
toutes dernières informations ou instructions.
Pour installer Fireworks :
Insérez le CD-ROM de Fireworks dans le lecteur de CD-ROM.
1
Utilisez l’une des méthodes suivantes :
2
•
Sous Windows, le programme d’installation de Fireworks démarre automatiquement. Si ce
n’est pas le cas, choisissez Démarrer > Exécuter. Cliquez sur Parcourir et choisissez le fichier
Setup.exe situé sur le CD de Fireworks. Cliquez sur OK dans la boîte de dialogue Exécuter.
•
Sur le Macintosh, double-cliquez sur l’icône d’installation de Fireworks.
Suivez les instructions affichées à l’écran.
3
Le programme d’installation vous demande d’entrer les informations requises.
Si nécessaire, redémarrez votre ordinateur.
4
Exécution de Fireworks sur des systèmes connectés à un réseau
Macromedia utilise une détection de licence réseau afin d’éviter que des copies de Fireworks ayant
le même numéro de série ne soient utilisées sur plusieurs systèmes connectés par un réseau local.
Si vous tentez de démarrer Fireworks et que, sur le même réseau, un nombre supérieur au nombre
de personnes autorisées défini par la licence est également en train d’utiliser Fireworks, un message
d’alerte vous notifiera les restrictions imposée par la licence.
Si vous pensez avoir obtenu ce message par erreur, ou bien si vous souhaitez obtenir des
licences supplémentaires du produit, contactez le support technique de Macromedia à
l’adresse http://www.macromedia.com/support/email/cs/.
Affichage des fichiers installés avec Fireworks
A un certain stade de l’installation, il pourrait être souhaitable d’afficher ou d’accéder aux fichiers
installés avec Fireworks. Pendant l’installation, Fireworks place des fichiers à différents endroits de
votre système. Il est important de savoir où résident ces fichiers et pourquoi. Pour plus
d’informations, voir « Utilisation des fichiers de configuration » à la page 439.
Les utilisateurs Macintosh doivent porter une attention toute particulière au nouveau format
utilisé par Fireworks pour stocker l’application et ses fichiers de configuration par défaut. Pour
plus d’informations, voir « Affichage du contenu du module (Macintosh uniquement) » à la
page 443.
Apprentissage de Fireworks
Plusieurs ressources sont à votre disposition pour l’apprentissage de Fireworks. Elles incluent un
manuel démarrage rapide (Bien démarrer avec Fireworks MX), le système d’aide accessible
directement à partir de l’application, une version PDF de la documentation complète de
Fireworks et différentes sources d’informations accessibles sur le Web.
L’ aide de Fireworks
est disponible lorsque l’application est active et contient la documentation
complète de Fireworks. Choisissez Aide > Utilisation de Fireworks pour ouvrir l’aide de
Fireworks. Pour les utilisateurs Mac OS X, choisissez Aide > Aide de Fireworks).
Introduction8
Le didacticiel de Fireworks
présente une description interactive des principales fonctions de
Fireworks, chacune pouvant être lues en moins d’une heure. Elles incluent des tâches Fireworks
courantes telles que l’utilisation des outils de dessin et de modification, l’optimisation d’images et
la création d’éléments interactifs tels que les survols et les barres de navigation.
Le panneau Réponses
est une zone centrale où vous pouvez trouver des didacticiels, des notes
techniques et les informations les plus à jour sur Fireworks. Le panneau Réponses est dynamique.
Un simple clic sur un bouton permet d’obtenir les dernières mises à jour et informations sur
Fireworks provenant directement de Macromedia.
L’application Fireworks
comporte de nombreuses boîtes de dialogue et info-bulles pour rendre
l’utilisation du programme encore plus facile. Les info-bulles apparaissent au bout de quelques
secondes lorsque vous placez le pointeur au-dessus de l’un des éléments de l’interface utilisateur.
La prise en main de Fireworks MX
comprend des informations sommaires concernant les
fonctions de base de Fireworks.
Le fichier PDF Utilisation de Fireworks MX
est un document que vous pouvez consulter et imprimer.
Il contient la documentation complète de Fireworks. Ce document est disponible sur le CD
d’installation ainsi que sur le site Web de Macromedia à l’adresse http://www.macromedia.com/fr/.
Le site Web de Macromedia
est mis à jour régulièrement et comporte les informations les plus
récentes relatives à Fireworks, ainsi que des conseils pour les utilisateurs, des rubriques avancées,
des exemples, des astuces et des mises à jour. Consultez le site Web de Macromedia
http://www.macromedia.com/fr/support/ pour prendre connaissance des nouvelles relatives à
Fireworks et savoir comment tirer pleinement parti des fonctionnalités du programme.
Le groupe de discussion de Fireworks
permet de communiquer en direct avec les autres utilisateurs de
Fireworks, les techniciens d’assistance et l’équipe de développement de Fireworks. Utilisez un lecteur de
groupes de discussion pour accéder à news://forums.macromedia.com/macromedia.fireworks.
Le manuel Extension de Fireworks MX
indique comment automatiser les tâches de Fireworks à
l’aide du code JavaScript. Toutes les commandes ou options de Fireworks peuvent être contrôlées
avec des commandes JavaScript spéciales. La version PDF de Extending Fireworks MX est
disponible sur le CD et sur le site Web de Macromedia à l’adresse http://www.macromedia.com/
support/fireworks/extend.html.
Enregistrement de Fireworks
Pour obtenir une assistance Macromedia supplémentaire, il est judicieux d’enregistrer en ligne ou
par courrier votre copie de Macromedia Fireworks.
Lorsque vous vous enregistrez, vous êtes placé sur une liste prioritaire vous permettant de recevoir
des notifications presque en temps réel concernant les mises à jour et les nouveaux produits
Macromedia. Vous recevrez des notifications par courrier électronique concernant les mises à jour
du produit et les nouveaux contenus paraissant sur les sites Web www.macromedia.com et
www-euro.macromedia.com.
Pour enregistrer votre copie de Fireworks, exécutez l’une des actions suivantes :
•
Choisissez Aide > Enregistrement en ligne et remplissez le formulaire électronique.
•
Choisissez Aide > Enregistrement par courrier, imprimez le formulaire et envoyez-le par courrier
postal à l’adresse affichée dans le formulaire.
Bien démarrer 9
Nouveautés de Fireworks
Grâce à ses nouvelles fonctions, Fireworks MX devient une application de plus en plus accessible
avec une capacité accrue de création de graphismes et d’interactivité pour les sites Web.
Fireworks MX maximise la productivité des concepteurs Web expérimentés, des développeurs
HTML qui travaillent également à la création de graphiques, et des développeurs Web débutants
ayant besoin de développer des pages Web interactives, riches graphiques et ayant peu ou aucune
connaissance de la programmation ou du langage JavaScript.
Fireworks MX a été profondément repensé, avec une interface utilisateur efficace, davantage de
boutons et de menus contextuels puissants, ainsi que des outils bitmap et vectoriels intuitifs.
L’intégration des autres applications Macromedia, aussi bien que des applications tierces, facilite
l’importation de différents formats de fichier dans Fireworks et le transfert vers d’autres
applications lorsque vous travaillez. Une autre nouveauté de Fireworks est la possibilité de créer
des commandes JavaScript avec Macromedia Flash qui apparaissent dans Fireworks MX sous la
forme de panneaux ou de boîtes de dialogue.
Fonctions simples d’utilisation
Un environnement de travail agréable et intuitif, y compris un Vérificateur de propriétés et des
outils répondant aux besoins des professionnels font de Fireworks MX une application simple
d’utilisation et facile à mettre en oeuvre. Fireworks MX possède une nouvelle interface, mieux
organisée et plus compatible avec les autres applications Macromedia MX Studio.
L’amélioration de la gestion des panneaux
de réduire les groupes de manière à n’afficher que la barre de titre du groupe de panneaux, tant
que vous navez pas besoin d’utiliser les panneaux. Vous pouvez ancrer les groupes de panneaux
dans une zone d’ancrage de panneaux afin d’organiser votre espace de travail, ou bien faire glisser
des groupes ou des panneaux individuels vers n’importe quel endroit de l’espace de travail. Pour
plus d’informations, voir « Organisation des groupes de panneaux et des panneaux » à la page 90.
Le Vérificateur de propriétés
est un panneau dynamique contenant de nombreuses options qui
changent votre façon de travailler. Ouvrez un document et le Vérificateur de propriétés affiche les
propriétés du document telles que la couleur et la taille du document. Choisissez un outil à partir
du panneau Outils, et le Vérificateur de propriétés affiche les options de l’outil. Sélectionnez un
objet vectoriel, et il affiche des informations concernant le trait et la trame.
Vous pouvez changer ces options ainsi que d’autres options, y compris les effets appliqués en
direct, les modes de fondu et l’opacité, directement à partir du Vérificateur de propriétés, au lieu
de devoir cliquer pour ouvrir ou activer un panneau après l’autre. Le Vérificateur de propriétés,
familier aux utilisateurs de Macromedia Dreamweaver et Flash, réduit le nombre de panneaux
dans l’espace de travail. Pour plus d’informations, voir « Utilisation du Vérificateur de propriétés »
à la page 88.
L’édition bitmap et vectorielle non modale
vectoriel et bitmap. La sélection d’un outil ou d’un type d’objet détermine automatiquement si
vous allez créer et modifier des bitmaps, des vecteurs ou du texte.
Les améliorations de l’édition bitmap
par couper, copier et coller, de déplacer des zones de sélection parmi les bitmaps et d’ajuster
précisément les images avec un nouveau groupe d’outils de retouche d’image. Les commandes de
sélection habituelles sont organisées dans un nouveau menu Sélection.
permet notammant de regrouper des panneaux, puis
permet d’éviter de maintenir constamment les modes
vous donne la possibilité de créer intuitivement des bitmaps
Introduction10
Les sections du panneau Outils
séparent les outils utilisés pour la création et la modification de
bitmaps, de vecteurs et d’objets Web. Elles offrent des repères permettant de choisir intuitivement
l’outil approprié et d’atteindre des résultats de création prévisibles. Les autres outils et fonctions
d’outils sont répartis dans les catégories Sélection, Couleurs et Affichage. Pour plus
d’informations, voir « Utilisation du panneau Outils » à la page 87.
Le bouton Exportation rapide
affiche des options facilitant l’exportation vers de nombreux formats
de fichier ou styles HTML, ou facilitant le démarrage d’autres applications Macromedia à partir
de la fenêtre du document, éliminant le temps de configuration et rationalisant les procédures.
Pour plus d’informations, voir « Utilisation du bouton Exportation rapide » à la page 371.
Le texte à l’écran
vous permet d’intégrer visuellement du texte et des graphiques sans devoir
utiliser l’éditeur de texte. Choisissez simplement l’outil Texte, cliquez sur le document et
commencez votre saisie. Dans le Vérificateur de propriétés, vous pouvez soit déterminer des
attributs de texte pour l’outil Texte avant de commencer la saisie ou bien sélectionner un texte
existant et le formater. Fireworks MX possède une panoplie de nouveaux outils de contrôler de
texte et de paragraphe permettant de formater du texte. Pour plus d’informations, voir
« Utilisation d’un texte » à la page 175.
Le zoom variable
vous laisse glisser l’outil de zoom afin de déterminer avec précision le facteur de
zoom. Après avoir zoomé votre document, le facteur de zoom est affiché dans la zone de texte
Zoom en bas du document.
Les versions comptabiles Windows XP et Macintosh OS X
tirent parti des dernières innovations
de ces systèmes d’exploitation. Fireworks MX est intégralement carbonisé afin de supporter toutes
les améliorations de l’interface utilisateur OS X.
L’exportation XHTML
vous permet d’exporter, de mettre à jour et d’utiliser la modification
Roundtrip avec l’ensemble des styles qu’offre Fireworks pour le code HTML. Vous pouvez utiliser
les documents existants qui ont été convertis en documents XHTML dans Dreamweaver MX.
Le panneau Réponses
, une nouvelle fonction de Fireworks MX, Dreamweaver MX et Flash MX,
est un lien vers des contenus Web pouvant être mis à jour et se trouve judicieusement placé dans
l’espace de travail Fireworks. Vous pouvez cliquer sur le bouton Mise à jour lorsque vous êtes en
ligne et charger des informations de référence récentes de Macromedia, ou consultez en ligne des
bases de données de documentation comme TechNotes.
Le vérificateur orthographique
recherche dans chaque bloc de texte de votre document les mots mal
orthographiés. Lorsqu’il trouve un mot qu’il ne reconnaît pas, il propose des suggestions de
correction ou vous permet de l’ajouter dans votre dictionnaire.
Le cache multi plates-formes des polices
permet de simplifier le partage des fichiers des groupes
de travail et clients, sans soucier des problèmes de polices relatifs aux différents systèmes utilisés.
Fireworks conserve l’apparence de tous les textes d’un document sur les systèmes qui n’ont pas les
polices utilisées par le document.
De nouvelles fonctionnalités puissantes
Fireworks MX possède une panoplie de nouvelles fonctions de créativité et d’automatisation
puissantes que les concepteurs Web débutants trouveront simples d’utilisation et que les
développeurs expérimentés apprécieront. Cette fonctionnalié fait de Fireworks un outil
indispensable à la conception et de développement de sites Web, depuis la conception jusqu’à
l’intégration.
Bien démarrer 11
L’Assistant Graphique
vous permet d’affecter des variables à du texte, des images, des références et
des découpes. Il génère ensuite de plusieurs documents basés sur l’original, chaque document
contenant des informations spécifiques provenant d’un fichier base de données séparé par une
virgule ou fichier XML.
Le générateur de barres de navigation
du menu Commandes automatise la procédure de création
rapide des barres de navigation grâce à l’utilisation judicieuse de symboles de bouton Fireworks
MX. Vous pouvez sélectionner l’occurrence d’un bouton symbole, puis choisir le nombre de
copies à effectuer, choisir l’orientation et l’espacement vertical ou horizontal, et assigner des
étiquettes de bouton et des URL dans une boîte de dialogue intégrée.
Les améliorations de l’éditeur des menus contextuels
ont ajouté un contrôle créatif à la
fonctionnalité la plus populaire de Fireworks 4. Vous pouvez maintenant créer un menu
contextuel horizontal ou vertical, et déterminer les caractéristiques de la bordure, l’espacement et
la taille des cellules indépendamment de la taille du texte. Vous pouvez également fixer le
positionnement des menus par rapport à l’objet de déclenchement aussi bien que le placement des
sous-menus par rapport au déclencheur de l’élément de menu ou du menu contextuel principal.
Fireworks génère automatiquement pour vous le code JavaScript. Les menus exportés sont
entièrement compatibles avec Dreamweaver MX. Pour plus d’informations, voir « Création de
menus contextuels » à la page 306.
La fonction de modification du symbole de bouton d’occurrence
vous permet de créer un symbole
de bouton, puis d’identifier aisément chaque bouton en leur affectant un texte, des URL et cibles
spécifiques dans le Vérificateur de propriétés. Vous pouvez également modifier d’autres
caractéristiques graphiques du symbole et répercuter ces modifications sur toutes les occurrences
de bouton sans affecter les propriétés de l’occurrence. Pour plus d’informations, voir « Création
d’un symbole de bouton » à la page 295.
Procédures de travail ouvertes
Vous n’avez pas tenu de respecter les procédures de travail d’un autre utilisateur. En utilisant
Fireworks MX, vous pouvez intégrer la production graphique dans votre processus de
développement avec une procédure de travail ouverte, efficace qui reconnaît et prend en charge les
formats de fichier, applications et standards que vous utilisez.
Les commandes JavaScript avec l’interface SWF
place la création de commandes JavaScript à
niveau supérieur. Les développeurs peuvent créer et exécuter des commandes complexes afin
d’étendre et d’automatiser Fireworks MX en combinant l’extensibilité de l’API JavaScript de
Fireworks avec des interfaces développées sous Flash MX en utilisant des composants ainsi que
ActionScript. Pour plus d’informations, voir Extending Fireworks MX, disponible sous la forme
d’un fichier PDF sur le CD d’installation et à l’adresse http://www.macromedia.com/support/
fireworks/extend.html.
Le support Macromedia Exchange
signifie que les utilisateurs, même ceux qui ne sont pas
intéressés par la création de commandes JavaScript, peuvent charger des commandes créées par
des utilisateurs depuis Exchange. Les commandes apparaissent dans l’espace de travail de
Fireworks MX sous la forme de panneaux ou de boîtes de dialogue simples d’utilisation.
Fireworks MX est livré avec plusieurs commandes utilisateur dans le menu Commandes, ainsi
qu’avec un panneau utilisateur Aligner dans le menu Fenêtre.
Introduction12
Les contrôles de la table de mise en page des découpes
vous permettent de définir et d’optimiser
les mises en page de la table des découpes par simple déplacement des repères de découpe.
Fireworks redimensionne automatiquement les découpes attachées, ajoutant et supprimant des
découpes, si nécessaire. Pour plus d’informations, voir « Déplacement des repères d’une découpe
pour modifier la découpe » à la page 275.
La fonction de reconstitution des tables
permet de reconstruire instantanément un nouveau
fichier source PNG lorsque vous pointez vers un fichier HTML contenant des tables avec des
découpes d’image. Macromedia Fireworks et les comportements Dreamweaver, comme les survols
d’image et les menus contextuels, sont importés et attachés aux découpes appropriées.
Cela est utile lorsque vous travaillez sur des projets de site Web existants, et que les seuls fichiers
disponibles sont les pages HTML publiées. Vous pouvez importer les fichiers HTML dans
Fireworks et créer des fichiers source PNG à partir de ces derniers. Pour plus d’informations, voir
« Création de fichiers PNG dans Fireworks à partir de fichiers HTML » à la page 80.
Roundtrip Photoshop 6 text
vous permet d’ouvrir un fichier Photoshop 6 ou 7 en laissant intact le
texte modifiable. Le graphisme peut ainsi être modifié, puis réexporté au format Photoshop tout
en maintenant l’apparence correcte du texte et la possibilité de le modifier. Pour plus
d’informations, voir « Importation de texte depuis Photoshop » à la page 407.
Roundtrip avec Microsoft FrontPage
est disponible en cliquant sur le bouton Exportation rapide.
Les tables de lancement et de modification agissent sur le fichier original : les tables sont mises à
jour dans FrontPage sans que les modifications de code faites dans FrontPage soient perdues. Pour
plus d’informations, voir « Exportation de code HTML Fireworks vers FrontPage » à la page 404.
L’intégration de Macromedia Sitespring
vous permet de disposer sur votre espace de travail
Fireworks MX des meilleurs outils de production et gestion des clients. Choisissez simplement
Fenêtre > Sitespring pour ouvrir la fenêtre Sitespring. Pour plus d’informations, consultez la
documentation de Sitespring.
Bien démarrer 13
Introduction14
CHAPITRE 1
Didacticiel des bases
de la conception graphique
Le présent didacticiel vous guidera à travers les opérations de base de la conception de graphismes
avec Macromedia Fireworks MX. L’utilisation de l’application leader de l’industrie informatique
dans le domaine du graphisme Web vous permettra d’acquérir une expérience pratique et
d’apprendre les concepts de base de la conception graphique.
Si vous êtes déjà familier avec la conception graphique de Fireworks, vous pouvez continuer avec
« Didacticiel des bases de la conception Web » à la page 45, où vous apprendrez comment
concevoir des pages Web avec Fireworks.
Objectifs du didacticiel
Ce didacticiel vous permet d’effectuer les tâches nécessaires permettant de créer avec FireWorks
une petite annonce pour un loueur de voitures classique qui peut être effectuée en moins d’une
heure. Vous apprendrez à :
•
Copier le dossier Tutorials
•
Afficher le fichier final
•
Créer et sauvegarder un nouveau document
•
Explorer l’environnement de travail de Fireworks
•
Créer et modifier des objets vectoriels
•
Importer un bitmap et sélectionner des pixels
•
Ajouter et modifier des effets en direct
•
Travailler avec des calques et des objets
•
Créer et modifier un masque
•
Créer et éditer du texte
•
Exporter le document
Prérequis
Bien que ce didacticiel ait été conçu pour des personnes n’ayant jamais utilisé Fireworks, il couvre
beaucoup de nouvelles fonctionnalités de Fireworks, et peut donc également être utile aux
utilisateurs expérimentés. Vous n’avez pas besoin d’être un concepteur graphique pour utiliser ce
didacticiel, mais vous devez avoir des connaissances informatiques de base et être capable d’utiliser
les applications bureautiques standard. Cela implique savoir comment trouver des fichiers et des
dossiers sur votre disque dur.
15
Copier le dossier Tutorials
Avant de commencer, vous devrez créer une copie du dossier Tutorials. Vous pourrez ainsi
enregistrer votre travail tout en vous permettant, vous ou un autre utilisateur, de terminer le
didacticiel plus tard en utilisant les fichiers originaux.
Ouvrez le dossier de l’application Fireworks de votre disque dur.
1
Remarque : Si vous ne pouvez pas voir le dossier de votre application Fireworks, vous avez certainement un
accès limité aux fichiers de votre système. Vous pouvez charger les fichiers nécessaires à ce didacticiel depuis le
Centre d’assistance sur le Web à l’adresse http://www.macromedia.com/fr/support/.
Faites une copie du dossier Tutorials sur votre bureau.
2
Afficher le fichier final
Affichez le fichier final du didacticiel pour voir à quoi ressemblera le projet achevé.
1 Démarrez votre navigateur Web.
Ouvrez le dossier Tutorials que vous avez copié sur votre bureau et recherchez Tutorial1/Complete.
2
Remarque : Certaines versions de Microsoft Windows cachent par défaut les extensions de fichier reconnues.
Si vous n’avez pas modifié cette option, les fichiers du dossier Complete s’afficheront sans les extensions.
Lorsque l’on traite des graphismes pour le Web, il est préférable de pouvoir voir les extensions de fichier.
Reportez-vous à l’aide de Windows pour obtenir plus d’informations concernant l’affichage des extensions de
fichier.
Sélectionnez le fichier final.jpg et faites-le glisser vers la fenêtre du navigateur actif.
3
Pour ce didacticiel, vous utiliserez Fireworks pour concevoir et exporter une copie de cette petite
annonce pour loueur de voitures classique.
Remarque : Le dossier Complete contient également le document Fireworks avec lequel le fichier JPEG a été
généré. Pour afficher le document, double-cliquez sur final.png.
Créer et sauvegarder un nouveau document
Maintenant que vous avez vu le fichier final.jpg, vous êtes prêt à commencer votre projet.
1 Dans Fireworks, choisissez Fichier > Nouveau.
La boîte de dialogue Nouveau document s’affiche alors.
Chapitre 116
Saisissez 480 pour la largeur et 214 pour la hauteur. Vous devez vous assurer que ces deux
2
valeurs sont en pixels et que la couleur du fond est blanche, puis cliquez sur OK.
Une fenêtre document ayant comme titre Sans Titre-1.png (Windows) ou Sans Titre-1
(Macintosh) est maintenant ouverte.
3 Si la fenêtre du document n’est pas maximisée, c’est-à-dire qu’elle n’occupe pas toute la surface
de l’écran, maximisez-la en utilisant le bouton d’agrandissement (Windows) ou la case zoom
(Macintosh) en haut de la fenêtre du document. Cela vous procurera beaucoup d’espace de
travail.
Choisissez Fichier > Enregistrer sous.
4
La boîte de dialogue Enregistrer sous (Windows) ou Enregistrer (Macintosh) s’ouvre.
Ouvrez le dossier Tutorials/Tutorial1 de votre bureau.
5
6 Nommez le fichier vintage.
7 Choisissez l’option Ajouter l’extension du nom du fichier si elle n’est pas encore sélectionnée
(Macintosh uniquement).
8 Cliquez sur Enregistrer.
La barre de titre affiche le nouveau nom de fichier avec une extension PNG. PNG est le format
de fichier natif de Macromedia Fireworks. Le fichier PNG est votre fichier source : c’est là que
vous effectuerez l’ensemble de votre travail dans Fireworks. A la fin de ce didacticiel, vous
apprendrez à exporter votre document vers un autre format afin de l’utiliser sur le Web.
Pendant l’exécution du didacticiel, pensez à enregistrer fréquemment les modifications en
choisissant Fichier > Enregistrer.
Remarque : Pendant l’exécution du didacticiel, il peut être utile d’annuler une partie des modifications. Fireworks
peut annuler plusieurs de vos modifications récentes, le nombre exact dépend du nombre spécifié dans la boîte de
dialogue Préférences. Pour annuler la modification la plus récente, choisissez Edition > Annuler.
Didacticiel des bases de la conception graphique 17
Explorer l’environnement de travail de Fireworks
Avant de poursuivre, examinez les éléments qui constituent l’environnement de travail de
Fireworks :
•
Au centre de l’écran se trouve la fenêtre du document. Au centre de la fenêtre se trouve le
document. C’est là que s’affichent le document Fireworks et tout graphisme que vous créez.
•
En haut de l’écran se trouve une barre de menus. La plupart des commandes de Fireworks sont
accessibles à partir de la barre de menus.
•
A gauche de l’écran se trouve le panneau Outils. Si le panneau Outils n’est pas visible,
choisissez Fenêtre > Outils. Le panneau Outils est l’endroit où vous trouverez des outils pour
sélectionner, créer et modifier toute une variété d’éléments graphiques d’objets Web.
•
En bas de l’écran se trouve le Vérificateur de propriétés. Si le Vérificateur de propriétés n’est pas
visible, choisissez Fenêtre > Propriétés. Le Vérificateur de propriétés affiche des propriétés pour
un objet ou un outil sélectionné. Vous pouvez changer ces propriétés. Si aucun objet ni aucun
outil n’est sélectionné, le Vérificateur de propriétés affiche les propriétés du document.
Le Vérificateur de propriétés affiche deux ou quatre lignes de propriétés. Si le Vérificateur de
propriétés est à mi-hauteur, autrement dit s’il n’affiche que deux lignes, vous pouvez cliquer sur
la flèche d’extension située dans le coin inférieur droit afin de voir toutes les propriétés.
Flèche d’extension à mi-hauteur
Chapitre 118
•
Sur la droite de l’écran se trouve toute une variété de panneaux tels que le panneau Calques et
le panneau Optimiser. Vous pouvez les ouvrir, ainsi que d’autres panneaux, à partir du menu
Fenêtre.
•
Placez votre pointeur au-dessus des différents éléments de l’interface. Si vous gardez le pointeur
suffisamment longtemps au-dessus d’un élément de l’interface, une info-bulle apparaît. Les
info-bulles identifient des outils, des menus, des boutons ainsi que d’autres options de
l’interface de Fireworks. Les info-bulles disparaissent lorsque vous éloignez le pointeur des
éléments d’interface qu’elles identifient.
Plus vous progresserez dans le didacticiel, plus vous en apprendrez sur chacun de ces éléments.
Créer et modifier des objets vectoriels
Avec Fireworks, vous pouvez créer et modifier deux types de graphismes : les objets vectoriels et
les images bitmap.
Un objet vectoriel est la description mathématique d’une forme géométrique. Le trajet des
vecteurs est défini par des points. Le trajet des vecteurs ne présente pas de dégradation de la
qualité lorsque vous effectuez un zoom ou bien si vous agrandissez ou réduisez l’échelle. La feuille
de l’illustration ci-dessous est un ensemble d’objets vectoriels. Notez les bords lissés de la feuille, et
ce même si vous effectuez un zoom avant.
A l’opposé, une image bitmap est constituée d’une grille de pixels colorés. Les images comportant
des variations de couleur complexes, comme les photographies, sont plus souvent des images
bitmap.
Didacticiel des bases de la conception graphique 19
Tandis que de nombreuses applications proposent des outils permettant de modifier soit des
formes vectorielles, soit des images bitmap, Fireworks vous laisse travailler avec les deux types de
graphismes. Dans cette partie, vous allez travailler avec des graphismes vectoriels.
Créer des objets vectoriels
Vous allez maintenant créer deux des éléments graphiques de votre document. Pour commencer,
vous allez créer un rectangle bleu qui sera positionné en bas du document. Puis, vous créerez un
rectangle qui fera office de bord pour le contenu du document.
1 Choisissez l’outil Rectangle dans la partie Vecteur du panneau Outils.
2 Cliquez sur Couleur de remplissage dans le Vérificateur de propriétés.
La fenêtre contextuelle Couleur de remplissage s’ouvre.
Ta p e z 333366 dans le champ de saisie situé en haut de la fenêtre et appuyez sur Entrée.
3
La case Couleur de remplissage devient bleu foncé afin de refléter la couleur de votre choix.
4 Dans la fenêtre du document, positionnez le pointeur en forme de croix sur le document, et
faites-le glisser vers le bas et vers la droite afin de créer un rectangle. Vous pouvez tracer le
rectangle n’importe où sur le document. Plus tard dans cette procédure, vous modifierez la
taille et vous le positionnerez.
Chapitre 120
Lorsque vous relâchez le bouton de la souris, un rectangle bleu foncé apparaît, sélectionné,
5
dans la zone que vous avez définie.
Vous pouvez dire à quel moment un objet est sélectionné, car des points bleus apparaissent
dans les coins. La plupart des objets possède également une surbrillance bleue autour de leurs
bords extérieurs, mais les rectangles sont des exceptions.
6 Dans le coin inférieur gauche du Vérificateur de propriétés, tapez 480 dans la case de la largeur
et 15 dans la case de la hauteur, puis appuyez sur Entrée.
La taille du rectangle s’adapte aux dimensions spécifiées.
7 Choisissez l’outil Pointeur dans la section Sélection du panneau Outils.
Faites glisser le rectangle de manière à ce qu’il soit positionné en bas du document, comme
8
présenté ci-dessous. Utilisez les touches fléchées pour effectuer un placement précis.
Choisissez à nouveau l’outil Rectangle et tracez un second rectangle. Tracez-le n’importe où sur
9
le document et donnez-lui la taille de votre choix. Vous modifierez ses propriétés et sa position
dans la section suivante.
Modifier les propriétés d’objets
Ici, vous modifierez le deuxième rectangle que vous avez créé en changeant sa taille, sa position et
sa couleur dans le Vérificateur de propriétés.
1 Le rectangle toujours sélectionné, cliquez sur la case Couleur du trait du Vérificateur de
propriétés et entrez la valeur de couleur CCCCCC. Appuyez sur Entrée pour appliquer les
modifications.
Reglez la taille de pointe sur 1 en faisant glisser le curseur ou en tapant la valeur la zone de saisie.
2
Didacticiel des bases de la conception graphique 21
Cliquez sur la case Couleur de remplissage du Vérificateur de propriétés et cliquez sur le
3
bouton Transparent.
4 Dans le Vérificateur de propriétés, saisissez les valeurs suivantes dans les cases correspondant à
la largeur, à la hauteur et aux coordonnées. Cliquez ensuite en-dehors du Vérificateur de
propriétés pour appliquer vos modifications.
•
Largeur : 480
•
Hauteur : 215
•
X: 0
•
Y: 0
Le rectangle se transforme en un cadre gris situé tout autour du bord du document.
Si votre système utilise le gris comme couleur de fond de la fenêtre, il vous sera difficile à ce
niveau-là de voir le rectangle. Mais ne vous inquiétez pas, il est toujours là.
5 Choisissez l’outil Pointeur et cliquez n’importe où à l’exception du rectangle afin de
désélectionner ce dernier.
Les propriétés changent dans le Vérificateur de propriétés. Comme aucun objet n’est
sélectionné, vous voyez maintenant les propriétés du document au lieu des propriétés de
l’objet.
Importer un bitmap et sélectionner des pixels
Vous allez ensuite importer une image bitmap et créer une sélection flottante de ses pixels.
Importer une image
Vous allez modifier l’image d’une voiture classique. Vous devez commencer par importer l’image.
Choisissez Fichier > Importer et ouvrez le dossier Tutorials de votre bureau. Ouvrez le dossier
1
Tu t o r i a l 1 / A s s e t s .
Sélectionnez car.jpg et cliquez sur Ouvrir.
2
Chapitre 122
Alignez le pointeur d’insertion au coin supérieur gauche du document et cliquez, comme
3
présenté dans l’illustration suivante.
L’image apparaît, sélectionnée, sur le document.
4 Cliquez n’importe où à l’exception de l’image sélectionnée afin de la désélectionner.
Créez une sélecion de pixels
Ensuite, vous allez sélectionner les pixels qui constituent la voiture dans l’image que vous avez
importée, puis copier et coller les pixels en qualité de nouvel objet.
Choisissez l’outil Zoom dans la partie Affichage du panneau Outils.
1
L’outil Zoom
Cliquez une fois sur l’image.
2
L’affichage est agrandi de 150 %. Le zoom avant vous permet de mieux voir ce que vous êtes en
train de sélectionner et de contrôler plus finement votre sélection.
Cliquez sur l’outil Lasso dans la section Bitmap du panneau Outils et maintenez enfoncé le
3
bouton de la souris. Choisissez l’outil Lasso polygonal à partir du menu contextuel qui
apparaît.
L’outil Lasso polygonal vous permet de tracer une sélection autour des pixels en utilisant une
série de lignes droites. Vous utiliserez l’outil Lasso polygonal pour sélectionner les pixels qui
constituent l’image de la voiture.
Dans le Vérificateur de propriétés, fixez l’option Bord sur Anticrénelé.
4
Didacticiel des bases de la conception graphique 23
Avec le pointeur de l’outil Lasso polygonal, cliquez sur le bord supérieur de la voiture, puis
5
cliquez de manière répétée tout autour du bord de la voiture afin de poursuivre la sélection.
6 Terminez la sélection en déplaçant le pointeur à l’endroit où vous avez commencé la sélection.
Un petit carré gris apparaît à côté du pointeur du lasso polygonal pour vous indiquer que vous
êtes sur le point de terminer la sélection. Cliquez pour achever la sélection.
Une bordure de sélection apparaît autour des pixels que vous avez sélectionnés.
Choisissez Edition > Copier.
7
La sélection est copiée dans le Presse-papiers.
Choisissez Edition > Coller.
8
L’image de la voiture est collée dans le document sous la forme d’un nouvel objet bitmap.
9 Choisissez l’outil Pointeur et double-cliquez n’importe où à l’exception du bitmap afin de le
désélectionner.
10 Cliquez sur le menu contextuel Définir le Zoom situé en bas de la fenêtre du document et
rétablissez un affichage de 100 %.
Ajouter et modifier des effets en direct
Vous appliquerez ensuite les effets en direct à l’image bitmap d’origine. Vous changerez la teinte et
la saturation de l’image et vous appliquerez un flou.
Chapitre 124
Cliquez n’importe où sur l’image du désert. (Faites toutefois attention à ne pas cliquer sur la
1
voiture.)
2 Dans le Vérificateur de propriétés, cliquez sur le bouton Ajouter des effets (le bouton avec le
signe plus (+)).
Le bouton Supprimer l’effet
Le bouton Ajouter des effets
3 Choisissez Régler la couleur > Teinte/Saturation à partir du menu contextuel des effets.
La boîte de dialogue Teinte/Saturation s’ouvre.
Choisissez l’option Coloriser et cliquez sur OK.
4
L’image devient colorée sur le document, et l’effet est ajouté à la liste des effets en direct dans le
Vérificateur de propriétés. Les effets en direct sont modifiables : vous pourrez toujours ajouter
des éléments à cette liste, supprimer l’effet ou le modifier.
5 Double-cliquez sur l’effet Teinte/Saturation afin de le modifier.
Didacticiel des bases de la conception graphique 25
Conseil : Une alternative consiste à cliquer sur le bouton Info à côté de l’effet.
La boîte de dialogue Teinte/Saturation s’ouvre à nouveau.
6 Choisissez une teinte de 25 et une saturation de 20, puis cliquez sur OK.
Le niveau de teinte et de saturation de l’image change et un aspect sépia apparaît, comme sur
les anciennes photographies.
7 Cliquez à nouveau sur le bouton Ajouter des effets pour ajouter un nouvel effet en direct.
Choisissez Flou > Accentuer le flou à partir du menu contextuel Effets.
8
Les pixels du bitmap sélectionné deviennent flous, et le nouvel effet est ajouté à la liste des
effets en direct dans le Vérificateur de propriétés.
Travailler avec des calques et des objets
Les calques permettent de diviser un document Fireworks en plusieurs plans verticaux discrets.
Un document peut être composé de plusieurs calques, et chaque calque peut contenir de
nombreux objets. Dans Fireworks, le panneau Calques affiche la liste des calques et des objets
contenus par chaque calque.
Le panneau Calques vous permet de nommer, masquer, afficher et changer l’ordre d’empilement
des calques et des objets, ainsi que de fusionner des bitmaps et d’appliquer des masques bitmap.
Vous pouvez également ajouter et supprimer des calques en utilisant le panneau Calques.
Dans cette partie du didacticiel, vous utiliserez le panneau Calques pour fusionner les deux images
bitmap. Puis, vous nommerez les objets de votre document. Vous utiliserez également le panneau
Calques pour changer l’ordre d’empilement des objets.
Plus loin dans le didacticiel, vous utiliserez le panneau Calques pour appliquer un masque à
l’image fusionnée.
Fusionner des bitmaps
Maintenant que vous avez appliqué les effets en direct à l’image d’arrière-plan, vous allez la
fusionner avec l’image en niveaux de gris de la voiture afin de créer un bitmap simple.
Chapitre 126
Si le panneau Calques est réduit ou invisible, cliquez sur sa flèche d’extension ou choisissez
1
Fenêtre > Calques.
La flèche d’extension
Cliquez sur la vignette de l’image en niveaux de gris de la voiture dans le panneau Calques.
2
3 L’image de la voiture sélectionnée, cliquez sur l’icône du menu contextuel Options située en
haut à droite du panneau Calques.
L’icône du menu contextuel
Options
Choisissez Fusionner vers le bas.
4
Dans le panneau Calques, les deux objets bitmap se fusionnent en un bitmap.
Dans le Vérificateur de propriétés, la liste des effets en direct ne comporte plus aucun effet.
Cela est dû au fait que la fusion vers le bas combine les pixels de chaque bitmap et les rend non
modifiables en tant qu’images séparées. Les effets en direct que vous appliquez à un objet ou à
un bitmap ne sont plus modifiables après l’exécution d’une fusion vers le bas avec un autre
bitmap.
Didacticiel des bases de la conception graphique 27
Nommer des objets
Il est toujours judicieux de nommer vos objets, cela vous permettra par la suite de les identifier
facilement. Lorsqu’un document prend du volume et qu’il contient plusieurs objets, il peut
devenir difficile à gérer si vos objets ne possèdent pas de noms uniques.
Vous nommerez les objets de votre document en utilisant le panneau Calques et le Vérificateur de
propriétés.
1 Dans le panneau Calques, double-cliquez sur le mot Bitmap situé à côté de la vignette de
l’image.
Un champ d’édition apparaît.
Ta p e z Classic Car dans le champ d’édition et appuyez sur Entrée.
2
Le nouveau nom est appliqué à l’objet bitmap.
Dans la fenêtre du document, sélectionnez le rectangle gris qui borde le document. S’il n’est
3
pas bien visible sur le document, sélectionnez-le dans le panneau Calques.
Cette fois-ci, vous allez nommer un objet en utilisant le Vérificateur de propriétés.
Dans le Vérificateur de propriétés, tapez Border dans la zone du nom de l’objet et appuyez sur
4
Entrée.
Le nom que vous saisissez est également affiché dans le panneau Calques, à côté de la vignette
de l’objet.
Entrez un nom pour l’objet rectangle restant en utilisant le panneau Calques ou le Vérificateur
5
de propriétés. Utilisez le nom de votre choix, mais assurez-vous de choisir un nom significatif
qui vous permettra par la suite d’identifier et de modifier facilement des objets dans le
document.
Chapitre 128
Changer l’ordre d’empilement des objets
L’image bitmap fusionnée recouvre l’objet bordure et le rectangle bleu. La bordure et le rectangle
bleu doivent rester au-dessus, c’est pourquoi vous allez utiliser le panneau Calques afin de changer
l’ordre d’empilement des objets du document.
1 Dans le panneau Calques, cliquez sur la vignette du rectangle bleu afin de le sélectionner.
Faites-le glisser au sommet du calque 1, au-dessus de la vignette de la voiture classique.
2
Remarque : Le calque situé au-dessus de la pile dans le panneau Calques est toujours le calque Web. Vous
trouverez plus de détails concernant le calque Web dans « Didacticiel des bases de la conception Web » à la
page 45.
Lorsque vous faites glisser un objet, le pointeur se transforme afin de refléter le glissement
effectué (Windows uniquement). Une ligne sombre dans le panneau Calques indique l’endroit
où il serait placé si vous relâchiez le bouton de la souris à ce moment précis.
3 Relâchez le bouton de la souris.
Le rectangle bleu est placé juste au-dessus de l’objet bitmap dans le panneau Calques. L’ordre
d’empilement des objets change également sur le document. Le rectangle bleu recouvre à
présent l’objet bitmap et l’objet de la bordure.
4 Si vous voulez que l’objet de la bordure soit l’objet placé au sommet, sélectionnez sa vignette et
faites-la glisser en haut du panneau Calques, au-dessus du rectangle bleu.
Créer et modifier un masque
Maintenant que vous avez effectué différentes modifications au niveau de l’image Voiture
classique, vous allez devoir effectuer une dernière procédure pour lui conférer une apparence de
transparence graduelle.
Didacticiel des bases de la conception graphique 29
Dans Fireworks, vous pouvez appliquer deux types de masques : les masques vectoriels et les
masques bitmap. Pour ce didacticiel, vous appliquerez un masque bitmap simple à l’image de la
voiture. Puis, vous le modifierez en lui assignant une trame de dégradé. Les pixels du masque
afficheront ou masqueront l’image de la voiture, selon la valeur de leur échelle de gris.
Appliquer un masque
Pour commencer, vous allez appliquer à l’image de la voiture un masque bitmap vide et blanc. Un
masque blanc présente un objet ou une image sélectionnée, attendu que les pixels noirs d’un
masque masquent un objet ou une image sélectionnée.
Vous dessinerez également sur le masque afin de donner l’impression que l’image de la voiture
s’évanouit à l’arrière-plan.
Avec l’outil Pointeur, sélectionnez l’image bitmap.
1
2 Cliquez sur le bouton Ajouter masque, dans la partie inférieure du panneau Calques.
Un masque vide transparent est ajouté à l’image sélectionnée. Vous pouvez voir que le masque
a été ajouté en jetant un oeil à la vignette du masque, dans le panneau Calques. La surbrillance
jaune autour de la vignette du masque indique qu’elle est sélectionnée.
La vignette du masque
L’objet masque
Modifier le masque
Vous allez maintenant assigner à l’image bitmap une apparence transparente en ajoutant au masque
une trame de dégradé.
La vignette du masque sélectionnée dans le panneau Calques, cliquez et maintenez enfoncé le
1
bouton de la souris au niveau de l’outil Pot de peinture dans la section Bitmap du panneau
Outils. Choisissez l’outil Dégradé à partir du menu contextuel qui apparaît.
Cliquez sur la case Couleur de remplissage dans le Vérificateur de propriétés.
2
La fenêtre contextuelle Modifier le dégradé s’ouvre.
Chapitre 130
Loading...