{"id":1101,"date":"2024-09-24T09:05:07","date_gmt":"2024-09-24T13:05:07","guid":{"rendered":"https:\/\/sites.smith.edu\/ickb\/?page_id=1101"},"modified":"2025-06-13T10:17:40","modified_gmt":"2025-06-13T14:17:40","slug":"creating-a-vector-halftone","status":"publish","type":"page","link":"https:\/\/sites.smith.edu\/ickb\/documenting-your-artwork\/creating-a-vector-halftone\/","title":{"rendered":"Creating a Vector Halftone"},"content":{"rendered":"<h2>Overview<\/h2>\n<p>A halftone is a way to represent continuous value using only two colors, typically by means of a pattern of dots of varying size. This tutorial will show you how to turn an image into a vector halftone which can be used to produce a woodcut on the ShopBot CNC machine in the Smith College Department of Art wood shop. The tutorial uses the <a href=\"https:\/\/labs.adobe.com\/experiments\/hello-halftones\/\" target=\"_blank\" rel=\"noopener\">Adobe Labs Hello Halftones web app<\/a>.<\/p>\n<h2>Instructions<\/h2>\n<ol>\n<li>\u00a0Click this link to open the app in a separate browser tab: <a href=\"https:\/\/labs.adobe.com\/experiments\/hello-halftones\/\" target=\"_blank\" rel=\"noopener\">Adobe Labs Hello Halftones web app<\/a>. It will look like this: <img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-1104\" src=\"https:\/\/sites.smith.edu\/ickb\/wp-content\/uploads\/sites\/890\/2024\/09\/01-overview-1024x802.png\" alt=\"\" width=\"640\" height=\"501\" srcset=\"https:\/\/sites.smith.edu\/ickb\/wp-content\/uploads\/sites\/890\/2024\/09\/01-overview-1024x802.png 1024w, https:\/\/sites.smith.edu\/ickb\/wp-content\/uploads\/sites\/890\/2024\/09\/01-overview-300x235.png 300w, https:\/\/sites.smith.edu\/ickb\/wp-content\/uploads\/sites\/890\/2024\/09\/01-overview-768x601.png 768w, https:\/\/sites.smith.edu\/ickb\/wp-content\/uploads\/sites\/890\/2024\/09\/01-overview-1536x1202.png 1536w, https:\/\/sites.smith.edu\/ickb\/wp-content\/uploads\/sites\/890\/2024\/09\/01-overview-2048x1603.png 2048w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/li>\n<li>Drag and drop your image into the area at the top left of the page, like so: <img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-1105\" src=\"https:\/\/sites.smith.edu\/ickb\/wp-content\/uploads\/sites\/890\/2024\/09\/02-open-image-1024x690.png\" alt=\"\" width=\"640\" height=\"431\" srcset=\"https:\/\/sites.smith.edu\/ickb\/wp-content\/uploads\/sites\/890\/2024\/09\/02-open-image-1024x690.png 1024w, https:\/\/sites.smith.edu\/ickb\/wp-content\/uploads\/sites\/890\/2024\/09\/02-open-image-300x202.png 300w, https:\/\/sites.smith.edu\/ickb\/wp-content\/uploads\/sites\/890\/2024\/09\/02-open-image-768x518.png 768w, https:\/\/sites.smith.edu\/ickb\/wp-content\/uploads\/sites\/890\/2024\/09\/02-open-image-1536x1036.png 1536w, https:\/\/sites.smith.edu\/ickb\/wp-content\/uploads\/sites\/890\/2024\/09\/02-open-image-2048x1381.png 2048w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/li>\n<li>Click the &#8220;Invert Image&#8221; button: <img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-1106\" src=\"https:\/\/sites.smith.edu\/ickb\/wp-content\/uploads\/sites\/890\/2024\/09\/03-invert-1024x690.png\" alt=\"\" width=\"640\" height=\"431\" srcset=\"https:\/\/sites.smith.edu\/ickb\/wp-content\/uploads\/sites\/890\/2024\/09\/03-invert-1024x690.png 1024w, https:\/\/sites.smith.edu\/ickb\/wp-content\/uploads\/sites\/890\/2024\/09\/03-invert-300x202.png 300w, https:\/\/sites.smith.edu\/ickb\/wp-content\/uploads\/sites\/890\/2024\/09\/03-invert-768x518.png 768w, https:\/\/sites.smith.edu\/ickb\/wp-content\/uploads\/sites\/890\/2024\/09\/03-invert-1536x1036.png 1536w, https:\/\/sites.smith.edu\/ickb\/wp-content\/uploads\/sites\/890\/2024\/09\/03-invert-2048x1381.png 2048w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/li>\n<li>Next, click the &#8220;Shapes&#8221; tab on the left. It will look like this: <img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-1107\" src=\"https:\/\/sites.smith.edu\/ickb\/wp-content\/uploads\/sites\/890\/2024\/09\/04-default-shapes-1024x690.png\" alt=\"\" width=\"640\" height=\"431\" srcset=\"https:\/\/sites.smith.edu\/ickb\/wp-content\/uploads\/sites\/890\/2024\/09\/04-default-shapes-1024x690.png 1024w, https:\/\/sites.smith.edu\/ickb\/wp-content\/uploads\/sites\/890\/2024\/09\/04-default-shapes-300x202.png 300w, https:\/\/sites.smith.edu\/ickb\/wp-content\/uploads\/sites\/890\/2024\/09\/04-default-shapes-768x518.png 768w, https:\/\/sites.smith.edu\/ickb\/wp-content\/uploads\/sites\/890\/2024\/09\/04-default-shapes-1536x1036.png 1536w, https:\/\/sites.smith.edu\/ickb\/wp-content\/uploads\/sites\/890\/2024\/09\/04-default-shapes-2048x1381.png 2048w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/li>\n<li>Set the shape to circle: <img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-1108\" src=\"https:\/\/sites.smith.edu\/ickb\/wp-content\/uploads\/sites\/890\/2024\/09\/05-change-to-dots-1024x690.png\" alt=\"\" width=\"640\" height=\"431\" srcset=\"https:\/\/sites.smith.edu\/ickb\/wp-content\/uploads\/sites\/890\/2024\/09\/05-change-to-dots-1024x690.png 1024w, https:\/\/sites.smith.edu\/ickb\/wp-content\/uploads\/sites\/890\/2024\/09\/05-change-to-dots-300x202.png 300w, https:\/\/sites.smith.edu\/ickb\/wp-content\/uploads\/sites\/890\/2024\/09\/05-change-to-dots-768x518.png 768w, https:\/\/sites.smith.edu\/ickb\/wp-content\/uploads\/sites\/890\/2024\/09\/05-change-to-dots-1536x1036.png 1536w, https:\/\/sites.smith.edu\/ickb\/wp-content\/uploads\/sites\/890\/2024\/09\/05-change-to-dots-2048x1381.png 2048w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/li>\n<li>Change the shape distance to modify the character of your halftone. A larger shape distance will produce a more abstract image, while a smaller one will render finer details. Don&#8217;t set the shape distance below 3, since this can produce an unnecessarily large file that will be difficult to work with in later stages of the process. <img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-1109\" src=\"https:\/\/sites.smith.edu\/ickb\/wp-content\/uploads\/sites\/890\/2024\/09\/06-change-shape-distance-1024x690.png\" alt=\"\" width=\"640\" height=\"431\" srcset=\"https:\/\/sites.smith.edu\/ickb\/wp-content\/uploads\/sites\/890\/2024\/09\/06-change-shape-distance-1024x690.png 1024w, https:\/\/sites.smith.edu\/ickb\/wp-content\/uploads\/sites\/890\/2024\/09\/06-change-shape-distance-300x202.png 300w, https:\/\/sites.smith.edu\/ickb\/wp-content\/uploads\/sites\/890\/2024\/09\/06-change-shape-distance-768x518.png 768w, https:\/\/sites.smith.edu\/ickb\/wp-content\/uploads\/sites\/890\/2024\/09\/06-change-shape-distance-1536x1036.png 1536w, https:\/\/sites.smith.edu\/ickb\/wp-content\/uploads\/sites\/890\/2024\/09\/06-change-shape-distance-2048x1381.png 2048w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/li>\n<li>Click on the Color tab on the left. Set the <strong>halftone color<\/strong> to <strong>white<\/strong> and the <strong>background color<\/strong> to <strong>black<\/strong>. We do this because it gives an accurate picture of what the final woodcut will look like when the CNC machine carves out the dots: <img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-1110\" src=\"https:\/\/sites.smith.edu\/ickb\/wp-content\/uploads\/sites\/890\/2024\/09\/07-white-dots-black-background-1024x711.png\" alt=\"\" width=\"640\" height=\"444\" srcset=\"https:\/\/sites.smith.edu\/ickb\/wp-content\/uploads\/sites\/890\/2024\/09\/07-white-dots-black-background-1024x711.png 1024w, https:\/\/sites.smith.edu\/ickb\/wp-content\/uploads\/sites\/890\/2024\/09\/07-white-dots-black-background-300x208.png 300w, https:\/\/sites.smith.edu\/ickb\/wp-content\/uploads\/sites\/890\/2024\/09\/07-white-dots-black-background-768x533.png 768w, https:\/\/sites.smith.edu\/ickb\/wp-content\/uploads\/sites\/890\/2024\/09\/07-white-dots-black-background-1536x1066.png 1536w, https:\/\/sites.smith.edu\/ickb\/wp-content\/uploads\/sites\/890\/2024\/09\/07-white-dots-black-background-2048x1421.png 2048w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/li>\n<li>You can continue to play with any of the previously-mentioned settings to achieve your desired result. Changing the &#8220;Brightness&#8221; setting under the &#8220;Image&#8221; tab may also help to refine your image: <img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-1111\" src=\"https:\/\/sites.smith.edu\/ickb\/wp-content\/uploads\/sites\/890\/2024\/09\/08-change-brightness-if-desired-1024x711.png\" alt=\"\" width=\"640\" height=\"444\" srcset=\"https:\/\/sites.smith.edu\/ickb\/wp-content\/uploads\/sites\/890\/2024\/09\/08-change-brightness-if-desired-1024x711.png 1024w, https:\/\/sites.smith.edu\/ickb\/wp-content\/uploads\/sites\/890\/2024\/09\/08-change-brightness-if-desired-300x208.png 300w, https:\/\/sites.smith.edu\/ickb\/wp-content\/uploads\/sites\/890\/2024\/09\/08-change-brightness-if-desired-768x533.png 768w, https:\/\/sites.smith.edu\/ickb\/wp-content\/uploads\/sites\/890\/2024\/09\/08-change-brightness-if-desired-1536x1066.png 1536w, https:\/\/sites.smith.edu\/ickb\/wp-content\/uploads\/sites\/890\/2024\/09\/08-change-brightness-if-desired-2048x1421.png 2048w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/li>\n<li>When your image looks right, export it by clicking the &#8220;Download&#8221; button at the top right. <strong>Be sure to download your file as an SVG: <img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-1112\" src=\"https:\/\/sites.smith.edu\/ickb\/wp-content\/uploads\/sites\/890\/2024\/09\/09-download-1024x711.png\" alt=\"\" width=\"640\" height=\"444\" srcset=\"https:\/\/sites.smith.edu\/ickb\/wp-content\/uploads\/sites\/890\/2024\/09\/09-download-1024x711.png 1024w, https:\/\/sites.smith.edu\/ickb\/wp-content\/uploads\/sites\/890\/2024\/09\/09-download-300x208.png 300w, https:\/\/sites.smith.edu\/ickb\/wp-content\/uploads\/sites\/890\/2024\/09\/09-download-768x533.png 768w, https:\/\/sites.smith.edu\/ickb\/wp-content\/uploads\/sites\/890\/2024\/09\/09-download-1536x1066.png 1536w, https:\/\/sites.smith.edu\/ickb\/wp-content\/uploads\/sites\/890\/2024\/09\/09-download-2048x1421.png 2048w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/strong><\/li>\n<li>You&#8217;re done! The SVG file you downloaded can now be cut on the CNC, or can be opened in Adobe Illustrator for further editing. <a href=\"https:\/\/youtu.be\/kiS1A5QjD6E\">This tutorial on the Imaging Center YouTube channel contains more information about editing your file in Adobe Illustrator using the Blob Brush tool<\/a>.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>Overview A halftone is a way to represent continuous value using only two colors, typically by means of a pattern of dots of varying size. This tutorial will show you how to turn an image into a vector halftone which can be used to produce a woodcut on the ShopBot CNC machine in the Smith [&hellip;]<\/p>\n","protected":false},"author":466,"featured_media":0,"parent":2234,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1101","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sites.smith.edu\/ickb\/wp-json\/wp\/v2\/pages\/1101","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.smith.edu\/ickb\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sites.smith.edu\/ickb\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sites.smith.edu\/ickb\/wp-json\/wp\/v2\/users\/466"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.smith.edu\/ickb\/wp-json\/wp\/v2\/comments?post=1101"}],"version-history":[{"count":12,"href":"https:\/\/sites.smith.edu\/ickb\/wp-json\/wp\/v2\/pages\/1101\/revisions"}],"predecessor-version":[{"id":1761,"href":"https:\/\/sites.smith.edu\/ickb\/wp-json\/wp\/v2\/pages\/1101\/revisions\/1761"}],"up":[{"embeddable":true,"href":"https:\/\/sites.smith.edu\/ickb\/wp-json\/wp\/v2\/pages\/2234"}],"wp:attachment":[{"href":"https:\/\/sites.smith.edu\/ickb\/wp-json\/wp\/v2\/media?parent=1101"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}