cartoon character tutorial

How to create cartoon characters in Illustrator

It’s time to write a tutorial on vector mascot design in Illustrator In this post I’ll explain the process I followed at the time of designing Twisted Monkey cartoon character in vector format.

Ingredients :

  1. Paper and pencil.
  2. Scanner.
  3. Photoshop.
  4. Illustrator.
  5. Basic concepts of Photoshop and Illustrator.
  6. A lot of patience.
  7. Optional : wacom tablet.

Briefing

The Briefing is a series of key questions to assist you in understanding the company and its requirements. Nonetheless, it can be done in a more or less formal way.

In this case we’re going to design a character for a horror movies producer. The requirement was a monkey as the mascot logo, the catch being that it was not to be your typical nice monkey. So we came up with the idea of making its clothes include a straight jacket and for it to have a knife with blood… lots of blood! It had to look nice, yet intriguing at the same time.

Traditional Drawing and Photoshop Retouches

I always advice you to start any design the traditional way, with a paper and pencil, especially if it’s an illustration. As good as your Wacom tablet may be, it’ll never be as accurate as a conventional pencil.

mascot design skechtTraditional drawing on the left, photoshop retouches on the right.

The image at the left is my pencil sketch, I start drawing with a red pencil, and when I’m satisfied with the results I remark the lines with a graphite pencil. As you may notice, it is more of a sketch than a finished drawing. Unfortunately my line quality isn’t as good as some comics professionals, no worries, we have Photoshop!

When I get something decent as a start point, I scan it to Photoshop and start to move things around, play with the facial expressions, the pose and various other elements of the design … until I get something I like (image below).

Evolution of the personality of our character 😛

Take a look at how the character evolves during the process. If you don’t have a very clear perception of what you want to do it’s always better to start with just about anything and then retouch it until you get what you’re looking for. And don’t get disheartened if you can’t get it at the first attempt, it’s common for such a thing to happen.

Cleaning and Inking in Photoshop

It’s critical to use a very high resolution (5000×5000 pixels) for several reasons :

  1. It’s more comfortable to work with.
  2. If later on in the process we decide to reduce the design, smaller mistakes wont be visible.
  3. If the work is the same, preferably let’s do it at a higher resolution so it is print ready.
  4. While vectorizing, the design would acquire accurate lines.
Cleaning with the digitizer tablet on the left, Inking with Photoshop on the right

Once we have a nice sketch for the mascot character, I start to clean the sketch in Photoshop with my Wacom tablet, assigning different line weights as I go on.

Final inking, it’s very important to modulate the lines correctly.

Notice we have 3 types of lines (take a look to the final inking below) :

  1. Contour : thicker lines.
  2. Borders : for instance, the inferior border of the jacket, medium thickness lines.
  3. Internal lines : the lines that mark the cheek, they are the thinnest ones.
  4. Transition lines : they start as the contour and then get in to the design. We start by making it thick and then thiner as it flows, as noticed on the line in the chin.

What we shouldn’t do :

  1. Create shadows: we will do it in the color phase.
  2. Create extremely thick lines without any variation in thickness.
  3. Overload the design with internal lines: the purpose of these lines is to mark volume, you have to create them in a subtle way. It is meant to serve as a guide for when you color.
  4. Draw straight lines : if you look closely, all the lines are slightly curved.
  5. Have small areas: ensure that your volumes are as big as possible, otherwise you wont have sufficient space for the colors.

To get the final inking we have 2 options:

  1. If your hand-drawn lines are not very good, you can ink the sketch with Photoshop’s vector tools.
  2. If you have a Wacom tablet you can use the brush tool and ink manually.

Vectorizing in Illustrator

If you created your lineart with Photoshop vector tools you can open it directly in Illustrator and it will be completely etitable.

If you opted for the Photoshop Brush Tool, we can open the file in Illustrator and vectorize our bitmap lineart by using Image Trace, it’s quite straight forward. Here is a video where I explain how to do it.


After the vectorization you probably will need to clean your layers, the goal is having a black shape with lot of white shapes on top.

Asigning plain colors, gradient and volumes

Plain colors

 

Now we only have to fill each white area with the color we want, I usually use medium tones, not too dark or too light.

Adding gradients

Gradient colors

 

We will use gradients of at least two differentiable colors, but not extremely contrasting because we’ll add lights and shades later on. For now don’t pay too much attention to the gradient direction, we’re just choosing the color tones, later on we’ll orientate them to give coherence to the illumination.

Cutting the areas

The gradient areas are too big to get good illumination effects. So we have to cut these big areas in to smaller volumes with the knife tool. Learn how to do it here.

Gradient colors with the areas cut in to smaller volumes

 

Later we retouch the gradient colors to try to get a coherent illumination. There’s a basic thumb rule that’s very important : next to a dark color there’s always a light color.

Adding shadows and lights

We’ll create a layer and set its blend mode to Multiply. This way we have all the shadow vectors grouped together. IMPORTANT : if you make the shadows in the Normal blend mode you’ll have to adjust the vectors a lot so you don’t cover the black lines, this is why we use the Multiply blend mode. This mode makes the layer transparent on top of the black color.

Animation so you appreciate the shadows.

 

We simply pick a similar color (sometimes I use gradient colors as well) to the one in the background and we make small vectors to mark the areas in the shadows.

In this case it’s not essential to use different layer modes, although you can always use the Screen blend mode to get lighter tones. First I make a soft illumination and later on I add some strong light retouches in order to reinforce the contours.

Final Retouches

Now we only need to add blood in industrial quantities. For this I used the free Gomedia vectors (if you use them in your design do put a link back to their site, you have to be thankful right!). The blood is added in a layer above all the others, but below the right eye, in the Multiply blend mode.

twisted monkey mascot design

Although I know that in such a complex tutorial I might have forgotten to explain quite a handful of concepts, if you do still somehow have any doubt just comment it, I’ll try to answer it as soon as I can and I’ll add it to the tutorial.

sergio ordonez
[email protected]

I'm the created of all the content in SOSFactory and I'm here to help you, so feel free to ask any doubt you have and I will reply as soon as possible.

