Retouche d’image et fonds de billets

Petit cours sur l’utilisation de fonds tout en gardant une bonne lisibilité au texte.
J’ai choisi une image de fond avec des zones claires et sombres pour illustrer la difficulté de garder la lisibilité malgré les couleurs.
Il existe deux méthodes pour afficher un texte sur un fond, et chacune a des avantages et des inconvénients.

  • Image de fond dans un tableau (1 colonne, 1 rangée) et texte dans LA case de la table:
    • Simplicité de mise en oeuvre
    • Redimensionnement dynamique possible
    • Difficile d’adapter la lisibilité sur toutes les zones de l’image
  • Texte collé sur une image par un logiciel adapté
    • Réglages de couleurs plus fins
    • Redimensionnement dynamique dépendant du navigateur
    • Il faut absolument… bricoler un peu

Voyons tout ça par des exemples !

Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte
Ci-dessus, image hébergée en fond de case plus texte en noir.

<table>
<tr><td background="adresse de votre image">
Texte à afficher avec ses attributs de couleur
</td></tr>
</table>

 

Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte Et ici, je mets mon texte
Ici, on change juste la couleur des lettres pour essayer d’avoir la meilleure lisibilité possible.
 
L’étape suivante implique des traitements d’image, à savoir coller un texte sur une image en ajustant les couleurs…
 
Texte brut collé sur l’image avec un logiciel de traitement d’images; on choisit police et couleur et le résultat est visible immédiatement. Même chose que la colonne 1, avec un filtre qui change la couleur des caractères en fonction du fond.
 
Ici, l’image du texte a été copiée, puis collée sur le précédent auquel a été appliqué un effet de flou (effet visible sur les parties foncées de l’image de fond).
Ici, une simple instruction d’affichage d’image suffit:

<img src="adresse de votre image"> avec d’éventuelles instructions pour l’adapter aux dimensions de la page
 

Notez que ces effets ont été réalisés avec Gimp, logiciel gratuit, très complet, mais demandant un minimum de prise en main. Je vous le conseille. Les effets qu’on peut en tirer sont époustouflants. Le site originel est en anglais, mais il existe maintenant de bonnes documentations en français, langue dont vous disposez également pour l’interface (ainsi que le breton, le javanais ou le serbo croate…). Si vous utilisez un logiciel qui gère les calques et quelques opérations sur les couleurs, tout cela est à votre portée.

A propos de retouche d’image…

Voilà pour ce petit avant goût sur les fonds d’images. Je réitère mes propositions de service aux novices. Ce ne sont que quelques notions à intégrer, bien moins difficile que les intrigues d’un Koh Lanta ou la gestion de nos maigres salaires (que c’est même pas moi qui fait tellement que j’y pige que dalle !).
Bonne journée !

Publicités
Cet article a été publié dans Informatique. Ajoutez ce permalien à vos favoris.

13 commentaires pour Retouche d’image et fonds de billets

  1. Frederic dit :

    Des fois les images s’affichent et des fois pas… je bous… j’espère que vous allez les voir.Voici le lien direct vers l’image du texte collé sur le fond avec un logiciel de dessin:http://picasaweb.google.com/lh/photo/2I3HyEqwsvtIYnOT5utKjg?authkey=Gv1sRgCPDMoMrWvOalrgE&feat=directlink

  2. ώ ☼ Valérie dit :

    Y’a pas d’image dans ton billet ! Est-ce normal ?Chapeau pour la vidéo, j’ai bien évidemment cliqué.

  3. Framboise dit :

    Merci, Fred, j’ai gimp, mais je ne sais pas trop m’en servir pour l’instant, pas trouvé les combines et bravo pour la video,… effet surprise….

  4. Marie dit :

    Oufty, moi qui ai fait math.sup et pèté en bac à sable et plasticne…..ça va être dur!!!!!!!!!Par ailleurs, la vidéo et la fin: génial.J’ai déja versé mon salaire de mars sur le compte de ton pâtissier…Tu vas pas grossir avec ce que je t’ai versé, le solde étant prévu pour le fisc. belge!!!!!!La photo: ce sont comme 2 gouttes d’eau suspendues à une branche?????????ou mes lunettes ne sont + bonnes!!!!Biz

  5. marie-jo dit :

    je remercie publiquement Fred de penser à la cagnotte de mon mari. Effectivement, j’avais été étonnée par le montant du solde de notre compte en banque ! Depuis que j’ai osé cliquer sur la vidéo, j’ai compris comment faisait mon mari, ex pâtissier, pour m’offrir de si jolis cadeaux ! Bien contente d’avoir également osé faire le premier pas vers Fred et d’avoir été acceptée dans ses "relations" puique cela me permet de bénéficier de ses courts sur le maniement de ces logiciels qui se dérobent à notre entendement par je ne sais quels arcanes. Bisous de la femme du pâtissier. Puisque c’est ainsi, je vais ajouter une de ses gâteries (le dessert d’hier soir) sur mon album dédié aux seuls gourmands et interdit à Pipoune. Elle sait pourquoi !

  6. josy dit :

    J’ai rien vu ! ni vidéo ni photo ! Amusez-vous bien les filles !

  7. zazabelle dit :

    bon ben moi je ferai parties de celles qui n’auront pas vu cette video…..ca devait etre horrible pour que le ent refuse de la diffuser…lolmerci pour les cours..bon we bisous

  8. ♥.҈.҈.♥. Zéphyrine dit :

    Chez moi aussi, vidéos et photos sont remplacées par des petites croix rouges…Tu fais exprès, la croix rouge étant réservée aux plus démunis, on reste démunis devant tes explications!Pour un texte sur un fond de couleur, il suffit de mettre ce code html<table width=100%><tr><td bgcolor=nom de la couleur en anglais>mon texte<br></td></tr></table>Et un nuancier en prime pour la couleur choisie ici:http://pourpre.com/nuanciers/info.phpEt le tour est joué!

  9. ♥.҈.҈.♥. Zéphyrine dit :

    Tiens tout à coup vidéo et photo sont là…juste pour que je me fasse b……r!

  10. zazabelle dit :

    et bien ca remarche tout ca…..on peut voir une superbe video..lolje suppose que tu vas crouler sur les demandes persos maintenant lolton patissier va etre content…

  11. Frederic dit :

    Çà m’énerve… un coup j’ai des images, un coup non… et je ne sais qui blâmer de Windows Live ou de Google Picasa… je vais passer mes nerfs sur quelque chose… grrrr !

  12. marie-jo dit :

    ah, ça me fait bien plaisir de voir que toi aussi, tu t’énerves ! Un moment, je pensais que ça n’arrivait qu’aux "bleus" ! merci encore, bien que j’ai rencontré des difficultés avec une autre image que j’avais trafiquée. Un peu n’importe comment, je dois le dire, avec pour seule préoccupation , celle de la publier… pour voir ! Eh je n’ai rien vu, donc, j’essaierai demain ! big bisous

  13. KyaFrane dit :

    oups ! Croix rouge ! que fait ton hébergeur ? Moi qui suit très intéressée par les collages et superpositions avec Gimp, oui mais aussi le vieux Corel Draw (plus difficle à manipuler mais qui permet de TOUT faire !) je disais donc … j’ai perdu mon fil conducteur mais ce n’est pas grave … c’est encore le décalage horaire ! Je ne sais si tu as eu le temps de jeter un oeil dans mes centaines de "bidouillages" photos et encore, je n’ai pas tout mis …Bonne journée Ami ! Bises FR@NE

Répondre

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google

Vous commentez à l'aide de votre compte Google. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s