Fireworks, Dreamweaver... la révolution ?

Bonjour,

actuellement c'est le gros point d'interrogation quant à l'utilité de ces logiciels. Jusque là je travallais mes zoning sous Illustrator, mes chartes sous Photoshop et je codais à la main le CSS/HTML/PHP sous notepad++ ou Komodo.

Or là j'ai le cerveau qui s'embrouille devant la suite CS6 et le besoin d'être plus productive. J'ai presque adopté Fireworks, il entrera cet été dans mes applis. Mais quid de Dreamweaver ? Je n'y ai plus retouché depuis la version CS2 qui ne produisait pas un code propre, où les imports de charte étaient des images bien lourdes... Je vois qu'à présent Fireworks produit lui-même le CSS d'une charte et qu'il y a des retours entre les logiciels.
Travaillant beaucoup avec des CMS entre autre SPIP, Thelia, Prestashop et Wordpress, je ne sais pas si Dreamweaver me serait d'une grande utilité pour aller plus vite dans la rédaction de code HTML5 et CSS3.

Travaillez-vous avec ces outils ? Quels sont vos retours et expériences ?

Pour PHP, je garderais Komodo si tu as besoin d'autocomplétion et des mini fonctionnalitées d'IDE (surtout que la nouvelle version 8 a une interface sympa).

Salut,

Pour ma part, dans le cadre du travail d'intégration, Fireworks fait gagner en productivité par rapport à Photoshop, ne serait-ce que pour la sélection des calques dont on a besoin pour la découpe d'images.

Victor BRITO a écrit :

Pour ma part, dans le cadre du travail d'intégration, Fireworks fait gagner en productivité par rapport à Photoshop, ne serait-ce que pour la sélection des calques dont on a besoin pour la découpe d'images.

Comment ça se passe sous Fireworks par rapport à Photoshop ? Parce que quand tu découpes sous Photoshop tu peux activer la sélection directe des calques au clic. Il me semble que c'est pas différent du mode fonctionnement de Fireworks.

jb_gfx a écrit :


Comment ça se passe sous Fireworks par rapport à Photoshop ? Parce que quand tu découpes sous Photoshop tu peux activer la sélection directe des calques au clic. Il me semble que c'est pas différent du mode fonctionnement de Fireworks.

La sélection des calques dans Fireworks se rapproche plus de Illustrator que de Photoshop. La sélection d'un calque (objet vectoriel ou image) te permet de faire directement une tranche en vue de l'exporter.
J'aime aussi l'affichage permanent des dimensions du calque. C'est indispensable pour le positionnement css.

Pour les zooning et wireframes, Fireworks est intéressant car il gère différentes pages avec un même gabarit.
Modifié par benj (13 Mar 2013 - 21:46)

jb_gfx a écrit :
Comment ça se passe sous Fireworks par rapport à Photoshop ? Parce que quand tu découpes sous Photoshop tu peux activer la sélection directe des calques au clic. Il me semble que c'est pas différent du mode fonctionnement de Fireworks.

Certes, on peut sélectionner un calque au clic sous Photoshop. Mais, sous Fireworks, quand je clique sur un ou plusieurs calques (avec la touche Majuscule ou la touche Alt enfoncée pour en ajouter ou en retrancher de la sélection), effectue un Ctrl + C, puis un Ctrl + N et un Ctrl + V, je n'obtiens dans le nouveau fichier que les calques sélectionnés, et sans aplatissement. Sous Photoshop, pour faire la même chose, je n'ai pas trouvé mieux que de masquer tous les calques dont je n'ai pas besoin (activité très souvent chronophage) et d'effectuer un Ctrl + A (précédé d'un M pour activer le mode sélection), puis un Ctrl + Maj. + C, puis un Ctrl + N et un Ctrl + V, avec pour bémol la fusion des calques.

Bref, c'est une des raisons pour lesquelles je préfère très nettement Fireworks à Photoshop.

benj a écrit :
Pour les zooning et wireframes, Fireworks est intéressant car il gère différentes pages avec un même gabarit.

À noter aussi que Fireworks permet de gérer dans un même fichier et sans ajout de calques supplémentaires les différents états (survol, activation, visité, etc.), grâce à l'onglet États (qui cohabite avec l'onglet Calques).
Modifié par Victor BRITO (13 Mar 2013 - 21:55)

