User Tools

Site Tools


help:cheats:tricks_image_overlay
This version (2025/04/05 18:29) was approved by peyo.

Image Overlays for Tracing

Use a semi opaque image as a guide to trace over for your panel drawing on Chutney!

What you need:

  • Your reference image hosted somewhere (such as postimage dot org ? )

Steps:

  1. Open the Chutney draw tool on the comic you want to add a panel to
  2. Draw a line on the canvas and erase it to activate Peyo energies (and to prevent it locking up after following steps)
  3. Open your browser's inspector (F12)
  4. Click on the Elements/Element Inspector tab
  5. Click on an element in the html view
  6. Activate find (ctrl+f)
  7. Type 'not supported' to get to the canvas in Peyo's html !
  8. Edit the html line starting '<canvas id=' to add 'opacity:0.6;' in the 'style=' attribute. Example: <canvas id=“myCanvas” width=“600” height=“500” style=“opacity:0.6;width: 722px; height: 601.667px; cursor: pointer;”>canvas not supported?</canvas>
  9. Enter text edit on the html element above the one you just edited starting '<div id=“cancont”'
  10. On a new line between the html element starting '<div id=“cancont”' and the html element starting '<canvas id=', insert the following html snippet: <img src=“IMGHERE” style=“position:absolute;width:100%;height:100%”>
  11. replace the text 'IMGHERE' with the url of your hosted image, it should be a direct link ending with the image extension such as .jpg or .png
  12. close your browser's inspector to resume drawing with your image overlay!
  13. if you wish to hide the overlay, reopen your inspector and change the 'opacity' line you added from '0.6' to '1'

Sample Html Result:

After following the above steps, you may have something similar to this in your html inspector:

<div id="cancont" style="width: 722px; height: 601.667px; left: 8px; top: 88px;">
    <img src="https://pchutney.com/public/avatars/avatar_1.png" style="position:absolute;width:100%;height:100%">  
    <canvas id="myCanvas" width="600" height="500" style="opacity:0.6; width: 722px; height: 601.667px; cursor: pointer;">canvas not supported?</canvas>
</div>

Limitations:

  • The simple html provided here means the image may not scale with Chutney zoom

Ideas:

  • Blender layouts with basic shapes that have wireframe overlay make handy references
  • You can edit together multiple images to plan a multi-panel panel !
  • this process can be automated with a macro tool like xdotool/bash on linux, powershell on windows or something more direct like tampermonkey / browser tools / other !
help/cheats/tricks_image_overlay.txt · Last modified: 2022/07/23 07:55 by 101.174.159.45