Getting people to talk to Paint.NET

We will make the images more expressive by adding actors, which is quite simple with Paint.NET. But an even more interesting effect will occur if bubbles appear as a result of user actions.

1) Add a bubble to the image

Simple method

    With
  1. Use the Ellipse tool or a rounded rectangle to draw a shape with a black edge.
  2. Fill with white.
    3. With
  3. Use the Stroke tool to form an angle. Use a brush and white to combine this angle with the bubble.
    Or draw other smaller bubbles to express the character's thought.
  4. Use a text tool to add content that will be resized to fit the bubble.

Choose a font

Some fonts are better suited for this type of text:

These are the default Windows fonts. On the network you can find specialized funds for downloading, such as Balloon, etc.

More complex methodology

Using layers will allow you to adjust the bubble around the text without deleting the original image.

  1. Open the layer window if it is not already open (Window -> Layer or F7).
  2. Add a new layer by clicking the green + button at the bottom.
  3. Add another layer.
    You do not need to rename or change properties.
    4. In
  4. On the first layer, enter text.
  5. Go to the second layer. Add an oval or rectangle around the text and adjust its size.
  6. Add a tail or small bubbles as described above.
  7. Fill with white or selected color.
  8. Click the first layer. Merge (Layers -> Merge).
  9. Merge Second Layer.
  10. Save Image.

Use preset leaders

The principle is to add a font-symbol to the system, the letters of which are bubbles of different shapes.

Instead of drawing a bubble in the second layer, you can switch to text mode and enter a bubble letter, which is placed and resized under the first layer containing the label.

On Dingbat, you can find pre-installed bubbles (look for "Komica Bubble") or create your own using the font editor.

2 Add interactivity

We want the user to show the bubble by clicking on the image. The scenario of the mysterious picture described on the Xul.fr will be adapted for the occasion .

The principle will be to superimpose two frames, with the original image under the changed frame with a bubble, or if a second layer is preferred, only converted into an image with a transparent background.

The second bubble image becomes invisible when loaded by the CSS style. It becomes visible when the user clicks on it and hides the original image.

The code to insert looks like this:

<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>

The CSS code and JavaScript are explained in the article already cited.

Demo - Image Discussion

Plus interactivity...

Click on the image to show the filter.

See also...