[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