Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Drunken Monkey Photoshop Tutorial

This Adobe Photoshop tutorial is a guest article written by Sergio Ordóñez, 29 years old Spanish designer and illustrator who is working as a freelancer in SOSFactory since 2004. The article focuses on creating a visually appealing mascot and a logo and provides insights in the designer’s workflow and the design process itself. [Content Care Oct/19/2016]

You might want to take a look at:

In this article I will explain step-by-step how I’ve designed an attractive character in one of our recent projects, namely for the company “Drunken Monkey Collectibles”. I will review the entire design process, from the first sketches and drafts to the final touches with Adobe Photoshop. In the post you’ll find further references to different articles published in my blog SOSArmy4; you might want to check them out as they cover more details of each phase of the process.

To provide you with a profound understanding of the process from scratch, let me provide you with a brief outline of the article first.

Outline Link

Mascot and logo design

  1. Briefing5
    Covers the inception phase, the phase of gathering requirements and analyzing the profile of the work.
  2. Looking for references6
    The phase where we’re getting more familiar with the design requirements.
  3. Drawing the character7
    We take a look at some basic principles in the corporate design of mascots and draw first sketches of the character.
  4. Coloring the character8
    We make the character more vivid and pretty colorful using plain colors, shadows, lighting medium values, lights, reflection and lines coloring.
  5. Designing the logo9
    The stage when we design a rather amusing logo which fits to the character.
  6. Final presentation10
    We introduce final changes and finish the design combining everything we’ve created so far.

1. Briefing Link

Is a common instrument which is used in the beginning of the design process to obtain information about the results the company is expecting from us. It is similar to the Q&A-sessions where you are defining the objectives and the plan for the design process.

  • Name: Drunken Monkey Collectibles
  • Sector: Toys and collectibles
  • Audience: 5 — 25 years old
  • Message to communicate: the company wanted a character with an attitude, aggressive but also friendly, very energetic, and some kind of a hero with an oriental touch.
  • References: Drunken Master11, a movie with Jackie Chan made in 1978. The main character uses a funny Kung Fu technique, especially for the position of hands. The company specified that the character shouldn’t look drunk.
  • Technical aspects: the design should be used for both Web and print. It must work together with the logo, but should also remain usable if the logo isn’t used.

2. Looking for references Link

So far we have all the information we need, so now it’s time to look for references to use as a base. Lucky me, as a child I really liked Karate movies; I remember that after watching this movie I spent several days beating my brother using exactly the same technique. The first image that comes to my mind is Jackie Chan (a stranger in that time, at least for me) in that characteristic pose.

After watching that video I think we’re in conditions to start. ;-)

This 10-minutes video is a pretty good manual of amazing poses; however it’s important to mention that the key was finding a pose not too comical that transmitted aggressivity as the client wanted, so I searched in Google and found one with the perfect balance between the comic and the heroic part:

Drunken Monkey12

We had a freedom to decide which clothes should be used, so we decided to make it wear a kimono, something simple not to overload the design. We suggested it would be better to add further accessories once the the character is finished.

3. Drawing the character Link

Before starting to draw it’s a good idea to review the principles in the corporate design of mascots. In fact, you need to have few things in mind:

  • the character must transmit the desired attitude only in one single drawing,
  • the character must be attractive and original,
  • the pose must be clear and recognizable, it has to work in small sizes,
  • you shouldn’t overload the drawing. The lines should suggest the volumes to the colorist, as less lines the drawing has, the design will be cleaner and we will get a better sense of volume with the color.

We’ve tried a number of different poses for our character, we’ve chosen the third one.

Over years it turned out to be extremely useful to start the design with sketches on paper. After that I usually pass it to Adobe Photoshop since I’m not very skilled with traditional drawing and I draw with the digitalizing PC tablet (Wacom Intuos3 A6). I draw everything in high resolution (about 6000x6000px); it’s easier because the errors will not heavily impact the design. Besides, we can also print the sketch in a large resolution if needed.

