Differences

This shows you the differences between two versions of the page.

--- help:cheats:tricks_image_overlay [2022/07/23 05:36] – created to test namespaces ? 101.174.159.45
+++ help:cheats:tricks_image_overlay [2022/07/23 07:55] (current) – no.. actually, this wording!! 101.174.159.45
@@ Line 1: / Line 1: @@
 ====== Image Overlays for Tracing ======
-WIP!
+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:**
+  - Open the Chutney draw tool on the comic you want to add a panel to
+  - Draw a line on the canvas and erase it to activate Peyo energies (and to prevent it locking up after following steps)
+  - Open your browser's inspector (F12)
+  - Click on the Elements/Element Inspector tab
+  - Click on an element in the html view
+  - Activate find (ctrl+f)
+  - Type 'not supported' to get to the canvas in Peyo's html !
+  - 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>//
+  - Enter text edit on the html element above the one you just edited starting '<div id="cancont"'
+  - 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%">//
+  - 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
+  - close your browser's inspector to resume drawing with your image overlay!
+  - 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 !

Chutney Wiki

User Tools

Site Tools

Differences

Page Tools