line

Scary Stuff– Zombies and Vampires in Photoshop

(from Episode #94 of The Lab with Leo Laporte)

Almost every Halloween party I’ve ever attended has had most of the same components: stale candy from a bulk bag, a rotting pumpkin that was carved too early in the season, that cardboard skeleton cutout with the posable limbs and the one guy who didn’t bother to come up with a costume and showed up in his regular street clothes. The reason that guy seems to be at every Halloween party I attend is that, nine times out of ten, he’s me.

After the party’s over, the pictures start to circulate and I get to be embarrassed all over again. In this tutorial, I’m going to show you how you can use Photoshop to transform pictures of ordinary people into pictures of the living dead–either vampires or zombies–and maybe then I can edit those party pictures so that I don’t look like such a party pooper.

Sean of the Dead

I have chosen to "zombify" this picture of Sean Carruthers from The Lab’s Flickr gallery:
8%29 7 1 20071229 142058 Scary Stuff   Zombies and Vampires in Photoshop

If you can choose a photo where the eyes of your subject are open and their teeth are visible, that is preferable…1 out of 2 ain’t bad. It also helps if your subject has a surprised expression on their face and I’ll show you why in a little bit.

The zombie effect is going to be applied in 5 adjustment layers. Here they are:

1) Ghastly pallor

Under the Layer menu choose New Adjustment Layer>Hue/Saturation…

When the Hue/Saturation dialog comes up, crank the Saturation to +50 and the Lightness to +10

Now adjust the Hue slider until your subjects skin is green, blue or purple.

Then you can drop the Saturation down to -80. We only cranked it up so that you could choose a skin color easily.

Click OK.

When you come out of the Hue/Saturation dialog box, you’ll have the mask of your new adjustment layer selected. Select All (Crtl-A on the PC, Command-A on the Mac) and Delete.

Now with a brush, carefully paint in the skin tone of your subject. Here’s what Sean looks like now:
8%29 9 20071229 142232 Scary Stuff   Zombies and Vampires in Photoshop

2) Lifeless eyes

Under the Layer menu again choose New Adjustment Layer>Hue/Saturation…

In the Hue/Saturation dialog, drop the Saturation down to -75 and raise the Lightness until you can barely see the subject’s irises (+70 was enough for this picture of Sean)

Click OK.

As before, when you come out of the Hue/Saturation dialog box, you’ll have the mask of your new adjustment layer selected. Select All (Crtl-A on the PC, Command-A on the Mac) and Delete.

Now with a brush, carefully paint in the eyes of your subject. Zombie Sean is already coming to life…or, whatever:
8%29 10 1 20071229 142440 Scary Stuff   Zombies and Vampires in Photoshop

3) Shadows

For the zombie’s pallor to really be effective, if has to have something to contrast it–shadows.

Under the Layer menu again choose New Adjustment Layer>Curves…

When the Curves dialog comes up, click a point on the diagonal line running from the top right to the bottom left of the chart and plug a value of 90 into the

Output field and 150 into the Input field and click OK.
Curves 5 20071229 142615 Scary Stuff   Zombies and Vampires in Photoshop

As with the other two adjustment layers, when you come out of the Curves dialog box, you’ll have the mask selected. Select All (Crtl-A on the PC, Command-A on the Mac) and Delete.

With a soft-edged brush, paint over the shadows and details of your subject’s face including the nose, lips, around the eyes, ears, hollows of the cheeks, and around the circumference of the face.

You should really start to see your zombie coming together…or…falling apart…or, whatever.
8%29 11 1 20071229 142834 Scary Stuff   Zombies and Vampires in Photoshop
In the Layers palette, you probably have the Shadows (Curves) adjustment layer still highlighted. Just Ctrl-click (PC) or Command-click (Mac) the Lifeless Eyes adjustment layer to highlight it as well and then go up to the Layers menu and choose Create Clipping Mask to restrict the coverage of these two adjustment layers to the coverage of the Ghastly pallor layer.

4) Blood