146 Comments
  • Wydblog
    Posted at 11:23h, 26 September Reply

    GUAU! son increibles realmente me parecen facinantes!

  • SaG
    Posted at 02:34h, 27 September Reply

    un tutorial realmente bueno.. el resultado es genial. mil gracias

  • Sergio Ordonez
    Posted at 10:59h, 27 September Reply

    Hola Kristian, muchas gracias.

    Solo este post me tomo 2 dias de mi tiempo libre. Intento actualizar tanto como puedo, pero ten en cuenta que esto es un hobby, lo que me da de comer es SOSFactory.

    Yo creo que no está mal para ser sólo una persona.

  • Kristian
    Posted at 09:34h, 27 September Reply

    Wao… increible el tutorial.

    Y toda tu página, francamente buena y útil.
    Me parecen interesantisimos todos los posts sobre freelance, en los que explicas los pros, los contras y demás… te lo agradezco muchisimo.

    El único inconveniente que veo es que se actualiza la página poco amenudo… pero bueno, me imagino que tendrás tus razones, ya sean personales, laborales, o de vagancia 🙂

    Lo dicho, gracias, y ojalá que sigas asi por mucho tiempo.

    Un abrazo

  • Jaques
    Posted at 11:35h, 29 September Reply

    Te cuento que entre a su pagina y….. lo unico que me gusto fue tu logo JiJi

    Deberian de encargarte tambien el banner, que esta deprimente..

  • Sergio Ordonez
    Posted at 18:16h, 29 September Reply

    Deberian encargarme todo, se aceptan recomendaciones 😛

  • Josmell
    Posted at 16:38h, 01 October Reply

    Muy BuenO!!!!

  • Eli
    Posted at 10:41h, 07 October Reply

    Very nice tutorial, and VERY nice outcome, but you should have given the tutorial a more compelling title, it can definitely help with drawing in more visitors.

    🙂

  • marcos
    Posted at 00:12h, 09 October Reply

    muy apero eres un verdugo sigue en eso ,gracias por enseñar tu experiencia

  • gladapple
    Posted at 17:14h, 17 October Reply

    This is wonderful. It’s always amazing to me when talented designers have enough time to give back like this, and help the newbies. I’ve always vectorized lines manually after cleaning them in photoshop, so thank you for making such a clear and helpful article.

    I’m going to be reading your blog regularly!

  • Sergio Ordonez
    Posted at 18:00h, 17 October Reply

    You are welcome 🙂

  • henry
    Posted at 21:13h, 25 October Reply

    Magnifica exposicion del producto, ha logrado impresionar con el terror a traves de la expresion. El proceso aunque a grandes rasgos implica un poco mas de tutoria. No importa todo bien. hasta pronto

  • De Dude
    Posted at 08:53h, 30 October Reply

    Nice tut thnx alot saw this one on http://www.mr-tut.com 😀

  • Lucas (Wydblog)
    Posted at 13:43h, 07 November Reply

    Sergio sos mi idolo! muchas gracias por el tuto…

  • Sergio Ordonez
    Posted at 07:52h, 19 November Reply

    Hola Johny, dí­melo tú.

    Yo encuentro el plugin the Illustrator perfecto para mis necesidades, la verdad que ni conocí­a esa opción de Illustrator, te agradecerí­a que comentaras un poco que tal va.

    Saludos.

  • johny
    Posted at 06:42h, 19 November Reply

    Saludos
    Exelente tutorial,me pasa igual con el illustrator, prefiero el photoshop para pasar tinta y muy buen dato lo de Silhouette, solo una pregunta: ¿tiene el mismo resultado vectorizar con la opcion de calco de illustrator?.

  • lee
    Posted at 09:23h, 24 November Reply

    awesome! thank you so much

  • Marcos
    Posted at 11:12h, 12 December Reply

    excelente son buenisimos tus tutoriales, si que me ha sido deayuda tu pagina muchas gracias.

  • Didier
    Posted at 22:50h, 03 January Reply

    Hi, firt of all thks a lot for this tut it´s awesome and just what i been searching for !!!

    I got a little problem after making of the silouhette. I made my path in photoshop, saved it as .tiff opened it in ilustrator made the silouhett with the same values and got my path vectorized but……i´ve a unique path and i can´t select any white area to start coloring.

    Any idea of why? or how can i fix that?

    Hop u could help me cuz otherwise i´ll have to colorate in photoshop and then i wouldn´t be able to resize it without losing resolution.

    Tks for the answer, i let you my msn if u want to explain me directly:

    [email protected]

    PS.- Sorry about my bad english !!!

  • Sergio Ordonez
    Posted at 09:28h, 04 January Reply

    Hello Didier, you should do something wrong. Check you clicked the right settings of Silouhette:

    1st “Method” box, 1st “Nested” box if not try with “include white”.

    Cheers.

  • Didier
    Posted at 19:00h, 05 January Reply

    Yeahhhh i was missing that the new layer group was a folder !! My bad is just i´m really new with ilustrator but i must learn don´t i? cuz it´s really important to us designers to resize images whiout losing resolution isn´t it?

    well i continue with the coloring step, i hope i won´t get other problems otherwise i will need ur help loool!!!

    tks again and i will send u my final result to prove u how good theather are u !!

    see ya and thanks again!!!

  • Sergio Ordonez
    Posted at 00:49h, 06 January Reply

    You are welcome Didier 🙂

  • Sergio Ordonez
    Posted at 19:56h, 09 January Reply

    Hola Diana, muchas gracias.

    Estoy de acuerdo, serí­a genial tener todo alojado en el servidor y que se pudiera descargar… el único problema es que el ancho de banda se me irí­a por las nubes, y eso cuesta dinero.

    Estoy manejando otras opciones, como servidores gratuitos, pero aún no tengo la solución.

    Saludos.

  • Diana
    Posted at 15:57h, 09 January Reply

    Hola, yo soy dibujante autodidacta y aprendo a ilustrar en illustrator, este es el mejor tutorial q he encontrado, el efecto final es interesante, pero quisiera saber como descargar los videos sin usar emule pues he tenido problemas, seria mejor descargarlos directamente del enlace.

  • Ivan
    Posted at 16:02h, 10 January Reply

    Sergio, muy buen tutorial y muy bien explicado.

    Felicitaciones por la metodología que utilizas. Me sirvio mucho en mi trabajoya que también soy Diseñador y Profesor.0_0

  • Diana
    Posted at 16:08h, 14 January Reply

    Me han gustado tus diseños que usare este (el del mono) en una camisa, si no te molesta, y es que me gustan el color, prometo ponerle el nombre de la pagina!

    Diana.

  • Sergio Ordonez
    Posted at 00:36h, 15 January Reply

    Hola Diana, por favor lee al pie de la web:

    “Todos los artí­culos e imágenes tienen derechos de autor…”

    Si es para uso personal no creo que haya problema, pero yo no te puedo dar permiso para que lo hagas.

  • Sergio Ordonez
    Posted at 17:38h, 18 January Reply

    Diana, siempre que no sea a nivel comercial no creo que nadie se moleste. Es solo que yo no puedo darte permiso… vamos que si me preguntas la respuesta es no, eso sí­, si no me preguntas… pues…

  • Diana
    Posted at 14:22h, 18 January Reply

    bueno no lo usare, pero lo que sucede es que no he podido lograr esos efectos del color en un dibujo que hice y por eso deseaba usar uno de los diseños de sosfactory

  • mostwanted
    Posted at 04:55h, 24 January Reply

    good job! 🙂

    my question: how long does it take someone in the illustration-business to create such a illustration?

  • Sergio Ordonez
    Posted at 12:32h, 24 January Reply

    Hello, It depends mainly on the revisions, if the client doesnt ask too much corrections I can design a character in 6-10 hours.

  • Diana
    Posted at 16:00h, 25 January Reply

    no es con fines comerciales, es decir, si me dices que la imprimire en camisas y las vendere , pero no es asi, tan solo es personal.

  • dato
    Posted at 19:17h, 28 January Reply

    te falta mas explicacion porque cuando uno ta empezando hay cosas que no la domina pero si esta calidad

  • Sergio Ordonez
    Posted at 06:08h, 29 January Reply

    Hola Dato, siempre faltará explicación, es imposible hacer un tutorial al detalle de algo tan complejo.

    Saludos

  • bill the crap
    Posted at 15:22h, 29 January Reply

    Magnifique, très beau travail!!!!
    Very nice, Good job!!!

  • Sail
    Posted at 06:41h, 05 February Reply

    Gracias buen efecto eres muy buen dibujante despues de todo Saludos desde Venezuela. DTB

  • johny
    Posted at 15:38h, 05 February Reply

    Hola Sergio, perdona volver después de muuucho tiempo parar comentarte esto, no uso mucho el Illustrator pero hay una opción que me ayuda, después de escanear el lineal a 300 de resolucion, Creo un documento nuevo en Illustrator y luego con la opción “colocar” abro la imagen a vectorizar, estando esta seleccionada, voy a Objeto/ Calco interactivo, y en Opciones de Calco uso los siguientes valores: Modo: blanco y negro, Umbral : 128, desenfoque : 0, Ajuste de trazado: 3 px, Area Minima: 20 px, Angulo de Vertice: 20, por ultimo CALCAR. Para terminar copiar este resultado abrir el photoshop, crear nuevo documento y pegar.
    Antes hacia todo esto de vectorizar con el photoshop 5.5 pero con las nuevas versiones del PS no resulta igual por eso migre al Illustrator.
    Saludos

  • Sergio Ordonez
    Posted at 20:50h, 05 February Reply

    Hola Johny, muchas gracias por compartir esa otra manera de hacerlo.

    Ahí­ queda, estoy seguro que a alguien le servirá de ayuda.

    Saludos.

  • Deron Sizemore
    Posted at 10:21h, 08 February Reply

    I wasn’t able to read the article in full detail, but I quickly skimmed through it and it looks awesome Sergio! Thanks for doing it.

    I’ve been wondering how to do something like this for a long time now.

  • xnideax
    Posted at 09:49h, 09 February Reply

    altisimo trabajo el tuyo, acabo de encontrar tu web bien ahi 😉

  • freestick
    Posted at 16:57h, 16 February Reply

    excellente tutorial muy buenos aportes

  • Sergio Ordonez
    Posted at 17:22h, 18 February Reply

    Hola Diego, muchas gracias.

    La verdad que se me hace bastante complicado sacar tanto tiempo para estos tutoriales. Pero creo que merecen la pena, prefiero sacar un buen post de vez en cuando que muchos y de poca calidad.

    Sí­, trabajo como diseñador gráfico-web e ilustrador… un poco de todo, http://www.sosfactory.com es mi portafolio.

    Saludos.

  • Diego vz
    Posted at 13:49h, 18 February Reply

    Hola Sergio.
    Bueno, decirte que esta es la mejor página que he encontrado de diseño grafico, tus tutoriales me han ayudado muchí­simo en mis diseños, y el trabajo que tiene hacer estos tutoriales es interminable.

    Trabajas de diseñador gráfico?
    Dios es el mejor trabajo!!! xD

  • Ivan
    Posted at 12:00h, 20 February Reply

    Hola Sergio,

    Antes de nada felicitarte por tus webs y sobre todo por tus diseños que son espectaculares.

    Siguiendo tu tutorial me he encontrado con un problema, te explico:

    Despues de pasar el plugin silhuette, me crea la silueta en negro y huecos en blanco, hasta ahi todo bien. Pero a la hora de darle los colores planos es cuando viene el problema ya que no me colorea el “hueco” en blanco, si no el trazo (no sé si me explico). Seguramente hay alguna pequeña cosa que e olvidado hacer pero me es imposible aplicarle color. ojalá puedas comentarme donde puede estar mi fallo.

    Un saludo

  • Sergio Ordonez
    Posted at 18:13h, 20 February Reply

    Hola Ivan, muchas gracias 🙂

    Pueden pasar varias cosa:

    1º.- Que sin querer estés seleccionando la silueta en vez de los rellenos. Para esto simplemente bloquea la capa silueta (hay un cuadradito la izq de cada capa)

    2º.- Que no estés usando los parametros adecuados. Fí­jate bien, hay otra opción que lo que hace es recortar las zonas de relleno sobre la silueta, en principio se ve igual, pero sólo puedes rellenar la silueta, los rellenos serí­an transparentes.

    3º.- Que no esté funcionando bien. Es raro pero puede pasar. Si lo anterior no funciona planteate reinstalar el programa y el plugin.

    A ver si hay suerte.
    Saludos.

  • Matt
    Posted at 10:40h, 22 February Reply

    Hi, I cant seem to get the white areas to appear, I think i have exported it correctly as a tif and with a white background. Yet after using the silhouette tool with what must be the right settings and even ungrouping the grouped layer I cant find any white areas, only my line art.

    Any Ideas?
    Thanks.

  • Sergio Ordonez
    Posted at 21:43h, 22 February Reply

    Hello Matt, not sure what is the problem. Try again with the same and different settings, if not maybe is a software problem… try reinstalling Illustrator and the plugin.

    Cheers.

  • Sergio Ordonez
    Posted at 12:31h, 24 February Reply

    Hola Ivan, pues dicho queda… lo mismo se me olvidó algún paso por ahí­.

    Sobre lo de las sombras en Illustrator, yo también uso la pluma, la técnica es igual que en Photoshop, sólo que con vectores. Echa un ojo a estos:

    http://www.sosnewbie.com/es/photoshop/color-digital-con-photoshop-video/
    http://www.sosnewbie.com/es/diseno-mascotas/drunken-monkey-photoshop-tutorial/

    Gracias Fernando.

    Saludos.
    Sergio

  • Ivan
    Posted at 07:44h, 24 February Reply

    Hola de nuevo Sergio,

    Muchas gracias antes de todo por tu tiempo. Solucioné el problema cambiando la opcion “NESTED” del Silhouette (marcar la opcion Overlap Nested Areas en lugar de Trap Nested Areas que es como aparece en el videotutorial) y ya me permite colorear.

    Ya por último, si se me permite, comentarte que para el siguiente video-tutorial he pensado que estarí­a genial mostrar como dar sombras y brillos con illustrator, yo personalmente me pierdo, no sé si utilizar el pincel, crear areas cerradas con la pluma… en mi caso particular, como mi pulso no es de pistolero del Oeste, utilizo la pluma (no sé si de forma acertada).

    Un saludo y de nuevo muchas gracias por tu ayuda.

  • Fernando
    Posted at 11:33h, 24 February Reply

    eres muy modesto amigo, la verdad ilustras muy bien, me encanto el trabajo realizado, excelente.

  • Rodrigo
    Posted at 17:00h, 28 February Reply

    Hola Sergio!

    Muy buen aporte, yo sigo otro método, lo hago todo en illustrator y en partes mi personaje, para mi me resulta mejor poder modificar cada parte de mi personaje, ya que los clientes les da por modificar proporciones o expresiones, etc, y pues asi se maneja mucho más fácil, tmb si lo quieres pasar a flash para animarlo. Tmb me gusta no irme tanto hacia los tonos claros u oscuros, tmb enriquece mucho la ilustración si te vas al secundario del tono para hacer las reflecciones. Gracias por todos tus aportes me resultan excelentes!

  • Sergio Ordonez
    Posted at 17:20h, 28 February Reply

    Hola Rodrigo,

    Tienes razón, si haces todo por partes es mucho mejor, aunque también inviertes más tiempo (por tanto es más caro). Si es para animar es la mejor manera aunque yo pondrí­a menos detalle en el renderizado, si no serí­a una tarea interminable.

    Muchas gracias por el aporte 😉
    Saludos.

  • akami
    Posted at 07:38h, 05 March Reply

    espectacular!! te haz pasado …gracias por compartir tus conocimientos.

    🙂

  • Checo Espinosa
    Posted at 21:45h, 02 April Reply

    Exelente tutorial hay algunas cosillas que no sabia eso de hacer, por ejempo el modo trama para conseguir tonos mas claros, exelente!!!
    gracias por compartir tu trabajo.
    estoy seguro que a dennise, le va ser de gran ayuda!!!

  • Coghill Cartooning
    Posted at 12:15h, 26 April Reply

    Excellent illustrator tutorial!

  • Sergio Ordonez
    Posted at 11:12h, 30 April Reply

    Hola Michel, que yo sepa no hay ningún video sobre este personaje, no se si te confundiste de sitio, lo único que tengo que se asemeja a lo que me dices es la imagen del post:

    http://www.sosnewbie.com/imagenes/ilustracion-vectorial/animacion-pose-02.gif

    Será eso?
    Saludos.

  • Michel
    Posted at 10:30h, 30 April Reply

    Hola excelente tuto, felicidades!!!
    Ahora bien, quisierame ayudes, no recuerdo donde clicquee un dia y me aparecio la misma mascota pero animada, recurdo le cambiaban las expresiones de la cara, era un videotutorial… espero me puedas ayudar ps me serviria de mucho… GRACIAS!!!

  • RyRy
    Posted at 02:06h, 01 May Reply

    Very nice tutorial, I usually just do pencil work, then linework with black ink pen, then fix up linework in photoshop. Then color in photoshop, then add some effect on it.. I don’t know how to use illustrator properly, althought the work may seems like an illustrator work, if you zoom in close to my work.. there are lots of flaws and grains and everything.. pixelation too!:D

  • MICH
    Posted at 16:25h, 03 May Reply

    HEY HOLA SERGIO, UNA GRAN FELICIDATCION POR ESTE TUTORIAL ES MUY BUENO Y MI PREGUNTA ES COMO SE INSTALAN LOS VECTORES GRATIS DE GO MEDIA??? SE COLOCAN EN ALGUNA CARPETA?? TE AGRADEZCO MUCHISISISIMO!! BESOS!!

  • Jose A.
    Posted at 17:30h, 03 May Reply

    Que onda sergio, psss la verdad me gusta mucho tu pagina y tus diseños (cuando vi las etiquetas de las bebidas me quede WTF) tengo unas preguntas:
    1.- Te costo mucho tiempo llegar al nivel en el que estas?
    2.- Algun lugar o libro que me recomiendes para aprender a hacer diseños asi aparte del tuyo ofc?
    3.- En la iluminacion con que hiciste la primera luz? digo la luz asi cargada psss son vectores de colores solidos, pero la primera? la hiciste con una brocha o algo asi por que me parece que es uno de los aspectos mas importantes para darle el sapecto que tiene y es el unico que no entiendo
    Anyway ojala me respondas bye

  • Sergio Ordonez
    Posted at 04:12h, 04 May Reply

    MICH: los vectores no necesitan ninguna instalación, es un archivo que abres como otro cualquiera y ya después lo llevas a tu diseño.

    JOSE A: te recomiendo que leas el ultimo post, el de la entrevista, ahí­ contesto a las 2 primeras preguntas y muchas otras.

    http://www.sosnewbie.com/es/inspiracion/psdtuts-entrevista-a-sergio-ordonez/

    La iluminación básica la hago con gradientes, corto las piezas del diseño por volúmenes, y hago un gradiente.

    Aquí­ tienes un video: http://www.sosnewbie.com/videotutorials/cortes.wmv

    Saludos a todos 😉

  • DNG.
    Posted at 17:32h, 05 May Reply

    Thx 4 the tut!
    In my case I had to check the “Include white” box to be able to color the white areas.

  • Sergio Ordonez
    Posted at 11:42h, 09 May Reply

    Hola Michel, me parece que te confundes, no recuerdo haber hecho ningún tutorial sobre animación.

  • Michel
    Posted at 09:42h, 09 May Reply

    [Hola excelente tuto, felicidades!!!
    Ahora bien, quisierame ayudes, no recuerdo donde clicquee un dia y me aparecio la misma mascota pero animada, recurdo le cambiaban las expresiones de la cara, era un videotutorial”¦ espero me puedas ayudar ps me serviria de mucho”¦ GRACIAS!!!)]

    Hola Sergio de nuevo, estoy seguro que no te confundo pues es de las pocas paginas que he encontado con esta calidad y mira que si que he visto bastantes y muy interesantes, bueno mira del video que yo te pregunto (no se como se le llame) aparece una linea de tiempo y se hacen intemploraciones de movimiento (no es flash, pero se veia muy similar) digamos mmmm, espero poderlo explicar:
    Tienes dos fotogramas consecutivos (dos dibujos ya vectorizados, le indicas al programa que determinado punto en el dibujo o fotograma 1 va a ser el punto 1 del dibujo 2 o fotograma 2, digamos que asi se hace una secuencia claro de muchos fotogramas… mmm espero no ser tan molesto jajajaj GRACIAS!!!

  • alejandro
    Posted at 08:31h, 21 May Reply

    Actualización del post, bueno ya he visitado varias veces tu página y he comentado algunas inquietudes en otros post… Ahora querrí­a poner mi grano de arena y actualizar el post sobre la vectorización en Illustrator. Lo primero que debo decir es que haciendo bien el dibujo, podemos escanearlo y con la nueva versión de Adobe Illustrator, osea CS3 lo que serí­a silhoutte lo encontramos en EDIT, LIVE TRACE (allí­ determinamos las caracterí­sticas que mejor nos vengan) (yo en mi caso utilizo “one color logo”, este trabaja la lí­nea como tú lo haces en photoshop, nada más que instantaneamente y sin dolor en la mano, jajaja). Luego hay que poner EXPAND. Con esto ya tendremos el 70 % de nuestro dibujo pasado correctamente a vectores (siempre hay que arreglar un poco aquí­ y otro poco allá para que quede 100%). Continuamente debemos, hacer clik en la imagen que se creo, poner “ungroup” y luego “release compound path” (click derecho). Ahí­ se separará cada parte y podremos hacer lo que queramos.
    Gracias y espero sea de ayuda…

  • jóga
    Posted at 00:04h, 27 May Reply

    Hola, hace poco encontré tu pagina Sr. Ordoñez. Debo decirle que es demasiado útil y a la vez darle las gracias por compartir secretos que nadie compartirí­a con los demas jejejeje, enserio, recomendaré muchisimo sus portales y sus trabajos 😉

    Exitos!!!

  • Alejo López Ospina
    Posted at 13:51h, 16 July Reply

    hola este tutorial esta exelente , que buena forma de distribuir la información, la verdad soy un dibujante en proceso de desarrollo y me gusta muchisimo los acabados en digital, me gustaria saber si me puedes regalar enlaces a algunas paginas donde hayan otros bueno tutoriales sobre el manejo de adobe il y ps y si nos puedes dar información sobre variados plugin para los softwarwes ya nombrados, gracias y te felicito exelnte tutorial creo que es el mejor que he visto

  • Henry
    Posted at 11:20h, 30 July Reply

    simplemente espectacular!!

  • Davo
    Posted at 13:31h, 30 July Reply

    Muy buen tutorial, gracias por las herramientas que compartes y los tips, me será de mucha ayuda. í«xito en todo

  • Francisco
    Posted at 12:57h, 11 August Reply

    I am unable to see your images, I’m using a PC. I think I saw a post you made about some kind of viewer for psd and ai files? Why don’t you just take screen shots of the pictures and save those as jpegs so every one can view them? Or maybe it’s just my computer that won’t let me view your images.

  • Sergio Ordonez
    Posted at 19:58h, 11 August Reply

    Hello Francisco, its a problem with the .htaccess file of my server, Im working on it.

  • Manuel B. #
    Posted at 01:52h, 31 August Reply

    Hola que tal, sinceramente, he de confesarte que me has abierto los ojos en muchos aspectos, la cuestión de digitalizar mis bocetos siempre me ha atormentado, pues se me habí­a hecho muy complicada y tardada pero tu Tutorial, la verdad, es muy bueno y sencillo, te habia mirado en DeviantArt x casualidad, pero habia perdido el link x las prisas; para mi infortunio, sin embargo, volvi a encontrar tu web y la he mirado con mas detalle. Te felicito por tu trabajo, tus ilustraciones son geniales, y bueno que decir de tus consejos…creo q eres de las pocas personas que he leí­do.visto que comparten a cierto detalle sus conocimientos.
    Enhorabuena! y Muchas Gracias por los consejos!

    Saludos…

  • Michael
    Posted at 21:04h, 12 September Reply

    MMm y como en donde cabe la palabra tutorial?? La verdad explico superficialmente como y que hizo pero no puso los pasos exactos 🙁 la verdad muy bueno el trabajo pero no entendi un carajo… Si alguien sabe donde puedo conseguir tutoriales donde realmente expliquen como se hace escribirme a [email protected] les agradezco.

  • Sergio Ordonez
    Posted at 13:38h, 14 September Reply

    Hola Michael, hay tutoriales más detallados en este blog (drunken monkey), pero es imposible detallar todo el proceso a nivel principiante, darí­a para un libro.

  • gee!!!
    Posted at 12:10h, 21 October Reply

    sergio estoy muy contento de aver conseguido esta pagina!!! pues e aprendido mas de lo k esperaba y sobretodo e aprendido mas de lo k e aprendido en cursos fisicos pero de todo el tutorial y lo k me tiene parado es el silhouette baje el plugin lo lo puse en la carpeta de plugins pero cuando lo voy a utilizar no me funciona y me sale un mensaje diciendo k tengo k comunicarme con la pagina silhouetteonline.com a mime parecio k devo de registrar el plugin k acabo de instalar pero e esperado ya dos dias y dos intentos de inscribir y dados ya mi direccion de correo para k me manden la autorizacion o lA actualizacion me podrias porfavor ayudar y decirme si es algo k hago mal o k porfavor muchas gracias harmano.

  • Sergio Ordonez
    Posted at 14:54h, 27 October Reply

    Thanks a lot mate 🙂

    For now there is no other choice than Emule or Youtube, I will look for another way to download the videos, but it could take some time.

    Cheers.

    PS: please use the spanish version of the blog if you write in spanish language, so everything will be cleaner.

  • Eliecer
    Posted at 14:45h, 27 October Reply

    Sergio, gracias por tutorial!! El resultado final es sorprendente!!

    He tratado de bajar los dos videos vinculados con la mula pero no se puede: no hay fuentes de descarga. Existe otra posibilidad de descarlos?

    De cualquier modo, gracias por compartir tu experiencia y trabajo.

  • Nelson
    Posted at 16:24h, 29 December Reply

    Gracias por tu tutorial me ha servido mucho ya que estoy en el proceso de dejar el freehand y pasar al ilustrador aunque creo que nunca lo voy a dejar del todo. Gracias por compartir tus conocimientos.

  • Eldar
    Posted at 20:19h, 30 December Reply

    Very nice monkey!!!

  • chepe
    Posted at 02:15h, 08 February Reply

    hey nadie habla español

  • Sergio Ordonez
    Posted at 06:48h, 08 February Reply

    Para eso está la versión en español: http://www.sosnewbie.com/es

  • MAIQ ZUÑIGA
    Posted at 01:19h, 15 March Reply

    TE FELICITO ESTAN MUY BIEN TUS ILUSTRACIONES

  • Dian
    Posted at 14:45h, 17 March Reply

    Hi, I think this is the best tut of all your tuts, Sergio, but it´s just my opinion.

  • Diana
    Posted at 14:45h, 19 March Reply

    Hola! Deberí­as poner más tutoriales o al menos artí­culos sobre Illustrator, aunque trabajas más con Photoshop. Saludos.

  • Diana
    Posted at 15:23h, 19 March Reply

    Hola, solo quiero aclarar para q los lectores sepan q al instalar el plugin siluette deben copiarlo a plugins/tools si acaso tienen esa carpeta y reiniciar el programa Ilustrador.

  • Diana
    Posted at 00:21h, 22 March Reply

    Quisiera saber cómo rellenar con color las áreas luego de vectorizarlas con el plugin. Cuando lo intento lo que ocurre es que se colorean las lí­neas. Saludos.

  • k-mix graphics
    Posted at 16:20h, 17 April Reply

    respect…i’ve been searching for this kind of tutorial for ages…it has a lot of details,realy speeds you up,and since i just getting started with usage of illustrator(i,ve been working in photoshop for ages) it is really heplpful for a newbie like me…tnx,man!

  • JMChakoN
    Posted at 15:29h, 10 May Reply

    Buenas sergio, acabo de encontrar tu página y me parece increible lo que has echo… yo estoy estudiando un master e hice varios cursos, y quiero ponerme ya enserio a hacer cosas para poder crearme en un futuro (espero que no muy lejano un portafolio) y esta página me viene increible, muchisimas gracias!!!

  • Overload
    Posted at 17:50h, 12 May Reply

    Cool monkey!

    He’s evil…

  • nicolas
    Posted at 22:11h, 05 June Reply

    Hola Flaco. Re groso el tuto. Te felicito. Me ayudó mucho.

  • Josue
    Posted at 23:27h, 02 July Reply

    hola que bien te kedan los dibujos ya vectorizados fijate que a mi me encanta dibujar y me gustaria vectorizar mis dibujos pero el problema esta en que no tengo scanner y mi pregunta es si le tomo una fotografia a el dibujo no afecta?

  • Sergio Ordonez
    Posted at 16:54h, 03 July Reply

    Si lo que necesitas es un boceto y después vas a redibujarlo puede que sirva, si necesitas buena calidad creo que no es posible.

  • Josue
    Posted at 20:37h, 03 July Reply

    gracias por la respuesta. eres muy bueno para dibujar deberias de hacer otra pagina que solo enseñes a dibujar paso a paso te lo recomiendo

  • Robert
    Posted at 04:27h, 13 July Reply

    hey man, great tute, it looks fantastic. But, I don’t understand how you added the lights in at the end, are they new white layers your drew in illustrator? or did you bring it back into photoshop?

    Also, after cutting the areas into smaller shapes, how did you get rid of the cut marks? the shapes seem to blend naturally in your final product.

  • Sergio Ordonez
    Posted at 15:58h, 13 July Reply

    Hello Robert, thanks a lot 🙂

    Just like the shadows but using layers in screen and soft light mode. Everything is done in Illustrator but if you want my opinion I preffer using Photoshop though Illustrator is better for vector work.

    Sometimes when you cut some marks appears, I dont think it will be too outstanding when resizing the image or printing but if you want to get rid of them just move the vertexs a little bit so the areas overlap. Anyway the key is working and working to get that naturality 🙂

    Cheers.

  • Andrea
    Posted at 22:19h, 05 August Reply

    Hola Sergio, lo estoy empezando a aprender de tu estilo de ilustraccion digital, son espectaculares. Sin embargo necesito un poco ayuda que como puede bajar el Silhouette para adobe illustrator CS4… a mi me dificulta por no se como hace desgarcas para este programa actualizada… me da muchas ganas de aprender de todo esta pagina muy bacana.

    Gracias.

  • Sergio Ordonez
    Posted at 06:15h, 06 August Reply

    Hola Andrea, si usas CS4 quizás serí­a mejor que aprendieras a usar Live Trace que viene ya con el programa. Investiga un poco, es muy facilito de usar 🙂

    Saludos.

  • Diana
    Posted at 20:23h, 09 August Reply

    eh, no respondiste mi duda :(, no problem, creo q lo solucioné.

  • Diana
    Posted at 21:26h, 03 September Reply

    Hola, Sergio, tengo una duda, al intentar colorear con colores planos, cada “trozo” lo que sucede es que se colorean tooodas las líneas, mira en esta imagen porfavor : http://twitpic.com/gdor9/full

    intenté seleccionando con la herramienta “direct tool” el ojo, o la cabeza etc, también está la opción de siluette “color vectorization” y no funcionó, quiza me puedas ayudar en esto. 🙂

  • Luis Portillo
    Posted at 16:56h, 08 September Reply

    hola por algun tiempo he sido fan de tu trabajo aora un empresa me pidiio un logotipo de un zorro recorde aver visto un trabajo tuyo de cocoa fox den y me puse a diseñar uno el problema es que no es igual pero se parece y no se que problemas puedo tener al vender mi diseño esta empresa

    esta es la imagen si me pudieses responder te lo agradeceria http://www.multiseccion.com/weboz.jpg

    saludos

  • Sergio Ordonez
    Posted at 17:05h, 08 September Reply

    Hola Luis, la verdad que se parece bastante, podrías tener problemas tanto tú como tu cliente. Sobretodo tú, por un lado serías responsable de un delito contra la propiedad intelectual y por otro de estafa, en caso de que no le hayas contado al cliente que eres consciente de la similitud.

    Yo lo primero que haría sería ser honesto con el cliente, explicarle que te has inspirado en un personaje ya diseñado y que lo use bajo su propia responsabilidad, si es por escrito mejor.

    O incluso mejor, le explicaría el problema y haría un nuevo diseño.

  • Luis Portillo
    Posted at 17:17h, 08 September Reply

    gracias por tu respuesta.. en caso denecesitar alguna propuesta de tu parte cuanto me cobrarias soy de mexico la empresa se supone espera cresa a nivel nacional en todo estados unidos es de negocios atraves de paypal y me gustaria saber cuanto nos cobras por algunas 3 propuestas de logotipo los temas son un zorro , otra un turco y alguna algun caracter de un joven empresario sobre cualquier propuesta de esas cuanto me cobrarias por un preview de como se veria como el bosquejo apra que nuestro cliente escoja y ya nosotros decirte por cual nos vamos espeor tu pronta respuesta gracias

  • Sergio Ordonez
    Posted at 17:42h, 08 September Reply

    [lang_en]Hello Luis, I´m sorry I don´t work on spec, thanks a lot for the offering anyway.[/lang_en][lang_es]Gracias por la oferta Luis, pero no suelo trabajar “on spec”, es decir, bajo riesgo. Si estás interesado contáctame a través del formulario de contacto y te enviaré un presupuesto.[lang_es]

  • Diana
    Posted at 19:51h, 08 September Reply

    Me ha sucedido algo muy parecido: el cliente por lo general quiere que diseñe un estilo como el tuyo, pudiendo optar por otros :/ a mí no me parece y eso es un plagio evidentemente, pero en diseño de mascotas, por ahora, te llevas más atención tú 😛

  • Diana
    Posted at 14:57h, 12 September Reply

    Sergio, creo que no lo había preguntado:P pero ¿por qué trabajaste el personaje de forma vectorial? era para ser impreso?

  • Zuba
    Posted at 11:26h, 21 September Reply

    Muito bom seus trabalhos ,sou grato por este tutorial! já adicionei aos meus favoritos!

    Abraço!

  • wonder
    Posted at 10:11h, 04 October Reply

    Cool stuff! It is a really useful tutorial, thanks a lot!

  • Sergio Ordonez
    Posted at 13:31h, 06 October Reply

    I used only Illustrator, look for the transparency palette, there is the blend modes.

  • Big Rich
    Posted at 13:06h, 06 October Reply

    How did you create the shadows in illustrator or did you bring your art back into PhotoShop. Could not find the blend mode multiply in illustrator.

  • Big Rich
    Posted at 21:46h, 06 October Reply

    Wow!!!!! Did not know that illustrator has this feature. Thanks you!!

  • arnold
    Posted at 22:58h, 27 October Reply

    wow!! amigo realmente me inspira saber de personas talentosas y tu web es muy interesante, te felicito y sigue asi amigo

  • Doug C.
    Posted at 07:18h, 04 November Reply

    “When I get something decent as a start point, I scan it to Photoshop and start to move things around, play with the facial expressions, the pose and various other elements of the design … until I get something I like (image below).”

    I laughed out loud when I read this – I thought I was the only who did this! Nice to know I’m not alone.

  • Adrian
    Posted at 19:34h, 13 November Reply

    hola man sos un grnade me encantas tu pagina y los post de photoshop… segui asi que mucha gente te lo agredece por la mano 😉

  • Jean Paul
    Posted at 01:05h, 18 November Reply

    Que buen aporte y gran página

    estoy aprendiendo y pues me gustaría saber si por ahi tienes algunos tips y tutoriales para dibujar caricaturas si ya estan en alguna parte te agradecería los links de descarga o solo con verlos estaría agusto..

    De igual manera gracias y de verdad que buen trabajo “Eso si es amor por lo que se hace”

  • themeheven
    Posted at 08:18h, 29 December Reply

    Great!!!!!!!!! I like it. Thanks so much for the great work.

  • Diana
    Posted at 23:10h, 14 January Reply

    Helloo, Sergio, fíjate que no me funciona el plugin silouete en AI CS3, pero funciona con Object/Live Trace/Make and expand 🙂 espero que ayude esto a los demás si les pasa el problema que yo tenía. Pero no sé si es mejor el plugin, eh?

    Saludos.

  • Juan Ariza
    Posted at 04:12h, 10 February Reply

    Hey there, felicitaciones, creo q eres el mejor ilustrador vectorial de mascotas q he visto…de verdad q bien q existan artistas asi.

  • TomerEP
    Posted at 10:44h, 01 April Reply

    Nice, are those character design for sale anywhere? or can I get in touch iwth the artist?

    • Sergio Ordonez
      Posted at 23:22h, 03 April Reply

      Hi Tomer, I´m the artist, you have some stock designs on the banner at the top-right corner. If you need custom work just email me to the email at the bottom of the article.

      Cheers.

  • eManT
    Posted at 12:16h, 14 May Reply

    Hi Sergio, I have a problem with your tutoriel…

    I can’t put plane color.

    I realize my ink in illustrator, i save it in tiff, and reopen with it.
    I made my line with Silouhette with same option than you, but i can’t put my color, how you do this ? It’s certainly very simple but i can’t do this 🙁

    Thanks for your help, and gratz for your website and tutorials !

    • Sergio Ordonez
      Posted at 12:30h, 14 May Reply

      Hi Emant, did you check it´s not a compound path? Check on your layers, it ´s a compound shape you need to release it, select the shape and right click, then click on release.
      After that you have all the shapes ready to modify.

  • eManT
    Posted at 12:40h, 14 May Reply

    “The selected paths are already part of a compound path.”

    Well, maybe you can take a look to my Tiff, it may be the problem…

    http://emant.free.fr/draw.tif

    I’ve realize the line with the new tool on Illustrator CS5, and export in .TIF to Illustrator CS3 (Silouhette CS5 not exist).

  • Sergio Ordonez
    Posted at 13:08h, 14 May Reply

    Please, use a JPG image in low res for showing the issue.

    Just do what I did mention on the previous comment so you can release the shape.

    Did you get the lines in CS5? It´s vector? then why do you export as tiff?

    Anyway forget the silhouette plugin, it´s outdated and you can do the same with the live trace tool of Illustrator CS5.

  • eManT
    Posted at 14:41h, 14 May Reply

    I have this :

    http://emant.free.fr/1.jpg

    The line, for me, is correct.
    But I don’t know how i can put color inside line, for now it just change the line color or outline…

    So i can’t make gradient or nothing !

  • Sergio Ordonez
    Posted at 14:46h, 14 May Reply

    I already explained you the issue, you need to ungroup the shapes and then release the compound path.

  • eManT
    Posted at 15:05h, 14 May Reply

    ohhh yes, i’m sorry, it’s here i see that my english suck xD

    Thanks for your help !

  • Lorenz
    Posted at 22:52h, 17 August Reply

    Hello Sir,

    i love this tutorial and i want to try this one. It will help my lines to be converted in vector but i cannot download the SILHOUETTE because the site not available. Please help me where i can download Silhouette. thank you

    sincerely,

    renz

    • Sergio Ordonez
      Posted at 23:34h, 17 August Reply

      Hi Lorenz, the plugin is outdated, Illustrator now have a tool named Live Trace and do the same work, do some Google, its quite straight forward.

  • Lorenz
    Posted at 00:46h, 18 August Reply

    Hi Sergio,

    Thank you for prompt response. I am using Illustrator CS but i think live trace is only available in higher version. Do you still have other file for “SilhouettePlugIn.aip” or download-able links? My friend told me that it works best and easy.Hope you can help. thank you

    regards,

    renz

  • Sergio Ordonez
    Posted at 11:56h, 18 August Reply

    Sorry Lorenz, I deleted the plugin long time ago. Maybe somebody can help you.

  • Jkakaroto Honorato
    Posted at 02:14h, 14 September Reply

    Perfecto!! Maravilhoso!!!

  • ketsuo
    Posted at 16:29h, 29 September Reply

    Gracias por compartir este tutorial amigo, te sigo en DA y tu blog está muy interesante tb

    Saludos!

  • nicolas
    Posted at 23:24h, 11 November Reply

    [lang_es]Sergio me encantan tus tutoriales y tu trabajo. Tenes un nivel excelente, ojala algun dia pueda hacer cosas como vos, muchas gracias por compartir todos estos conocimientos!.[/lang_es]

    [lang_en]Sergio i love your work and your tutorials. You have a high level, i hope some day do anything like this, thank you very much for share your knowledge.

    I did’t know that you have a blog, but i found it by lucky :D!.[/lang_en]

  • Erick Cerpa
    Posted at 22:36h, 14 November Reply

    Bother eres el mejor de verdad!! te admiro full desde barranquilla , colombia yo estoy aprendiendo. con otras tecnicas y creo que me quedan bien pero para llegar a ti me falta uff… reconozco porque eres full duro en esto!! mi portafolio. http://www.flickr.com/photos/[email protected]/

    quisiera, recomendaciones o sugencias, cualquier cosa me lo dices en mi correo [email protected]

  • Preston Racette
    Posted at 05:06h, 21 December Reply

    Hey! Thanks for posting! This is great.

  • Aviad
    Posted at 14:10h, 28 February Reply

    No matter what I do, the scissors tool doesn’t cut any shape into two, and when I use the gradient to shadow a shape it influences the entire originalshape because the scissors didn’t cut it. I don’t know what I’m doing wrong.

    • Sergio Ordonez
      Posted at 10:55h, 02 March Reply

      Sorry, this is so basic that I can’t help you. Maybe you should read Illustrator’s help to identify what is wrong.

  • Camilobarajas
    Posted at 20:28h, 19 March Reply

    Excelente tutorial, muchas gracias!!!

  • Louis Vuitton Purses 2011
    Posted at 03:51h, 12 May Reply

    Excellent!

  • Insane2go2000
    Posted at 13:03h, 17 May Reply

     An example inspired by yours being used for a logo

    http://www.48hourslogo.com/project.php?id=5421

  • Jonathan Chafloque
    Posted at 18:28h, 05 October Reply

    Hola Sergio, mis felicitaciones eres un artista y diseñador de primera, el material que brindas es de mucha utilidad para muchos diseñadores, me gustaria adquirir el vector de este tutorial, como podria conseguirlo soy de Peru, y desde aca un abrazo fuerte para un grande del diseño. exitos

  • Julie Metivier
    Posted at 18:29h, 01 November Reply

    Hi, Thanks for all these tutorials! I really love your style but was a bit surprised to see your work on this website http://klerdesign.spreadshirt.fr/badge-twisted-monkey-A17452547/customize/color/1
    Do you sell your other characters as well? If so, where?
    All the best.

  • binay
    Posted at 09:33h, 01 December Reply

    I’d really appreciate it if you could tell me how much time do you spend for character design, inking and colorizing…it seems like hell lotta work. Just curious. That’d help me have patience with my work too 😀

    • Sergio Ordonez
      Posted at 00:10h, 02 December Reply

      Around 10-15 hours of work 🙂

    • Sergio Ordonez
      Posted at 00:00h, 02 December Reply

      I spend around 10-15 hours per character design.

  • Pedro Ezequiel Nome Acuerdo
    Posted at 09:34h, 04 August Reply

    Una pregunta chorra, porque en vez de utilizar la pluma en Photoshop para irnos despues a illustrator y usar live trace, no usamos desde el principio illustrator y la pluma?

    Gracias!

Post A Reply to nicolas Cancel Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

shares