Maquette photoshop et intégration css...

Chers amis, bonjour

Je débute en construction de site web (html et css) et je continue d'explorer photoshop.
Il me manque une vue d'ensemble du chemin à parcourir pour arriver au bout d'un site web exploitable et une vue des outils utilisés pour continuer.

Faire une maquette photoshop : ok.
Faire un fichier html : ok.
Faire un fichier CSS : je bidouille pour l'instant.

Ce qu'il me manque c est comment passer d'une maquette photoshop à un fichier CSS.
J'ai vu qu'il fallait découper mon interface via l'outil tranche (sans que je sache vraiment comment le faire) mais ensuite ?

Quels sont les logiciels utilisés ? (je dispose de adobe master CS3)
Existe t il des tutoriaux expliquant cela ?
Quels sont les livres de références à ce sujet ? (en français c'est "mieux" )

Je vous joint mon interface en jpg pour que vous puissiez vous rendre compte de ce que j'ai à faire.


J'ai encore de nombreuses questions mais cela attendra pour l'instant
D'avance, Merci.

Aeowen
Modifié par aeowen (19 Jun 2010 - 16:07)

Salut,

aeowen a écrit :
J'ai vu qu'il fallait découper mon interface via l'outil tranche (sans que je sache vraiment comment le faire) mais ensuite ?

Tu n'es pas obligé d'utiliser l'outil tranche. Pour ma part, je n'utilise cet outil que si j'ai une newsletter à intégrer ; pour une page Web classique, je préfère sélectionner directement le(s) calque(s) dont j'ai besoin, effectuer une copie (en masquant, si besoin, les autres claques inutiles) du (des) calque(s) et créer un nouveau fichier PSD qui servira de base à mon image découpée et me permettra d'utiliser Fireworks pour l'exporter au format JPEG ou PNG. Cette méthode a l'avantage de ne pas « rogner » une ombrée oubliée ou mal découpée, par exemple.

Soit dit en passant, je te conseille de regarder également du côté de Fireworks. C'est un logiciel (qui fait partie de la plupart des suites CS Web et Design d'Adobe) qui est orienté graphisme pour le Web, est plus facile à prendre en main (la sélection des calques y est nettement moins fastidieuse que sous Photoshop) et gère plus finement les différents types de PNG à l'export : contrairement à Photoshop, Fireworks sait distinguer un PNG 24 (sans transparence du tout) d'un PNG 32 (avec couche Alpha), permet de créer des PNG 8 avec couche Alpha ou transparence (avec un meilleur résultat que sous Photoshop), tout en optimisant le poids des images exportées et en garantissant une apparence graphique plus fidèle. Même si Photoshop reste une référence en la matière, Fireworks mérite qu'on s'y intéresse davantage.

@Victor BRITO

Je suis comme toi, un amateur du [c], [n], [v] .

Mais aurais-tu des tutos intéressant pour Fireworks CS4?

3arly3F a écrit :
Mais aurais-tu des tutos intéressant pour Fireworks CS4?

Malheureusement, je n'en connais pas.

Merci Victor pour ces orientations.
Serait il possible d'avoir plus de précisions par rapport a mes questions, toi ou un autre "maitre" designer ?

Merci d'avance.