via

Cliquer ici pour voir la vidéo.

Ce qui est aussi toujours bon à prendre quand on est dans le métier, c’est comment les autres trouvent leurs inspiration. Chacun d’entre nous à ses petits rituels, lui nous en dévoile quelques-uns. Merci à lui. Techniquement parlant, vous allez aussi pouvoir décortiquer le PSD (qu’il a dut ranger pendant des heures, ahahah) vous voir sa façon de travailler les lumières, les saturations, la déstructuration. Même si vous savez faire, je suis sur qu’une petite piqûre de rappel ne fait pas de mal. Enjoy !

Aujourd’hui,durant 24H, vous pouvez télécharger gratuitement le PSD de Xavier

Cliquer ici pour voir la vidéo.

via

via

via

Du coup je me suis fait une petite session créative dans cet esprit. Imaginons nous n’avions plus qu’a ingérer une petite gélule Photoshop pour pouvoir avec 1heure de connaissance de retouches photos ! Ou alors se prendre une petite pilule de Flash pour créer une carte de voeux animée pour sa mamie ! Tiens ! je reprendrais bien une dose d’illustrator pour me faire un jolie tee-shirt pour les vacances…

Enfin voila, en tout cas je me suis fait plaisir à créer ces fioles, boites et autre plaquettes de médocs créatifs.

Alors vous prendrez la pilule rouge ou verte ?

WEB UI Treasure Chest v 1.0

facebook ui icons vector

Web Graphic Kit UI elements (7$)

Free PSD Web Buttons

Sleek Video player

Panel GUI

Browser Form Elements PSD

UI Components

Android UI

Web ui kit

Ipad ui pack

iPad and iPhone Design

Web UI et Bouton Set

Apple style nav

Adobe icon

Login form

Neat ui

Android set

Ipad set

Facebook – Twitter – Webui (Fireworks .png)

Making of

Cliquer ici pour voir la vidéo.

Cliquer ici pour voir la vidéo.

Lien vers le projet

Quand je suis rentré chez Experian, mon cher bigboss m’a apprit à 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 à 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 à 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 laquel 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 a refaire. Encore un gros avantage de FW c’est qu’à chaque nouvel élément dans votre zone de travail, il créé 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’appel 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 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 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 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 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ê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

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. Pour la création d’UNE page de site contenant les même 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 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 Adobe 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