[dossier] Pourquoi Fireworks est mieux que Photoshop pour faire du WEB

Quand j’ai commencé dans le web et dans l’infographie il y a presque 6 ans, je ne voyais qu’à travers photoshop. Normal c’était le grand à l’époque ! J’avais appris en autodidacte à créer mes calques, les nommer, les organiser et y ajouter les effets que je souhaitais. Le grand photoshop était la révolution en matière de webdesign (j’exagère bien sûr). Je me suis éclaté à de nombreuses reprises pour créer les logos, sites et autres infographies pour mes amis et moi. Je ne voyais pas d’autres solutions pour créer et cela m’allait bien. Je m’étais habitué à travailler avec cet outil superbe.

Quand je suis rentré chez Experian, mon cher bigboss m’a appris à utiliser Fireworks. Quelques années après, il n’y a pas un jour passé sans avoir ouvert le programme. Pourquoi ? Pour toutes les raisons que je vais tenter de décliner dans la suite de cet article.

Historique : Fireworks est LE logiciel qui a été conçu pour le Web. A la base faisant partie de la suite macromedia, Adobe à racheté ce logiciel car il faisait trop concurrence à Photoshop. Adobe a axé ce logiciel par la suite au Web.

Wiki : Adobe Fireworks est un logiciel de création d’images, spécialement conçu pour le web, mais il est aussi possible de créer des images pour l’impression, même si le logiciel ne supporte pas le CMJN, il supporte tout de même les gestion des PPP (points par pouce).

Maintenant je ne suis pas du tout fermé sur l’utilisation de photoshop, juste que chaque logiciel a pour moi son utilité : Photoshop, comme son nom l’indique, est fait pour faire du montage/retouche/impression photos et Fireworks pour créer des éléments pour le Web. Pour caricaturer, Fireworks est un mix entre Photoshop et Illustrator mais en travaillant de façon plus précise.

Compatibilité :

