CINXE.COM
Deepnight Games | Pixel perfect drawing
<!DOCTYPE HTML> <!--[if IEMobile 7 ]><html class="no-js iem7" manifest="default.appcache?v=1"><![endif]--> <!--[if lt IE 7 ]><html class="no-js ie6" lang="en"><![endif]--> <!--[if IE 7 ]><html class="no-js ie7" lang="en"><![endif]--> <!--[if IE 8 ]><html class="no-js ie8" lang="en"><![endif]--> <!--[if (gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html class="no-js" lang="en"><!--<![endif]--> <head> <title>Deepnight Games | Pixel perfect drawing</title> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <link rel="pingback" href="https://deepnight.net/wordpress/xmlrpc.php" /> <link rel="shortcut icon" href="https://deepnight.net/wordpress/wp-content/themes/deepnight3/img/favicon.png"/> <link type="text/css" href="https://deepnight.net/wordpress/wp-content/themes/deepnight3/css/reset.css" rel="stylesheet"/> <link rel="alternate" type="application/rss+xml" title="deepnight.net posts" href="https://deepnight.net/feed/rss/" /> <meta name='robots' content='max-image-preview:large' /> <style>img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px }</style> <!-- Jetpack Site Verification Tags --> <meta name="google-site-verification" content="gsxAvqtifecfuiMiqazdIWNBXnXIqHmonPXL6WrS0kM" /> <link rel='dns-prefetch' href='//stats.wp.com' /> <link rel="alternate" type="application/rss+xml" title="Deepnight Games » Pixel perfect drawing Comments Feed" href="https://deepnight.net/blog/tools/pixel-perfect-drawing/feed/" /> <script type="text/javascript"> /* <![CDATA[ */ window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/15.0.3\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/15.0.3\/svg\/","svgExt":".svg","source":{"concatemoji":"https:\/\/deepnight.net\/wordpress\/wp-includes\/js\/wp-emoji-release.min.js?ver=6.7.2"}}; /*! This file is auto-generated */ !function(i,n){var o,s,e;function c(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(o,JSON.stringify(t))}catch(e){}}function p(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data),r=(e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0),new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data));return t.every(function(e,t){return e===r[t]})}function u(e,t,n){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\uddfa\ud83c\uddf3","\ud83c\uddfa\u200b\ud83c\uddf3")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!n(e,"\ud83d\udc26\u200d\u2b1b","\ud83d\udc26\u200b\u2b1b")}return!1}function f(e,t,n){var r="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):i.createElement("canvas"),a=r.getContext("2d",{willReadFrequently:!0}),o=(a.textBaseline="top",a.font="600 32px Arial",{});return e.forEach(function(e){o[e]=t(a,e,n)}),o}function t(e){var t=i.createElement("script");t.src=e,t.defer=!0,i.head.appendChild(t)}"undefined"!=typeof Promise&&(o="wpEmojiSettingsSupports",s=["flag","emoji"],n.supports={everything:!0,everythingExceptFlag:!0},e=new Promise(function(e){i.addEventListener("DOMContentLoaded",e,{once:!0})}),new Promise(function(t){var n=function(){try{var e=JSON.parse(sessionStorage.getItem(o));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(s),u.toString(),p.toString()].join(",")+"));",r=new Blob([e],{type:"text/javascript"}),a=new Worker(URL.createObjectURL(r),{name:"wpTestEmojiSupports"});return void(a.onmessage=function(e){c(n=e.data),a.terminate(),t(n)})}catch(e){}c(n=f(s,u,p))}t(n)}).then(function(e){for(var t in e)n.supports[t]=e[t],n.supports.everything=n.supports.everything&&n.supports[t],"flag"!==t&&(n.supports.everythingExceptFlag=n.supports.everythingExceptFlag&&n.supports[t]);n.supports.everythingExceptFlag=n.supports.everythingExceptFlag&&!n.supports.flag,n.DOMReady=!1,n.readyCallback=function(){n.DOMReady=!0}}).then(function(){return e}).then(function(){var e;n.supports.everything||(n.readyCallback(),(e=n.source||{}).concatemoji?t(e.concatemoji):e.wpemoji&&e.twemoji&&(t(e.twemoji),t(e.wpemoji)))}))}((window,document),window._wpemojiSettings); /* ]]> */ </script> <style id='wp-emoji-styles-inline-css' type='text/css'> img.wp-smiley, img.emoji { display: inline !important; border: none !important; box-shadow: none !important; height: 1em !important; width: 1em !important; margin: 0 0.07em !important; vertical-align: -0.1em !important; background: none !important; padding: 0 !important; } </style> <link rel='stylesheet' id='wp-block-library-css' href='https://deepnight.net/wordpress/wp-includes/css/dist/block-library/style.min.css?ver=6.7.2' type='text/css' media='all' /> <link rel='stylesheet' id='mediaelement-css' href='https://deepnight.net/wordpress/wp-includes/js/mediaelement/mediaelementplayer-legacy.min.css?ver=4.2.17' type='text/css' media='all' /> <link rel='stylesheet' id='wp-mediaelement-css' href='https://deepnight.net/wordpress/wp-includes/js/mediaelement/wp-mediaelement.min.css?ver=6.7.2' type='text/css' media='all' /> <style id='jetpack-sharing-buttons-style-inline-css' type='text/css'> .jetpack-sharing-buttons__services-list{display:flex;flex-direction:row;flex-wrap:wrap;gap:0;list-style-type:none;margin:5px;padding:0}.jetpack-sharing-buttons__services-list.has-small-icon-size{font-size:12px}.jetpack-sharing-buttons__services-list.has-normal-icon-size{font-size:16px}.jetpack-sharing-buttons__services-list.has-large-icon-size{font-size:24px}.jetpack-sharing-buttons__services-list.has-huge-icon-size{font-size:36px}@media print{.jetpack-sharing-buttons__services-list{display:none!important}}.editor-styles-wrapper .wp-block-jetpack-sharing-buttons{gap:0;padding-inline-start:0}ul.jetpack-sharing-buttons__services-list.has-background{padding:1.25em 2.375em} </style> <style id='classic-theme-styles-inline-css' type='text/css'> /*! This file is auto-generated */ .wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none} </style> <style id='global-styles-inline-css' type='text/css'> :root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;} :where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;} :where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;} :root :where(.wp-block-pullquote){font-size: 1.5em;line-height: 1.6;} </style> <link rel='stylesheet' id='lbwps-styles-css' href='https://deepnight.net/wordpress/wp-content/plugins/lightbox-photoswipe/assets/ps4/styles/default.css?ver=5.6.1' type='text/css' media='all' /> <link rel='stylesheet' id='screen-css' href='https://deepnight.net/wordpress/wp-content/themes/deepnight3/style.css?v=3.0.7&ver=6.7.2' type='text/css' media='screen' /> <link rel='stylesheet' id='prismCSS-css' href='https://deepnight.net/wordpress/wp-content/themes/deepnight3/prism/prism.css?ver=6.7.2' type='text/css' media='all' /> <style id='akismet-widget-style-inline-css' type='text/css'> .a-stats { --akismet-color-mid-green: #357b49; --akismet-color-white: #fff; --akismet-color-light-grey: #f6f7f7; max-width: 350px; width: auto; } .a-stats * { all: unset; box-sizing: border-box; } .a-stats strong { font-weight: 600; } .a-stats a.a-stats__link, .a-stats a.a-stats__link:visited, .a-stats a.a-stats__link:active { background: var(--akismet-color-mid-green); border: none; box-shadow: none; border-radius: 8px; color: var(--akismet-color-white); cursor: pointer; display: block; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif; font-weight: 500; padding: 12px; text-align: center; text-decoration: none; transition: all 0.2s ease; } /* Extra specificity to deal with TwentyTwentyOne focus style */ .widget .a-stats a.a-stats__link:focus { background: var(--akismet-color-mid-green); color: var(--akismet-color-white); text-decoration: none; } .a-stats a.a-stats__link:hover { filter: brightness(110%); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 0 2px rgba(0, 0, 0, 0.16); } .a-stats .count { color: var(--akismet-color-white); display: block; font-size: 1.5em; line-height: 1.4; padding: 0 13px; white-space: nowrap; } </style> <script type="text/javascript" src="https://deepnight.net/wordpress/wp-includes/js/jquery/jquery.min.js?ver=3.7.1" id="jquery-core-js"></script> <script type="text/javascript" src="https://deepnight.net/wordpress/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.4.1" id="jquery-migrate-js"></script> <script type="text/javascript" id="likesScript-js-extra"> /* <![CDATA[ */ var like_this_ajax_object = {"ajax_url":"https:\/\/deepnight.net\/wordpress\/wp-admin\/admin-ajax.php"}; /* ]]> */ </script> <script type="text/javascript" src="https://deepnight.net/wordpress/wp-content/plugins/roses-like-this/likesScript.js?ver=6.7.2" id="likesScript-js"></script> <script type="text/javascript" src="https://deepnight.net/wordpress/wp-includes/js/swfobject.js?ver=2.2-20120417" id="swfobject-js"></script> <script type="text/javascript" src="https://deepnight.net/wordpress/wp-content/themes/deepnight3/js/site.js?ver=6.7.2" id="site-js"></script> <script type="text/javascript" src="https://deepnight.net/wordpress/wp-content/themes/deepnight3/prism/prism.js?ver=6.7.2" id="prismJS-js"></script> <link rel="https://api.w.org/" href="https://deepnight.net/wp-json/" /><link rel="alternate" title="JSON" type="application/json" href="https://deepnight.net/wp-json/wp/v2/posts/591" /><link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://deepnight.net/wordpress/xmlrpc.php?rsd" /> <meta name="generator" content="WordPress 6.7.2" /> <link rel="canonical" href="https://deepnight.net/blog/tools/pixel-perfect-drawing/" /> <link rel='shortlink' href='https://deepnight.net/?p=591' /> <link rel="alternate" title="oEmbed (JSON)" type="application/json+oembed" href="https://deepnight.net/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fdeepnight.net%2Fblog%2Ftools%2Fpixel-perfect-drawing%2F" /> <link rel="alternate" title="oEmbed (XML)" type="text/xml+oembed" href="https://deepnight.net/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fdeepnight.net%2Fblog%2Ftools%2Fpixel-perfect-drawing%2F&format=xml" /> <meta property="og:title" content="Pixel perfect drawing" /> <meta property="og:locale" content="en_US" /> <meta property="og:type" content="article" /> <meta property="og:image" content="https://deepnight.net/wordpress/wp-content/uploads/2014/01/bpainterProto.png" /> <meta property="og:image:url" content="https://deepnight.net/wordpress/wp-content/uploads/2014/01/bpainterProto.png" /> <meta property="og:image:secure_url" content="https://deepnight.net/wordpress/wp-content/uploads/2014/01/bpainterProto.png" /> <meta property="og:image:width" content="645" /> <meta property="og:image:height" content="253" /> <meta property="og:url" content="https://deepnight.net/blog/tools/pixel-perfect-drawing/" /> <meta property="og:site_name" content="Deepnight Games" /> <meta property="og:description" content="EDIT: this was actually implemented in Aseprite :) Good news! See the discussion here. Based on an idea by Carduus, I’ve made a small prototype of a pixel perfect drawing algorithm. With Photoshop or similar tool, when you paint using the Brush/Pencil tool, you get this kind of ugly line: Here what can be done …" /> <style>img#wpstats{display:none}</style> <link rel="icon" href="https://deepnight.net/wordpress/wp-content/uploads/2020/12/knight-transp-med-150x150.png" sizes="32x32" /> <link rel="icon" href="https://deepnight.net/wordpress/wp-content/uploads/2020/12/knight-transp-med-300x300.png" sizes="192x192" /> <link rel="apple-touch-icon" href="https://deepnight.net/wordpress/wp-content/uploads/2020/12/knight-transp-med-300x300.png" /> <meta name="msapplication-TileImage" content="https://deepnight.net/wordpress/wp-content/uploads/2020/12/knight-transp-med-300x300.png" /> </head> <body class="post-template-default single single-post postid-591 single-format-standard"> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-40880186-1', 'deepnight.net'); ga('send', 'pageview'); </script> <script type="text/javascript"> if (window !== window.top) top.location.replace(self.location.href); </script> <header class="main"> <div class="banner"> <a href="https://deepnight.net">deepnight.net</a> </div> <div class="imgCache"> <img src="https://deepnight.net/wordpress/wp-content/themes/deepnight3/img/icons/tiny_light_twitter.png"/> <img src="https://deepnight.net/wordpress/wp-content/themes/deepnight3/img/icons/tiny_light_discord.png"/> <img src="https://deepnight.net/wordpress/wp-content/themes/deepnight3/img/icons/tiny_light_youtube.png"/> <img src="https://deepnight.net/wordpress/wp-content/themes/deepnight3/img/icons/tiny_light_github.png"/> <img src="https://deepnight.net/wordpress/wp-content/themes/deepnight3/img/icons/tiny_light_itchio.png"/> </div> <nav id="socialMenu" class="social-navigation"> <div class="menu-social-menu-container"><ul id="menu-social-menu" class="nav-menu"><li id="menu-item-6304" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-6304"><a target="_blank" rel="me" href="https://twitter.com/deepnightfr" title="Twitter (@deepnightFR)">Twitter</a></li> <li id="menu-item-6985" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-6985"><a rel="me" href="https://mastodon.gamedev.place/@deepnight">Mastodon</a></li> <li id="menu-item-6301" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-6301"><a target="_blank" href="/go/discord">Discord</a></li> <li id="menu-item-6818" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-6818"><a target="_blank" rel="me" href="/go/itch" title="Itch.io page">Itch.io</a></li> <li id="menu-item-6303" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-6303"><a target="_blank" rel="me" href="https://github.com/deepnight" title="Github source codes">Github</a></li> </ul></div> </nav> <nav id="mainMenu" class="main-navigation" role="navigation"> <div class="menu-main-menu-container"><ul id="menu-main-menu" class="nav-menu"><li id="menu-item-2628" class="games menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-2628"><a href="https://deepnight.net/">Games</a></li> <li id="menu-item-1562" class="about menu-item menu-item-type-post_type menu-item-object-page menu-item-1562"><a href="https://deepnight.net/about/">Who am I?</a></li> <li id="menu-item-1696" class="art menu-item menu-item-type-post_type menu-item-object-page menu-item-1696"><a href="https://deepnight.net/art/">Art</a></li> <li id="menu-item-3606" class="tutorials menu-item menu-item-type-post_type menu-item-object-page menu-item-3606"><a href="https://deepnight.net/tutorials/">Tutorials</a></li> <li id="menu-item-3513" class="blog menu-item menu-item-type-post_type menu-item-object-page menu-item-3513"><a href="https://deepnight.net/blog/">Blog</a></li> </ul></div> </nav> <nav id="projectsMenu" class="projects-navigation"> <div class="menu-projects-container"><ul id="menu-projects" class="nav-menu"><li id="menu-item-6363" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6363"><a href="https://deepnight.net/nuclear-blaze/">Nuclear Blaze</a></li> <li id="menu-item-6368" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6368"><a href="https://deepnight.net/tools/ldtk-2d-level-editor/">LDtk</a></li> <li id="menu-item-6364" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6364"><a href="https://deepnight.net/tools/rpg-map/">RPG Map</a></li> <li id="menu-item-6378" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6378"><a href="https://deepnight.net/tools/gamebase/">GameBase</a></li> </ul></div> </nav> </header> <div id="main"> <article> <div class="body"> <header> <a class="back" href="/blog">Back</a> <time datetime="2014-01-07" pubdate title="2014-01-07, 14:38"> <span class="month">Jan</span> <span class="day">07</span> <span class="year">2014</span> </time> <a class="title" href="https://deepnight.net/blog/tools/pixel-perfect-drawing/" rel="bookmark">Pixel perfect drawing</a> <span class="infos"> <a href="https://deepnight.net/blog/tools/pixel-perfect-drawing/#comments" class="commentLink" >16</a> | <a href="#" class="likeThis" id="like-591" data-post-id="591">♥ 23</a> </span> </header> <div class="content"> <p><em><strong>EDIT</strong>: this was actually implemented in Aseprite :) Good news! See the <a href="https://github.com/aseprite/aseprite/issues/315" data-type="URL" data-id="https://github.com/aseprite/aseprite/issues/315">discussion here</a>.</em></p> <p>Based on an idea by <a href="https://twitter.com/CarduusHimself">Carduus</a>, I’ve made a small prototype of a <strong>pixel perfect drawing algorithm</strong>.</p> <p>With Photoshop or similar tool, when you paint using the Brush/Pencil tool, you get this kind of ugly line:</p> <figure class="wp-block-image"><a href="http://deepnight.net/wordpress/wp-content/uploads/2014/01/bpainterPhotoshop.png" rel="attachment wp-att-592" data-lbwps-width="645" data-lbwps-height="194" data-lbwps-srcsmall="https://deepnight.net/wordpress/wp-content/uploads/2014/01/bpainterPhotoshop-300x90.png"><img fetchpriority="high" decoding="async" width="645" height="194" src="http://deepnight.net/wordpress/wp-content/uploads/2014/01/bpainterPhotoshop.png" alt="bpainterPhotoshop" class="wp-image-592" srcset="https://deepnight.net/wordpress/wp-content/uploads/2014/01/bpainterPhotoshop.png 645w, https://deepnight.net/wordpress/wp-content/uploads/2014/01/bpainterPhotoshop-300x90.png 300w" sizes="(max-width: 645px) 100vw, 645px" /></a></figure> <p>Here what can be done with some tricks:</p> <figure class="wp-block-image"><a href="http://deepnight.net/wordpress/wp-content/uploads/2014/01/bpainterProto.png" rel="attachment wp-att-593" data-lbwps-width="645" data-lbwps-height="253" data-lbwps-srcsmall="https://deepnight.net/wordpress/wp-content/uploads/2014/01/bpainterProto-300x117.png"><img decoding="async" width="645" height="253" src="http://deepnight.net/wordpress/wp-content/uploads/2014/01/bpainterProto.png" alt="bpainterProto" class="wp-image-593" srcset="https://deepnight.net/wordpress/wp-content/uploads/2014/01/bpainterProto.png 645w, https://deepnight.net/wordpress/wp-content/uploads/2014/01/bpainterProto-300x117.png 300w" sizes="(max-width: 645px) 100vw, 645px" /></a></figure> <p>Here is a demo (maintain left click to paint). It lacks support for some special cases like drawing a line that crosses itself, but you get the idea.</p> <p><em>[ The Flash-based demo isn’t available anymore ]</em></p> <p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" width="600" height="600"><param name="src" value="http://deepnight.net/files/bpainterProto/bpainter.swf"><param name="quality" value="high"><param name="scale" value="noscale"></object>Maybe it would be a nice idea to create a pixel painting software based on this? What do you think?</p> <div class="clear"></div> <footer> <a href="https://deepnight.net/blog/tools/pixel-perfect-drawing/#comments">16 Comments</a> | <a href="#" class="likeThis" id="like-591" data-post-id="591">♥ 23</a></footer> </div> </div> <div class="separator"></div> </article> <script type="text/javascript"> highlightMenu("blog"); </script> <div id="comments"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/blog/tools/pixel-perfect-drawing/#respond" style="display:none;">Cancel reply</a></small></h3><form action="https://deepnight.net/wordpress/wp-comments-post.php" method="post" id="commentform" class="comment-form"><p class="comment-notes"><span id="email-notes">Your email address will not be published.</span> <span class="required-field-message">Required fields are marked <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Comment <span class="required">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required"></textarea></p><p class="comment-form-author"><label for="author">Name</label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" /></p> <p class="comment-form-email"><label for="email">Email</label> <input id="email" name="email" type="text" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" /></p> <p class="comment-form-gatekey"><label for="gatekey">Please answer this: 2 + 3 = ? </label><input type="text" id="gatekey" name="gatekey" value="" size="30" /></p> <p class="comment-subscription-form"><input type="checkbox" name="subscribe_comments" id="subscribe_comments" value="subscribe" style="width: auto; -moz-appearance: checkbox; -webkit-appearance: checkbox;" /> <label class="subscribe-label" id="subscribe-label" for="subscribe_comments">Notify me of follow-up comments by email.</label></p><p class="comment-subscription-form"><input type="checkbox" name="subscribe_blog" id="subscribe_blog" value="subscribe" style="width: auto; -moz-appearance: checkbox; -webkit-appearance: checkbox;" /> <label class="subscribe-label" id="subscribe-blog-label" for="subscribe_blog">Notify me of new posts by email.</label></p><p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Post Comment" /> <input type='hidden' name='comment_post_ID' value='591' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p><p style="display: none;"><input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="2175377568" /></p><p style="display: none !important;" class="akismet-fields-container" data-prefix="ak_"><label>Δ<textarea name="ak_hp_textarea" cols="45" rows="8" maxlength="100"></textarea></label><input type="hidden" id="ak_js_1" name="ak_js" value="144"/><script>document.getElementById( "ak_js_1" ).setAttribute( "value", ( new Date() ).getTime() );</script></p></form> </div><!-- #respond --> <ol class="realComments"> <li class="comment even thread-even depth-1 comment" id="comment-2136"> <div class="avatar"> <img alt='' src='https://secure.gravatar.com/avatar/?s=32&d=retro&r=g' srcset='https://secure.gravatar.com/avatar/?s=64&d=retro&r=g 2x' class='avatar avatar-32 photo avatar-default' height='32' width='32' decoding='async'/> </div> <span class="author">JustIO</span>: <span class="commentBody"><p>Yes i too think its a great idea (sorry for my bad eng im just a ussr gamedev noob)</p> </span> <div class="date">March 12, 2017 at 19:54</div> <div class="clear"></div> </li> </li><!-- #comment-## --> <li class="comment odd alt thread-odd thread-alt depth-1 comment" id="comment-1682"> <div class="avatar"> <img alt='' src='https://secure.gravatar.com/avatar/da913c0b339192fb7596a1edd211877c?s=32&d=retro&r=g' srcset='https://secure.gravatar.com/avatar/da913c0b339192fb7596a1edd211877c?s=64&d=retro&r=g 2x' class='avatar avatar-32 photo' height='32' width='32' loading='lazy' decoding='async'/> </div> <span class="author">PifyZ</span>: <span class="commentBody"><p>This was added to Aseprite (<a href="https://github.com/aseprite/aseprite/tree/master" rel="nofollow ugc">https://github.com/aseprite/aseprite/tree/master</a>).</p> </span> <div class="date">November 10, 2015 at 11:35</div> <div class="clear"></div> </li> </li><!-- #comment-## --> <li class="comment even thread-even depth-1 comment" id="comment-1318"> <div class="avatar"> <img alt='' src='https://secure.gravatar.com/avatar/a3980a720942fb2bd3f89ef1f2ae814a?s=32&d=retro&r=g' srcset='https://secure.gravatar.com/avatar/a3980a720942fb2bd3f89ef1f2ae814a?s=64&d=retro&r=g 2x' class='avatar avatar-32 photo' height='32' width='32' loading='lazy' decoding='async'/> </div> <span class="author">LinX</span>: <span class="commentBody"><p>This is such a great idea….</p> </span> <div class="date">July 22, 2014 at 19:48</div> <div class="clear"></div> </li> </li><!-- #comment-## --> <li class="comment odd alt thread-odd thread-alt depth-1 comment" id="comment-1234"> <div class="avatar"> <img alt='' src='https://secure.gravatar.com/avatar/db3009e76952bd651ca0c229cc829cbc?s=32&d=retro&r=g' srcset='https://secure.gravatar.com/avatar/db3009e76952bd651ca0c229cc829cbc?s=64&d=retro&r=g 2x' class='avatar avatar-32 photo' height='32' width='32' loading='lazy' decoding='async'/> </div> <span class="author">Tyler</span>: <span class="commentBody"><p>Hi, I'm really interested in your algorithm, it looks really cool. Can you tell us what the algorithm is? I'd really like to implement this in my own drawing program. If you don't want to post it here, I don't mind you emailing to me. Thanks in advance!</p> </span> <div class="date">April 19, 2014 at 03:06</div> <div class="clear"></div> </li> </li><!-- #comment-## --> <li class="comment even thread-even depth-1 comment" id="comment-1214"> <div class="avatar"> <img alt='' src='https://secure.gravatar.com/avatar/06806490399cd352d5b4ba3c3e0e47a5?s=32&d=retro&r=g' srcset='https://secure.gravatar.com/avatar/06806490399cd352d5b4ba3c3e0e47a5?s=64&d=retro&r=g 2x' class='avatar avatar-32 photo' height='32' width='32' loading='lazy' decoding='async'/> </div> <span class="author">Kaleb Elmore</span>: <span class="commentBody"><p>This is really cool, I would pay for it. Please continue working on this. Btw, I love your pixel art in your games so much. It's inspiring.</p> </span> <div class="date">February 21, 2014 at 18:12</div> <div class="clear"></div> </li> </li><!-- #comment-## --> <li class="comment odd alt thread-odd thread-alt depth-1 comment" id="comment-1167"> <div class="avatar"> <img alt='' src='https://secure.gravatar.com/avatar/325bcbe1174d8e16a18872513777838c?s=32&d=retro&r=g' srcset='https://secure.gravatar.com/avatar/325bcbe1174d8e16a18872513777838c?s=64&d=retro&r=g 2x' class='avatar avatar-32 photo' height='32' width='32' loading='lazy' decoding='async'/> </div> <span class="author">Ace</span>: <span class="commentBody"><p>Would you mind releasing the algorithm here so someone can make use of it?</p> </span> <div class="date">January 14, 2014 at 20:30</div> <div class="clear"></div> </li> <ul class="children"> <li class="comment byuser comment-author-deepnight bypostauthor even depth-2 comment" id="comment-1168"> <div class="avatar"> <img alt='' src='https://secure.gravatar.com/avatar/45df4d23ae47a3a6a4a378581de24029?s=32&d=retro&r=g' srcset='https://secure.gravatar.com/avatar/45df4d23ae47a3a6a4a378581de24029?s=64&d=retro&r=g 2x' class='avatar avatar-32 photo' height='32' width='32' loading='lazy' decoding='async'/> </div> <span class="author"><a href="http://deepnight.net" class="url" rel="ugc">Sébastien Bénard</a></span>: <span class="commentBody"><p>Hi!<br /> Thanks for the comment :) Actually, I'm working on a (free) pixel art app myself, so this tool will be available in it.</p> </span> <div class="date">January 14, 2014 at 21:10</div> <div class="clear"></div> </li> </li><!-- #comment-## --> <li class="comment odd alt depth-2 comment" id="comment-1169"> <div class="avatar"> <img alt='' src='https://secure.gravatar.com/avatar/325bcbe1174d8e16a18872513777838c?s=32&d=retro&r=g' srcset='https://secure.gravatar.com/avatar/325bcbe1174d8e16a18872513777838c?s=64&d=retro&r=g 2x' class='avatar avatar-32 photo' height='32' width='32' loading='lazy' decoding='async'/> </div> <span class="author">Ace</span>: <span class="commentBody"><p>I've been dreaming of a pixel art program with a feature like that. I'm a Graphics Gale guy, but it's too limited where drawing large tiles are concerned (which your pen tool could fix). Gale's focus is animation, but with a pen tool like this, yours could beat it where larger sprite animations are concerned (if you go that route).</p> <p>Hopefully you'll also add the ability to right-click to color-pick, right-click and drag to select an area to move around, allow exporting frames to a .PNG strip, and possibly implement some color-ramp generation features like the ones I suggested in this thread:</p> <p><a href="http://wayofthepixel.net/index.php?topic=16078.0" rel="nofollow ugc">http://wayofthepixel.net/index.php?topic=16078.0</a></p> <p>Dude, if you made a pixel art tool like the one I described above, almost every pixel artist out there would love you for it. There's a reason why Graphics Gale is the standard for general purpose pixel art. But even it doesn't have anything on a tool like that.</p> </span> <div class="date">January 15, 2014 at 05:18</div> <div class="clear"></div> </li> </li><!-- #comment-## --> </ul><!-- .children --> </li><!-- #comment-## --> <li class="comment even thread-even depth-1 comment" id="comment-1166"> <div class="avatar"> <img alt='' src='https://secure.gravatar.com/avatar/325bcbe1174d8e16a18872513777838c?s=32&d=retro&r=g' srcset='https://secure.gravatar.com/avatar/325bcbe1174d8e16a18872513777838c?s=64&d=retro&r=g 2x' class='avatar avatar-32 photo' height='32' width='32' loading='lazy' decoding='async'/> </div> <span class="author">Ace</span>: <span class="commentBody"><p>That's so damn awesome dude! You have no idea how useful this is!</p> </span> <div class="date">January 14, 2014 at 20:28</div> <div class="clear"></div> </li> </li><!-- #comment-## --> <li class="comment odd alt thread-odd thread-alt depth-1 comment" id="comment-1157"> <div class="avatar"> <img alt='' src='https://secure.gravatar.com/avatar/0f06f20bb9a897b8a112084798b65e06?s=32&d=retro&r=g' srcset='https://secure.gravatar.com/avatar/0f06f20bb9a897b8a112084798b65e06?s=64&d=retro&r=g 2x' class='avatar avatar-32 photo' height='32' width='32' loading='lazy' decoding='async'/> </div> <span class="author">Xue</span>: <span class="commentBody"><p>yes please</p> </span> <div class="date">January 8, 2014 at 17:32</div> <div class="clear"></div> </li> </li><!-- #comment-## --> <li class="comment even thread-even depth-1 comment" id="comment-1156"> <div class="avatar"> <img alt='' src='https://secure.gravatar.com/avatar/486b1a4f2b0d2f05dbd69b43124fd8f5?s=32&d=retro&r=g' srcset='https://secure.gravatar.com/avatar/486b1a4f2b0d2f05dbd69b43124fd8f5?s=64&d=retro&r=g 2x' class='avatar avatar-32 photo' height='32' width='32' loading='lazy' decoding='async'/> </div> <span class="author">Ooya</span>: <span class="commentBody"><p>This is simply awesome !! App of the year ;)</p> </span> <div class="date">January 8, 2014 at 15:49</div> <div class="clear"></div> </li> </li><!-- #comment-## --> <li class="comment odd alt thread-odd thread-alt depth-1 comment" id="comment-1155"> <div class="avatar"> <img alt='' src='https://secure.gravatar.com/avatar/9704a45fdbc891cb0c3908802f28f4b8?s=32&d=retro&r=g' srcset='https://secure.gravatar.com/avatar/9704a45fdbc891cb0c3908802f28f4b8?s=64&d=retro&r=g 2x' class='avatar avatar-32 photo' height='32' width='32' loading='lazy' decoding='async'/> </div> <span class="author">Fogs</span>: <span class="commentBody"><p>This is awesome, I'm up for it! Drawing fur is a breeze with this tool. I'd use it for sure!</p> </span> <div class="date">January 8, 2014 at 14:28</div> <div class="clear"></div> </li> </li><!-- #comment-## --> <li class="comment even thread-even depth-1 comment" id="comment-1154"> <div class="avatar"> <img alt='' src='https://secure.gravatar.com/avatar/06e8b513f5c9bc4bfbb5b141c34e7e07?s=32&d=retro&r=g' srcset='https://secure.gravatar.com/avatar/06e8b513f5c9bc4bfbb5b141c34e7e07?s=64&d=retro&r=g 2x' class='avatar avatar-32 photo' height='32' width='32' loading='lazy' decoding='async'/> </div> <span class="author">Kapi</span>: <span class="commentBody"><p>Nice. Very nice.</p> </span> <div class="date">January 8, 2014 at 12:36</div> <div class="clear"></div> </li> </li><!-- #comment-## --> <li class="comment odd alt thread-odd thread-alt depth-1 comment" id="comment-1153"> <div class="avatar"> <img alt='' src='https://secure.gravatar.com/avatar/626dfdb23911f42b5882f36775806666?s=32&d=retro&r=g' srcset='https://secure.gravatar.com/avatar/626dfdb23911f42b5882f36775806666?s=64&d=retro&r=g 2x' class='avatar avatar-32 photo' height='32' width='32' loading='lazy' decoding='async'/> </div> <span class="author">ArnoChux</span>: <span class="commentBody"><p>It will be very useful for quick lineart… Actually there is not much tools for pixel art. Your little prototype combined with a tablet will be helpful for many pixel artists. If you keep on working on it, I would see the progress.</p> </span> <div class="date">January 7, 2014 at 19:04</div> <div class="clear"></div> </li> </li><!-- #comment-## --> <li class="comment even thread-even depth-1 comment" id="comment-1151"> <div class="avatar"> <img alt='' src='https://secure.gravatar.com/avatar/5e5dd32f5540646a77252f90a5650952?s=32&d=retro&r=g' srcset='https://secure.gravatar.com/avatar/5e5dd32f5540646a77252f90a5650952?s=64&d=retro&r=g 2x' class='avatar avatar-32 photo' height='32' width='32' loading='lazy' decoding='async'/> </div> <span class="author">Pierre B.</span>: <span class="commentBody"><p>I want it and I want it NOW ! </p> <p>In fact I try to make some apps on Android with pixel perfect icons. I make them with gimp and it's a nightmare. </p> <p>Such a tool would be very useful for a developer like me.</p> </span> <div class="date">January 7, 2014 at 15:01</div> <div class="clear"></div> </li> </li><!-- #comment-## --> </ol> <div class="pagination"> </div> <h2>Links to this post</h2> <ol class="pings"> <li class="pingback even thread-even depth-1 comment" id="comment-1158"> <div class="fromUrl"><a href="http://deepnight.net/pppaint/" class="url" rel="ugc">deepnight.net | PPPaint!</a></div> </li> </li><!-- #comment-## --> </ol> </div> </div> <footer class="main"> <div id="footer-sidebar"> <div class="copy"> © 2014-2025 Deepnight Games, all <a href="/wordpress/wp-admin">rights</a> reserved. </div> <div class="notice"> If you read this, you're awesome. Have a nice day! </div> </div> </footer> <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true"> <div class="pswp__bg"></div> <div class="pswp__scroll-wrap"> <div class="pswp__container"> <div class="pswp__item"></div> <div class="pswp__item"></div> <div class="pswp__item"></div> </div> <div class="pswp__ui pswp__ui--hidden"> <div class="pswp__top-bar"> <div class="pswp__counter"></div> <button class="pswp__button pswp__button--close wp-dark-mode-ignore" title="Close [Esc]"></button> <button class="pswp__button pswp__button--share wp-dark-mode-ignore" title="Share"></button> <button class="pswp__button pswp__button--fs wp-dark-mode-ignore" title="Toggle fullscreen [F]"></button> <button class="pswp__button pswp__button--zoom wp-dark-mode-ignore" title="Zoom in/out"></button> <div class="pswp__preloader"> <div class="pswp__preloader__icn"> <div class="pswp__preloader__cut"> <div class="pswp__preloader__donut"></div> </div> </div> </div> </div> <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap"> <div class="pswp__share-tooltip"> </div> </div> <button class="pswp__button pswp__button--arrow--left wp-dark-mode-ignore" title="Previous [←]"></button> <button class="pswp__button pswp__button--arrow--right wp-dark-mode-ignore" title="Next [→]"></button> <div class="pswp__caption"> <div class="pswp__caption__center"></div> </div> </div> </div> </div> <script type="text/javascript" id="lbwps-js-extra"> /* <![CDATA[ */ var lbwpsOptions = {"label_facebook":"Share on Facebook","label_twitter":"Tweet","label_pinterest":"Pin it","label_download":"Download image","label_copyurl":"Copy image URL","label_ui_close":"Close [Esc]","label_ui_zoom":"Zoom","label_ui_prev":"Previous [\u2190]","label_ui_next":"Next [\u2192]","label_ui_error":"The image cannot be loaded","label_ui_fullscreen":"Toggle fullscreen [F]","share_facebook":"0","share_twitter":"0","share_pinterest":"0","share_download":"0","share_direct":"0","share_copyurl":"0","close_on_drag":"1","history":"1","show_counter":"0","show_fullscreen":"0","show_zoom":"0","show_caption":"1","loop":"0","pinchtoclose":"1","taptotoggle":"0","close_on_click":"1","fulldesktop":"1","use_alt":"0","usecaption":"1","desktop_slider":"1","share_custom_label":"","share_custom_link":"","wheelmode":"close","spacing":"12","idletime":"4000","hide_scrollbars":"1","caption_type":"overlay","bg_opacity":"100","padding_left":"0","padding_top":"0","padding_right":"0","padding_bottom":"0"}; /* ]]> */ </script> <script type="text/javascript" src="https://deepnight.net/wordpress/wp-content/plugins/lightbox-photoswipe/assets/ps4/scripts.js?ver=5.6.1" id="lbwps-js"></script> <script type="text/javascript" src="https://stats.wp.com/e-202508.js" id="jetpack-stats-js" data-wp-strategy="defer"></script> <script type="text/javascript" id="jetpack-stats-js-after"> /* <![CDATA[ */ _stq = window._stq || []; _stq.push([ "view", JSON.parse("{\"v\":\"ext\",\"blog\":\"176773795\",\"post\":\"591\",\"tz\":\"1\",\"srv\":\"deepnight.net\",\"j\":\"1:14.3\"}") ]); _stq.push([ "clickTrackerInit", "176773795", "591" ]); /* ]]> */ </script> <script defer type="text/javascript" src="https://deepnight.net/wordpress/wp-content/plugins/akismet/_inc/akismet-frontend.js?ver=1739562166" id="akismet-frontend-js"></script> </body> </html>