Victor BRITO a écrit :

À noter aussi que Fireworks permet de gérer dans un même fichier et sans ajout de calques supplémentaires les différents états (survol, activation, visité, etc.), grâce à l'onglet États (qui cohabite avec l'onglet Calques).

Merci, je ne connaissais pas ! Va falloir que je regarde ça en détail.

Victor BRITO a écrit :

Certes, on peut sélectionner un calque au clic sous Photoshop. Mais, sous Fireworks, quand je clique sur un ou plusieurs calques (avec la touche Majuscule ou la touche Alt enfoncée pour en ajouter ou en retrancher de la sélection), effectue un Ctrl + C, puis un Ctrl + N et un Ctrl + V, je n'obtiens dans le nouveau fichier que les calques sélectionnés, et sans aplatissement. Sous Photoshop, pour faire la même chose, je n'ai pas trouvé mieux que de masquer tous les calques dont je n'ai pas besoin (activité très souvent chronophage) et d'effectuer un Ctrl + A (précédé d'un M pour activer le mode sélection), puis un Ctrl + Maj. + C, puis un Ctrl + N et un Ctrl + V, avec pour bémol la fusion des calques.

Bref, c'est une des raisons pour lesquelles je préfère très nettement Fireworks à Photoshop.

C'est quasi pareil dans Photoshop en fait. Tu actives la sélection automatique. SHIFT+clic pour ajouter des calques à la sélection, ALT+clic pour retrancher. Tu peux aussi choisir de sélectionner des groupes plutôt que des calques.

Quand tu as ta sélection, tu fais Calque > Dupliquer > Document > Nouveau (ou clic droit sur la palette des calques > Dupliquer, ça revient au même). Il n'y a pas de fusion des calques si tu procèdes ainsi.

Éventuellement, tu fais un rognage avant dans le nouveau fichier si tu as besoin (Image > Rognage > Pixels Transparents).

Tu exportes pour le Web, et voilà.

Si tu utilises souvent Nouveau fichier + rognage tu peux en faire une action histoire de gagner quelques secondes sur l'ensemble du projet mais dans la pratique tu en auras rarement besoin.
Modifié par jb_gfx (14 Mar 2013 - 02:57)

J'ai trouvé la semaine dernière un site intéressant qui donne 50 bonnes raisons d'utiliser Fireworks pour du Webdesign : http://www.reinegger.net et un autre http://webdesign.tutsplus.com

J'ai été très séduite par la gestion de page, on peut changer en cours de route un détail sur un header ou un footer sans repasser par touuuuutes les pages comme on le fait pour un fichier PSD, le détail est changé automatiquement sur tout le projet. Autre fonction qui me plait c'est la gestion des styles car il est long de devoir chercher à chaque fois la bonne typo et la bonne couleur pour tel ou tel titre ou texte... Sans parler de la taille des cadres qui sont visibles sans faire de rognage.

Après comme le 2nd site le dit très bien, là où ça coince pour moi même si je vais me former à Fireworks petit à petit c'est qu'avec Photoshop on a nos habitudes, on le connait par cœur. On a accès à d'avantage de tutos etc...

Mais comme les logiciels Adobe sont liés, il est facile de faire une partie sur Fireworks et l'autre sur Photoshop ou Illustrator, import et zouuuu.

Après la grande question revient toujours à Dreamweaver, il sent l'usine à gaz mais il y a de nombreux plugs intéressants et avec la sortie d'Edge, Animate, reflow etc... je me demande si ça ne serait pas intéressant de rebasculer. Il existe peut-être même des plugs Wordpress permettant d'intégrer rapidement les codes au lieu de les écrire et faire des erreurs. Je me tâte, mais j'ai encore à l'esprit ce code crado du début que Dream générait et j'ai peur que ça n'ait pas été optimisé.

jb_gfx a écrit :
C'est quasi pareil dans Photoshop en fait. Tu actives la sélection automatique. SHIFT+clic pour ajouter des calques à la sélection, ALT+clic pour retrancher. Tu peux aussi choisir de sélectionner des groupes plutôt que des calques.

Quand tu as ta sélection, tu fais Calque > Dupliquer > Document > Nouveau (ou clic droit sur la palette des calques > Dupliquer, ça revient au même). Il n'y a pas de fusion des calques si tu procèdes ainsi.

Éventuellement, tu fais un rognage avant dans le nouveau fichier si tu as besoin (Image > Rognage > Pixels Transparents).

Tu exportes pour le Web, et voilà.

Si tu utilises souvent Nouveau fichier + rognage tu peux en faire une action histoire de gagner quelques secondes sur l'ensemble du projet mais dans la pratique tu en auras rarement besoin.

P***in, pourquoi ne l'ai-je pas su auparavant ?

Cela dit, Fireworks l'emporte toujours puisque, dans Fireworks, les calques sélectionnés sont clairement signalés par des cadres (si j'ose dire, la prise de focus y est visible), ce qui n'est pas le cas dans Photoshop, et que Fireworks crée le nouveau fichier d'emblée dans les bonnes dimensions (autrement dit, pas de rognage nécessaire). Autrement dit, je maintiens qu'il y a toujours un gain de productivité avec Fireworks par rapport à Photoshop.

