multimedialab poule
coursblogdocgalerieliensinfos

Fireworks est une application souple de création, d'édition et d'optimisation de graphiques pour le Web.
Vous pouvez créer et modifier des images bitmap et vectorielles, créer des effets pour le Web tels que les survols
et les menus contextuels, recadrer et optimiser des graphiques afin de réduire la taille de leur fichier et gagner
du temps en automatisant les tâches répétitives.
Une fois le document terminé, vous pouvez l'exporter ou l'enregistrer au format JPEG, GIF ou autre, accompagné
des fichiers HTML contenant des tables HTML et du code JavaScript, afin de l'utiliser sur le Web.
Vous pouvez également exporter un type de fichier spécifique vers une autre application telle que Photoshop
ou Macromedia Flash, si vous voulez continuer à travailler dans ces applications.

Fireworks permet de générer des animations GIF et de manipuler (sommairement) du texte.

Les éléments textuels, vectoriels ou bitmap peuvent être sélectionnés selon deux méthodes :
directement au sein de la fenêtre de travail ou via la palette des calques.
Cette dernière permet d’organiser les calques d’éléments par groupes et recèle un unique calque nommé
“Calque Web” destiné à la définition de zones cliquables et de découpes.
Une image ainsi découpée peut alors être exportée en de multiples fichiers images accompagnés
par le fichier HTML qui les regroupe au sein d’un tableau.

Un module d’optimisation permet d’opter, visuellement, pour les réglages d’export les plus adéquats.



tutoriel Fireworks

01.
Ouvrir l'image dans Fireworks (Fichiers > Ouvrir).
02.
Sélectionner l'outil "cutter" dans la palette, section "Web":

palette web
03.
Découper la zone destinée à devenir un rollover:

decoupe
04.
Exporter le résultat sous forme de fichiers d'images ET du tableau HTML correspondant:

exporter
05.
Vous obtenez ceci:

files
06.
Ouvrir le fichier HTML avec un éditeur HTML, par exemple Dreamweaver.
Sélectionnez la découpe destinée à devenir un rollover, et ouvrez-la dans votre éditeur d'image associé , par exemple Photoshop. Apportez-y une modification et sauvez-la. Veillez à conserver une nomenclature claire: par exemple en ajoutant le suffixe _02 pour identifier l'image 2 du rollover.
07.
Dans Dreamweaver, choisissez la fonction "Insérer > Images interactives > images survolées / Rollover images".
Remplissez le formulaire afin de désigner l'image 1 et l'image 2 du rollover.
Dreamweaver crée le code Javascript nécessaire.

Vous obtenez ceci:

plongeon


Fireworks zone. Une série de tutoriaux (boutons, animations, effets de textes, etc)
Créer un menu déroulant. Réalisé avec Fireworks et intégré dans Dreamweaver, par Mediabox.
FW Design. Forum d'entraide très complet.

CBT Café. Tutoriaux Fireworks.
Créer un GIF animé avec Fireworks MX. Un tutorial de Smart Webby.
Tips Fireworks MX. Trucs et astuces de Smart Webby.
Using Fireworks to Create Images Slices. Fonction basique et très pratique de Fireworks.
Ultraweaver. Bons tutoriaux, graphiquement beaux, ce qui ne gâche rien...
Mark my web. Un chapitre très complet dédié à Fireworks: intro, explication des outils, etc.
Playing with fire. Tutoriaux nombraux et concis.
Community MX. Tutoriaux intéressants et principes complexes... Voir l'exemple de Vodafone.
Fw Zone.Communauté et tutoriaux en liens externes.
Virtual clues. Une série de tutoriaux au graphisme parfois louche...
Caughtinthefire. Quelques tutoriaux et fichiers-source en Zip.
Learn Fireworks. Quelques tutoriaux et fichiers-source à télécharger.
Projectfireworks. Extensions-maison téléchargeables.
John Dunning. Développeur d'extensions, petits outils téléchargeables, appréciables dans Fireworks.