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

Quand j’ai commencé dans le web et même 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 soigneusement en autodidacte à créer mes calques, bien les nommer, 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 sur). Je me suis éclaté à de nombreuses reprise pour creer les logos, sites et autres infographies pour moi et mes amis. Je ne voyais pas d’autres solutions pour créer tout cela et cela m’allais bien. Je m’étais habitué à travailler avec cet outil superbe.

Quand je suis rentré chez Experian, Mon cher bigboss m’a apprit à utiliser Fireworks et quelques années après je ne jure que par ce programme pour le web. 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 à 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 bien au contraire, juste que chaque logiciel à 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 qu’il supporte beaucoup de formats de travail. 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 laquel je travaillais avant) qui donnait « une erreur interne est survenue » mais tout 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 et tout sera bien converti. Le vecto, 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 » on refait tout. Encore un gros avantage de FW c’est qu’a chaque nouvel élément dans votre zone de travail, il créé automatiquement un nouveau calque. (texte, forme vectoriel ou bitmap) Cela à le gros avantage de ne plus y penser et de ce concentrer sur sa création.

Bien entendu chaque calque à des effets indépendants et modifiables à souhait (logique) Dans FW cela s’appel des effets. Vous y retrouverez les principaux effets de photoshop (flou, ombre, reglage de couleurs, lueurs, j’en passe et des meilleurs) J’avoue certe qu’ils ont leurs limites mais vu qu’on peux intégrer des effets photoshop c’est pas bien grave. Bien sur vous avez le choix des 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 mais franchement je ne m’en sert presque pas (sauf pour créer des gifs animés mais j’en reparlerais plus tard) pourquoi je ne m’en sert pas ? simplement car la selection 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. Créer de groupe. C’est tout simplement groupe plusieurs calque 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 je trouve. 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 c’est que l’on peux y faire 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 de chaque états en commun avec toutes les états (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) mais j’ai choisis de faire des déclinaison de page de site sur lequel je travail.

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 y mettre des intercalaires (les pages) et dans chaque page vous pouvez y avoir plusieurs documents

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ême 10 pages avec les retours sur une autres « page ». vous gardez ainsi l’historique de vos versions.

Bien sur 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

Ce que je trouve vraiment intéressant dans FW c’est le controle ultra-précis 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 interessant 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 que créer fictivement le site internet et de naviguer directement entre les images. Comme si votre zoning était lié. Vous pouvez donc montrer au client comment on navigera à la fin sur le site. Ou va t’on arriver si on clic la ou la 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 forcement gérer l’export un jour ou l’autre de votre création. Et bien tout est prévue. Après être passé dans les préférences d’export pour lui dire comment vous souhaitez votre exports (en div, en table imbriquées, avec les images dans un sous-dossier  et bien d’autres configs…) il ne vous reste plus qu’a selectionner vos zones d’images, zone de textes, nommer les images, les balises ALT, les liens et exporter.

Certe il y a des limites à ce mode mais le résultat est assez satisfaisant même si c’est pas forcement 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. Une création d’UNE page de site. Les même effets, tout pareil hein. Et bien je suis juste effaré. 81Mo pour PS Versus 1,8Mo pour FW… que voulez vous de plus? C’est un fichier Web bon sans ! 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 fallut un certains nombre d’heure avant de « maitriser » le logiciel mais un fois qu’on prend les habitudes, les raccourcis, c’est avec une facilité déconcertante que l’on « fabrique » de toute pièce un site. Et comme tout logiciel, je ne le maitrise pas encore à 100%. Le logiciel à bien sur ses limites et il faut passer par photoshop pour avoir certains effets/photomontages mais c’est pour cela que la compatibilité de la suite est présente.

Fireworks c’est 70% de photoshop et 70% d’illustrator. Je suis sur 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 grace à FW.  Et je ne bosse que très peu pour le print donc FW est LE logiciel pour le Web. Quand je remet les mains dans PS je perd trop de temps à penser à des choses automatique 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 souhaitez 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’attend vos réactions.

Olybop