Forums Développement Multimédia

Aller au contenu

- - - - -

Différence de lissage de typo dans Photoshop

PAO Photoshop

18 réponses à ce sujet

#1 ptitchon

  • Guests

Posté 10 November 2010 - 12:03 PM

Hello !

Je cherche depuis un certain temps comment obtenir un lissage de typo similaire à celui d'un navigateur.
Ce dernier opère différemment de celui de Photoshop et a un meilleur rendu (malgré les différents modes "sans, nette, forte, légère").

Sur l'image ci-dessous on voit bien que le navigateur (Firefox PC) lisse la typo en "trichant" sur les couleurs et obtient un rendu très net.

Photoshop de son côté floute plus ou moins le contour du caractère en gardant sa couleur d'origine et en jouant sur l'alpha.

Le fait est que c'est plus propre sur Firefox que sur Photoshop... et ça, ça me perturbe ! ^^

Image IPB

Une idée ?
Thanks

#2 marroon

  • Guests

Posté 10 November 2010 - 13:33 PM

Salut,

Ca va pas répondre à ta question mais pour du web, il vaut mieux écrire le texte dans le code HTML/PHP du site et le mettre en forme dans le fichier CSS plutôt que d'utiliser un fichier image. Tu y gagneras sur tout les tableaux :
- en terme d'accessibilité : pour le zoom, tu peut prévoir un grossissement de la typographie grâce au fichier CSS.
- en terme de référencement : le texte sera scanné et référencé par google.
- en terme de facilité de mise à jour : pas la peine d'ouvrir photoshop pour faire un changement de texte.

Et maintenant, il n'y a plus aucune excuse d'incompatibilité de typo avec la balise @font-face

#3 Eddy.vh

    Éternel apprenti.

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 1194 messages

Posté 10 November 2010 - 13:46 PM

+1 Marroon

#4 Kosic

  • Guests

Posté 10 November 2010 - 14:14 PM

Heu, je voudrais pas donner l'impression de faire parie du club des daltoniens mais ta police bigarrée, là, elle me semble bougrement peu lisible ! :lol:
J'ai travaillé sur des sites ouverts aux malvoyants mais on obtenait jamais ça !
As-tu calibré ton écran ?
La version PS, surtout sur un fond quelconque, me semble infiniment plus pertinente, non ?
Après c'est question de goût…

#5 marroon

  • Guests

Posté 10 November 2010 - 14:18 PM

Et "périphériques" <--- ça s'écrit comme ça :lol:

#6 ptitchon

  • Guests

Posté 10 November 2010 - 14:26 PM

Voir le messagemarroon, le 10 November 2010 - 14:18 PM, dit :

Et "périphériques" <--- ça s'écrit comme ça :lol:

Salut Marroon

Périphériques ce n'est pas de moi mais d'une capture d'écran de Google ;)

Ensuite ce n'est pas pour monter un site évidemment, mais pour faire la maquette de ce dernier Avant de le monter normalement.

@Kosic : La police est de l'Arial dans les 2 cas.

Je cherche à avoir un rendu similaire au navigateur au sein de Photoshop pour proposer des maquettes les plus fidèles possible au rendu final.

Any idea ?

#7 Kosic

  • Guests

Posté 10 November 2010 - 14:34 PM

J'avais bien reconnu cette ./%£*¨+/.? d'Arial. C'est juste le côté Mardi-gras qui me chiffonnais.
Serait-ce pour les éditions Harlequins ?
Si tu es vraiment, mais alors là VRAIMENT, obligé de mettre une police pixelisée dans un document passe la en niveau de gris et en PNG pour avoir un lissage et une lisibilité parfaite. (Tire sur le chapeau "Creative Suite", là haut, pour voir.)

#8 matt-murdock

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 6851 messages

Posté 10 November 2010 - 15:04 PM

cela depend aussi si l utilisateur a activer "clear type" dans les preference d affichage du PC

a+

#9 ptitchon

  • Guests

Posté 10 November 2010 - 15:42 PM

Voir le messageKosic, le 10 November 2010 - 14:34 PM, dit :

J'avais bien reconnu cette ./%£*¨+/.? d'Arial. C'est juste le côté Mardi-gras qui me chiffonnais.
Serait-ce pour les éditions Harlequins ?
Si tu es vraiment, mais alors là VRAIMENT, obligé de mettre une police pixelisée dans un document passe la en niveau de gris et en PNG pour avoir un lissage et une lisibilité parfaite. (Tire sur le chapeau "Creative Suite", là haut, pour voir.)

Je ne comprends pas ce que tu entends par mardi-gras.

On ne se comprend pas. Désolé je n'ai pas du m'expliquer assez clairement.

Plus simple :
Comment avoir un lissage Cleartype sous Photoshop (pas nette, ni légère, ni forte...) ?
Zoomer sur l'image ci-dessous, vous verrez que le Cleartype lisse en mixant des couleurs pour donner l'illusion d'une couleur unie.
Image IPB



Et en aucun cas je ne veux mettre du texte sous forme d'image dans un site, mais pour vendre un site il faut bien le faire valider en JPG avant au client, donc avec du texte bidon sous Photoshop... une maquette !

#10 ptitchon

  • Guests

Posté 10 November 2010 - 15:45 PM

Doublon

Modifié par ptitchon, 10 November 2010 - 15:45 PM.


#11 marroon

  • Guests

Posté 10 November 2010 - 16:11 PM

