Babylon Design

par Samuel Le Morvan

Chez vous aussi, utilisez un Web de qualité

Tutoriels HTML/CSS

Revigorez vos travaux d’intégration en suivant les préconisations des instances mondiales de l’Internet !

Tutoriels HTML/CSS

En finir avec les images textes découpées n’importe comment

Vous croyiez bien faire ou plutôt vous ne vous êtes jamais posé la question. Découper des images textes, c’est simple. Bien le faire c’est une autre histoire. J’ai tellement vu d’intégrateurs le faire à l’arrache, qu’aujourd’hui je ne tiens plus, je crie « Halte » !

Cet article traine depuis belle lurette dans mon escarcelle et je le pensais has-been avec l’arrivée de @font-face. Mais l’usage de cette technique CSS3 étant restreinte aux polices gratuites, je vois encore et toujours fleurir des images textes découpées à la hache.

Et en 2011, va falloir que ça cesse !

Nul n’est censé ignorer la loi de la police

Le tort est de découper du texte comme on découpe des photos, or cela n’a rien à voir. Lorsque l’on découpe une photo, on rogne pour ne plus avoir d’espace blanc ou vide. Pour un caractère typographique l’espace autour de lui-même est indispensable car il fait partie de son anatomie.

L’intégrateur peu soucieux de la typographie, et qui en veut viscéralement à tous ces salauds de designers qui lui balancent quotidiennement des PSD bordéliques de 150Mo, se venge inconsciemment en amputant sauvagement les jambages et en égrugeant le rythme vertical du design.

Lorsque l’on découpe du texte, il est nécessaire de conserver l’espace pour les jambages inférieurs et supérieurs même si ceux-ci ne sont pas utilisés. En effet, si l’on découpe un texte sans jambages à ras (ex: « coucou maman ») les espacements entre les paragraphes précédents et suivants sont faussés. Malheureusement, ces espacements irréguliers sont fréquemment compensés par des marges ajustées au pifomètre.

Mauvais exemple

Par conséquent, si le wording d’une image texte change, les espacements également. Les marges rustines cassent et le rythme vertical explose.

Ma technique du « Éq »

Pour découper proprement mes images textes, je vous partage ma petite routine qui me permet rogner correctement.

Avant de recadrer, j’ajoute les deux lettres « q » et « É » (alt + 144). Le « q » prends la place du jambage inférieur et « É » le supérieur plus l’accent éventuel. Je rogne une première fois avec ces deux lettres supplémentaires pour obtenir mon espace vertical puis je les supprime et je rogne horizontalement.

Si ce n’est pas clair, voici une petite vidéo explicative :

Grâce à ma petite manipulation, les images textes sont toujours propres et soyeuses. Peu importe que mon wording change, mon rythme vertical est toujours respecté !

Démo de bons et mauvaises découpes d’images textes

bien.jpg

La polyvalence de l’intégrateur toujours en question

Ce problème que j’ai souvent constaté révèle une fois de plus l’indispensable curiosité de l’intégrateur. Il doit entre autres s’intéresser un minimum au design et par conséquent à la typographie.

Photoshop ne doit pas être assimilé à sa simple fonctionnalité Image > Rognage, mais c’est souvent le cas.

Si je peux donner un conseil général aux intégrateurs, faites vos propres PSD de découpes et d’images textes. Ça vous fera gagner du temps et de l’énergie.


Ce que nos lecteurs en disent :

  1. Gl0ubI

    Merci pour cet article qui met les choses simplement au point.

    Je me sens tout d’un coup moins seul et moins extra-terrestre quand je tente d’expliquer pourquoi je ne découpe pas les images-texte au plus près…

  2. Nico

    Ah.. ça fait du bien de revoir des articles de ce genre sur Babylon Design ! Ça faisait longtemps !

  3. G.Crofte

    Merci pour ce très bon article :)

    J’ai déjà fait l’erreur.
    Ton astuce « Éq » est excellente.

    Petit complément d’information sur l’unité pifométrique : http://desencyclopedie.wikia.com/wiki/Pifom%C3%A8tre

    De même pour info, @font-face n’est pas uniquement du CSS3, c’est un brin du CSS2. C’est important de la savoir, notamment pour les vieilles versions de IE qui ne prennent pas en charge le CSS3 mais qui comprennent très bien @font-face. Cela évite de s’encrer en mémoire que @font-face ne marchera pas sur IE.

    Bonne continuation ;)

Les commentaires sont clos.