Bref, j'ai pratiquement envie d'implorer les webdesigners et autres DA Web de recourir plus souvent à Fireworks.

Pour dreamweaver, je l'utilise pas en génération automatique (j'aime trop bidouiller faut croire).

Ce que je peux dire, c'est que l'autocomplétion est là et bien faite (y compris en php avec les fonctions personnelles et les méthodes en orienté objet), que c'est pratique pour l'intégration de fichiers et de liens intérieurs (background-image, images, includes), que si on déplace le ficher de répertoire, il met à jour automatiquement les liens, l'indication des erreurs et des lignes d'erreur est très pratiques, le parcours des includes d'un fichier est franchement pratique (surtout quand on est accoutumé de faire des includes dans des fichiers inclus). Au niveau javascript/Jquery, si on travaille en regardant les fichiers liés et les fichiers d'appel, il autocomplète les sélecteurs css (et ça c'est pratique), idem entre le css et le html d'ailleurs.

L'envoi de fichier sur le serveur en un raccourci clavier est super-pratique aussi je dois dire.

Bref, je sais pas ce qu'il valait avant, mais moi je le trouve très compétent ^^ (bon, il a encore du mal avec l'auto-complétion des sélecteurs quand on travaille en ajax et celui des fonctions quand on travaille avec l'auto-load en PHP OO)

letty a écrit :
J'ai été très séduite par la gestion de page, on peut changer en cours de route un détail sur un header ou un footer sans repasser par touuuuutes les pages comme on le fait pour un fichier PSD, le détail est changé automatiquement sur tout le projet.

Ca existe aussi sous photoshop, on appelle ça les objets dynamiques

Effectivement, j'avais jamais creusé la question! Merci beaucoup et grâce à toi j'ai été farfouiller le sujet je tombe sur ce tuto extra :

http://www.blogduwebdesign.com/tutoriels-photoshop/photoshop-cs6-calques/704

J'apprends qu'on peut créer des styles de Polices et paragraphes
J'apprends que les objets dynamiques ne servent pas qu'aux formes PSD
J'apprends que je peux regrouper les pages d'un projet en un seul PSD

Et ce tuto pour faire un Wireframe sous Illustrator : http://webdesign.tutsplus.com/tutorials/workflow-tutorials/a-beginners-guide-to-wireframing/

Bon où sont à présent les avantages de Fireworks ?

Victor BRITO a écrit :

Cela dit, Fireworks l'emporte toujours puisque, dans Fireworks, les calques sélectionnés sont clairement signalés par des cadres (si j'ose dire, la prise de focus y est visible), ce qui n'est pas le cas dans Photoshop