Below you can see the evolution of the drawing step by step:

Mascot design Progress14
Character evolution, from the sketch to the final touches, took about 6 hours of work.

Now let me explain the creation process in a little more detail:

  1. Lines
    We plan the pose starting with the typical dummy. In this step, the most important thing is to find the correct corporal expression, adjust the character proportions and try to get a clear pose.
  2. Shapes
    We give shapes to the lines and start defining the character.
  3. Refining shapes
    We connect and soften the volumes.
  4. Adding details
    We keep refining the volumes and add details to the character.
  5. Final sketch
    In this phase the character is complete. We only have left to clean it and ink it.
  6. Inking
    • Option 1: digital inking with Photoshop, using the vector drawing tools and with some help from the digitalizing tablet. It’s the easiest option if like me, you’re not that good at drawing.
    • Option 2: mixed inking. We make the final drawing in pencil, scan it and after that using Photoshop we convert the pencil into ink. If you’re very good at drawing, it’s the best option and definitely the first option to consider.
    • Option 3: traditional inking. This option is only for very experienced designers.
  7. Final touches
    Once we finish the sketch and make sure everything is perfect. Usually it’s necessary to reassign line weights, clean stains or lines, simplify volumes, correct errors… Sometimes you might need to even re-create parts of the drawing.

Final lineart15

We have 3 types of lines:

  1. Contours: the thicker lines of the drawing. They give a unity appearance to it.
  2. Area delimiters: to distinguish elements in the design, we use a medium thickness.
  3. Intern lines: the lines that mark the cheek, those are the thinner lines.
  4. Transition lines: they start as a contour and get inside the design. We make it thick and start to make it thinner when it goes inside.

What we should never do:

  • Make shadows with the lines: we’ll only make the design dirty.
  • Create extremely thick lines without any thickness variations.
  • Long intern lines: these lines are used to mark volumes, you have to make them appear in a very subtle way, it’s just a guide to help you color afterwards.
  • Straight lines: if you take a look at the image, you’ll notice that all lines are slightly curved.
  • Small areas: try to make your volumes as big as possible, otherwise in the coloring phase you won’t have any space and the image will look flat.

8. Corrections: I usually ask for the clients’ approval in each step (concept, sketch, inking, color), so I don’t have to do many corrections in the later phase of the design process. For instance, in this case I designed few different hairstyles:


4. Coloring the character Link

For coloring I usually use Adobe Photoshop or Illustrator, however the process is basically the same. I do it in various steps:

Digital color with Photoshop17

Many illustrators color everything in one layer, i prefer to to it in separate ones, so i can make color modifications in any of the design tones, lights or shadows. Let me briefly explain each step, if you want to get into details I highly recommend you to watch the Photoshop coloring videotutorial.

4.1. Plain colors Link

It’s ideal to have a set of the lines on a transparent background. If you inked it in the traditional way we’ll have the lines with a white background, so we need to extract the lines from the drawing. The advantage of this method is that we can color the lines easily although there are other methods like changing the blending mode of the drawing and multiply on top of all the color layers.

Layers palette in Photoshop18

We create a layer under the drawing’s layer and fill it with plain colors of medium values (not too dark and not too light). Doing that we need to consider two objectives:

  • Start choosing the color scheme.
  • It’s useful to make quick selections of the different area of the drawing, using the magic wand.

4.2. Shadows Link

We’ll create a new layer set and name it “Skin”; after that we make a new layer and name it “Shadows” — obviously, here we’ll color the shadows. We have to change the layer’s blending mode to “Multiply”.

Layers palette in Photoshop19

Before coloring like a madman study the volumes, try to visualize them in 3 dimensions, understand each volume separately, and then imagine how they look like if they’re connected. Here you have a little study:

Volume study20
Face volume study