Under the Layer menu choose New Adjustment Layer>Hue/Saturation…

When the Hue/Saturation dialog comes up, set the Hue slider to 0 and the Lightness slider to -70. Leave the Saturation as is and click OK.

You should be ahead of me here already: When you come out of the Hue/Saturation dialog box, you’ll have the mask of your new adjustment layer selected.

Select All (Crtl-A on the PC, Command-A on the Mac) and Delete.

Now with a brush, paint in some blood. You could add blood dribbling out of the mouth, blood around the eyes and maybe a nasty head wound where someone might have hit your zombie in the head with a cricket bat.

I think Sean has almost turned:
8%29 12 1 20071229 142944 Scary Stuff   Zombies and Vampires in Photoshop
I said there would be 5 adjustment layers, but the fifth one affects your subject’s teeth and, in this picture of Sean, he’s not bearing his. So I’ll switch at this point to a picture I got from iStockphoto.com:
zombieIT 20071229 143104 Scary Stuff   Zombies and Vampires in Photoshop
Here it is with the first 4 adjustment layers already in place:
zobieIT 20071229 143216 Scary Stuff   Zombies and Vampires in Photoshop

5) Death breath

Get another Curves adjustment layer going at the top of the Layers palette…you should be pretty familiar with where this is found by now.
When the Curves comes up, choose Red from the Channels pulldown menu, click the diagonal line near the middle to create a node and drag that node up and to the left:
Curves 2 20071229 143328 Scary Stuff   Zombies and Vampires in Photoshop
Next, choose Blue from the Channels pulldown menu, click the diagonal line near the middle to create a node and drag that node down and to the right:
Curves 3 20071229 143419 Scary Stuff   Zombies and Vampires in Photoshop

Are you following me so far? Here’s where it gets a bit tricky:

Going from the top right, click the node you see there in the top corner. Enter in values of 255 for the Output and 230 for the Input.

Click below that node on the black curve to create a new node and enter in values of 195 for the Output and 220 for the Input.

Click below that node on the black curve to create a new node and enter in values of 60 for the Output and 160 for the Input.

Finally, create a new node below that last one and enter in values of 35 for the Output and 75 for the Input.

Your curve should look like this (without the annotations, of course):
Curves 4 20071229 143707 Scary Stuff   Zombies and Vampires in Photoshop
Click OK.

You’ll have the mask of your new adjustment layer selected. Go ahead and Select All (Crtl-A on the PC, Command-A on the Mac) and Delete.

Now with a brush, paint in the mouth of your subject…teeth, tongue, gums and all.

Here’s what it looks like:
zombieIT 20071229 143803 Scary Stuff   Zombies and Vampires in Photoshop
Okay so those are the adjustment layers. Now we move on to disfiguring our zombie…

Select All again (Crtl-A on the PC, Command-A on the Mac) but don’t Delete (you might have deleted instinctively after all the previous conditioning icon wink Scary Stuff   Zombies and Vampires in Photoshop ). Go Edit>Copy Merged (Shift-Crtl-C on the PC, Shift-Command-C on the Mac). And then Paste (Crtl-V on the PC, Command-V on the Mac) to create a new layer on top of all the others that consists of a merged-down version of the zombie thus far.

Go Layer>Liquify (Shift-Crtl-X on the PC, Shift-Command-X on the Mac).
ZombieIT 20071229 143932 Scary Stuff   Zombies and Vampires in Photoshop
You will now be able to manipulate your image in weird and wonderful ways.

Use the Forward Warp Tool (the pointing finger in the top position of the Liquify tools) to carefully smoosh your zombie’s face into the contorted expression of the undead. Here’s what I did:
ZombieIT 20071229 144028 Scary Stuff   Zombies and Vampires in Photoshop
Here’s how Sean ended up:
zombieIT 20071229 144147 Scary Stuff   Zombies and Vampires in Photoshop

The Vampire Carruthers

For the Vampire tutorial I have chosen…<drumroll>…Sean again!

