04 Mar How to create cartoon monkey
Everybody loves monkeys… buuut… this one won’t be so adorable. I will create a bit edgy monkey character in a straight jacket and and a bloody knife… lots of blood! So, time to write a tutorial about how to draw a vector monkey character in Photoshop and Illustrator!
Drawing on paper and scanning to Photoshop
Sketching with a Ipad or drawing pad is fun but it’s expensive, if you can’t afford it, you may start drawing the traditional way. You can draw with pencil and paper, then scan it and trace it with vector tools.
Traditional drawing on the left, photoshop retouches on the right.
I start sketching my monkey with a soft red pencil, when I’m satisfied with the results I redraw it with a normal pencil. As you may notice, it is a very loose sketch.
Unfortunately my line quality isn’t as good as some comic artists, no worries, we can scan it and make some improvements with Photoshop!
Researching Character’s Personality
Once I draw something potentially good I scan it into Photoshop and play around, I change the monkey’s facial expressions and pose until I get something I like.
Take a look at how the character evolves during the mascot creation process. It’s normal not starting with a very clear idea of what you are going to do, just have fun and spend some time for research.
Evolution of the personality of our character 😛
The sketching phase is the most important, don’t get disheartened if you can’t get it at the first attempt. Practice some Drawing exercises for cartoon characters to become better.
Digital Inking in Photoshop
No matter if you work on bitmaps or vectors it’s critical working on high resolution (around 8.000 x 8.000 pixels) as you will work more more comfortably. If you work on bitmaps at the end of the process you can reescale the lineart down and all small imperfections will be gone, this will make the automatic vectorisation more accurate.
I have a mastterclass that will help you to improve your digital inking in Photoshop.
Clean sketch on the left, final inking on the right
Once we have a final sketch for the mascot character, I clean it in Photoshop with my Wacom tablet and assigning different line weights, then I proceed with the final inking.
For the final inking we can use Photoshop or Illustrator vector tools, alternatively you can hand draw with a digital tablet and learn how to vectorise in Illustrator.
Final inking, it’s very important to modulate the lines correctly.
Notice we have 3 types of lines: contours are the thicker lines, internal lines are thinner and transition lines starting as contour and getting inner.
Our digital inking must be as light and clean as possible.
– Don’t create shadows.
– Don’t use extremely thick lines without any variation in thickness.
– Don’t overload the inking with internal lines: just mark volume in a subtle way so they work as guide for the color.
– Don’t use completely straight lines.
– Don’t make really small details: your volumes must be as big as possible, otherwise you wont have sufficient space for the color.
Vectorisation in Illustrator
If you created your lineart with Photoshop vector tools you can open the PSD file directly in Illustrator and it will be completely editable.
If you opted for the Photoshop Brush Tool, we can open the file in Illustrator and vectorise 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 vectorisation you probably will need to clean your layers, the goal is having a black shape with lot of white shapes on top. In this post you can learn how to vectorisation in Illustrator.
Plain colors
Assigning Base Colors
Now we only have to fill each white area with the color we want, I use medium tones, not too dark or too light so, later on, we have room for the lights and shadows.
Adding Basic Gradients
We will use gradients of at least two different 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.
Gradient colors
We cut areas into smaller volumes
Cutting vector shapes
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. Donwload this video to learn how to do it.
Now we fine tune the gradient colors so we get a coherent illumination. There’s a basic thumb rule: next to a dark color there’s always a light color.
Adding shadows
We’ll create a layer, in the transparency palette we change the blend mode to Multiply.
For the shadows we simply pick a flat or gradient color similar the one in the background and create the shadows. As it’s in multiply mode, it will interact with the background resulting a darker color.
Animation so you appreciate the shadows.
IMPORTANT : if you use shadows in Normal mode you’ll need a lot of adjustments to not to cover the black lines. Multiply mode makes the layer transparent on top of a black color so there is no adjustment needed.
Adding highlights
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 off I make a soft illumination and later on I add some strong light areas in order to reinforce the contours.
Final Retouches
Now we only need to add some blood stains in a Multiply layer on top.
Illustration is a complex issue and I probably didn’t cover all details in full, if you want to dig even more I have put the source file for sale. Feel free to purchase it for your own research.
Become a Professional Mascot Designer!
Learn my best Photoshop tips and tricks about digital inking and digital coloring for mascot design. With technique and some practice you can also make a living from the characters you imagine.
Wydblog
Posted at 11:23h, 26 SeptemberGUAU! son increibles realmente me parecen facinantes!
SaG
Posted at 02:34h, 27 Septemberun tutorial realmente bueno.. el resultado es genial. mil gracias
Sergio Ordonez
Posted at 10:59h, 27 SeptemberHola 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 SeptemberWao… 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 SeptemberTe 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 SeptemberDeberian encargarme todo, se aceptan recomendaciones 😛
Josmell
Posted at 16:38h, 01 OctoberMuy BuenO!!!!
Eli
Posted at 10:41h, 07 OctoberVery 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 Octobermuy apero eres un verdugo sigue en eso ,gracias por enseñar tu experiencia
gladapple
Posted at 17:14h, 17 OctoberThis 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 OctoberYou are welcome 🙂
henry
Posted at 21:13h, 25 OctoberMagnifica 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 OctoberNice tut thnx alot saw this one on http://www.mr-tut.com 😀
Lucas (Wydblog)
Posted at 13:43h, 07 NovemberSergio sos mi idolo! muchas gracias por el tuto…
Sergio Ordonez
Posted at 07:52h, 19 NovemberHola 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 NovemberSaludos
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 Novemberawesome! thank you so much
Marcos
Posted at 11:12h, 12 Decemberexcelente son buenisimos tus tutoriales, si que me ha sido deayuda tu pagina muchas gracias.
Didier
Posted at 22:50h, 03 JanuaryHi, 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 JanuaryHello 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 JanuaryYeahhhh 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 JanuaryYou are welcome Didier 🙂
Sergio Ordonez
Posted at 19:56h, 09 JanuaryHola 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 JanuaryHola, 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 JanuarySergio, 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 JanuaryMe 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 JanuaryHola 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 JanuaryDiana, 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 Januarybueno 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 Januarygood 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 JanuaryHello, 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 Januaryno 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 Januaryte 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 JanuaryHola 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 JanuaryMagnifique, très beau travail!!!!
Very nice, Good job!!!
Sail
Posted at 06:41h, 05 FebruaryGracias buen efecto eres muy buen dibujante despues de todo Saludos desde Venezuela. DTB
johny
Posted at 15:38h, 05 FebruaryHola 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 FebruaryHola 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 FebruaryI 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 Februaryaltisimo trabajo el tuyo, acabo de encontrar tu web bien ahi 😉
freestick
Posted at 16:57h, 16 Februaryexcellente tutorial muy buenos aportes
Sergio Ordonez
Posted at 17:22h, 18 FebruaryHola 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, https://www.sosfactory.com es mi portafolio.
Saludos.
Diego vz
Posted at 13:49h, 18 FebruaryHola 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 FebruaryHola 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 FebruaryHola 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 FebruaryHi, 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 FebruaryHello 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 FebruaryHola 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 FebruaryHola 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 Februaryeres muy modesto amigo, la verdad ilustras muy bien, me encanto el trabajo realizado, excelente.
Rodrigo
Posted at 17:00h, 28 FebruaryHola 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 FebruaryHola 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 Marchespectacular!! te haz pasado …gracias por compartir tus conocimientos.
🙂
Checo Espinosa
Posted at 21:45h, 02 AprilExelente 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 AprilExcellent illustrator tutorial!
Sergio Ordonez
Posted at 11:12h, 30 AprilHola 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 AprilHola 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 MayVery 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 MayHEY 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 MayQue 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 MayMICH: 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 MayThx 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 MayHola Michel, me parece que te confundes, no recuerdo haber hecho ningún tutorial sobre animación.
Michel
Posted at 09:42h, 09 May[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 MayActualizació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 MayHola, 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 Julyhola 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 Julysimplemente espectacular!!
Davo
Posted at 13:31h, 30 JulyMuy 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 AugustI 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 AugustHello Francisco, its a problem with the .htaccess file of my server, Im working on it.
Manuel B. #
Posted at 01:52h, 31 AugustHola 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 SeptemberMMm 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 SeptemberHola 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 Octobersergio 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 OctoberThanks 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 OctoberSergio, 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 DecemberGracias 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 DecemberVery nice monkey!!!
chepe
Posted at 02:15h, 08 Februaryhey nadie habla español
Sergio Ordonez
Posted at 06:48h, 08 FebruaryPara eso está la versión en español: http://www.sosnewbie.com/es
MAIQ ZUÑIGA
Posted at 01:19h, 15 MarchTE FELICITO ESTAN MUY BIEN TUS ILUSTRACIONES
Dian
Posted at 14:45h, 17 MarchHi, I think this is the best tut of all your tuts, Sergio, but it´s just my opinion.
Diana
Posted at 14:45h, 19 MarchHola! 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 MarchHola, 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 MarchQuisiera 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 Aprilrespect…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 MayBuenas 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 MayCool monkey!
He’s evil…
nicolas
Posted at 22:11h, 05 JuneHola Flaco. Re groso el tuto. Te felicito. Me ayudó mucho.
Josue
Posted at 23:27h, 02 Julyhola 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 JulySi 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 Julygracias 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 Julyhey 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 JulyHello 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 AugustHola 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 AugustHola 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 Augusteh, no respondiste mi duda :(, no problem, creo q lo solucioné.
Diana
Posted at 21:26h, 03 SeptemberHola, 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 Septemberhola 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 SeptemberHola 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 Septembergracias 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[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 SeptemberMe 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 SeptemberSergio, 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 SeptemberMuito bom seus trabalhos ,sou grato por este tutorial! já adicionei aos meus favoritos!
Abraço!
wonder
Posted at 10:11h, 04 OctoberCool stuff! It is a really useful tutorial, thanks a lot!
Sergio Ordonez
Posted at 13:31h, 06 OctoberI used only Illustrator, look for the transparency palette, there is the blend modes.
Big Rich
Posted at 13:06h, 06 OctoberHow 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 OctoberWow!!!!! Did not know that illustrator has this feature. Thanks you!!
arnold
Posted at 22:58h, 27 Octoberwow!! 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“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 Novemberhola 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 NovemberQue 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 DecemberGreat!!!!!!!!! I like it. Thanks so much for the great work.
Diana
Posted at 23:10h, 14 JanuaryHelloo, 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 FebruaryHey 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 AprilNice, are those character design for sale anywhere? or can I get in touch iwth the artist?
Sergio Ordonez
Posted at 23:22h, 03 AprilHi 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 MayHi 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 MayHi 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“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 MayPlease, 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 MayI 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 MayI already explained you the issue, you need to ungroup the shapes and then release the compound path.
eManT
Posted at 15:05h, 14 Mayohhh yes, i’m sorry, it’s here i see that my english suck xD
Thanks for your help !
Lorenz
Posted at 22:52h, 17 AugustHello 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 AugustHi 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 AugustHi 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 AugustSorry Lorenz, I deleted the plugin long time ago. Maybe somebody can help you.
Jkakaroto Honorato
Posted at 02:14h, 14 SeptemberPerfecto!! Maravilhoso!!!
ketsuo
Posted at 16:29h, 29 SeptemberGracias por compartir este tutorial amigo, te sigo en DA y tu blog está muy interesante tb
Saludos!
nicolas
Posted at 23:24h, 11 November[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 NovemberBother 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/52266718@N03/
quisiera, recomendaciones o sugencias, cualquier cosa me lo dices en mi correo [email protected]
Preston Racette
Posted at 05:06h, 21 DecemberHey! Thanks for posting! This is great.
Aviad
Posted at 14:10h, 28 FebruaryNo 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 MarchSorry, 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 MarchExcelente tutorial, muchas gracias!!!
Louis Vuitton Purses 2011
Posted at 03:51h, 12 MayExcellent!
Insane2go2000
Posted at 13:03h, 17 MayAn example inspired by yours being used for a logo
http://www.48hourslogo.com/project.php?id=5421
Jonathan Chafloque
Posted at 18:28h, 05 OctoberHola 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 NovemberHi, 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 DecemberI’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 DecemberAround 10-15 hours of work 🙂
Sergio Ordonez
Posted at 00:00h, 02 DecemberI spend around 10-15 hours per character design.
Pedro Ezequiel Nome Acuerdo
Posted at 09:34h, 04 AugustUna 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!