Photoshop Tutorial: The Hedcut Effect

Posted by Andrew on December 20th, 2006
Visited 827651 times, 465 so far today

I first encountered this type of illustration while reading the Wall Street Journal during my days studying at Pratt Institute in New York. Back then I had no idea what it was called or how it was done.

From Wikipedia:

Hedcut is a style of drawing, primarily of people, pioneered and used by The Wall Street Journal. The drawings are traditionally 18 by 31 Picas (3″ by 5.167″), and use the stipple method of many small dots to create an image. They are designed to emulate the look of woodcuts from old-style newspapers, and engravings on certificates and currency. The phonetic spelling of “hed” may be based on newspapers’ use of the term “hed” for “headline.”


So yesterday nostalgia struck and prompted me to search for a Photoshop plugin that can perhaps achieve a similar effect. Alas, after five years of not really waiting, no one has come up with anything close. My googling led me to the website of Kevin Sprouls, the man who started it all. Check out his site and this site and this one or grab an O’Reilly book at your local Barnes & Noble to get a feel of what the Hedcut style looks like.

I began tinkering last night with pretty good, but not perfect, results. I was thinking that maybe some famous political figure should be my first test subject. The first person I thought about? Russian President Vladimir Putin.

1. I’m going to start with an image that I pulled off of Google Images:

put001

I chose this image primarily because it has a white background. It’s always easier to work with pictures with plain backgrounds especially if you want to edit only its subject. Note that this tutorial applies to black and white images. To convert a picture to black and white, click Image > Adjustments > Desaturate. If the picture doesn’t have enough contrast, click Image > Adjustments > Brightness and Contrast to increase contrast. To take advantage of the stipple effect, we need contrast to define the light areas from the dark areas.

2. Next, choose the Pencil tool and set the diameter to 5px and 100% opacity. Zoom in on your image to begin creating a set of dots. Our dots will each have a 5 x 5 pixel diameter and will be just 2 pixels apart. Depending on the size of your image, you may have to adjust the diameter and spacing.

put pixels

To make things easier, keep duplicating layers until you’ve created enough dots to cover four times the size of your canvass.

put002

For the sake of this tutorial, name this layer “Dots” and the other layer “Putin”.

3. With the Dots layer currently selected, click Filter > Distort > Wave. By doing this, we’re creating a more randomized pattern of dots that will help accomplish the stipple effect. Copy the following settings:

wave settings

Click OK to apply the filter. Your image will look something like this:

put003

If you find that the dots are too big, you may resize them through Edit > Transform > Scale. Be sure to press the Shift key to maintain proportion. I chose to scale down my dots by about 15%.

4. In the next step we apply a mask to the Dots layer to reveal only the parts of the dots that are shaded/darkened on Putin’s face. To do this, duplicate the layer with Putin’s picture and arrange it in this manner:

put layers

Apply a layer mask to the Dots layer by clicking Layer > Layer Mask > Reveal All. Select the Putin Copy layer and click Layer > Create Clipping Mask. This becomes the mask for the dots.

put layers masked

5. With the Putin Copy layer currently selected, click Image > Adjustments > Curves. Play around with the line graph and see the mask taking effect. These were my final settings:

curves settings

put009

6. Now you’ll notice that the dots have somehow obtained a polygonal shape. What we really want are circular dots. To get around this, first merge the three layers Putin Copy, Dots and Putin through Layer > Merge Down or Ctrl-E. Then, click Filter > Artistic > Poster Edges.

poster edges settings2

put005

7. With a bit more tweaking, this is my final output:

put015

I increased the brightness just a bit and cleaned up the border mess caused by Poster Edges.

Sometimes it looks quite a bit mechanical because it was created through a computer which is unavoidable. But as you reduce the image size the dots become less obvious, making your work more convincing.

Download the source file (2mb) here.

Here’s more:

larry-page-sergey-brin.gif
Google founders Sergey Brin and Larry Page: I used different patterns for the hair, face, body and background.

kofi annan
Outgoing United Nations Secretary-General Kofi Annan

angelina jolie
Actress Angelina Jolie: This one I did to see if it would work on colored images. Apparently it does! It almost looks like it was hand-painted.

abraham lincoln
Abraham Lincoln: I decided to use lines instead of dots. The lines gave it a more vintage look, reminding me of the style of printed money.

Bookmark at:
StumbleUpon | Digg | Del.icio.us | Dzone | Newsvine | Spurl | Simpy | Furl | Reddit | Yahoo! MyWeb

21 Comments

  • Andrew said:

    @Kevin: Whoa! Thanks for dropping by! I’m honored. The market for your hand-done illustrations will never run out. I’m just providing an easy way for digital artists and everyday people like me to achieve a somewhat similar effect. I appreciate your comments.

  • Pages: [2] 1 » Show All


Post a Comment


TristanCafe Interview | Home | Google Shirt