Here’s the picture (also from The Lab Flickr gallery):
guitar 20071229 144542 Scary Stuff   Zombies and Vampires in Photoshop
This tutorial is somewhat similar to the Zombie Effect, but I want to show you how there are different ways of going about thing in Photoshop. In this case, instead of applying all the adjustment layers before distorting the image, we’re going to distort it first.

Let’s get going…

Duplicate your image on a new layer by going Select All (Crtl-A on the PC, Command-A on the Mac) and then Layer>New>Layer Via Copy (Crtl-J on the PC, Command-J on the Mac).

Go Layer>Liquify (Shift-Crtl-X on the PC, Shift-Command-X on the Mac).
Liquify 20071229 144654 Scary Stuff   Zombies and Vampires in Photoshop
Grab the Freeze Mask Tool. We’re going to mask off some areas of Sean’s forehead so that I can bring down the middle of his hairline into a "widow’s peak" without affecting any other areas of his face. Use the tool to paint the areas you want to protect. If you make a mistake, use the Thaw Mask Tool (they work just like the paintbrush and eraser tools elsewhere in Photoshop, so you can be using one of the tools and temporarily switch to the other by holding down the Alt key on the PC or the Option key on a Mac). Here’s what my mask looks like:
Liquify 20071229 144743 Scary Stuff   Zombies and Vampires in Photoshop
I know it looks like Sean has a really bad sunburn on his forehead (and as a vampire, that wouldn’t take much), but bear with me. Grab the Foreword Warp Tool and use it to smear the hairline into the area you’ve cordoned off with the Freeze Mask Tool.

Liquify 20071229 144840 Scary Stuff   Zombies and Vampires in Photoshop
When you’re done with the widow’s peak, you can click the None button in the Mask Options to remove the masking you’ve done. Grab the Freeze Mask Tool again and this time paint a mask in the subject’s mouth leaving room for vampire teeth. Make sure you don’t mask where you want the teeth to be, but rather around the outside of that area. See here:
Liquify 20071229 144941 Scary Stuff   Zombies and Vampires in Photoshop
Now, grab the Foreword Warp Tool and warp the existing teeth into scary fangs!!
Liquify 20071229 145043 Scary Stuff   Zombies and Vampires in Photoshop
Nice, huh?

Click that None button in the Mask Options area of the Liquify window again.

Now I want you to play and be a bit creative. Use the the Foreword Warp Tool (with or without the Freeze Mask Tool) to give you vampire other scary features: pointed ears, arched eyebrows, pointed fingernails, a forked tongue, etc. When you’re done, click OK.

Here’s what I’ve done to Sean:
Liquify 20071229 145202 Scary Stuff   Zombies and Vampires in Photoshop
Now all you need are the adjustment layers…

1) Ghastly pallor

Under the Layer menu choose New Adjustment Layer>Hue/Saturation…

When the Hue/Saturation dialog comes up, set the Hue to -150, The Saturation to -90, and the Lightness to +10. Click OK.

When you come out of the Hue/Saturation dialog box, you’ll have the mask of your new adjustment layer selected. Select All (Crtl-A on the PC, Command-A on the Mac) and Delete.

Now with a brush, carefully paint in the skin tone of your subject. Set the adjustment layer’s opacity to 80% in the Layers Palette. Here’s what Sean looks like now:
vampire 20071229 145302 Scary Stuff   Zombies and Vampires in Photoshop

2) Blood

Under the Layer menu choose New Adjustment Layer>Hue/Saturation…

When the Hue/Saturation dialog comes up, set the Hue slider to 0 and the Lightness slider to -70. Leave the Saturation as is and click OK.

You should be ahead of me here already: When you come out of the Hue/Saturation dialog box, you’ll have the mask of your new adjustment layer selected.

Select All (Crtl-A on the PC, Command-A on the Mac) and Delete.

Now with a brush, paint in some blood. Ironically, with vampires, I find less is more. You could add blood dribbling out of the mouth but I wouldn’t go much further—it’s the teeth that really sell this, after all.
vampire 20071229 145413 Scary Stuff   Zombies and Vampires in Photoshop

