Découper un design (partie 1)

Voici comment réaliser une interface pour le web. Attention ! C'est une méthode parmi d'autres ... J'utilise ici des tableaux mais sachez qu'il vaut mieux désormais coder en css/xhtml pour etre en conformité avec les recommandations du W3C Consortium. Bref, sortez les thermos et demandez une RTT: y en a pour un petit moment.....

Voici exactement ce à quoi nous voulons arriver :....

Je ne vais pas m'étendre sur la construction de l'image de départ. En fait, il s'agit de créer le design completement sous The Gimp ou Photoshop, puis de le découper pour enfin le mettre en page. A vous de jouer pour cette partie là : tous les tutos du monde ne remplaceraient pas votre imagination ...

Une fois que votre image est faite, aplatissez les calques de manière à pouvoir exporter au format jpeg. Cette étape n'est pas obligatoire puisque vous pouvez exporter pour le web (ALT+F+W) depuis un .psd.

fichier > enregistrer pour le web

La palette "enregistrer pour le web" permet de définir le taux de compression de l'image, donc son poids final. Or, afin d'avoir une page optimale niveau graphique, il est ici nécessaire d'exporter en jpeg maximum et en qualité 100.

Il sera possible, après la découpe d'optimiser les images, voir de supprimer celles qui ne servent à rien (le fond gris de la page par exemple qui sera en fait transformé en un fond de couleurs identique).

• une fois vos paramètres définis, validez.
• enregistrez l'image là où vous le souhaitez en la nommant index

Nota : pour la bonne gestion du projet, organisez vos dossiers comme suit sur votre disque dur :

Cette organisation permet de ne pas se mélanger les pinceaux lors de la mise en ligne, les fichiers natifs étant séparés des fichiers du site..... C'est toujours dommage de laisser trainer des psd sur le net ...

Les fichiers html sont à mettre dans le root du projet en question (site truk pour cet exemple)

Passons maintenant à la découpe. Image ready est simple à utiliser mais beaucoup moins fonctionnel que Fireworks (c'est un avis personnel). La version demo de fireworks permet de tester le découpage en tranche. Ouvrez fireworks et importez le fichier (la découpe a été faite avec une version démo, il se peut que votre interface ne soit pas tout à fait identique à l'image ci-dessous)

Par défaut, l'image s'affiche en bitmap avec des calques prédéfinis. Ne modifiez aucun paramètre. Observez la palette d'outil et sélectionnez l'outil découpe

Sans relacher la souris, délimitez la zone que vous souhaitez découper. Aidez vous des repères de règle au besoin. Une fois le point de découpe final atteint, lachez le bouton de la souris.
Nota : les découpe sont ensuite redimensionnables, si besoin est.

Une fois la premiere découpe réalisée, une zone verte apparait, délimitant la "parcelle".

Observez la palette des calques : par défaut, FW a attribué à cette première découpe le nom "découpe". Modifiez le afin de vous y retrouver lorsque vous monterez vos pages(double-cliquez sur le calque)

Continuez vos découpes. N'hésitez pas à zoomer pour vérifier que les tranches sont bien bord à bord.... Au final, vous devriez obtenir ceci :

Enregistrez votre image avec les tranches (CTRL+Maj+S) dans le dossier projet ouaibe > sitetruk. Le cas échéant, cela vous permettra de revenir et modifier vos tranches si vous en avez besoin ...

Ce fichier étant enregistré, exportons notre découpe au format HTML, puisque nous voulons construire une page web a partir de cette image.

Pour cela, allez dans Fichier > Exporter

La boite de dialogue suivante s'ouvre :

Fin de la première étape.
Voyons voir la deuxième partie de ce turotiel.....