Je dois traduire fichier PSD en HTML/CSS/JS ...Traduction HTML/CSS/JS - cette grille est-elle dans mon projet? Si non, en ai-je besoin pour coder ce projet?
Voici ce projet:
https://s15.postimg.org/s421pj5mj/PSD.jpg
https://s24.postimg.org/8xq87z3v9/PSD_2.jpg
QUESTION Quels sont les 1.vertical et 2. lignes horizontales bleu ciel et comment sont-ils censés m'aider comme pour quelqu'un qui traduit ce PSD en HTML/CSS/JS? Ne sont-ils pas un peu chaotiques?
Bien qu'ils soient bleus dans votre exemple, ils sont appelés "Redlines". Les lignes sont destinées à vous aider à voir l'alignement, le dimensionnement et l'espacement des éléments.
Par exemple, il y a une ligne centrale au milieu. Vous pouvez l'utiliser pour voir que le texte «Creative Digital Solutons» est centré, tout comme le texte «Personal Services», la section «Web responsive» et la section «Latest project».
Vous pouvez également voir que tout en bas de la deuxième image, certains éléments de texte dans chaque colonne doivent s'aligner avec certaines pièces dans d'autres colonnes.
Habituellement, vous trouverez un élément ou d'un groupe d'éléments comme celui-ci:
Avec les lignes rouges que j'ai ajouté, vous pouvez voir que les icônes doivent tous être de la même largeur, et le côté gauche des icônes doit être aligné avec le côté gauche de "Derniers messages".
Parfois, ces mesures spécifiques contiennent redlines (: 14pt, marge: 10px, etc.), mais celui-ci n'a pas, il vous suffit d'utiliser les lignes pour vous aider à visualiser
Oui, il est chaotique , mais c'est comme ça que ça marche parfois
Qu'en est-il de la grille (il n'y a pas de grille ici). Comment en faire un s'il n'y a pas de grille fournie? Ai-je besoin d'une grille pour traduire ce projet en html/css/js ou puis-je faire sans grille? –
Ces lignes sont votre grille. Vous pouvez arbitrairement superposer une grille sur le dessus si vous pensez que cela aidera, mais ce n'est pas nécessaire. Ces lignes bleues ne devraient pas être dans votre sortie finale, elles sont juste pour vous aider. Plutôt que d'aligner les choses avec une autre grille, vous les aligner avec les lignes fournies – Llewey
J'ai vu beaucoup de projets psd et dans certains il y a ces "redlines" et dans d'autres il y a des girds (comme ici: https://woocommerce.com/wp-content/themes/woo/images/storefront/feature-2.jpg) Je ne sais pas quelle est la différence entre les redlines et la grille en ce qui concerne la traduction de PSD en html/css/js. ... –