Now we’ll start to color the shadows. I used the same base color of the skin (but as we have the layer in “Multiply” mode we can see the difference) having in mind several things:

  • Leave a shadow margin near the edges, thicker in the inferior edge since the light comes from the top, later we’ll add reflections to mark the contours.
  • We have to obtain the perfect balance between soft and hard shadows. Usually the ample and curved surfaces are soft (Volume 1), and the angled ones are hard (Volume 4).
  • We need to leave some space for the lights, it’s not useful to overload the drawing with shadows.

Painting shadows with Photoshop21

This is the process I follow to color the shadows:

  1. Having the original image, I used the magic wand in the plain colors to select the face (you can hide the dotted lines with CTRL+H)
  2. Fill the area with the same background color (but with the layer in multiply mode)
  3. I erased until it’s degraded (you can also use the gradient tool)
  4. I added a hard border to the gradient
  5. Let’s go with the second volume, repeat step 2
  6. Repeat step 3
  7. Repeat step 4
  8. I added a gradient in the upper part

4.3. Medium lighting values Link

Layers palette in Photoshop22

To define the light source we use the gradients; so we create a new layer, “Source Light” and put it below the shadows.

Source light23

These are the steps i followed:

  • 8. This is step where we were before
  • 9. Let’s change the “Shadows” layer back to normal mode. We put it in Multiply before because we were using the same color as the background, just for comfort. Now it’ll look like nothing happened, but don’t worry about that for a moment.
  • 10. Let’s go to the “Source Light” layer and make a gradient with a lighter color… and magic! I chose a light source from the upper left corner.

4.4. Lights Link

Let’s create again a layer called “Lights”, and put it on the top.


Having in mind our light source (upper left corner) we’ll color the lights for the different volumes. The lights should be in the upper part. Let’s take a look at the image to understand how I’ve done it:

Adding highlight with Photoshop25
We color the lights with Photoshop

4.5. Reflections Link

Reflections in Photoshop26

In this stage we simply add a few lines for brightness in the contours; this way we reinforce them and everything looks clearer. I just make the line and after that I blur it a little bit:


4.6. Lines color Link

This stage is optional, I usually like to join the lines with the color to obtain a softer result, so what I do is coloring them. As we already extracted the lines of the drawing, now we only have to select them (CTRL+click in the “Lineart” layer thumbnail) and color them.

the best thing to do here is to choose a color a little bit darker than the skin tone , so it can still be distinguished. I like to have the colored lines in a layer different from the drawing layer, just in case I need to make any modifications.

Final color with Photoshop28
This is the final result

I color the other parts of the character with the same technique, one by one; as you can imagine the process is pretty long, so I usually spend about 4-6 hours only coloring… but it’s worth it, don’t you think?

Drunken Monkey logo29

The company which hired us ordered both the character and the logo design. My intention was to obtain a clean and simple logo, legible and typography-based, so the design wasn’t overloaded, worked with the mascot but also remained usable used without the mascot.

The logo should be funny and should convey strength and stability; however it should also remain flexible and transmit a lot of energy. Here you have the reasoning for my choices:

Font election30
Plain O Matic (by Utopiafonts)

Typography: it’s a thick font, heavy but flexible due to the rounded parts of some characters. I only modified the width of the characters which are too thick for my taste.

Format: I chose a 3-lines-format, using two different fonts. This way we can distinguish the name of the trademark (it’s more important, that’s why it’s bigger) and their activity.

Base line: the base line of the word “Drunken” is irregular, a care-free touch. The word “Monkey” is regular, which suggest stability and gives unity to the design.

Borders: irregulars on top, to emphasize that care-free touch; a little bit more regular going down to suggest stability; regulars on the sides, to give this appearance of unity to both words of the design.

Shape: wide on top and narrow on the bottom, suggests activity, energy, power. I used some horizontal lines to give more stability to the logo and unity to the design.

Capital letters: very simple, more energy for the logo.

File formats for web and print31

Click on the image to see different versions I usually create for Web or prints if the budget isn’t too constraining.