The Joy of Fonts

I am a bit of a font nut and I love fine typography. When I see a carefully chosen, properly set line of type, it can suddenly turn me into a fan of that typeface whether I had previously overlooked it or maybe never heard of if before. After seeing it, I seek it out trying to find out what it is, who designed it and if they’ve designed anything else. It’s a sickness, but as far as sicknesses go, it’s not a bad one.

Check out this blog post I made based on the fonts of one of my favorite TV shows

Different kinds of them

Sometimes it can seem like the non-font-obsessed only see 3 typefaces: Times, Arial, and Brush Script. It’s probably not a coincidence that those three fonts constitute what is basically the 3 primary "colors" of fonts: Serif, Sans Serif and Script. There are many more styles than those 3, but those are the most basic. With the exception of maybe Dingbat fonts, typefaces in all the other styles (Old Style, Transitional, Modern, Slab Serif, Blackletter, Display, Monospaced, etc.) can be categorized as one of those 3 basics.

Serif faces are those whose strokes end in little decorative features called, predictably, "serifs." Times Roman, Bodoni, Palatino, Bookman, and Garamond are all examples of serif typefaces.

Script typefaces generally look as if someone, with better penmanship than I, grabbed a nice pen and scrawled them out freehand…and yet with precision. They can be cursive (i.e.: the letters are made so as to connect) or non-cursive. For example, Brush Script is cursive, while Comic Sans is not, but both are examples of script faces.

Sans Serif typefaces have none of those decorative serif dealies and are not made to appear handwritten. Arial and Helvetica are the most familiar examples of sans serif fonts.

Where to find them

Free fonts are not at all difficult to find online. But be warned; downloading and installing fonts indiscriminately can lead one’s computer to contract a TTD (Textually Transmitted Disease). While not an actual virus, a TTD can cause your computer to bog down and become unstable. If you think about it, because of the graphic user interface of your PC or Mac, every application (including the OS) uses fonts to display messages and many of them offer access to installed fonts to customize the application’s documents. That means if you install an improperly created font, it can negatively affect your entire system.

With that warning out of the way, here are a couple of sites where you can find a wide array of typefaces:

http://www.dafont.com/

http://www.1001fonts.com/

http://www.identifont.com/free-fonts.html

How to identify them

Okay, so, you’re looking for a particular font, you know it’s a sans serif face, but you don’t know what it’s called and the prospect of sifting through all 1001 fonts at 1001 fonts doesn’t sound too productive to you. You could narrow the search by imagining the font in its native habitat. What I mean is, does it look like it would be best suited for an airlock door on a spaceship or a wanted poster on a saloon wall? Would it be more at home on a love note or ransom note? Most font sites allow you to search and browse by keywords and themes.

Sometimes the font you’re looking for isn’t a font at all and it’s important to figure this out up front or you’ll spend a lot of time looking for something that doesn’t exist. If you have a sample of the font you’re looking for, see if there are one of more letters that repeat themselves in the sample. If, say, the lowercase "e" repeats itself, see if that letter is identical each time. If it is, it’s probably a digital typeface. If it’s not, it might not be a font at all (I say "might") but hand lettering or something that started out as a font, but was skillfully crafted to be less "predictable." See the example below and how each "L," "e," "a," "h" and "t" is different?

labtype 20080210 131944 The Joy of Fonts

