Sickdesigner

When we think Alice in Wonderland, most likely the image of the Mad Hatter comes to mind. In this tutorial/case study we’ll try to turn a regular Joe into the Mad Hatter himself. And, hopefully, we’ll pull it off without going mad ourselves!Now, I’m sure just about everyone is familiar with the story of Alice in Wonderland. And just about everyone has seen Tim Burton’s latest movie, a sequel of sorts to Lewis Carroll’s original book. As the Mad Hatter, Johnny Depp certainly delivers the kind of performance the world has come to expect of him. Couple this with the amazing work of the makeup artists that created his eerie, loony visage and you have a character as memorable as Edward Scissorhands.

I cannot stress enough the fact that this tutorial is not about exactly matching the original poster, but rather about learning new and cool ways to manipulate a photo into the wackiest of concepts.

Take a look at the poster for Alice in Wonderland. This is what we’ll be using as a guide.

And here’s what we’re going to do:

First off, let’s gather some resources. Personally, I believe in open source as much as possible so I try to use only free stock photos. Plus, there’s the added benefit that you guys can play along to the tutorial using the same files, should you wish to do so.

1. BedHead Mugshot – I tried out several faces before I finally decided on this one. I suggest you at least try to use a person that already has curly hair. It makes creating the hair a bit easier.
2. Wall – This will be used as texture for the background.
3. Crocodile Skin – This one’s for the hat. The texture is going to be only slightly visible, so you can use a lower quality photo if you don’t like my choice.
4. Vintage Fabric 7 – This texture will be just a very tiny bit visible in the wrap around the hat, so you can even avoid using it altogether, though I suggest going the extra mile.
5. Headless Suit Guy – The boy we chose as the main model is wearing a T-shirt, so we’ll just have to transplant this nice suit over it.
6. Red hair bow – While I was unable to find a close match to Johnny Depp’s bow tie from the movie, this one, I believe, does the job nicely.
7. AliciaWonderland font by FZ – From what I’ve heard the font used in the movie posters is actually an adaptation ordered by the producers, so this close simile will have to do.

This is a pretty time and energy consuming exercise. In these situations I find it best to have a plan, even just a short mental one, to help with managing all the bits and pieces. So, first we’ll do the background, then the boy, next come the hat and clothes, then the hair and finally any fixes needed.

The Background

As part of a good design management practice, groups/folders for each section are well advised. So go ahead, make a group/folder and name it Background (duh!).

01

Let’s fill the background of our canvas with a nice green, say #1c3909 ? Yeah, that’ll do.

02

Now let’s add a Radial Gradient to the background. I used #78fb00 for the center and just faded the exterior to full transparent.

03

Next I added the Wall photo, set it to Soft Light blending and lowered it’s opacity to 40% and presto, voila: a nice grungy wall. Just like in the loony bin.

04

For those of you that don’t know, I’m a huge fan of non-destructive design. Which means I’m a sucker for vector shapes. So pick up that Pen tool and draw a very childish rendition of a black hat. Really, don’t try to make it look perfect. I advise this for two reasons: first off, it takes less time to do it and second, because the shape is simple and simplistic, it won’t steal attention from the main character, which is the focal point of the poster.

05

Now make a whole bunch of duplicates of our hat and resize and rotate in a swirly fashion. This is also one of those things you shouldn’t pay too much attention to. Just let things flow as it were. There’s no right way or wrong way on this one. After you’re done arranging the hats, group them together (or merge them in a single layer for those of you that aren’t as anal-retentive as I am about layers) and set the group (or layer) to Overlay and decrease opacity to 50%.

06

Also as part of our naturally flowing design, in a new layer, start drawing a bunch of black and white using a very large, soft brush, similar to what I’ve done above. This will be the backlight/shadow behind the character. Don’t worry, it won’t stay like this for long. Because in the next step we’ll be…

07

…setting the layer to Overlay. And ba-da-bing ba-da-boom, we’ve got a very nice contrast going on. Sure, it’s a bit over burnt in some areas, but they will be covered by the boy so they don’t matter.

The boy

08

First off let’s get rid of the background. I masked it out with a simple color selection. Use any technique you like, the mask doesn’t have to be perfect, as we’ll be doing a lot of work over the original picture. If you’ve never done something like this, I suggest this well written tutorial on selections based on color channels.

09

The overall color of Johnny Depp’s makeup in the original poster is blue, so I took a large hard brush and just drew over the character. The color is #a4b7e1. To draw exactly over the character you can either copy the selection you get from removing the background from the previous step or create a clipping mask, depending on your software of choice.

10

Now let’s set that layer to Color blending.

11

Using the same principle as before, let’s make another layer, this drawing with #e51709 over the hair. I tried to keep as much above the initial hair as possible, though pixel perfection isn’t needed here either.

12

And let’s set that layer to Color blending as well. Excellent, now we can get started on the makeup.

13

This is where pixel perfection is somewhat desirable. I picked up a few random purple tones and using a very soft brush with low opacity setting (I suggest around 10%) I kept drawing around the eyes. Remember to change the color tone every now and then, this way it will look a lot more natural and less plastic like.

14

Here I’ve added another layer on top and using the same brush I drew with a few pink tones around the eye.

15

And here, in another layer, I sketched out some of the makeup on the cheeks.

16