Une des grosses forces de Fireworks c’est sa comptabilité avec de nombreux formats. Vous pouvez autant ouvrir des fichiers illustrator que photoshop. Comme vous le savez, les extensions Photoshop c’est .PSD, illustrator c’est .AI et Fireworks c’est .PNG (comme les images 🙂 Et donc, grace à cela,  vous pouvez donc travailler sous fireworks avec de multiples sources. Il existait un petit problème de compatibilité des effets photoshop dans fireworks CS3 (version sur laquelle je travaillais avant) qui donnait « une erreur interne est survenue » mais cela a été corrigé avec la suite CS5. Le fait de mixer du vectoriel et de la photo a un réel intéret et c’est un plaisir de ne pas avoir à switcher entre les programmes.

Parlons de la compatibilité Flash, vous pouvez créer vos éléments flash dans votre maquette et l’importer dans Flash. Tout sera bien converti. Le vectoriel, les éléments, tout reste à sa place et de façon identique. Un très bon point pour le maquettage de site flash.

Les calques et effets de calques

Les calques, tout le monde connait (enfin ceux qui utilisent PS) et je pense que cela est arrivé à tout le monde d’oublier de créer un calque et de faire plusieurs éléments dessus. Résultat « bim » tout est à refaire. Encore un gros avantage de FW c’est qu’à chaque nouvel élément dans votre zone de travail, il crée automatiquement un nouveau calque (texte, forme vectoriel ou bitmap). L’avantage pour le créa, c’est d’oublier la création de calques et de se concentrer sur sa composition.

Bien entendu chaque calque à des effets indépendants et modifiables à souhait. Dans FW cela s’appelle des « effets ». Dans cette partie, les adeptes de PS pourront y retrouver les principaux effets (flou, ombre, reglage de couleurs, lueurs, j’en passe et des meilleurs) J’avoue qu’ils ont leurs limites. Sachant qu’on peux intégrer des effets photoshop cela n’a pas d’importance. Bien sûr, vous avez la possibilité d’utiliser les masques de fusion comme sur photoshop.

Ranger ses calques ? Ce n’est plus un soucis car on peux, comme sur photoshop, créer des dossiers. Pour être honnête,  je ne m’en sers presque pas (sauf pour créer des gifs animés mais j’en reparlerais plus tard) Pourquoi je ne m’en sers pas ? Simplement car la sélection des calques est vraiment simple et intuitive (avec l’outil « sélectionner derrière »  qui permet de passer d’une couche à l’autre facilement)

Le « truc de fou » si vous êtes (devenu) maniaque du rangement (ou simplement pour gagner un temps astronomique) c’est le groupage de calque. C’est tout simplement grouper plusieurs calques pour que cela soit plus facile à sélectionner/déplacer. Par exemple un bloc actualité ou un menu. C’est tout simplement une révolution cette façon de fonctionner (les puristes photoshop vont me dire que c’est faisable mais non pas comme dans FW :p )

Grouper/dégrouper/modifier dans un groupe de calque tout est possible et très bien penser pour que cela soit rapide. (Pomme+G ou CTRL+G c’est la combinaison de touches magiques 🙂

Les Etats ou Images

Encore un avantage énorme de FW. On peux créer des gifs animés. Rien de révolutionnaire allez vous me dire car avec image ready, cela fonctionne aussi. Le truc qui est intéressant c’est que cela permet de travailler plusieurs images dans un seul fichiers PNG. Par exemple gérer les retours client, travailler sur plusieurs versions du fichier en passant de l’un à l’autre en 1 clic sans avoir à ouvrir 50 fichiers .PSD Ici, tout est gérable. Personnellement je l’utilise le plus souvent dans cette configuration. En fait les « Images » c’est le nom dans la suite CS3 et ils ont changé le nom dans la CS5 en mettant « Etats » mais la fonctionnalité reste identique.

Bien sur vous pouvez dévinir des éléments communs entre chaque état (un fond de site ou de gif animé par exemple)

Comme vous voyez ci-dessus, je pourrais y gérer un gif animé (ici 8 images visibles avec un rythme de rotation à 7 dixième de seconde). Dans l’exemple ci-dessus, je n’ai pas réalisé un Gif animé mais j’ai réalisé 1 état pour 1 page de site.

Les pages

Encore un bonus d’organisation, encore un cran de plus dans le rangement de votre document.  Les pages. Pour vous expliquer cela, je vais prendre l’exemple d’une grosse boite (le .PNG) Dedans, vous pouvez mettre des intercalaires (les pages) et dans chaque intercalaire,  vous pouvez mettre plusieurs documents (les états)

Cela vous permet de créer un site dans un seul png. Cela peux servir aussi de numéro de version. Par exemple vous avez 10 pages de site le 1er janvier sur 1 « page » et les mêmes 10 pages avec les retours sur une autre « page ». Vous gardez ainsi l’historique de vos versions.

Bien sûr vous pouvez dévinir des éléments de chaque page en commun avec toutes les pages (un header de site par exemple)

Concrètement, vous avez 1 PNG avec 2 pages et 5 états par pages sous FW au lieu de 2 dossiers contenant 5 .PSD sur votre PC.

Le controle des éléments

Que cela soit les textes, les groupes, le vectoriel, les bmp. Tout est réglable au pixel près. Vous pouvez donc avoir le contrôle des éléments de façon indépendante ou entre eux. (Vous avez des options par calque et donc par élement.) Je trouve après avoir testé les 3 logiciels (FW, PS et AI) que FW est le plus précis pour le WEB.

La bibliothèque commune

Un outil vraiment intéressant que FW nous met à disposition c’est cette fameuse bibliothèque qui nous permet d’ajouter simplement des éléments web connus comme des boutons mac/pc, éléments de navigation comme des boutons, cases à cocher, menu déroulant…. j’en passe et des meilleurs et pour être honnête dans des maquettes c’est un gain de temps énorme. Pas besoin de détourer les éléments sur un jpg du web et/ou sur des éléments chopés sur la toile.

les symboles.

Comme dans Flash, il est possible de passer des éléments en symbole (un bouton, un menu, un footer, etc.) Par exemple, vous passez le menu en symbole, ce menu sera présent sur les 20 pages du site que vous maquettez dans un seul document Fireworks. Si vous modifiez le symbole du menu, ca se répercute automatiquement sur toutes les pages.

Maquette Web

Si vous travaillez en agence, vous savez tous que le client doit valider un squelette/zoning avant de passer à la créa. (enfin normalement… ^^) et que le plus souvent, l’agence présente un gros powerpoint ou, au mieux, un PDF. Et bien sachez qu’avec Fireworks, il est possible de lier toutes les pages et états entre eux et donc de créer fictivement le site internet et naviguer directement entre les images. Comme si votre zoning était lié. Vous pouvez donc montrer au client comment on naviguera à la fin sur le site. Où va t’on arriver si on clic là ou là en lui montrant « pour de vrai »

Comment faire cela  ? En utilisant l’outil de « zone sensible » qui permet de lier les pages/états entre eux. Magique et vraiment efficace devant un client.

L’export

Vu que c’est un logiciel web, vous pouvez forcément gérer l’export un jour ou l’autre de votre création. Et bien tout est prévu. Après être passé dans les préférences d’export pour lui dire comment vous souhaitez votre export (en div, en table imbriquées, avec les images dans un sous-dossier  et bien d’autres configs…) il ne vous reste plus qu’à selectionner vos zones d’images, zone de textes, nommer les images, les balises ALT, les liens et exporter.

Certes il y a des limites à ce mode mais le résultat est assez satisfaisant même si c’est pas forcément la force du Logiciel.

Rien que le temps gagné entre photoshop et FW est plaisant à prendre car tout est rapidement accessible à contrario de PS.

Outil de mise à l’échelle en 9 tranches

Option qui est disponible dans Photoshop aussi c’est l’outil que j’appel « rsizr » c’est l’outil qui retaille intelligemment les images. Et bien ici il fonctionne avec tout ce qu’on lui met sous la main Vecto ou Bitmap. Le genre d’outil « de magicien » que j’adore 😉

Les Tailles des fichiers

Encore une énormité de photoshop ! j’ai comparé 2 fichiers exactement identiques sur photoshop et sur Fireworks. Pour la création d’UNE page de site contenant les mêmes effets, le même rendu,  je suis juste effaré : 81Mo pour PS Versus 1,8Mo pour FW… que voulez vous de plus? C’est un fichier Web bon sang ! Pas de 300 dpi ! pas d’image en 6000*4000 !  Donc faite pas chier arrêtons avec d’énormes fichiers !  Rendez-vous à l’évidence ! FW c’est le bien… huhu 😉

Pour être objectif, la compression du logiciels FW est meilleure pour le Web que PS. Pour continuer dans l’exemple.

Utilisation au quotidien fr Fireworks.

Pour conclure, cela fait maintenant près de 3 ans que j’utilise FW au quotidien et je peux dire que je gagne un temps monstrueux dans mes créations. Il m’a fallu un certains nombre d’heures avant de « maitriser » le logiciel mais une fois qu’on prend les habitudes, les raccourcis, c’est avec une facilité déconcertante que l’on « fabrique » de toutes pièces un site. Et comme tout logiciel, je ne le maitrise pas encore à 100%. Le logiciel à bien sûr ses limites et il faut passer par photoshop pour avoir certains effets/photomontages mais c’est pour cela que la compatibilité de la suite Adobe est présente.

Fireworks c’est 70% de photoshop et 70% d’illustrator. Je suis sûr que certains seront outrés par ce propos mais c’est pas grave.

Créer des boutons, des menus, des dégradés, des ombres, dubliquer, être précis, exporter. Enfin toutes les actions que l’on demande pour le Web c’est grâce à FW.  Et je ne bosse que très peu pour le print donc FW est LE logiciel pour le Web. Quand je remets les mains dans PS je perd trop de temps à penser à des choses automatiques dans FW. J’ai même réussi à convertire un « vieux collègue de classe » webdesigner quand il m’a vu travailler sur FW, lui qui était pro-PS.

Je souhaite maintenant que vous répandiez cette bonne parole aux intégrateurs pour qu’ils apprennent à utiliser ce logiciel sans passer  par un export en .PSD…

Le but de cet article n’est pas de casser l’utilisation de PS, mais de montrer que les logiciels sont pensés pour une certaine utilisation. On peut autant dev web avec notepad qu’avec DW, après on gagne du temps avec l’un ou l’autre.

J’attends vos réactions.

Olybop

  • Bonjour !
    J’approuve à 100% ton article, je suis dans la même situation, bossé 8ans en print sur toshop, et est été converti à Fireworks quand j’ai commencé à travaillé pour le web. Pour être honnête, les premières versions de Fireworks avaient quand même quelques lacunes, mais c’est un logiciel qui a eu une vraie évolution au fil des versions, et est depuis un moment devenu un vrai outil complet.

    Un point qu’il me semble tu n’as pas évoqué et qui est aussi intéressant : la bibliothèque d’éléments web. Il existe de base une bibliothèque d’objets qui permettent de simuler les éléments web, barre de scroll, bouton de formulaire, cases à cocher, etc. et le tout à la fois pour Mac et PC, et dans tous les états (over, actif, etc.).

    Autre élément intéressant : les symboles. Comme dans Flash, il est possible de passer des éléments en symbole, par exemple un bouton, un menu, un footer, etc. Par exemple vous passez le menu en symbole, ce menu est présent sur les 20 pages du site que vous maquettez dans un seul document Fireworks. Si vous modifiez le symbole du menu, ca se répercute automatiquement sur toutes les pages.

    Dernier point que j’apprécie beaucoup : la compatibilité avec Flash. Perso je fait mes maquettes de sites Flash dans Fireworks à la base, et une fois que c’est validé je peux importer le fichier dans Flash, et ce dernier conserve tout impec, les éléments vectoriels restent vectoriels, les calques gardent le même nom, les éléments qui avaient été passés en symbole dans Fireworks restent des symboles dans Flash, tout reste éditable à l’identique. Bref la compatibilité entre les 2 est meilleure qu’avec Photoshop, même si ça s’améliore au fil des versions entre toshop et Flash.

    Le seul truc que je regrette dans Fireworks, c’est la gestion des couches alpha, qui existe mais est moins intuitive que celle de Photoshop à mon gout.

    Donc comme toi je ne peux qu’inciter le plus de personnes à essayer Fireworks, et surtout à essayer de dépasser la première impression qui est très déroutante quand on est un habitué à Photoshop. Les premières heures ont se dit que c’est vraiment mal foutu, qu’on n’y retrouve rien, tellement on est habitué à Photoshop. beaucoup de personnes abandonnent à ce moment là, et c’est vraiment dommage, si on s’accroche un tout petit peu on passe ce cap et on s’aperçoit de la puissance de cet outil.

    Bon si avec tout ça Adobe nous offre pas un t-shirt Fireworks, sont vraiment radin, hein 😉

    David

  • @David : mais carrément c’est vrai que j’ai oublié de parler de ça, honte à moi. C’est des fonctions que je n’utilise pas tous les jours, donc c’est vrai que cela m’es pas venu spontanément à la rédaction.
    Je vais modifier cela 😉
    Merci pour ta longue réponse. Cela fait plaisir de voir que je ne suis pas le seul dans ce cas 😉
    je vais contacter adobe de ce pas pour un beau Tee, je t’en prend un 😉

  • ergopetillant

    Merci pour cet article très intéressant, me formant à photoshop pour le web, je pense que je vais peut-etre plus m’attarder sur Fireworks à présent 😀 d’autant que la partie maquette web est très intéressante.

    Aurais-tu de bons tutos sous la main pour débuter Fw ?

  • woua ! j’avais déjà vu quelques articles qui parlaient d’utiliser Fireworks pour le webdesign mais j’avoue ne jamais m’y être intéressée mais là quand je vois tout ce qu’il est possible de faire avec ! je crois que je vais m’y intéressée un peu plus 🙂
    surtout si ça peut être un gain de temps dans mon travail (je retiens surtout le fait de pouvoir mettre le menu en symbole et qu’il soit répercuté sur toutes les pages, étant donné que je fais pas mal de fichiers photoshop rien que pour un site .. un gain de place et de temps !)
    et même question que ergopetillant .. des tutos ou même des bouquins que tu as utilisé pour bien commencer ?

  • @ergopetillant @claire : Vu votre demande je vais plancher sur un petit tuto video de présentation de l’outil si vous le souhaitez.

  • ergopetillant

    c’est une très bonne idée ^^

  • Si c’est possible ça serait super 🙂

  • j’ai lu ton article en diagonale je l’avoue, mais rien qu’en lisant le titre j’étais déjà d’accord !

    un peu comme David j’ai commencé par photoshop pour le print puis on m’a converti au web et à fireworks…
    photoshop pour le visuel + illustrator pour le logo et autre créa vecto (icones, picto etc.) + fireworks pour le design de l’interface voilà ma façon de bosser que je trouve propre !

    @ergopetillant en tout cas je te conseil http://www.fireworkszone.com/ mais sinon il te faut tout de mêmes des bases en illustrator pour fireworks ^^

  • Et d’un point de vue intégrateur (hein David ;)), Fireworks a l’avantage de permettre de récupérer les éléments sous forme vectorielle, de manière plus pratique que sous Illustrator dans le quotidien, les exports sont biens meilleurs et personnalisables, on peut exporter juste un slice, et les pages et symboles permettent de bien mettre en oeuvre les états ON/OFF des menus et autres boutons.

    Perso, quand je récupères une maquette (de David), ça me permet de jouer avec les blcos pour en faire ce que je veux pour l’intégration, les transformer en boites extensibles.

    Autre point pratique, pouvoir bouger le point zéro, cliquer sur une forme et obtenir ses coordonnées…

    Du point de vue du pauvre graphiste que je suis, je le trouve également tellement plus simple que Illustrator que le peux de fois où j’ai démarré un design sous Illustrator je suis rapidement revenu à FW…

    Vala le point de vue de le intégrateur.

    ++ et à d’autres bons articles

  • @pierre : Voila LE commentaire que j’attendais ! huhu. Si seulement tous les intégrateurs pouvais penser comme ça… 😉

  • ergopetillant

    @graffr merci pour le lien, ça va me servir en attendant le tuto 😀 j’ai quelques bases en illustrator espérons quelles ne sont pas perdue 😀

  • Salut, merci pour cet article qui m’évitera de râler lorsque Fireworks ouvre mes .png par défaut 😉 C’est vrai que ce logiciel a beaucoup d’atouts pour le web et qu’il est sous-utilisé par rapport à ses capacités. Il faudrait d’autres articles et tutoriels pour infléchir la tendance au tout-Photoshop.

  • Deux détails :
    – les dossiers pour ranger les calques (et nommer les calques) est un gros gain de temps pour l’intégrateur qui bosse derrière. Image6 je sais pas ce que c’est mais 4 dossiers Header/Menu/Contenu/Footer ça c’est super agréable pour bosser rapidement. Bref, c’est pas très pro d’être bordélique 😉 (mais si tu intègres toi-même tes .PNG ou .PSD là tu fais ce que tu veux)

    – Adobe a racheté sonc concurrent Macromedia pour Flash et Fireworks et Dreamweaver, pas juste FW. Ils doivent être plus tranquille en contrôlant Flash qu’en l’ayant pour concurrent et que ça valait bien le prix payé.

  • Je vois que vais sérieusement me pencher la dessus car vos demandes montre que cette tendance au tout-photoshop peut être renversée (pour les créas Web hein je reste sur cette position)

  • @olybop non sérieusement, tu prends un gabarit en .psd, et bin tu as le double du boulot si tu veux faire de l’intégration « un tantinet comme il se doit » -> Va-t-en refaire une boite extensible à partir d’un calque 🙁

  • Article très intéressant et qui m’a réellement donné envie d’utiliser Fireworks. Même si cela implique une phase d’apprentissage que j’étais heureux d’avoir accompli avec Photoshop…

  • niko

    J’ai testé les deux, je préfère Photoshop c beaucoup mieux

  • Oui il faudrait faire attention aux fautes quand même msieur l’auteur, car ça devient parfois dérangeant à la lecture (des fautes de frappes aussi) :/

    Sinon concernant le contenu de ton article, en effet tu n’es pas le premier que j’entend dire ça. J’utilisais il y a longtemps Fireworks mais je l’avais abandonné n’étant pas assez complet. Je vais m’y replonger dedans un de ces 4 histoire de voir si ça a bien évolué, mais en tout cas tu m’as convaincu 😉

  • speedkills

    Salut,
    Je suis de formation print et travail dans le web depuis quelques années. Ton article donne envie de mettre un peu le nez dans FW… mais j’avoue que je part avec un mauvais apriori : les quelques fois ou je m’y suis plongé, ça m’a vite énervé : je n’y avais pas mes repères (normal tu me dira ^^)
    Par contre le coup des gifs, tu peux faire la même chose dans PS avec des dossiers et j’ai du mal à voir la différence entre les états de FW et les compositions de calque de PS.
    Est ec que les calques dynamiques existent dans FW ? Parce que ça je crois que je ne pourrais m’en passer :p

    Bref, je suis curieux, mais pas convaincu 😉

  • @speedkills si tu viens du print pars sur les mêmes bases qu’illustrator plutôt que photoshop, oui il y a un équivalent aux objet dynamique les symboles qui sont même encore plus puissants Grace a la découpe par 9… Et puis sur fw tout tes filtres sont en dynamique ! Mais tu en as moins enfin bon je connais peu de gens qui utilise l’effet tourbillon surtout dans le web 😉

  • saM

    Je vais tester également car cela correspond davantage à mon utilisation quotidienne. A voir ! 🙂 merci pour l’article

  • c’est que FW a des tres bons avantages mais quand on bosse sous PS depuis plus de 5 ans, ca doit etre dur de prendre de nouvelles habitudes de travail.

  • Très bon article. De toutes façons, je n’ai jamais compris l’intérêt de PS pour le webdesign. Tellement compliqué de faire des choses simples. Alors que FW est parfaitement adapté.

  • À la lecture de cet article, je ne vois que 2 différences avec photoshop : les pages et la « maquette web ». Le reste des « différences » viennent plutôt d’une méconnaissance de Photoshop, car ces fonctions existent.

    Il n’en reste pas moins que l’article est intéressant pour faire découvrir Fireworks, qui est une alternative concrète à Photoshop, même si on ne sait rien de sa pérennité.

    En espérant qu’un vrai outil web fasse surface en mixant le meilleur des 2 mondes !

  • Pour être concret :

    – Effets de calques = avantage photoshop (c’est ce que tu dis aussi)
    – Calques automatiques = objets vectoriels
    – Grouper les calques = groupes ou objets dynamiques
    – Les états = les compos de calques
    – Les pages = pas d’équivalent, bonne fonctionnalité
    – Bibliothèque commune = objets dynamiques ou tous les paramètres prédéfinis
    – Symboles = objets dynamiques
    – Maquettes we = inexistant dans photoshop
    – Export = enregistrer pour le web, mêmes fonctionnalités

    Donc photoshop offre les mêmes fonctions et la même facilité pour la majorité des points que tu soulèves, même si il est perfectible sur d’autres. Ça n’est donc pas des critères de comparaison valable.

    Pour le reste comme je disais le mieux serait encore de fusionner les 2 pour un super photoshopworks du web.

  • Je ne cherche pas dans cet article à dire que Photoshop « c’est de la merde » au contraire, je dis que c’est un outil qui a été étudié pour le Web c’est tout. Je ne suis pas le seul à le dire, regarde les liens vers leur commentaire
    – Pierre (intégrateur) : http://bit.ly/gQRsaX
    – D.Torontel (Graphiste pro) : http://bit.ly/eX0cp0
    – et bien d’autres remontes les commentaires.

    Maintenant Julien, aucun soucis pour ta vision, de toute façon adobe a racheté FW pour pas se faire dominer donc au final, le but est d’avoir un chouette créa non ?

  • Ben moi je ne dis pas non plus que fireworks c’est de la merde, je dis juste que beaucoup de gens le trouvent « mieux pour le web » simplement parce qu’ils ne savent pas utiliser photoshop à son plein potentiel. Résultat ils pensent que fireworks est plus adapté sur une fausse base.

  • Je pense que cela soit en autodidacte ou dans les écoles, ils commencent par Photoshop justement parce que c’est plus répandu. Perso j’utilise les 2. J’ai fait le test, sur une même création, je passe moins de temps sur FW, surement à défaut de connaitre PS comme un dieu. C’est pas grave, j’aurai au moins partagé ma vision sur mon site en toute simplicité.

  • Salut,

    Je suis d’accord sur le propos de fond qui consiste à dire que beaucoup sous-évaluent Photoshop, et en tirent des conclusions hâtives de comparatif vs Fireworks. Mais je t’assure que perso à chaque nouvelle version de Photoshop je jette un oeil dessus, ne serait-ce que parce que ça me saoule de perdre du temps quand je travaille avec des intégrateurs (moins bons que Pierre forcément) qui n’utilisent pas Fireworks 🙂
    Plusieurs fois je me suis dit : « bon ok j’en ai marre, je repasse sur Photoshop… ». Mais à chaque fois je suis finalement revenu à Fireworks, parce que même si au fil des versions la différence s’amenuise, je continue à ne pas y trouver certaines fonctions qui me font vraiment gagner en productivité.

    Je n’ai pas le temps là de retourner vérifier, je vous laisse infirmer si besoin le détail ci-dessous :

    Concernant le comparatif « symboles » vs « objets dynamiques », il me semble être en faveur de Fireworks, dans le sens ou un Objet dynamique dans Photoshop ne reste dynamique « que » dans Photoshop. Si tu importes le psd dans Flash par exemple, l’objet dynamique est aplati, bitmapisé, et perd toute notion de symbole. Le même import depuis un fichier Fireworks conserve toutes les caractéristiques de base, le nom de symbole, etc. bref ca reste un vrai symbole dans Flash, ou ce qui est vectoriel reste vectoriel et ce qui est en bitmap reste en bitmap.
    Les fonctions de pages dans Fireworks, couplée à ces symboles, est à mon avis un réel plus par rapport à Photoshop. Pour ce que j’avais testé, le seul moyen d’arriver lus ou moins à la même chose avec Photoshop est d’utiliser les objets dynamiques avec lien, pour pouvoir partager un objet dynamique entre plusieurs fichier Photoshop, mais c’est quand même bien plus contraignant que les symboles de FW, et donc sans avoir à multiplier les fichiers.
    J’ai encore eu le cas ce matin, une maquette de site réalisée sur Fireworks, les 18 gabarits de pages dans un seul fichier, le client a demandé une modif sur un élément récurent (moteur de recherche) et dans le footer : j’ai ouvert mon fichier, ai modifié les 2 symboles, ensuite j’ai sélectionne les 18 pages dans la palette des pages, ai demandé un export du tout, comme tout était bien nommé etc. ca m’a mis à jour automatiquement les 18 gros jpeg de maquette, je n’ai eu qu’à mettre à jour ces 18 fichiers sur le ftp, et ça roulait. Ca m’a pris 3 minutes là ou pour Photoshop sauf erreur même si j’avais placé ma zone de recherche et le footer en « objet dynamique avec lien » j’aurais du re-ouvrir les 2 fichiers correspondants, puis les 18 fichiers de pages et les exporter un à un…

    Quand à la comparaison entre les « calques automatiques » et les « objets vectoriels » de Photoshop, là aussi ca me semble un peu abusif… Certes dans Photoshop quand on créé un objet vectoriel il est automatiquement sur un nouveau calque, mais ça n’est pas le cas avec tous les objets bitmap. Si on veut avoir un nouveau calque avec un objet bitmap, on est obligé de faire « nouveau caque » et là de le créer, non ? En tout cas perso j’ai pas trouvé comment régler les prefs de Photoshop pour qu’il créé automatiquement un nouveau calque à chaque création de nouvel élément, qu’il soit bitmap ou vectoriel.

    Rien que les 2 points ci-dessous, pour moi, permettent de gagner un temps énorme quand je créé des maquettes d’un site…

    Il ne me semble pas non plus qu’il y ai dans Photoshop de bibliothèque intégrée d’élements web, comme les scroll, cases à cocher, etc. et qui en plus soient déjà disponibles sous forme de symbole, avec tous les états rollovers, cochés, etc.

    Maintenant franchement je suis le premier désolé que Photoshop n’ai pas encore réussi, en tout cas à mes yeux, de rattraper FW. Quand Adobe a englobé Macromédia, je pensais qu’à terme ils intégreraient FW à PS, un peu comme Image Ready en son temps. Et ça ne me dérangerait vraiment pas, au contraire, perso je m’en fiche du nom du logiciel que j’utilise, tant qu’il fonctionne bien 🙂

    David

  • @julien pour l’instant fireworks n’a pas été écarté des produits d’adobe…

    les objets dynamique et les symbole dans fireworks ne sont pas vraiment comparable même si dans le fond ça y ressemble, les symboles dans FW viennent avec le Grid9 et ça c’est vraiment excellent un gros +

    copier coller un tracé vecteur de photoshop ou d’illustrator dans fireworks donne… un tracé vectoriel et non un objet dynamique.

    as tu déjà essayer de placer les coordonnées X et Y d’un élément sur photoshop à la main ? bon courage…

    et j’en passe… Maintenant je ne dis pas que photoshop n’est pas pour le webdesign fait mais juste que photoshop a été détourné pour le webdesign 😉 et que même si tu peux bosser avec pour faire de joli site web ce n’est pas le plus pratique ! c’est un peu comme se balader en ville uniquement avec un hummer en effet tu peux mais à la base c’est fait pour rouler dans des conditions extrêmes.

    compare juste le poids d’une maquette complète (toutes les pages, déclinaison des interactions bref tout) faite sur photoshop et faite sur fw ?

    découper une planche d’élément (genre tous les pictos que tu as designé pour un backoffice) ça se fait en un rien de temps sur fw alors que sur photoshop là c’est autre chose 😉

    après il est vrai qu’on ne peux pas facilement faire de joli visuel sur fireworks alors que sur photoshop oui et c’est là qui faut faire cmd+tab pour commencer un autre travail 😉

  • Je découvre Fireworks avec cet article et je compte bien m’y mettre ! Merci beaucoup !

  • @popy : tout le plaisir est pour moi ! 😀

  • Graphiste, j’ai également laissé tomber PS au profit de Fireworks pour le maquettage et la découpe des images (bien sûr je continue de créer les visuels sous Photoshop).
    Je voudrais aussi ajouter à cet article 4 autres grandes qualités de Fireworks : le positionnement très rapide et précis des éléments en x et y, la gestion des textes lors du maquettage, la qualité de lissage des polices (PS sur ce point ce n’est plus possible pour moi) et l’efficacité du Rechercher/Remplacer.
    Le gros + de Fireworks (selon moi) c’est la souplesse. Depuis que je l’utilise, j’ose plus facilement triturer le webdesign et le faire évoluer. L’export des découpes, une fois le tout bien en place est également plus plaisant et plus malléable que ds PS.
    Merci Olybop pour cet article, j’y ai aussi vu des fonctions que je ne connaissais pas.

    Pylgrim

  • merci pour ton partage d’experience et je suis tout a fait d’accord avec toi sur tes remarques 😀

  • fdg

    Bonjour,

    ça fait plaisir de voir enfin un article et un utilisateur de Fireworks !!!
    En effet, cela fait maintenant de nombreuses années que je travaille dans le Web en tant que DA. Au début, comme tout le monde, je travaillais sur Photoshop, et puis un jour je suis passé à Fireworks, et cela fait maintenant 7 ans que je pratique ce logiciel avec beaucoup d’intérêt et de plaisir. Le gros plus, c’est la précision du logiciel, le découpage des images, mais surtout, de pouvoir illustrer directement dans le logiciel par des dessins en vecto, ce qui évite de switcher entre illustrator et photoshop,ainsi l’on peut voir directement le rendu créatif par exemple d’une icône dans sa maquette. De plus, le fait d’utiliser les calques images pour représenter chaque écran du site, permet d’optimiser le temps de travaille sur chaque écran, tout en utilisant les dossiers en les rendant commun à chaque calque « images ».

    A chaque fois que je change d’agence, j’essaie d’imposer l’utilisation de ce logiciel face à Photoshop 🙂 Pour moi, c’est un mixte entre Photoshop et Illustrator.

    Encore merci pour cet article qui fait plaisir à lire… 🙂

    Fireworks vaincra…

  • @fdg : mouahahahahhaah FW power 😉 je suis en train de faire changer mon agence aussi. C’est compliqué mais les devs/intégrateurs commence a aimer. et le gain de temps est conséquent.
    Merci du commentaire 😉

  • fdg

    Si tu bosses chez Expérian, je connais bien ! Donc tu dois travailler avec Antoine C….
    Pour ma part, un petit aperçu de mon portfolio dont toutes les réfs sont « made by Firewoks » :

    A+
    olybop 😉

  • Antoine Cheetah

    Rholala la communauté d’intégristes ici 😉

    Au delà des différences de fonctions (qu’il est toujours possible de contourner de manière détournée) c’est surtout une différence de souplesse. a config égale, FW sera beaucoup plus fluide et au quotidien il est bien plus souple d’utilisation.

    Antoine
    « le cher bigboss »
    😉

    bisous à FDG

  • @antoine : complètement d’accord avec le commentaire d’antoine.

    En espérant que la vie chez Cheetah continue bien 😉 @très vite bigboss =)

  • En tant qu’utilisateur de Fireworks bien avant le rachat par Adobe de Macromedia, je plussoie bien évidemment ce billet.
    Fireworks est le meilleur secret du web design. Dommage qu’il ne soit pas reconnu à la hauteur de sa performance et de son intégration dans la suite Adobe.

  • Alesclandre

    Hello,

    Ayant essayé Fireworks pour du webdesign, je l’ai effectivement trouvé bien plus puissant que Photoshop.

    Malheureusement, certains clients m’interdisent de l’utiliser pour la seule et bonne raison que l’antialiasing des polices n’est pas aussi bon que sur Photoshop.
    Eh oui, il n’existe pas de lissage « net » sous Fireworks….

  • Bonjour Aleschandre,parles-tu de cela ?
    lissage

    Je trouve justement que la gestion de la typographie n’a rien a voir avec photoshop. Puis de toute façon, sur le Web les polices dynamiques qu’elle soit à la base faite sur toshop ou Fw, cela ne change rien non ? :p

  • Ha si si ! 🙂
    Dans la palette des propriétés, tu as un menu pour le choix du lissage du texte. « Sans lissage », « lissage net », etc. et tu peux même personnaliser les réglages de lissage. Et sauf erreur, c’est présent depuis les premières versions de Fireworks 🙂

  • Alesclandre

    En fait, c’est trompeur, parce que l’antialiasing « net » de Fireworks n’est pas le même que Photoshop.
    Exemple : Voir l’image
    Evidemment, lors de l’intégration, ça va changer ! Mais quand le client te soutient corps et âme qu’il veut du lissage net de Photoshop….
    Pour certains textes qui sont transformés en image, par contre, le résultat n’est pas tout à fait le même.

    Et il est impossible dans Fireworks d’avoir le même résultat que dans Photoshop car il rajoute toujours des petits pixels en haut et en bas des lettrages (sur le O de l’exemple). J’ai essayé ! Et le client n’a jamais été convaincu…

  • Je suis étonné par ta capture d’écran, moi c’est plutôt l’inverse…
    Je viens de retester, avec un texte en arial 11, lissage net :
    Voir le lien

    tout en haut, c’est ce qui est affiché dans Photoshop, en dessous ce qui s’affiche dansFireworks, et tout en bas du texte html dans un navigateur.

    Déjà, les différences entre les 3 ne sont pas aussi flagrantes que chez toi, et dans l’absolu c’est Fireworks qui me semble le plus proche de l’affichage final.

    Et de toutes façons, on sait très bien que le résultat final ne sera pas uniforme selon les navigateurs, plateformes, etc. Donc j’aurais tendance à dire que ton client est un enc****r de mouches… 😀

  • Alesclandre

    C’est bien la même chose que chez moi. Après, dans le navigateur, ça dépend de l’antialiasing système, et c’est sûr que c’est encore autre chose.
    Mais de toute façon, mon client aime bien les mouches…

  • ahah j’aime cette conclusion 😉

  • Quisit

    Concernant objet dynamique PS vs Symboles de Fireworks, clairement FW prend l’avantage.
    Fire est clairement conçu comme un photoshop orienté objet. les objets de bibliothèques sont dynamiques dans les deux sens, et un symbole peut contenir un symbole synamique à l’infini.
    en utilisant massivement ce concept on peut définir tous les applats et dégradés comme palette d’objets applats dominante/tonique/troizcoul avant de commencer le boulot

    en cela on monte sa maquette comme le développeur va gérer ses include PHP. Si tu ajoutes à ça la logique Page/Image (avec page image tu vois ta maquette « tous les états rollover On ou OFF » en un clic. idem pour l’export de toutes les découpes simultanément.
    Pour créer un gros portail, ou une maquette fonctionnelle d’un extranet il n’y a pas photo.
    Photoshop est un puissant outil photo vaguement patché pour de la productivité web (sur le tard) alors que FW est un outil de productivité web massivement dynamique , massivement orienté objet avec mise systématique en bibliothèque des redondances, qu’on tente d’amener au niveau retouche d’un PS.
    Si la maquette est très chiadée fondu bitmap ou défonces complexes, fireworks perds vite du terrain. dans tous les autres cas le gain (par quelqu’un d’habitué à FW, disons aussi FW qu’un bon photoshopiste sur PS) est énorme.
    La ou l’écart se creuse (et ou le coeur s’écrase pour un toshopiste) c’est lors d’une variante.
    le client demande un changement de tonique pour une maquette entière ET LES DECLI de toute ses pages. dans FW… vous changez un symbole nommé « couleur tonique » (si vous organisez bien votre couleur)… le boulot est fini. dans toshop, pour les plus organisé, c’est le parcours de dizaines de calques de réglages. pour les plus porcs qui ont voulu torcher à la création… c’est carrément l’horreur, CTRL+U à gogo , remplacements de couleurs et tout le bordel.
    FW fonctionne plus comme un gestionnaire de Clip flash et de CSS web, c’est une question de fond.
    Et je ne parle même pas de l’objet bouton dont le texte est dynamique et se change comme une variable en palette propriété …. boutons dupliqués à l’envie, et dont les couleurs sont des clips de couleur pures, variantes d’un même clip « tonique » ou « domnante » je vous laisse imaginer la cascade de gains lors d’un changement d’échelle, de typo, de couleur, c’est x100 facilement

  • evdog

    j’ai toujours bossé dessus « 10 ans ou plus je ne me souviens plus » et confirme ton article mais il faut aussi parler des bugs et des mise à jour à répétition qui coute la peau du uff, sans compter qu’il bug énormément sur seven et que adobe ce fou royalement de nos problèmes quand on les appel au téléphone

  • @Kiran : Merci pour ton commentaire. Je suis bien d’accord avec toi. Bon courage pour la suite 😉

  • Salut à tous,

    Etant développeur à tendance intégrateur, je cherche depuis longtemps un outil pour pratiquer mon job sachant que ce que je reçois le plus souvent de la part des graphistes est un bon vieux PSD plus ou moins bien organisé. Comme cela me fait franchement chier de lâcher 1000€ dans un logiciel dont je n’utilise que 1% des fonctionnalités mais que j’ai tout de même besoin (et envie) d’utiliser une solution légale, j’ai cherché des alternatives.

    J’ai essayé TheGimp et autres logiciels libristes qui ne sont pas franchement compatibles. Ce premier met tous les calques en vrac dans le document et certains éléments sont même parfois décalés.
    J’ai acheté Photoshop Elements et j’en ai été extrêmement déçu. C’est pour moi la plus grosse arnaque d’Adobe car au lieu de retirer de Photoshop des fonctionnalités avancées dédiées aux professionnels du milieu, ils ont enlevé des choses aussi basiques que les groupes de calques (si, si, je vous jure).

    J’entends parler depuis très longtemps de Fireworks et il m’attire franchement pas mal aux vues de ses fonctionnalités et de son prix (417€ complet). Cependant, même s’il y a des pistes dans cet article, je n’ai jamais eu de réponse franche à la question que je vous pose aujourd’hui :

    Est-il réellement possible de réaliser un travail d’intégration web à partir de fichiers PSD en utilisant **exclusivement** Fireworks ?

    Je suis suspendu à vos lèvres. Merci d’avance.

  • @DuaelFr : Je te dis « oui » de ce pas ! Le gros avantage c’est que, comme dit dans l’article, Fireworks est totalement compatible avec Photoshop et Illustrator. En ouvrant un fichier .PSD, il garde fidèlement tout le travail fait dans photoshop (grâce aux effets photoshop intégrés dans le logiciel). En suite, tu pourras avoir tout le temps de travailler sur ton intégration comme bon te semble…
    Voila c’est aussi simple que cela et personnellement, cela m’arrive très régulièrement de faire cela 🙂
    N’hésite pas si tu as d’autres questions.

  • Hmmm, là moi je mettrais quand même quelques bémols, sur le coup 🙂
    Il m’arrive régulièrement d’avoir des différences à l’affichage sur des fichiers psd ouvert dans Fireworks, notamment au niveau des filtres dynamiques, motifs de recouvrement, etc. La plupart des effets passent bien, mais pas tous. Je suis parfois obligé d’aplatir certains éléments dans toshop. Maintenant, j’ai testé avec la version CS5, peut-être que la version 5.5 améliore les choses ?

    David

  • @David : oué je comprend ce que tu veux dire. Du coup, je ferais attention mais pour toutes les maquettes que j’ai intégré et/ou éléments en PSD, j’ai rarement vu la diff. Je me pencherais du coup plus dessus sur les prochains Psd.
    ps : je suis aussi sur la CS5, du coup aucune idée pour la V5.5

  • tiboc77

    Salut à tous,

    Très intéressant cette article, mais j’aurais une petite question avant de sauter le pas !
    Une de mes plus grosses galères sous Photoshop c’est quand j’exporte des éléments de design avec de la transparence (ombre portée par exemple), outre le fait que Photoshop ne copie pas les pixels transparent (ou le vide) dans la zone de sélection, il faut rendre tous les calques inutiles invisibles et applatir l’image avant de l’enregistrer comme il faut… (je ne parle même pas de la transparence qui n’est génée qu’en png 24 bit sous photoshop).
    Cette démarche est-elle aussi simplifié sous FW ?
    Merci d’avance pour la réponse !
    @+

  • @tiboc77 : huhu, sur FW, il exporte la zone que tu lui demande, qu’elle soit transparente ou pas. (ta juste à definir ton format de sortie .png 24 ou 32 par exemple, même en .gif si tu le souhaite.)

  • Sixtine

    Article(s) très intéressant(s) en général, mais j’ai quand même un petit souci sur tes sites perso : l’orthographe et la syntaxe.
    Il y a un trop grand nombre de fautes pour un pro de la créativité et de la rédaction pour le Web… Je pense que lorsque l’on fait de la création pour d’autres personnes (et pour soi aussi d’ailleurs), il est important d’avoir une orthographe, une syntaxe et une grammaire irréprochables.

    Voilà, c’était mon petit « coup de gueule » du week-end.

    Sinon, chapeau pour ton travail, il y a des très chouettes idées (à piquer !)

  • ben moi j’utilise Gimp…
    Ok je sert a rien ^^

  • Sow

    Thanks de l’info, j’avais jamais trop fouillé dans fireworks, en étant toujours sur Ps, je vais m’y attarder un peu !

  • Totalement d’accord avec cet article.
    J’utilise Photoshop, Illustrator et Fireworks et je préfère largement Fireworks pour le web.
    Oui Photoshop et Illustrator vont probablement plus loin et permettent de faire des choses beaucoup plus compliquées mais Fireworks est parfaitement adapté pour le web.
    Il est plus léger, plus ergonomique dans sa prise en main. Permet d’être plus rapide en terme de productivité. Rassemble les meilleurs fonctions les plus couramment utilisées dans Photoshop et Illustrator.
    J’utilise Fireworks depuis sa version 3 bien avant son rachat par Adobe et j’ai pu constater que les dernières versions d’Illustrator se sont nettement inspirées de l’ergonomie de Fireworks.
    Ne serait-ce que dans l’utilisation des dégradés par exemple… beaucoup plus simples depuis toujours à utiliser sous Fireworks.
    Une petite fonction que j’adore, le copier/coller d’un élément, copiez un élément depuis Fireworks et créez un nouveau document pour aller le coller dedans… par défaut le document est à la taille de l’élément copié. Je ne crois pas que ce soit le cas dans Photoshop et dans Illustrator, à vérifier…
    Faire une forme vectorielle et y insérer une image à l’intérieur en se débarrassant du surplus de l’image demeuré invisible c’est possible en 2 clics, dans Illustrator vous trainerez le surplus invisible de l’image avec votre masque de fusion indéfiniment… mais je peux me tromper.
    Fireworks ce sont ces petits riens qui ajoutés les uns aux autres permettent d’être plus productifs au quotidien dans 80% des cas. Dans les 20% des autres cas il est largement dépassé par Photoshop c’est sûr.
    Je rêve d’un Fireworks bis pour le Print qui gère aussi bien à la fois les photos et le vectoriel dans un même logiciel…

  • @greenabz : merci pour ton commentaire qui prouve une fois de plus que je n’ai pas totalement tord à essayer de faire passer les agences de dev’ à ce logiciel 😉

  • Mr. Kaplan

    On peut également parler du « Pathfinder » Fireworks ! Cet outil permet de combiner (joindre/séparer/unir/diviser/… ) des calques afin de créer des formes complexes comme le fait Illustrator.

    La fenêtre s’appelle « Trajet » pour l’activer : Fenêtre>Autres>Trajet

  • c’est la premiere fois que je découvre Fireworks

  • Devant un tel déluge de commentaires allant dans le même sens que l’article je me dois donc de tester la bête 🙂
    J’espère juste que ça se prend facilement en main !

  • Je vais pas tarder à faire une série de tutos. 😉