Rendering: when I design for web, I usually add bevel and effects, but this time I chose a more practical approach and used plain colors, ideal to print at low cost. When the budget allows it, it is reasonable to make different versions of the logo as well.

Colors: yellow and black (suggests danger, action, excitement). I used white to obtain the maximum contrast over the black background.

6. Final presentation Link

As a good designer as I am, I like to present my designs in an eye-catching and professional way. So here’s the final version:

Drunken Monkey mascot and lgoo design

Hopefully you’ll find it useful.

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5 #1
  6. 6 #2
  7. 7 #3
  8. 8 #4
  9. 9 #5
  10. 10 #6
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31

↑ Back to top Tweet itShare on Facebook

  1. 1

    Nice tutorial. Thanks for sharing your techniques and take the time to make this detailed tutorial.

  2. 2

    >>Looking at this stuff makes me think “I could Draw”, even if “I can’t draw”.
    LOL, the same feeling!
    If it´s not the best, at least is one (great) possibility! Makes my day better.
    Thanks for the post.

  3. 3

    Perfect timing on this toot! I was just about to drop SM from my rss feeds today (to claw back some personal time), but decided to give it one last chance. I remembered why I added you guys in the first place! You will not only stay in my feed pool, but I’m going to promote it to live in Mail! (A high esteem on my overcrowded puter)

    Keep em coming.

  4. 4

    This type of talent seems almost insurmountable. Tutorials like this expose the techniques, very much like a DVD extra shows how an amazing stunt was produced. The ‘how do they do that’ aspect is truly interesting.

    Many thanks.

  5. 5

    Actually it’s true, it does have a dog face, or a bear.
    Anyway, great tutorial, I wish I had those skills.

  6. 6

    Digital inking with photoshop seems pretty silly to me, in Illustrator this would take more than half of the time to do so.
    Still great that Sergio Ordóñez wanted to share his techniques… :)

  7. 7

    Wonderfull, and incredible to offer such a detailled tutorial, thanks so much, guys like you must be known.

  8. 8

    wow…sick! Finally I get a full tutorial.. I’ll be trying this in the next few days :P
    Hope I get it right :D

    Big thanks!

  9. 9

    Very cool this tutorial!

  10. 10

    Amazing! thanks! :)

  11. 11

    Very nice tutorial!

  12. 12

    Vitaly Friedman & Sven Lennartz

    February 13, 2008 7:43 am

    @dragoshell: the link in the article is fixed. Thank you.

  13. 13

    I was asking myself why that character didn’t looks like a monkey
    A revelation came

    • 14

      Dog nose….really? Its a cartoon character you idiot…who cares what his nose looks like its a cool looking characer

  14. 15

    ohh wow…i always wondered, how artists do this shit ^^

  15. 16

    ohh wow…i always wondered, how artists do this ^^

  16. 17

    Muy buen tuto bro, no imaginaba ke uno de los que antiguamente se pasaba por InfectedFX fuera a acabar aquí xD (si no me equivoco y eres el mismo SergitoSuanez jiji). Keep up the nice work!

  17. 18

    Lovely tutorial! But drawing the basic shape seems to be the biggest problem..

  18. 19

    Thank you SM so much for giving us a chance to see how professional artists work – )

  19. 20

    Would love to see such a tutorial for Illustrator.. still can’t use it properly :(

  20. 21

    Amazing tutorial! I’ve been waiting for one like this since I saw your works a very long time ago. I keep watching you on DA ’cause your work really inspire me.

    My best wishes!

  21. 22

    for an amateur designer like myself, this tutorial is nothing short of a revelation…am sure am going to spend around 6-8 hours on this and will come out a better designer…thanks a ton

  22. 23

    Milinda Lakmal

    February 13, 2008 7:53 pm

    Nice Tutorial. Thanks a lot!

  23. 24

    great post.

  24. 25

    very nice tutorial!!! i am always impressed with your works and i’m also constantly watching you on DA. you inspire me to work harder on my works!!!!

  25. 26

    Excellent tutorial and nice piece of work, thanks to both the designer and to Smashing Magazine

  26. 27

    Thats really a nice tutorial to learn for cartoonist. Gud job dude. Keep growing!!!

  27. 28

    Hi folks,
    where is your paypal donate button? I’m going mad, when I click your ads ^^ Your tuts are ´really helpfull. When I use one to do my work, smashing magazine get’s percentage…

  28. 29

    Photoshop is the most difficult program I ever used. Long live MS Paint.

  29. 30

    Great inspiration for designing my own Philly Site Builder mascot (while hopefully avoiding cliches). The additional links in the article are good supplements to this. Now I just need to get one of those ambiguous wood figure models they sell in art stores…

  30. 31

    Sergio Ordoñez

    February 14, 2008 11:26 pm

    Hello guys, this is Sergio Ordoñez from SOSFactory and SOSNewbie.

    First of all thanks a lot to everybody here, from Smashingmagazine editor to the readers, I had lot of fun doing this tutorial.

    Now I would like to reply some of the comments:

    1.- Viniman: I prefer using Photoshop because its my preffered software, with a wacom tablet its just like traditional drawing. The berziers of Illustrator are a pain for me. Even when I need vectors I work in Photoshop and later I vectorize it with sihlouette (just 1 click).

    9.- Kuzer: anybody would say Mickey is a mouse? and what the hell is his partner Goofy? hehehe, we do fantasy characters, the most important is designing an appealing character.

    13.- Juanjo: yep, Im the same guy, I started learning in the Forums like InfectedFX… heheh, I enjoy how things turned so quick.

    35.- Bonnie: that wood figures are useless, it just allow you to pose the character in standard positions because of the iron stick, I would suggest buying a good toy instead.

    Other than that, thanks a lot for the kind words again, its much appreciated.
    More is coming :)


  31. 32

    Great tutorial – no, fantastic tutorial…just love this behind the scenes stuff…couldnt find any Drunken Monkey site yet though…

  32. 33

    Gracias por todos! this really helps for adding depth to otherwise flat characters I draw via Illustrator.
    Instead of using the burn/dodge tool, this method is much more controlled,precise, AND changeable!
    again thanks for sharing.

  33. 34

    What a great tutorial for us Photoshoppers that want to take it to the next level! Illustrator is a lot more difficult to use, b/c for whatever reason, the Adobe people make the handling of beziers totally different, thus if you have learned it one way in Photoshop, it’s very difficult to then work in Illustrator! Thanks for a killer tutorial. I’ve picked up some really good tricks I can now use in my own work, and also found a useful link when I have a need for mascot design!

    Thanks Sergio and Smashing Magazine!

  34. 35

    great stuff. thanks so much :)

  35. 36

    only professionally trained can do this!! :(

  36. 37

    Estoy trabajado en este tutorial, gracias por toda tu informacion. Tengo un par de preguntas, seria mas tonta si no las hago asi que, cuando mencionas que trabajas con 6000x6000px te refieres a pixels?

    En que forma los guardas jpeg, psd?

  37. 38

    I commend you for the time you invested in this tutorial. I am quite impressed with the details your provided and appreciate that you decided to share your insight.

    Please continue to educate those among you who are desperate to find someone willing to release essential wisdom.

  38. 39

    Sergio Ordoñez

    February 19, 2008 10:45 pm

    Hello Mara, yes its pixels.

    Thanks again for all the kind words :)

  39. 40

    Really really cool tutorial. Perfect! I love the mascot!

  40. 41

    ohhh nice and great tutorial

  41. 42

    Increible, un tutorial genial genial, supongo que a los de drunkey monkey se les cayó la babilla XD a mi ya me cae al ver el resultado final, si fuera par ami ya ni te cuento, jeje :)

  42. 43

    krishnamoorthy manickam

    March 11, 2008 7:19 pm

    Great effort and great result …

  43. 44

    its really very good

  44. 45

    Coghill Cartooning

    April 26, 2008 9:38 am

    Great tutorial!

  45. 46

    Thanks a lot, Sergio, great job! ;)

  46. 47

    Darrell Mayson

    May 30, 2008 7:56 pm

    Slick tutorial! I’ve just downloaded inkscape and was sniffing for cell shading tute. Yours is SOOO much more and an inspiration to any budding artist. Thanks for taking the time to share. Great use of anims to illustrate process too – kudos 2 you! Keep up the awesome work :)

  47. 48


    June 11, 2008 6:25 pm

    This is by far one of the best and detailed tutorials I have ever seen, and amazingly enough, it looks almost like my drawing style.

    I plan to go back to this tutorial plenty of times to enhance my feel with little mascots.

  48. 49

    itis fantastic ,… i would love to do some thing like this…

  49. 50

    what a nice work,…
    love to do some thing nice like this.

  50. 51

    what a nice work,…

  51. 52

    Alo!! Adoreii Muito Facil e Simples
    Beijos Para Brazilll

  52. 53

    Nice job but this site is a joke… They sell products but don’t send them and what a surprise, they never answer to their email…

  53. 54

    Very, very good tutorial. Shame I am nowhere near as good as you.

  54. 55

    I think that the black-to-navy background in the final product was a poor choice. Yes, the yellow suit pops out, but the DARK braid on the DARK background is completely lost. The silver hair piece stands out a little, but it seems to be either floating or even attached to the glove…BECAUSE THE BRAID DISAPPEARS! The monkey himself, as well as the design he’s standing on, is very effective and created skillfully…it’s just that background. A poor choice.

  55. 56

    this is good but i want more steps to draw

  56. 57

    you r a homely teacher

  57. 58

    Wow! Thanks! You are the true, Dragon Pen Master! This will help me a lot in my animation designing. Love your site and I plan to be back often.

    Paper Sensi

  58. 59

    Hey sergio.. first of all awesome awesome awesome stuff really! is it not possible to download these videos any where else than from Emule?? because Emule does not want to work :S please cant you put it up as a torrent or be able to download it on youtube or something

  59. 60

    yaman! a real good tutorial!

  60. 61

    I just love this tutorial.. Perfect thing at Perfect time.
    Hope to see more ! :)

  61. 62

    Thank You! A very fine tutorial!

  62. 63

    Very good,
    good, good, good

  63. 64


  64. 65

    I think with the help of this tutorial I can create a really great logo for my new tattoo parlor.

  65. 66

    thanks so much for this

  66. 67

    brother thats very awesome cool….. kerennnn ajibbbb…. two thumbs up”

  67. 68

    Awesome tut…but why is the monkey’s tail black…

  68. 69

    wow!!!…awesome work!….i found it absolutely fantastic! thanks a ton!!

  69. 70

    Your tutorial is simply awesome. However, due to my designing skills or lack there-of, the monkey came out weird somehow. Especially the proportions… they were all weird. I decided to get some professional designing services instead. Initially I wanted to create a mascot design similar to that effect of your final cartoon character design. I have to applaud the designing team at for being able to realize my vision and for the price I paid, it was money well spent. Highly recommended. I have to thank you for posting this tutorial as it definitely served as inspiration and it made me realized how inept I am at designing. Haha. Loving your site, btw!

  70. 71

    what a great tutorial i always love Photoshop for it sharpness and elegant art work you can produce using filters, blend mode and painting techniques.

    Thanks man you are just a creative painter.

  71. 72

    Nice, thanks

  72. 73

    excellent caractures ,I need a character drawn up for our business; a “mascot” do you take on these type of request?………..Robin

  73. 74

    Wow!!!! how this stuff done?? AMAZING!!!!
    I want to learn some skills like this fantastic skill!!


↑ Back to top