Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. 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. upcoming SmashingConf New York, 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.

by Sergio Ordóñez

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 SOSNewbie2; 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. Briefing3
    Covers the inception phase, the phase of gathering requirements and analyzing the profile of the work.
  2. Looking for references4
    The phase where we’re getting more familiar with the design requirements.
  3. Drawing the character5
    We take a look at some basic principles in the corporate design of mascots and draw first sketches of the character.
  4. Coloring the character6
    We make the character more vivid and pretty colorful using plain colors, shadows, lighting medium values, lights, reflection and lines coloring.
  5. Designing the logo7
    The stage when we design a rather amusing logo which fits to the character.
  6. Final presentation8
    We introduce final changes and finish the design combining everything we’ve created so far.

1. Briefing Link

Drunken Master9, 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 Monkey10

    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 Progress12
    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 lineart13

    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 Photoshop15

    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 Photoshop16

    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 Photoshop17

    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 study18
    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 Photoshop19

    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 Photoshop20

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

    Source light21

    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 Photoshop23
    We color the lights with Photoshop

    4.5. Reflections Link

    Reflections in Photoshop24

    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 Photoshop26
    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 logo27

    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 election28
    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 print29

    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 design30

    Hopefully you’ll find it useful.

    Footnotes Link

    1. 1
    2. 2
    3. 3 #1
    4. 4 #2
    5. 5 #3
    6. 6 #4
    7. 7 #5
    8. 8 #6
    9. 9
    10. 10
    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
    SmashingConf New York

    Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf New York, on June 14–15, with smart design patterns and front-end techniques.

    ↑ Back to top Tweet itShare on Facebook

    1. 1

      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… :)

    2. 2

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

    3. 3

      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!

    4. 4

      Very cool this tutorial!

    5. 5

      Amazing! thanks! :)

    6. 6

      Very nice tutorial!

    7. 7

      Vitaly Friedman & Sven Lennartz

      February 13, 2008 7:43 am

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

    8. 8

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

      • 9

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

    9. 10

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

    10. 11

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

    11. 12

      Looking at this stuff makes me think “I could Draw”, even if “I can’t draw”.
      Here’s another illustrator that shares techniques:

    12. 13

      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!

    13. 14

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

    14. 15

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

    15. 16

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

    16. 17

      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!

    17. 18

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

    18. 19

      >>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.

    19. 20

      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.

    20. 21

      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.

    21. 22

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

    22. 23

      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

    23. 24

      Milinda Lakmal

      February 13, 2008 7:53 pm

      Nice Tutorial. Thanks a lot!

    24. 25

      great post.

    25. 26

      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!!!!

    26. 27

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

    27. 28

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

    28. 29

      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…

    29. 30

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

    30. 31

      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…

    31. 32

      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 :)


    32. 33

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

    33. 34

      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.

    34. 35

      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!

    35. 36

      great stuff. thanks so much :)

    36. 37

      only professionally trained can do this!! :(

    37. 38

      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?

    38. 39

      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.

    39. 40

      Sergio Ordoñez

      February 19, 2008 10:45 pm

      Hello Mara, yes its pixels.

      Thanks again for all the kind words :)

    40. 41

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


    ↑ Back to top