Comprendre une maquette psd

Bonjour,

J'ai une question pour les intégrateurs: comment lisez-vous/comprenez-vous une maquette psd à intégrer?

C'est à dire, côté responsive, comment le menu s'anime-t-il? Quelles tailles de polices? etc....

Il me semble avoir vu un article dessus et j'ai oublié de l'ajouter à mes favoris pour y revenir plus tard?

Voilà, comment on s'y prend pour intégrer le site?

J'aimerais plusieurs avis et connaitre vos méthodes?

JE pense que le travail de l intégrateur se fait en plusieurs étapes
a.)-adapter de façon statique le psd en css ( pensé responsive dès le début ou non )
b.)-ajouter des effets graphiques ( css hoover ...)
c.)-ajouter des effets graphiques plus avancés ( javascript / css)

maintenant rien ne vous empêche de choisir un CMS des widget/ modules pour éviter d'avoir à écrire la logique coté serveur (php) / et client (javascript ) et de les customiser comme css zen garden ( choisir les champs à afficher et appliquer votre css : étape a et b ) .

Si le designer a fait la partie graphique ; il doit avoir pris en compte le changement d'état ( states) selon son outils de prédilection :
-photoshop layers comps
-fireworks states
- sketch et illustrator utiliseront le concept des artboard et pas le concept des states

Le tableau résume la puissance de fireworks par rapport a photoshop et illustrator.
Dès que vous avez atteint les limites de firework vous passez a illustrator /photoshop selon le votre cas



Comme il existe des recommandation de nommage pour les sélecteurs css . ... il existe des recommandations aussi pour le nom et l'organisation des layers photoshop .
Modifié par 75lionel (20 Oct 2016 - 13:57)

il y a des outils aussi de spécifications /Annotation qui permet à l'intégrateur de facilité sont travail avec les ressources provenant de l 'export du design (découpage/ slice) .

Le problème pour prendre un exemple avec photoshop est que la structure du fichier psd doit prendre en compte la façon dont va être effectué
-le découpage ( slice) : celui de photoshop ( user based slice , layer based , auto slice , subslice ) ou par extension photoshop comme sliceimage , cut & slice me ou plus récent exportkit.com ou
-l'annotation des distances : pixel measure , ink ,markly , specctr ou specking,

Les extensions pour l 'annotation seront utilisé selon les cas car :
-évite un aller retour entre l'éditeur css et l'éditeur graphique pour connaitre la valeur des distances/tailles , les caractéristiques des fontes ( double écran nécessaire )
-permet de travailler sans éditeurs graphiques
Modifié par 75lionel (20 Oct 2016 - 13:24)