Little by little I added more and more color and different tones to the makeup. In our case, because it’s such a complex makeup we need to work by adding little by little, one at a time. Painstaking, I know, but necessary in order to have a high quality final piece.

17

The original photo had very uniform lighting, completely different from our spotlight-type setting. So I created two layers, both set on Overlay, one for the face and the other for the shirt and neck. On the first layer I drew with white and I used black for the other. This way we’re making sure that the lighting on the face fits with the scene.

18

The face, while almost properly lit, was lacking in definition. So using a small, black, 2px soft brush with about 5% opacity I slowly added some fine details like a bit of sharp shadow under the nose and under the lower lip and also defined the inner cheeks as well.

19

Sometimes it’s best to get up and take a walk somewhere just to clear your head. Because when you come back you might, realize, like I have: no way! the neck is too well lit and so is the forehead! Fixed it with a few soft brush strokes.

20

Here I added some more tones and darkened the lips a bit more as well as define the facial features better.

21

I don’t know about you but eye color changes always put me in a good mood. Just pick a nice green color (#9aff0a for example) and draw over the eye. Set to Overlay and done. Instant radioactive eyes.

22

Here I added even more to the purple makeup, especially around the cheeks.

23

Ok, so this one looks a bit more difficult than it actually is. Just sample colors from the hair and draw the eyebrow by following the curvature of the actual, natural eyebrow. It really isn’t that hard. Just use a small 1px-2px brush at about 30% opacity and you’ll do fine.

24

Bored yet? Well, don’t worry, the whole makeup thing is nearly done. I know I’m using the same technique in the last few screens but I think it’s important to visualize the process and learn that by not taking the one-layer-is-enough approach, you can reach a very realistic and pleasing outcome.

25

I added a bit of shadow on the right side of the face, cast by the hair falling over the eye and the eye lashes. While the lashes seem complicated, they’re just little drawn triangles, very similar in shape with shark teeth, of all things. And we’re done with the kid, for now.

The hat and clothes

26

I found it to be quite a daunting task finding a good top hat for this project. After a few hours of pointless googling I decided to make my own. Hey, you know the saying: “If you want something done right, hire someone else to do it”. So, I duplicated the hat we made for the background (why make a new one?) and because it was a vector object, resizing it to fit wasn’t a problem. I used #162707 as a base color.

27

You might be thinking the gradient I applied doesn’t seem to fit the lighting. And you’re right, it doesn’t, but I fixed that later with a shadow layer. Goes to show that a mistake isn’t a mistake if you fix it later. I should join a tautology group.

28

Crikey! It’s a croc’s skin. I’m not sure if the hat in the original poster is croc skin, it just really looked like it.

29

We’ll just set the croc skin layer to Overlay and lower the opacity to 50%.

30

I drew a very fine, blurred out white layer to the top and bottom of the hat. This gives depth and better defines our hat as more than just a flatlander.

31

The holes in the hat was a really fun layer to work on. Just pick up a black 4px hard brush and draw to your heart’s content. After I was done drawing, I added a hard white drop shadow at about 135 degrees to the layer and set the shadow to Overlay.

32

With the same lovable Pen tool I drew a general shape of a band around the hat and then added a horizontal gradient to it.

33

Directly above this came the Vintage Fabric stock photo set on Color Burn. This gave the band a natural, albeit subtle, texture that really lent to the realism of the design.

34

Using a light dark  brush set to Color Burn I drew a few lines where I imagined the creases in the fabric would be.

35

Using the same principle I added highlights and some more shadows to the creases.

36

And after some more playing around with shadows and highlights, both set on Overlay, the band is finished.

37

I did say I was going to fix the whole wrong lighting issue for the hat, didn’t I? It’s the same idea as in the previous step, only applied to the hat this time, not the band.

38

Now it’s time to get to the suit. I split the stock photo into three parts for easier transformations. This way, the parts fit with the boy’s body.

39

And then I played around adding shadows over the shoulders and colorized the shirt.

40

The bow is pretty straight forward. I cut it out using a color based selection and shortened the top end to look more like the one in the original poster.

41

After colorizing the bow with a dark blue, I added a bunch of layers set on Color Dodge and Overlay and just went nuts with colors. Blues, yellow, oranges, whatever you like, throw it in there, it’ll work out fine.

The hair

42

Now we’re getting into the most fun part of the design. Which, incidentally, is also the most time consuming and stressing: hair creation. We could steal hair from some stock photo, but what would be the point. We wouldn’t be creating anything ourselves. Start out with large, 80% opacity, strokes and define the basic shape of the hair and then we’ll move on to more and more detail.

43

After each red hair layer, I added another layer with dark strokes. I wish I had a smart answer as to why that should be so, but I don’t. I just find that this way the result is more natural.

44

And after a few hours of doing this hair starts to emerge. It may not be fashion model style hair, but it’s as mad as they get.

Fixes

45

I then proceeded to add a big shadow in the back of the character. This way it looks more like he’s in front of a wall and not just the result of a bad copy/paste.

And after a few fixes, mostly minor errors and details and a bit of basic type, we have our poster.

Some of you may criticize that this is not the shortest tutorial you’ve ever seen. I wish I could’ve shortened it more but not without sacrificing quality. And, after all, is this not the sickest hatter you’ve ever seen?

by Radu Chelariu