{"id":11489,"date":"2015-07-15T07:51:27","date_gmt":"2015-07-15T11:51:27","guid":{"rendered":"http:\/\/aforgrave.ca\/detritus\/?p=11489"},"modified":"2021-06-21T10:05:40","modified_gmt":"2021-06-21T14:05:40","slug":"number-6-aint-no-comic","status":"publish","type":"post","link":"https:\/\/aforgrave.ca\/detritus\/2015\/07\/15\/number-6-aint-no-comic\/","title":{"rendered":"Number 6 Ain&#8217;t No Comic"},"content":{"rendered":"<div id=\"attachment_11493\" style=\"width: 610px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/aforgrave.ca\/detritus\/wp-content\/uploads\/2015\/07\/Number-6-Aint-No-Comic.gif\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-11493\" class=\"size-full wp-image-11493\" src=\"http:\/\/aforgrave.ca\/detritus\/wp-content\/uploads\/2015\/07\/Number-6-Aint-No-Comic.gif\" alt=\"&quot;Number 6 Ain't No Comic (first attempt),&quot; animated GIF by @aforgrave\" width=\"600\" height=\"471\"\/><\/a><p id=\"caption-attachment-11493\" class=\"wp-caption-text\">&#8220;Number 6 Ain&#8217;t No Comic (first attempt),&#8221; animated GIF by @aforgrave<\/p><\/div>\n<p><strong>Bill Smith <\/strong>(<a href=\"http:\/\/twitter.com\/byzantiumbooks\/\" target=\"_blank\" rel=\"noopener\">@byzantiumbooks<\/a>, on Twitter) <a href=\"https:\/\/byzantiumbooksds106.wordpress.com\/2015\/07\/14\/visual-assignment-comic-book-effect\/\" target=\"_blank\" rel=\"noopener\">tackled<\/a>&nbsp;the&nbsp;<strong><a href=\"http:\/\/assignments.ds106.us\/assignments\/comic-book-effect\/\" target=\"_blank\" rel=\"noopener\">Visual Assignment 341: Comic Book Effect<\/a><\/strong> earlier today, and the actual task itself popped up on my screen this evening as I was poking around in the <a href=\"http:\/\/assignments.ds106.us\/types\/visualassignments\/\" target=\"_blank\" rel=\"noopener\">Visual Assignments<\/a> looking for my next challenge. I know I have an iOS app on my phone (called <strong><a href=\"https:\/\/itunes.apple.com\/app\/id419957803\" target=\"_blank\" rel=\"noopener\">Halftone<\/a> <\/strong>by Juicy Bits) that effortlessly creates this effect &#8212; I wanted to approach the task from closer to first principles rather than relying on a purpose-designed app.<\/p>\n<p>I&#8217;d experimented with the halftone filter in Photoshop once or twice before, to it didn&#8217;t take too long to locate it and obtain the result displayed above. Essentially, the effect creates four different coloured images of dots and offsets them to created the pixellated look that is so familiar in comic books. The eye recombines the colour layers to create the colour-blended image that results. I did a bit of research just now and determined that the dots originally used in the 50s pulp press were known as <a href=\"https:\/\/en.wikipedia.org\/wiki\/Ben-Day_dots\" target=\"_blank\" rel=\"noopener\">Ben Day dots<\/a>&nbsp;&#8212; in that implementation, the dots were all the same size, resulting in a very characteristic look. With <a href=\"https:\/\/en.wikipedia.org\/wiki\/Halftone\" target=\"_blank\" rel=\"noopener\">halftone<\/a>, the dots vary in size or spacing (from very small on a gradient up to very large) which allows for a more continuous and even transition.<\/p>\n<p>Photoshop lets you select the maximum radius of the dots,&nbsp;which determines how &#8220;fine&#8221; a detail your image will have. In the original 631&#215;480 MPEG Streamclip screen image, the ratio of smallest maximum pixel radius&nbsp;(4 pixels) to image was too large &#8212; it was too difficult to get a fine enough detail. So I scaled the image size up (Image&gt;Image Size) so that the relative smallest maximum pixel radius ratio would be smaller (follow?) and was able to get a finer halftone from the same image.<\/p>\n<div id=\"attachment_11495\" style=\"width: 641px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/aforgrave.ca\/detritus\/wp-content\/uploads\/2015\/07\/PixelComposition.gif\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-11495\" class=\"size-full wp-image-11495\" src=\"http:\/\/aforgrave.ca\/detritus\/wp-content\/uploads\/2015\/07\/PixelComposition.gif\" alt=\"&quot;Pixel Composition,&quot; animatedGIF by @aforgrave\" width=\"631\" height=\"480\"\/><\/a><p id=\"caption-attachment-11495\" class=\"wp-caption-text\">&#8220;Pixel Composition,&#8221; animatedGIF by @aforgrave<\/p><\/div>\n<p>After fiddling around with the maximum pixel radius and the image size, I took a look back at the assignment description. I noticed that there were a couple of tutorials for the assignment. One was no longer available, and <a href=\"http:\/\/mcguirk.umwblogs.org\/2012\/02\/10\/it-wasnt-funny-at-the-time\/\" target=\"_blank\" rel=\"noopener\">the second one<\/a> was done using <strong><a href=\"https:\/\/www.picnik.com\" target=\"_blank\" rel=\"noopener\">Picnik<\/a><\/strong> and <strong><a href=\"http:\/\/chogger.com\" target=\"_blank\" rel=\"noopener\">Chogger<\/a><\/strong>. However, <strong>Picnik<\/strong> closed up shop in 2013, and <strong>Chogger<\/strong> was only used to add speech bubbles. So I searched for &#8220;halftone comic book effect using Photoshop&#8221; in Google, and immediately noticed an&nbsp;identical image in the Google Image results to the one that sits in the thumbnail on&nbsp;the&nbsp;Comic Book Effect assignment&#8217;s page. Following that image to its source page&nbsp;led me directly to <a href=\"http:\/\/Give Your Photos a Retro Comic Book Effect\" target=\"_blank\" rel=\"noopener\">&#8220;Give Your Photos a Retro Comic Book Effect,<\/a>&#8221;&nbsp;which I will now apply to the original image for comparison.<\/p>\n<h4>Tutorial Exploration<\/h4>\n<ol>\n<li>Start with a fresh copy of the image.<\/li>\n<li>Apply&nbsp;<em>Image&gt;Adjustments&gt;Levels<\/em>, (I liked setting Input to 29\/1.22\/94, which seemed to give a nice contrast.)<\/li>\n<li>Apply&nbsp;<em>Filters&gt;Artistic&gt;Film Grain, <\/em>with settings Grain:4, Highlight Area:0,&nbsp;Intensity:10 as suggested<\/li>\n<li>I then created several duplicates of the original photo layer, in preparation for step 5..<\/li>\n<li>Applied&nbsp;a different filter radius (trying maximum pixel radii of 4, 8, 12, and 16)&nbsp;to a each&nbsp;new layer.<\/li>\n<li>Added a light frame, black border, an orange radiant-filled top caption box and a white bottom narration&nbsp;box.<\/li>\n<li>Downloaded and installed the font <a href=\"http:\/\/www.blambot.com\/font_digitalstrip.shtml\" target=\"_blank\" rel=\"noopener\">Digital Strip<\/a>&nbsp;and used it to add a caption and narration. The leading red M was created by increasing the font size, choosing font colour of red, and applying both a stroke and drop shadow effect from the fx menu.<\/li>\n<li>Used File&gt;Save for Web to create a png file for each halftone variation.<\/li>\n<\/ol>\n<p>Here are the various results:<\/p>\n<div style=\"width: 510px\" class=\"wp-caption alignleft\"><a href=\"https:\/\/www.flickr.com\/photos\/aforgrave\/19092633974\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/farm1.staticflickr.com\/269\/19092633974_b2c94c1e52.jpg\" alt=\"\" width=\"500\" height=\"380\"\/><\/a><p class=\"wp-caption-text\">&#8220;Meanwhile, in the Village PRE1&#8221; by aforgave, on Flickr.<\/p><\/div>\n<div style=\"width: 510px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/www.flickr.com\/photos\/aforgrave\/19094303103\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/farm1.staticflickr.com\/551\/19094303103_91c1b61f19.jpg\" alt=\"\" width=\"500\" height=\"380\"\/><\/a><p class=\"wp-caption-text\">&#8220;Meanwhile, in the Village PRE2,&#8221; by aforgrave, on Flickr<\/p><\/div>\n<div style=\"width: 510px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/www.flickr.com\/photos\/aforgrave\/19094302423\/\"><img loading=\"lazy\" decoding=\"async\" class=\"\" src=\"https:\/\/farm1.staticflickr.com\/389\/19094302423_291f1e3c5f.jpg\" alt=\"\" width=\"500\" height=\"380\"\/><\/a><p class=\"wp-caption-text\">&#8220;Meanwhile, in the Village 4,&#8221; by aforgrave, on Flickr.<\/p><\/div>\n<div style=\"width: 510px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/www.flickr.com\/photos\/aforgrave\/19689006836\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/farm1.staticflickr.com\/440\/19689006836_2715dca74f.jpg\" alt=\"\" width=\"500\" height=\"380\"\/><\/a><p class=\"wp-caption-text\">&#8220;Meanwhile, in the Village 8,&#8221;&nbsp;by aforgave, on Flickr.<\/p><\/div>\n<div style=\"width: 510px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/www.flickr.com\/photos\/aforgrave\/19527203030\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/farm1.staticflickr.com\/484\/19527203030_9c0d293b58.jpg\" alt=\"\" width=\"500\" height=\"380\"\/><\/a><p class=\"wp-caption-text\">&#8220;Meanwhile, in the Village 12,&#8221; by aforgave, on Flickr.<\/p><\/div>\n<div style=\"width: 510px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/www.flickr.com\/photos\/aforgrave\/19719797321\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/farm1.staticflickr.com\/353\/19719797321_3e26eed6f3.jpg\" alt=\"\" width=\"500\" height=\"380\"\/><\/a><p class=\"wp-caption-text\">&#8220;Meanwhile, in the Village 16,&#8221; by aforgave, on Flickr.<\/p><\/div>\n<h4>What the Heck, Let&#8217;s Try the Halftone App<\/h4>\n<p>For comparison, I uploaded the original photo to my phone and experimented with the Halftone app. It was very easy to replicate the elements, albeit with slightly less control over some specifics of the finished product. Dot size and strength are easily adjusted with sliders, which allows for a rapid experimentation. The app also applies the frame, the border and makes for easy creation of the caption and narration boxes and text. It also applies a rustic antique look to the image.<\/p>\n<div style=\"width: 510px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/www.flickr.com\/photos\/aforgrave\/19715384705\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/farm1.staticflickr.com\/336\/19715384705_4042ef9d51.jpg\" alt=\"\" width=\"500\" height=\"391\"\/><\/a><p class=\"wp-caption-text\">&#8220;Meanwhile, in The Village (Halftone app),&#8221; by aforgave, on Flickr.<\/p><\/div>\n<h4>In Closing<\/h4>\n<p>Wow, that was quite a bit of work for 1&nbsp;Credit Unit. But maybe the value obtained from the learning and the exploration is sometimes more valuable than the actual credit obtained.<\/p>\n<p><strong>BCNU<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Bill Smith (@byzantiumbooks, on Twitter) tackled&nbsp;the&nbsp;Visual Assignment 341: Comic Book Effect earlier today, and the actual task itself popped&#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":12375,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[170,15,176],"tags":[920,762,72,970,1078,965,969,967,707,327,94,968],"class_list":["post-11489","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ds106assignments","category-ds106","category-visual","tag-prisoner106","tag-byzantiumbooks","tag-animated-gif","tag-bill-smith","tag-ds106","tag-halftone","tag-halftone-app","tag-maximum-pixel-radius","tag-mpeg-streamclip","tag-photoshop","tag-visualassignments","tag-visualassignments341"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/aforgrave.ca\/detritus\/wp-content\/uploads\/2015\/07\/Number6AintNoComic.jpeg","jetpack_shortlink":"https:\/\/wp.me\/p2UvWF-2Zj","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/aforgrave.ca\/detritus\/wp-json\/wp\/v2\/posts\/11489","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aforgrave.ca\/detritus\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/aforgrave.ca\/detritus\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/aforgrave.ca\/detritus\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/aforgrave.ca\/detritus\/wp-json\/wp\/v2\/comments?post=11489"}],"version-history":[{"count":7,"href":"https:\/\/aforgrave.ca\/detritus\/wp-json\/wp\/v2\/posts\/11489\/revisions"}],"predecessor-version":[{"id":12376,"href":"https:\/\/aforgrave.ca\/detritus\/wp-json\/wp\/v2\/posts\/11489\/revisions\/12376"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/aforgrave.ca\/detritus\/wp-json\/wp\/v2\/media\/12375"}],"wp:attachment":[{"href":"https:\/\/aforgrave.ca\/detritus\/wp-json\/wp\/v2\/media?parent=11489"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/aforgrave.ca\/detritus\/wp-json\/wp\/v2\/categories?post=11489"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/aforgrave.ca\/detritus\/wp-json\/wp\/v2\/tags?post=11489"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}