Faire parler les images avec Paint.NET

On rendra les images plus expressives en ajoutant des phylactères, ce qui se fait assez simplement avec Paint.NET. Mais un effet plus intéressant encore sera produit si les bulles apparaissent suite à une action de l'utilisateur.

1) Ajouter une bulle sur une image

La méthode simple

  1. Avec l'outil ellipse ou rectangle arrondi, tracez un figure au bord noir.
  2. Remplir en blanc.
  3. Avec l'outil trait, former un angle. Utiliser le pinceau et la couleur blanche pour unir cet angle avec la bulle.
    Ou encore, tracer d'autres bulles plus petite pour exprimer la pensée du personnage.
  4. Avec l'outil texte, ajouter un contenu qui sera redimensionné pour s'ajuster à la taille de la bulle.

Choisir une police de caractères

Certaines polices conviennent mieux pour ce type de texte:

Ce sont les fontes par défaut de Windows. On peut trouver sur le Web des fontes spécialisées à télécharger telles que Balloon, etc.

Une méthode plus élaborée

L'utilisation de calques permettra d'ajuster la bulle autour du texte sans détruire l'image initiale.

  1. Ouvrir la fenêtre de calques si elle ne l'est pas déjà (Fenêtre -> Calque ou F7).
  2. Ajouter un nouveau calque en cliquant sur le bouton "+" vert en bas.
  3. Ajouter un autre calque.
    Inutile de renommer ni de changer les propriétés.
  4. Dans le premier calque, taper le texte.
  5. Passer au second calque. Ajouter un ovale ou un rectangle autour du texte et ajustez sa taille.
  6. Ajouter la queue ou les petites bulles comme décrit précédemment.
  7. Remplir avec la couleur blanche ou la couleur de votre choix.
  8. Cliquer sur le premier calque. Fusionner (Calques -> Fusionner).
  9. Fusionner le second calque.
  10. Sauver l'image.

Utiliser des bulles prédéfinies

Le principe consiste à ajouter une police de charactère au système, dont les lettres sont des bulles de formes diverses.

Au lieu de dessiner une bulle dans le second calque, on passe en mode texte et l'on inscrit une lettre-bulle que l'on positionne et redimensionne sous le premier calque contenant le libellé.

Vous pouvez trouver des bulles prédéfinies sur Dingbat (chercher "Komica Bubble") ou vous pouvez également créer les vôtres en utilisant un éditeur de polices.

2 Ajouter l'interactivité

On veut que l'utilisateur fasse apparaître la bulle en cliquant sur une image. Le script de l'image mystère décrit sur Xul.fr va être adapté pour l'occasion.

Le principe consistera à superposer deux images, l'image initiale étant sous l'image modifiée avec la bulle, ou si l'on préfère le second calque seul transformé en image avec un fond transparent.

La seconde image avec la bulle est rendue invisible lors du chargement par son style CSS. On la rend visible lorsque l'utilisateur clique dessus et elle cache alors l'image initiale.

Le code à insérer est le suivant: 

<div class="bbox" style="width:360px;height:360px" onClick="showPic('over')">
    <span id="over" class="over">
        <img src="over.jpg" width="360" height="360">
    </span>
    <span id="under" class="under">
        <img src="under.jpg" width="360" height="360">
    </span>
</div>

Le code CSS et JavaScript sont expliqués dans l'article déjà cité.

Démonstration: faire parler les images

Plus l'interactivité...

Cliquer sur l'image pour faire apparaître le phylactère.

Voir aussi...