Beaucoup de gens dans le monde du web ne jurent que par Phosothop, pensant que celui ci est le plus puissant et le plus complet outil pour toutes les tâches graphiques liées à la production web. Or, si Photoshop est très complet et surpuissant, il n’est pas parfait sur tous les plans, et dans le webdesign comme dans toutes les activités, réduire les délais de production = augmenter la productivité = gain financier.

L’outil « Tranches » de Fireworks est vraiment pratique et peut vous faire gagner beaucoup de temps comparé à Photoshop. Alors, pourquoi ne pas utiliser Fireworks pour la découpe et l’intégration ? Voici mon explication de « pourquoi Fireworks découpe mieux que Photoshop ».

Fireworks a été pensé pour le web. Pas photoshop.

On sait déjà que Photoshop ne gère pas le format des PNGs stratifiés (avec calques). Fireworks lui, propose ce format par défaut pour tous les enregistrements. Photoshop bute quelque peu dans l’édition web, car les fonctionnalités web ont toujours été mises de coté, comme si c’était préoccupation secondaire pour Photoshop.

Commençons par calculer les précieuses secondes que vous pouvez gagner pour chaque édition de tranche, en supposant que vous aurez à revenir sur chaque tranche une trentaine de fois pour des corrections/modifications mineures.

Créer des tranches de découpe

Photoshop possède un outil tranche dans la barre d’outils, vous pouvez facilement dessiner un carré qui représentera votre tranche à exporter. Ici, j’ai dessiné une tranche par dessus mon design, j’ai spécifié une zone que je voudrais découper en image. Vous pouvez constater que la tranche sélectionnée affiche une bordure marron, et les tranches non actives possèdent une bordure bleu très fine. Ce n’est pas très clair, ce n’est pas très « user friendly ».

Regardons maintenant du côté de Fireworks. La création de tranche est aussi simple que Photoshop, on clique l’outil on dessine son carré et hop c’est dans la poche. par contre, la tranche active très facilement repérable puisqu’elle passe en vert lumineux. C’est clair, c’est pratique, c’est « user friendly ». Ca parait être un détail, mais il m’est arrivé de nombreuses fois de chercher ma tranche active pendant 1 à 2 secondes dans photoshop.

Temps économisé par tranche : 1-2 secondes

Dans Photoshop comme dans Fireworks, il est relativement simple d’afficher/masquer les tranches, notamment avec l’aide de raccourcis clavier. « CTRL+H » pour afficher/masquer les tranches dans Photoshop, « 2″ dans Fireworks. Là où la différence est flagrante, c’est sur la sélection de tranches. Dans Fireworks, l’outil de sélection de tranche s’obtient en un clic sur l’icône « pointeur tool ». Dans Photoshop, cet icône n’apparait qu’après un premier clic sur « outil tranches » en gardant le clic enfoncé, puis > sélection de tranches.

Temps économisé par tranche : 2-3 secondes

Nommage des tranches

Fireworks et Photoshop sont quasiment identiques sur ce point là. Si vous êtes un tant soit peu malin, vous allez vouloir nommer vos tranches pour que les images exportées aient de jolis noms « seo friendly », et pour que vos images apparaissent dans les moteurs de recherche. De plus, une bonne nomenclature peut grandement aider à l’organisation de votre intégration et à la clarté de votre code.

Dans Photoshop, pour nommer une tranche après l’avoir dessinée, vous devrez sortir de l’outil « tranche », prendre l’outil de sélection et double cliquer sur la tranche qui vous intéresse pour afficher la fenêtre popup qui vous permet d’indiquer le nom de la tranche. Dans Fireworks, utilisez le même outil « sélection » cliquez la tranche qui vous intéresse et les attributs de celle ci s’afficheront dans le panneau du bas, « propriétés ». Plus agréable.

Tranches et html

Là où Fireworks domine Photoshop, c’est sur la fonctionnalité de tranches html. Une fois que vous avez dessiné votre tranche, vous pouvez spécifier s’il s’agit d’une image à exporter, où d’une zone html. Si vous choisissez zone html, Fireworks vous propose de rentrer directement le code html corresponsant. Très pratique dans le cadre d’intégration rapides comme pour des newletters par exemple.

Prenons un exemple : votre graphisme prévoit une carte Google Map. Sur la maquette, il n’y a qu’un aperçu bien sûr. vous créez la tranche dédiée à cette zone, vous spécifiez « zone html », et vous n’avez plus qu’à copier coller le code de la Google Map. Tout cela sans avoir ouvert votre éditeur de code. En plus, une pression sur « F12″ vous lancera l’aperçu dans le navigateur.

Temps économisé par tranche : 3-5 sec

Exportation de tranches

Il arrive fréquemment de procéder à des modifications sur une seule tranche de votre design. Pour cela, vous allez modifier cette tranche puis l’exporter individuellement.

Dans photoshop, une fois que vous aurez sélectionné la tranche dans votre zone de travail, vous devrez faire : fichier > enregistrer pour le web (ou CTRL+ALT+MAJ+S). Ensuite, pour exporter uniquement la tranche qui nous intéresse, vous devrez cliquer sur celle ci dans l’aperçu de Photoshop , cliquer « Enregistrer » puis, modifier la liste déroulante qui , par défaut, est réglée sur « enregistrer toutes les tranches » (il faut basculer sur « tranches sélectionnées uniquement ». Ouf, ma tranche est enfin exportée après 5 étapes !

Maintenant, qu’en est-il dans Fireworks ?

Dans votre zone de travail, utilisez l’outil « sélection » pour cliquer sur la tranche qui vous intéresse. Puis faites clic droit -> exporter la tranche sélectionnée. Vous noterez que Fireworks à directement compris que vous souhaitiez exporter uniquement cette tranche, et les réglages d’exportation sont donc prédéfinis ainsi.

Temps économisé par tranche : 7 sec

Bilan

Vous l’aurez compris si vous avez lu attentivement cet article, Fireworks s’impose comme l’outil le plus pratique pour la découpe et l’exportation de tranches. On peut facilement gagner 13 à 17 secondes par tranche, soit 8 minutes si l’on travaille avec une trentaine de zones.

Avant la fusion Macromedia / Adobe, les webdesigners pouvaient justifier la non-utilisation de Fireworks, prétextant qu’ils ne disposaient pas de la licence adéquate . Cet argument n’est plus valable aujourd’hui, puisque Fireworks fait partie intégrante de la CreativeSuite et se présente lui même comme un « outil de prototypage rapide ». Donc si votre excuse est « je connais très bien Photoshop et je n’ai pas l’envie et le temps de découvrir un autre logiciel complexe tel que Fireworks » –> vous faites fausse route !

Les technologies et applications web évoluent trop vite pour que l’on stagne sur un outil précis, il faut à mon sens, exploiter la puissance et les avantages de chaque outil, sans tenir compte de ses habitudes ou de ses appréhensions.

Vous avez quelque chose à ajouter ? Utilisez-vous Fireworks ? Allez vous l’utiliser dorénavant ? J’attends vos réactions en commentaires