[resolu]Typo et Illustrator

Bonjour,

Dans mon travail je suis perpétuellement confronter au même problème. L'intégration des layout imaginer par le designer. Ces layout sont soit fait dans illustrator ou dans Photoshop.

Le problème est au niveau des textes. Une fois les découpes effectuée et le code de la mise en page, je mets le texte en reprenant la typo indiquer dans illustrator ( Verdana 10 pt régular).

Je crée le css adéquat mais le contenu n'est pas identique à la présentation dans le projet graphique.

Quel est le problème dans ma méthode.

Merci d'avance.
Modifié par pricci (16 Oct 2009 - 18:41)

Bonsoir,
sans doute un probléme évoqué par Florent V. ici
http://forum.alsacreations.com/topic-9-40905-1-Definir-la-taille-du-texte-em-px-pt-mm.html

Merci de l'info. Je comprends bien le problème de taille c'est juste ici un problème de méthode de travail peut-être ou de transportation d'illustrator vers du code.

Bonjour,

Ce ne serait pas plutôt un problème de lissage du texte. Lissage défini par la configuration du navigateur et/ou de l'ordinateur et sur lequel tu n'a aucun contrôle (enfin sur ton poste de travail oui, mais pas sur celui des utilisateurs) ?

Si c'est le cas, change la configuration du lissage (clearType en général sous windows) de ton poste de travail pour présenter le site et ne te tracasse pas : c'est normal.

Hello,

Christele a écrit :
Bonsoir,
sans doute un probléme évoqué par Florent V. ici
http://forum.alsacreations.com/topic-9-40905-1-Definir-la-taille-du-texte-em-px-pt-mm.html

J'ai pensé également à la même chose que toi.

Sans voir un bout de code... , il se peut que la hauteur de ligne (line-height) soit aussi pour quelque chose. Également, si l'approche a été modifié, tu ne pourras pas le faire en CSS.
Modifié par Nolem (14 Oct 2009 - 22:10)

Hello,

Héhé je connais le même problème et la solution est que tu n'auras jamais le même résultat car Photoshop interprète et rend les fonts différemment de ton navigateur tout simplement.

En plus du problème de lissage évoque par Laurie-Anne, technique de lissage différents en plus d'un logiciel d'adobe à l'autre, il y a aussi un problème de taille.

L'exemple le plus frappant est avec l'arial black, un beau titre sous Photoshop...une horreur sous le navigateur si bien qu'il faut utiliser un taille inférieur à 14px pour que se soit potable.

En principe pour l'intégration du texte depuis photoshop je retire 1 à 2px sur la taille de la font dans la propriété css s'il s'agit d'une police de périphérique...sinon une bonne image png en background est tout aussi efficace mais plus fastidieux

@+

Oui AspiGeek et même je dévierais du probléme pour réagir a ce que tu dis:

N'oublions pas que nos navigateurs se mélent de tout avec un bon résultat, mais quand on est "pro" d'une des technique utilisée, son image, graphisme etc ... les grand outils "pro" donnent un tout autre résultat !

Pour rendre un son d'enregistrement sur MAC ,et le mettre en stream sur le web ... il y a un univers, c' est pour cela que ton analyse sur le rendu des textes est parfaite.

Je dirais au passage a Laurie-Anne que cette technique Microsoft est vraiment trés mauvaise, ne jouant en réalitée que sur les algorithmes trés élémentaires offert par les outils de dessin "rendre plus net"
De plus cette méthode rends en général plus gras, et le résultat dans notepad deviens NUL !

Bon allez je referme la Parenthèse .

Christele a écrit :
Je dirais au passage a Laurie-Anne que cette technique Microsoft est vraiment trés mauvaise, ne jouant en réalitée que sur les algorithmes trés élémentaires offert par les outils de dessin "rendre plus net"
De plus cette méthode rends en général plus gras, et le résultat dans notepad deviens NUL !

Pourquoi me visant en disant cela ? La technique a beau être "mauvaise" elle est là et c'est tout.

AspiGeek a écrit :
L'exemple le plus frappant est avec l'arial black, un beau titre sous Photoshop...une horreur sous le navigateur si bien qu'il faut utiliser un taille inférieur à 14px pour que se soit potable.

Arial black.... et beau... dans la même phrase ? On doit pas parler de la même chose alors

----------> []

En même temps avec une dizaine de police de périphérique mes goûts sont limités aussi

AspiGeek a écrit :
En même temps avec une dizaine de police de périphérique mes goûts sont limités aussi

Rassures toi font-face est en marche ! Et comme il est possible de dégrader correctement les polices en cas d'absence et que font-face est maintenant supporté par les principaux navigateurs modernes, il est tout à fait possible de l'utiliser.

Je ne connaissais pas font-face, je ferai une petite recherche.
Merci pour l'info.

bonjour, Laurie-Anne , escuses moi, je voulais juste connaissant cette technique,donner mon avis.
Bien entendu tu n'était pas en cause.

Merci de toutes ces réponses qui m'ont appris beaucoup.

Donc pour résumé il faut pas se fier au design déja fait. Le rendu ne sera jamais identique.
Bon truc à faire d'embler au démarage du projet éviter les polices de moins de 9px.
Faire accepter que la police ne rends pas la même chose sous IE et FF.
Désactiver lafonctionnalité clear type ( expliquer sur http://www.bluestudios.co.uk/blog/?p=89.
Faire penser au début d'un projet que les contenus ne sont pas identiques dans un site multi langue et donc consacré asser d'espace.
Faire comprendre que faire tout un site en image n'est pas plus rapide, ni plus facile car perte de qualité des textes du au flou.

Autre problème rencontrer sans vraiment de solution logique:
Lors de la génération des images en png avec Photoshop certaines couleur sont carrément foireuse.

Pricci a écrit :
Faire accepter que la police ne rends pas la même chose sous IE et FF.

Faux, une fonte quelque soit sa plateforme s'appuie sur le même fichier de police et je ne vois pas comment un navigateur modifierai l'apparence de celui-ci si qui s'appuie sur des données vectorisées.
La différence de taille des fontes entre les navigateurs provient des propriétés css par défaut.

Pricci a écrit :
Faire comprendre que faire tout un site en image n'est pas plus rapide, ni plus facile car perte de qualité des textes du au flou.

C'est clair mais le flou est soit dû à un type de lissage mal adapté, soit du à la compression dans le cas de police de petite taille sur l'image.
Reste à explorer la piste de Laurie-Anne sur Font-face, sinon c'est la seul méthode d'embarquer des polices externes sur tes pages html.

Pricci a écrit :
Lors de la génération des images en png avec Photoshop certaines couleur sont carrément foireuse.

Problème déjà évoquer sur le forum, il faut attribuer un profil sRGB sur photoshop et dans le cas d'un png-8 autorisé suffisamment de couleurs pour éviter l'isohélie sinon passer par du png-24 ou du jpeg.

Voilou voilou
Modifié par AspiGeek (17 Oct 2009 - 11:28)