in Tutorials

Create a gingerbread man icon

Today I will show you how I did this gingerbread man icon. My way is not THE WAY, and I’m sure there is different ways to active the same result. This technique is quite handy for me because it gives me the confidence to go back and change some details, colors or steps if me or the client are not satisfied.

I started in making a photoshop document 1024 x 768 pixel at 300 dpi in RGB ( sRGB IEC61966-2.1).

After I unlocked the background I double clicked on it and went into the layers effects > gradient overlay and entered the following color values and gradient values:

Now we have a background. You can pick any sort of color you like. I decided to go for a light background but gradient red or green works as well.

I sketched my gingerbread man on paper.

I then scanned it and drew it in adobe Illustrator with the pen tool. I think the vector tools are more fast and versatile in Illustrator than in Photoshop so i decide to draw it there (but its possible to do it in Photoshop too).

In order to make it symmetric I drew just one side and mirrored it.

After that i connect it with apple+J (join) selecting the two points on top and the two in the bottom. Now We have the vector basic shape of the cookie. Copy it and i paste it in photoshop as shape layer.

When i was happy with the shape i copied the object and imported in as shape in the photoshop document, giving to it the following color value: #9c673f. After I’ve been doing that, i go in the layer effects to add the following effects: inner glow, bevel and emboss, gradient overlay. I name the layer ‘Man Top’.

Next I duplicate the shape layer (without the effects) and I place it under naming it ‘Man Under’ giving the shape the following color: #4c1b07. I move down the shape some pixels (you can choose him much you want) this will determine the thickness of the cookie. After that I will apply a drop shadow on the layer effect with the following values.

Now i will create a layer folder called ‘Man Top Effects’. In this folder you will have the cookie effect. Keep ‘cmd’ pressed and click on the shape. With this selection go to the layer folder and create a mask. I will start in making a 50% gray layer and applying to it a Filter > Noise > Add Noise. You can choose the type of grain. After that you will apply a Gaussian blur to it (not so much) and you will have to change the layer mode from normal to overlay 100%.

The next layer is the realistic cake/cookie texture. I picked one from CGTextures and placed it according to my taste.

After that you will correct the image with levels, and convert the layer mode from normal to overlay 64%.

Take this folder, duplicate it, and place it over the ‘Man Under’ shape layer, creating the proper mask for this shape. Now the cookie is done and It should look like this. The texture is applied both on the top and under we need to go to draw the decorations.

With the path tool we draw the shapes we want and we stroke them with a white brush.

We go to the layer effect and we will apply the following layer effects:

We draw the rest of the details (eyes and buttons) with the Ellipse tool and we drag on these shapes the same layer effects.

We create a new layer folder that contains the whole illustration (except for the background): we call it gingerbread man. We make a copy of this folder and we flatten it putting it on top. I’m still working on CS3 (I’m lazy but I promised myself I will buy CS6 at Day One) , so I go to Filter > Other … > High Pass and apply an high pass of 2,7 pixels. Click OK and convert the layer mode from normal to Overlay. The high pass layer gives a more crisp and shape level of detail to the image. We can change the Opacity (i put it at 58%).

Now we need a warm fresh backlight in other to give more light and feeling to the illustration icon. We make a selection of the gingerbread man without the drop shadow (I duplicated the gingerbread folder, disabled the drop shadow in the Man Under shape and flattened the folder) Select with CMD+ click and fill with white. (you can throw away the flattened folder layer).

I place this white shape layer on top of the high pass layer and i call it BackLight reducing the fill of the layer to 0%. Then i double click on it to edit the layer effects like this. The color of the backlight is the following: e81591 in linear dodge 89%. The shadow is at 0%.

Click OK. It should look like this.

Now, if we want we can double click on the background layer and ,with the move tool selected, we can move the gradient overlay to the top to simulate a light source coming from above.

As I said, there is different way to work and do this kind of images but this is mine. I hope you enjoyed it!

About the author, Giorgio Cantù

I’m a 35 years old digital artist and logo designer.
During the past 10 years I developed a quite wide range of styles (cartoony, realistic, graphic) that allows me to work in different medias and making my job really challenging and fun.
I work for the video games industry (I’m the artist behind the artworks of SEGA game Renegade OPS on PS3 and Xbox, released in september 2011), in package and logo design, icon design and advertising illustration. My clients are McDonald’s, Disney, Danone, Yoplait, Ikea, SEGA and more. I’m italian but since 2002 I live in Stockholm, Sweden.






Write a Comment