"ClearType n'opère que sur du texte rendu tel quel par le système d'exploitation ou les programmes de l'utilisateur. Les autres éléments graphiques (y compris du texte qui aurait déjà été transformé en trame de points) ne sont pas modifiés par ClearType. Ainsi, du texte dans Word de Microsoft s'affichera après amélioration par ClearType, alors que du texte placé dans une image bitmap par un programme comme Photoshop d'Adobe sera rendu sans modification. Ceci est important, car la technique ClearType est intimement liée au rendu de textes sur certains types d'écran d'ordinateur. Il serait contre-productif de l'appliquer dans d'autres circonstances."

Source : Wikipedia


#12 ptitchon

  • Guests

Posté 10 November 2010 - 16:32 PM

Voir le messagemarroon, le 10 November 2010 - 16:11 PM, dit :

"ClearType n'opère que sur du texte rendu tel quel par le système d'exploitation ou les programmes de l'utilisateur. Les autres éléments graphiques (y compris du texte qui aurait déjà été transformé en trame de points) ne sont pas modifiés par ClearType. Ainsi, du texte dans Word de Microsoft s'affichera après amélioration par ClearType, alors que du texte placé dans une image bitmap par un programme comme Photoshop d'Adobe sera rendu sans modification. Ceci est important, car la technique ClearType est intimement liée au rendu de textes sur certains types d'écran d'ordinateur. Il serait contre-productif de l'appliquer dans d'autres circonstances."

Source : Wikipedia


D'où ma question "comment faire du Cleartype dans Photoshop".

J'ai trouvé un plugin qui s'appelle SharpType pour Photoshop sur Google, mais tous les liens sont morts et pointent au même endroit. C'est dommage ça semblait s'approcher de ce que je recherche (même si l'interface n'a pas l'air super pratique quand même.

#13 marroon

  • Guests

Posté 10 November 2010 - 16:40 PM

Ah ok ! Je croyais que la citation de Wikipédia tombait sous le sens. C'est pas possible, car c'est pas le même type de rendu graphique à l'écran.

C'est pour celà que plusieurs options de lissage sont disponible dans Photoshop pour pouvoir approcher au mieux du ClearType.

[HS]
Quand tu livres une maquette de site web pour validation client, tu te préoccupes du fait que ta typographie va devenir crade au zoom sur un JPEG (format destructeur) ? Tant que tu sais que tu vas mettre en le texte en xhtml / css dans le site, je m'en préoccuperais pas.

C'est comme mes clients qui zoom a 4000% sur mon PDF pour voir les moindres détails...N'imp'

Modifié par marroon, 10 November 2010 - 16:43 PM.


#14 ptitchon

  • Guests

Posté 10 November 2010 - 16:53 PM

Effectivement

Je suis super triste.

Les "solutions" un peu nases que j'ai trouvé en attendant sont :

1- De passer par ce site et faire des screenshots et réintégrer dans les maquettes, mais ce n'est pas souple
http://www.typetester.org/

2- Solution évoquée sur ce forum : http://forums.macrum...ad.php?t=309700
"Create your artwork at doube resolution, and once you're done, flatten it and resample it to 50% using the bicubic algo (smooth/standard/sharp at your discression). The result is dramatically better antialiasing...

The left hand image is using photoshop's "smooth" antialiasing; the right hand image was made using "smooth" and then reduced to 50% using "bicubic (best for smooth gradients)" resampling..."

Mais c'est long à mettre en oeuvre et je trouve le gain... nul sur les petites tailles.

[HS]
Non je me soucie que le rendu soit le plus fidèle possible de la maquette au final. Et il n'y a que les typos qui diffèrent de la maquette au rendu final monté. C'est du pinaillage et c'est pour moi. Les clients ne se sont jamais plaints de ça :lol:

Modifié par ptitchon, 10 November 2010 - 16:55 PM.


#15 marroon

  • Guests

Posté 10 November 2010 - 17:07 PM

Ca vient aussi du fait que la résolution du texte cleartype (dans l'OS par exemple) est de 96ppp alors que dans le web on bosse en 72ppp. Essaye tu verras :lol:

#16 ptitchon

  • Guests

Posté 10 November 2010 - 17:38 PM

Voir le messagemarroon, le 10 November 2010 - 17:07 PM, dit :

Ca vient aussi du fait que la résolution du texte cleartype (dans l'OS par exemple) est de 96ppp alors que dans le web on bosse en 72ppp. Essaye tu verras :lol:

Sous Mac c'est 96, mais sous Windows c'est 72 non ?

#17 marroon

  • Guests

Posté 10 November 2010 - 18:40 PM

Non 96ppp sous Windows également.

#18 Frank.b

  • Members
  • PipPipPipPipPipPipPipPip
  • 539 messages

Posté 10 November 2010 - 23:52 PM

Soit j'ai mal lu, soit j'ai pas tout compris ? Parce que sinon, la solution pour avoir un texte non lissé sous photoshop et de mettre "Sans" en méthode de lissage (sans, net, précis, fort, léger), non ?

frank

#19 JRB

    abracadabrantesque

  • Members
  • PipPipPipPipPipPipPipPip
  • 1864 messages

Posté 12 November 2010 - 15:31 PM

Voir le messagemarroon, le 10 November 2010 - 18:40 PM, dit :

Non 96ppp sous Windows également.

Oui, 72ppp est une vieille convention qui date de l'ancien temps des écrans cathodiques, c'était au millénaire dernier.
Depuis on ne fabrique plus que des écrans plats dont la résolution minimale est de 96 ppp.

Image IPB
Acrobate du PDF, InDesigner et Photoshopographe
abracadabraPDF.net



1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)