18041 sujets

Questions générales et questions de débutants

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?
allan00958 a écrit :
Bonjour,
J'ai une question pour les intégrateurs: comment lisez-vous/comprenez-vous une maquette psd à intégrer?

Une vidéo de Graphikart intitulée "Tutoriel Vidéo HTML/CSS : Intégrer une maquette" (2 H 45) détaille l'intégration d'une maquette PSD.
C'est un bon début...
De mémoire, l'aspect "responsive" n'est pas pris en compte dans cette vidéo. A confirmer.
Modérateur
Salut !

sepecat a écrit :
Une vidéo de Graphikart intitulée "Tutoriel Vidéo HTML/CSS : Intégrer une maquette" (2 H 45) détaille l'intégration d'une maquette PSD.

Je ne l'ai pas regardée en entier mais selon l'intro et les sauts que j'ai pu faire, la vidéo traite plus de comment organiser ses CSS et reprendre les infos de bases du .psd comme la taille de police ou les couleurs etc.

allan00958 a écrit :
C'est à dire, côté responsive, comment le menu s'anime-t-il?

Par contre pour tout ce qui est du comportement, des animations, des effets etc j'ai du mal a voir comment faire sans un brief, des story board, des discussions ou n'importe quoi d'autre qui explique le fonctionnement... c'est carrément trop dur, chronophage et risqué d'essayer de déduire ce que le mec qui a fait les maquette avait en tête (sauf si tu le connais comme ta poche parce-que ça fait 5 ans que tu bosse avec lui) non ?

Le plus efficace reste la collaboration Smiley smile

Bonne journée !
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
upload/48731-designtool.png


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)
Sujet clos
Aller à