If you have a sample of the font you’re looking for, you might try Identifont (http://www.identifont.com/). If you have a few letters of the font, type them into the field under "Restricted set of letters" and click "Identify." The site will ask you a series of questions about the font and will give you a list of possibilities based on your answers. Unfortunately, it is limited to the fonts represented by Identifont (http://www.identifont.com/publishers.html)

If you have a digital sample of the font–maybe a photograph or a screen grab–you can isolate that font and upload a small sample to What the Font? (http://www.myfonts.com/WhatTheFont/) and help the software to identify what each character is.

whatthefont1 20080210 133017 The Joy of Fonts

Once you submit this, What the Font will do its best to return with fonts as similar to the one you uploaded as it can find in its database. It’s pretty smart, but you need to provide an "ideal" sample as it has a hard time separating joined letters or letters that are too close together.

OpenType Fonts

Remember how I said that if the font you’re trying to identify shows different examples of the same character that it might not be a font at all? Well, the example I showed you–the scripty looking "The Lab with Leo Laporte" with its uniquely different "L’s," "e’s," "a’s," "h’s" and "t’s"–is, in fact, a font. It is an example of a fairly new breed of fonts called OpenType fonts that can offer all kinds of variations of letterforms under the hood. The one shown here is Candy Script from Veer (http://www.veer.com/products/typedetail.aspx?image=UMT0000254) and retails for USD$99. Veer has an awesome selection of such fonts and all of the ones I’ve tried have come with fun alternate characters to make your creations more organic… (http://www.veer.com/products/gallery.aspx?gallery=1682)

Other font sites

Fonts truly are art and though art can be free, fine art rarely is. That doesn’t mean that all free fonts are garbage or that every font you pay for is, by that merit, better. But I do recommend supporting the art of artists by buying your fonts from reputable vendors. Here are a few of my favorites:

http://www.veer.com

http://www.houseind.com/

http://www.emigre.com/

http://fonthead.com/index.php

http://www.pizzadude.dk/home.php

http://www.p22.com/

http://www.comicbookfonts.com

http://www.blambot.com/

http://www.chank.com/

Aqua GUI for Unix Commands

A powerful Unix underbelly is part of what makes OS X the world’s most advanced operating system. But, some of that power goes unused – hidden away in cryptic backend commands.

Even if the backend commands aren’t difficult to learn, most Mac users simply don’t make a habit of firing up Terminal on a regular basis.

Thankfully, the freeware community has stepped up with quick, easy applications that give a face to the Unix utilities they control.

Process Wizard

processwizard Aqua GUI for Unix Commands

Unix has a cool program called renice that can tell the system how many CPU cycles to dedicate to a running application (try doing that in Windows). There are several Aqua wrappers for this command. Process Wizard lives in the menu bar, and once fired up lets you graphically allocate CPU priority to running applications, hidden applications and even processes running on your Mac. The Wizard is perfect for on-the-fly CPU allocation. Other renice utilities include BeNicer and Carl’s Renice Scripts.

MainMenu

OS X is kept tidy by maintenance routines scheduled behind the scenes. If you miss a scheduled task because your Mac was off, you can run these tasks manually. MainMeni makes this easy by putting an icon on your menubar that gives you quick access to these tasks.

MainMenu also includes some other handy chores built-in to an easy to use interface, and is a must for quick Mac maintenance.

Man Handler

manhandler Aqua GUI for Unix Commands

If you’ve wandered into unfamiliar territory in Terminal before, you might be familiar with the man command. This Unix program digs up documentation on a Unix program. These ‘man pages’ can be a lifesaver when using a cryptic command line utility. Unfortunately, man is itself a bit of a cryptic command line utility.

So Man Handler comes to save the day. This Aqua app browses man pages for all your favorite obscure Unix applications from an easy desktop interface. It also allows you to save out man pages to text for easy reading or emailing.

ChronniX

Unix keeps things moving by scheduling tasks behind the scenes. It does this with a scheduling process called cron. CronniX is an Aqua app that lets you add your own tasks to cron. You can set up repeating schedules to execute Unix commands, AppleScripts and even launch applications.

File Compare

filecompare Aqua GUI for Unix Commands

Ever seen the MD5 hashes on your favorite Open Source download site? MD5 is a method unix uses to compare files to verify them as identical. File Compare provides you with a GUI to browse for two files and compare them. File Compare will let you know if you have duplicates or not.

As you can see, the command line holds some pretty powerful utilities most of us never use, but anyone could find useful. Thanks to our great programming community, they are just a few clicks away.

Brian