{"id":7188,"date":"2023-06-25T14:48:40","date_gmt":"2023-06-25T13:48:40","guid":{"rendered":"https:\/\/www.katsbits.com\/codex\/?p=7188"},"modified":"2023-09-07T15:48:12","modified_gmt":"2023-09-07T14:48:12","slug":"pngtuber-meen-beenz","status":"publish","type":"post","link":"https:\/\/www.katsbits.com\/codex\/pngtuber-meen-beenz\/","title":{"rendered":"PNGTuber Character Sheet"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-light-blue ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-69f5bd0618cff\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-69f5bd0618cff\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.katsbits.com\/codex\/pngtuber-meen-beenz\/#description\" >Description<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.katsbits.com\/codex\/pngtuber-meen-beenz\/#pngtuber-setup\" >PNGTuber Setup<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.katsbits.com\/codex\/pngtuber-meen-beenz\/#timestamps\" >Timestamps<\/a><\/li><\/ul><\/nav><\/div>\n<div style=\"background-color: black; position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; overflow: hidden; max-width: 100%;\"><center><iframe style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" src=\"https:\/\/www.youtube.com\/embed\/QhuDsiCl3R8?rel=0\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/center><\/div>\n<h3><span class=\"ez-toc-section\" id=\"description\"><\/span>Description<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>In this exercise we take a look at creating a simple character sheet using an image\/drawing application. Although this character is to essentially flesh out an idea for a character that will eventually be made in 3D, it can also be used to generate an image sheet for various &#8216;PNG Tuber&#8217; applications that image swap based on real-time microphone audio input.<\/p>\n<p>As this is a relatively uncomplicated &#8216;toon&#8217; and &#8216;papercraft&#8217; style character, its drawn using separate outlines and solid fill shapes for ease of editing, and sake of the &#8216;paint-brush&#8217; outline effect (which likely won&#8217;t make it into the 3D version). This approach is not strictly necessary however, typically vector shapes comprise a customisable outline and fill in the same object so keeping them separate should be considered optional\/personal preference.<\/p>\n<blockquote><p><b>Design note<\/b>: for sake of potential use with different PNGTuber applications and their specific image dimension\/size requirements, the character is drawn in Affinity Designer, a vector-based illustration app that accommodates the character and other drawings being rescaled without loss, or introducing pixel artefacts, prior to, or during export &#8211; this mitigates the amount of image pixilation and aliasing, especially around the edges of shapes. Any software capable of using vectors, paths or curves is recommended.<\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/meen-beenz\/vector-affinity-designer.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 98.5%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/meen-beenz\/vector-affinity-designer.jpg\" alt=\"Affinity Designer Vector Graphics\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Affinity Designer typically draws paths to which effects can be applied, a &#8216;brush outline&#8217; as shown above. How drawing is actually done will vary by application and their respective capabilities.<\/i><\/p>\n<p>Aside from style in a general sense, how each element of the character manifests can change the overall feel quite significantly. Nowhere is this more pronounced than the eyes; black orbs with highlights are very different to white &#8216;googly eyes&#8217;. In practice this can mean a number of different versions might be possible before the right &#8216;look&#8217; is achieved.<\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/pngtuber\/beenz-sheet-eyes.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 98.5%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/pngtuber\/beenz-sheet-eyes.jpg\" alt=\"It's in the eyes\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>It&#8217;s in the eyes. Even for simple characters the eyes are everything and can change the look and feel significantly.<\/i><\/p>\n<h4><span class=\"ez-toc-section\" id=\"pngtuber-setup\"><\/span>PNGTuber Setup<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Typically for PNGTuber use the character sheet needs to accommodate at minimum two to four images; <\/p>\n<p> &#8211; Mouth open<br \/>\n &#8211; Mouth closed<\/p>\n<p>And\/or<\/p>\n<p> &#8211; Eyes open<br \/>\n &#8211; Eyes closed<\/p>\n<p>This minimum accommodates the character talking and blinking. How images are set up will differ depending on the PNGTuber app being used. When saving or exporting, images will need to be masked, background excluded based on alpha, or filled with a colour, e.g. bright green, that can be &#8216;chroma-keyed&#8217; and removed when the avatar is being used.<\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/pngtuber\/pngtuber-setup.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 98.5%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/pngtuber\/pngtuber-setup.jpg\" alt=\"PNGTuber Setup\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>At minimum two, but more typically four, images are used as swapping source but how they are referenced will vary depending on the PNGTuber application used.<\/i><\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/pngtuber\/pngtuber-obs.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 98.5%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/pngtuber\/pngtuber-obs.jpg\" alt=\"PNGTuber OBS\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>In OBS a &#8216;source&#8217; may need to be set (again depending on the app used) which then allows the PNGTuber avatar to be positioned anywhere on screen (ensure Preview is unlocked &#8211; right-click the Preview window and select Unlock.<\/i>\n<\/p><\/blockquote>\n<h3><span class=\"ez-toc-section\" id=\"timestamps\"><\/span>Timestamps<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Times are approximate;<br \/>\n &#8211; 00:00 : Overview &#038; Body<br \/>\n &#8211; 10:00 : Eyes &#038; Mouth<br \/>\n &#8211; 17:00 : Papercraft Outline<br \/>\n &#8211; 21:00 : Mouth ()pen)<br \/>\n &#8211; 28:00 : Eyes (Blink)<\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":7189,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[975,230],"tags":[979,792,978,981,977,982,976,973,980],"class_list":["post-7188","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-pngtuber","category-tutorials","tag-affinity-designer","tag-bezier-curves","tag-character-sheet","tag-convert-to-curves","tag-meen-beenz","tag-papercraft","tag-pngtuber","tag-toon","tag-vector-graphics"],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts\/7188","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/comments?post=7188"}],"version-history":[{"count":13,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts\/7188\/revisions"}],"predecessor-version":[{"id":7210,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts\/7188\/revisions\/7210"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/media\/7189"}],"wp:attachment":[{"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/media?parent=7188"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/categories?post=7188"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/tags?post=7188"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}