Share
Nous vous présentons aujourd'hui le premier article d'une série d'articles sur Fireworks for Web Designers. Nous allons examiner de plus près tout ce que Fireworks peut offrir aux concepteurs Web et pourquoi, utilisé correctement, il est le compagnon idéal de Photoshop. Préparez-vous à porter votre compréhension de Fireworks au niveau supérieur!
Tom Green est professeur de multimédia interactif à la School of Media Studies du Humber Institute of Technology and Advanced Learning. Comme tous les professeurs du programme, Tom pense que ses étudiants méritent d’être enseignés par des instructeurs qui sont considérés comme des experts dans leur domaine et dont les connaissances de la matière correspondent aux meilleures pratiques de l’industrie. Il est un expert de la communauté Adobe, un responsable de l'éducation (postsecondaire) et un partenaire de Community MX, et figurait dans le Top 10 des créateurs Flash les plus influents d'Adobe..
Tom a écrit plusieurs livres (9 au total!) Et prolongé des tutoriels sur le thème Feux d'artifice et la conception Web au cours des 7 dernières années. Il est donc tout à fait approprié pour nous guider à travers cet incroyable programme. Après cette introduction, Tom nous guidera dans le monde merveilleux de Fireworks avec plusieurs tutoriels vidéo. Bon, maintenant que vous en savez un peu sur Tom, creusons!
"Photoshop est un marteau et Fireworks est un tournevis…"
Commençons cette série en étant droits l'un avec l'autre: je ne suis pas ici pour vous convaincre que Fireworks est meilleur que Photoshop pour la conception de sites Web. Si vous êtes un utilisateur confirmé de Photoshop et que vous l’utilisez pour concevoir des sites Web, ne vous attendez pas à ce que je tente d’exploiter Photoshop de vos doigts. Tout ce que j'attends de vous, c'est que les commentaires ci-dessous ne soient pas remplis avec "Photoshop le fait mieux parce que…." Nous avons déjà eu cette discussion.
Brandon m’a demandé de faire une série d’articles sur l’intégration de Fireworks dans l’ordre général des choses en matière de flux de production numérique. Pour être honnête, j'attendais cette opportunité avec impatience depuis un certain temps car il existe un réel danger, dans cette activité idiote, de s'accrocher à un outil et de ne pas l'abandonner. Pour moi, Photoshop est un marteau et Fireworks est un tournevis. Vous comprenez ainsi quand je vous dis que je suis fatigué de regarder les gens perdre leur temps à viser avec un marteau ou à visser des clous.
J'utilise Fireworks depuis son lancement sur le marché et je peux vous dire que Macromedia n'avait pas la moindre idée de l'ampleur de la croissance du Web. Il essayait de créer un éditeur graphique facile à utiliser pouvant être utilisé dans Flash ou Dreamweaver. Je suis devenu accro parce que j'étais un utilisateur de Director et que la création de boutons dans Photoshop - CHOPS anybody - était fastidieuse et longue. Quand j'ai découvert que je pouvais faire le même bouton dans Fireworks en cinq minutes, il me fallait 10 minutes pour créer dans Photoshop, et je n'ai pas regardé en arrière depuis. Gardez simplement à l'esprit que j'utilise toujours Photoshop lorsque je dois effectuer des tâches que Fireworks ne peut pas exécuter, telles que la fonctionnalité "prise en compte du contenu" et plusieurs filtres..
L’autre aspect de cette série est que Adobe a fait un travail plutôt moche en positionnant Fireworks sur le marché. Ce n’est qu’à la sortie de CS4 qu’ils ont compris quelque chose que peu de gens savaient déjà: Fireworks est un outil de prototypage rapide..
C’est l’une des choses que je prévois de souligner dans cette série.. En tant qu'outil de prototypage, Fireworks vous offre la possibilité de:
Le problème est que les gens voient ces quatre aspects et s’arrêtent là parce qu’ils perdent de l’attention avant le mot "prototype". Ils ne vont pas plus loin et découvrent que chacune de ces utilisations nécessite une "prochaine étape" qui implique généralement de passer le relais à un pro chargé de la tâche de mettre la chose au point..
Le mot «rapide» existe parce que, très franchement, les clients se posent des questions telles que: «À quoi ressemble ce projet / cette chose que vous proposez?» À ce stade, vous ne voulez pas perdre beaucoup de temps et d'argent à répondre à vos questions. la question. Fireworks vous offre une solution plutôt efficace pour répondre à cette question.
Bien que je prévoie d’approfondir ces quatre aspects de l’application dans des articles ultérieurs, revenons en arrière et examinons Fireworks dans son ensemble avant d’être plus précis. Les zones que je mets en évidence ne sont pas une liste "favorite". Ils dissipent les "mythes" sur Fireworks ou mettent en évidence une fonctionnalité majeure de productivité que vous pouvez ou ne pouvez pas trouver utile. Dans aucun ordre particulier ils sont:
Non ce n'est pas.
Fireworks exporte des mises en page HTML et / ou CSS qui nécessiteront beaucoup de travail supplémentaire de la part d'une personne possédant une conception Web ou une conception CSS et des codes de coupe. Le but de pouvoir exporter du HTML ou du CSS est de donner au client un aperçu de ce que vous suggérez et de donner à l’équipe Web un point de départ pour le projet. Je n'ai pas encore rencontré de projet Fireworks directement sur le Web depuis l'application.
En fait, quiconque utilise Fireworks pour créer des sites Web en version finale, doit remettre sa licence Fireworks CS5..
Depuis plusieurs années, Fireworks contient un panneau d’optimisation qui vous permet de comparer divers paramètres d’optimisation pour les images au format jpg et gif et de faire une comparaison de la qualité 4 en 1 avec l’original. Ce n’est pas là pour frapper un bâton dans le débat sur Fireworks / Photoshop, mais pour mettre en évidence une fonction de productivité assez souvent négligée de l’application. En fait, le jpg lancé par Fireworks est en fait plus petit et meilleur que celui lancé par Photoshop. Ne me prenez pas au mot. Greg Rewis, évangéliste mondial d'Adobe, a également découvert cela et blogué à ce sujet..
En fait, elle est officiellement connue sous le nom de bibliothèque commune. Ce panneau contient une multitude de symboles utiles que vous pouvez utiliser dans vos prototypes. Ces symboles peuvent être ajoutés aux pages et, dans le cas des symboles Flex, ils peuvent être échangés ultérieurement. N'oubliez pas que ces symboles ne sont que des icônes, mais ils facilitent la vie lorsque vous devez ajouter une boîte étroite à du chrome..
Parallèlement, Fireworks offre la possibilité de créer des symboles interactifs, des menus déroulants, des survols et un certain nombre de fonctionnalités et d’effets interactifs auxquels nous sommes habitués au fil des ans. Ces symboles sont conservés dans une bibliothèque Symbol et peuvent être réutilisés si nécessaire.
Introduit dans Fireworks CS4, le format FXG fait de Fireworks un moteur de conception d’interface puissant pour la création de prototypes d’applications Internet enrichies. En fait, vous pouvez exporter une conception multicouche et multicouche de Fireworks en tant que fichier FXG et l'ouvrir… avec des pages et des calques intacts… dans Flash Catalyst CS5. Un fait peu connu à propos de ce format est que vous pouvez enregistrer un document Fireworks en tant que fichier FXG et l'ouvrir dans Illustrator CS5. Par ailleurs, n'oublions pas que les "tournées" sont une fonctionnalité des applications depuis des années. Ainsi, vous pouvez, par exemple, placer une image Fireworks dans un document Dreamweaver et réellement l'éditer et le modifier à partir de Dreamweaver..
Fireworks CS5 peut ouvrir des documents Illustrator et Photoshop et enregistrer des documents dans les formats natifs de ces deux applications… Fireworks prend en charge les calques Photoshop, les styles de calque, la composition du calque, le calque vectoriel et les modes de fusion communs à Fireworks et Photoshop. Les couches d'ajustement et les groupes de découpage constituent des exceptions. Si vous en avez besoin, vous pouvez les aplatir ou les ignorer.
Vous remarquerez peut-être sur la figure que vous ne pouvez enregistrer que des fichiers dans Illustrator 8. Si vous êtes un noyau dur, c’est probablement votre excuse pour donner un laissez-passer à Fireworks. Ce serait une grave erreur.
Dans le point précédent, j'ai mis en évidence le format FXG. Si vous faites cela, les effets de remplissage vectoriels pris en charge sont conservés en tant que vecteurs, ce qui signifie que les conceptions Fireworks ouvertes dans Illustrator peuvent facilement être converties en images haute résolution pour les travaux d'impression CMJN ou simplement ouvertes dans Illustrator pour une manipulation ultérieure..
L'introduction de la collection de produits CS5 a également marqué le lancement de Fireworks dans Device Central..
Choisissez votre périphérique et cliquez sur Créer pour ouvrir Fireworks. Lorsque Fireworks est ouvert, la zone de travail est redimensionnée à la taille de l'écran du périphérique. À partir de là, créez votre dessin et sélectionnez Fichier> Aperçu dans Device Central pour afficher votre page dans le périphérique. J'admettrai que la mise en œuvre est assez boiteuse comparée à ce que vous pouvez faire avec d'autres applications. À ce stade, il vous suffit de voir à quoi ressemble la page dans l'appareil. Si vous voulez créer un motif de plusieurs pages et faire défiler les pages, ne vous embêtez pas. Vous ne voyez que des pages vues..
Créez un bouton multi-états dans Fireworks, faites glisser le symbole du canevas Fireworks vers la scène Flash et un symbole de bouton Flash pleinement fonctionnel apparaît dans la bibliothèque Flash. J'utilise également Fireworks pour créer pratiquement tous les éléments d'interface que j'ai utilisés dans mes livres, tutoriels et cours depuis des années. En fait, j’ai utilisé une fois un skin vidéo Flash entièrement fonctionnel créé dans Fireworks dans l’un de mes livres Flash Video uniquement pour prouver que Fireworks devait être invité à la soirée..
Les concepteurs ont également tendance à oublier que Fireworks crée des animations GIF. Ces animations peuvent être générées sous la forme de fichiers .swf pour une utilisation dans Flash ou comme prévu… After Effects CS5.
C’est un domaine dans lequel Fireworks permet de gagner du temps par rapport à Photoshop. Bien que vous puissiez créer des actions Photoshop pour redimensionner, renommer et reformater des dossiers contenant des images, vous devez créer cette action. Le traitement par lots de Fireworks est situé dans Fichier> Traitement par lots. À partir de là, vous identifiez simplement les fichiers à traiter, ce que vous voulez leur faire et où ils vont. J'ai traité des dossiers contenant quelques dizaines d'images prises sur mon Nikon D200 pour un téléchargement ultérieur sur Flickr. Du début à la fin, le processus prend rarement plus de trois ou quatre minutes.
Comme je l'ai dit au début, l'objectif de la pièce n'est pas d'attiser le débat "Fireworks vs Photoshop" qui se déroule sans débat depuis l'application dans les rues de Macromedia. Lorsque Adobe a acheté Macromedia, il y avait beaucoup d’argent sur le fait que Fireworks était sur le point d’être jeté sur le même tas de poussière que Freehand. Cela n’a pas été le cas et c’est en grande partie parce qu’Adobe n’a jamais considéré Fireworks comme une concurrence pour Photoshop. Au fil des années, Fireworks a attiré l’attention des concepteurs Web, des concepteurs RIA et des concepteurs mobiles comme moyen de concrétiser rapidement leurs idées pour leurs clients. À certains égards, l'évolution de Fireworks en un outil de prototypage rapide dépendait davantage de ce que les utilisateurs faisaient avec l'application et en informaient Adobe que de l'inverse..
Dans les semaines à venir, je compte faire exactement cela - vous dire ce que les utilisateurs de Fireworks font avec l'application - et vous montrer comment l'application peut s'intégrer à votre flux de travail quotidien. Que vous choisissiez de faire un tourbillon de Fireworks dépend de vous, mais à mesure que nous entrons dans l’environnement multi-écrans qui s’est soudainement étouffé, Fireworks et Photoshop deviendront des produits encore plus complémentaires que des produits concurrents..
Accentsconagua