Tu vois les calques sélectionnés dans la palette des calques. Personnellement je préfères faire mes sélections directement dans cette palette. Je trouve que c'est plus pratique et avec les options de filtrages de la CS6, les groupes de calques et les objets dynamiques, en pratique tu n'as jamais besoin de sélectionner les calques directement dans l'espace de travail. Tu cliques sur ton groupe ou ton objet dynamique et voilà. Faut juste que le designer ait bien fait son boulot.

Victor BRITO a écrit :

Fireworks crée le nouveau fichier d'emblée dans les bonnes dimensions (autrement dit, pas de rognage nécessaire). Autrement dit, je maintiens qu'il y a toujours un gain de productivité avec Fireworks par rapport à Photoshop.

C'est pour ça que je t'ai proposé de créer une action (script en français) que tu peux assigner à un raccourci clavier (exemple F2) pour dupliquer les calques dans un nouveau doc et rogner l'image. Ça prend 20 secondes à faire et tu pourra la réutiliser pour tous tes projets.

Après ça, ça donne :

- Sélection des calques
- F2 pour créer le fichier et rogner
- Alt + Maj + Ctrl + S pour exporter pour le Web

Et voilà, c'est Photoshop le plus productif maintenant et ça a pris une minute pour organiser ton workflow.

letty a écrit :

J'apprends qu'on peut créer des styles de Polices et paragraphes

On peut aussi créer des "outils prédéfinis" pour absolument tous les outils disponibles dans Photoshop. Depuis 7 ou 8 ans...

Tu peux aussi filtrer l'affichage pour ne garder que les calques de textes, sélectionner les calques qui t’intéressent et changer leurs styles en une fois.
Modifié par jb_gfx (14 Mar 2013 - 14:43)

Yep pour le dernier paragraphe ça je savais Pour les styles j'avais pourtant fait une recherche mais je n'avais rien trouvé...

Après peut-être pourrez-vous me dire si avec Photoshop ou Illustrator je peux créer des liens sur un Wireframe qui vont sur telle ou telle page afin de faire une présentation dynamique des pages. Cela montrerait les interactions entre elles par liens, plutôt qu'une présentation figée. Sous Fireworks c'est possible mais les deux autres ???

Non c'est pas possible. En même temps c'est pas à un outil de design et d'illustration ou retouche photo de faire ça. Perso j'utilise Axure RP pour faire ça.

Du coup ça n'est pas plus productif d'utiliser Fireworks pour tout ? Avec les possibilité d'import/export de fichiers de format firework dans PSD et vice-versa c'est sans doute plus souple de réaliser tout sous Adobe histoire de ne pas refaire des choses déjà faites.

Ça dépend comment tu travailles. Perso je fais un prototype interactif sans aucun élément de design sous Axure. Ça permet de se concentrer uniquement sur l'ergonomie et le workflow du site. Comme ça tu travailles beaucoup plus vite ton interface et ton ergo puisque tu ne pense pas du tout à l'aspect visuel hormis le positionnement et la lecture de la page.

Travailler sur un prototype Axure pour adapter et faire des modifications est beaucoup plus rapide que de travailler dans un soft graphique.

Quand le prototype est validé je passe au design sous Photoshop. Si vraiment tu veux garder des éléments de Axure dans Photoshop, par exemple pour les dimensions des blocs tu peux copier/coller de Axure vers Photoshop (je trouve que ça n'a aucun intérêt, mais bon...).

Un autre avantage de Axure, quand tu bosses en équipe et/ou en relation avec ton client est que tu peux mettre des annotations sur chaque pages et éléments pour les décrire et donner des explications détaillés et à la fin tu peux exporter un doc Word avec les captures et les annotations associées.

Bon faut le tester, c'est beaucoup plus puissant et complet que Fireworks pour du prototypage. Mais bien sûr ça dépend du type de site que tu fais. Pour un site vitrine ou un blog je n'irais pas faire du prototypage sous Axure.
Modifié par jb_gfx (14 Mar 2013 - 15:38)

Je procède ainsi également :
1) Expérience utilisateur avec cahier des charges, zoning, recherche ergonomique...
2) Design d'Interface
3) Dev.
4) Tests online
5) Mise en ligne

Le tout est d'optimiser au maximum les outils car j'ai parfois l'impression de perdre mon temps et pédaler dans la semoule.