It’s time to write a tutorial on vector illustration. In this post I’ll explain the process I followed at the time of designing by order (from SOSFactory) the mascot in vector format for Twisted Monkey Studios, producers of horror films.
Ingredients :
- Paper and pencil.
- Scanner.
- Photoshop.
- Illustrator.
- Silhouette (a plug-in for Illustrator).
- Basic concepts of Photoshop and Illustrator.
- A lot of patience.
- Optional : Digitizer tablet.
Briefing
The first thing to do is to know our client. This is why we have a tool called Briefing, which 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, 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.
Traditional Drawing. The image at the bottom left is my pencil sketch, I commence drawing with a red pencil, and when I’m satisfied with the results I remark the lines with a graphite pencil (bottom right). 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, but fret not about that because this is why we have a computer! The important thing is to have the concepts well assimilated, and to apply them to the character we want to design.
Traditional drawing on the left, photoshop retouches on the right.
Photoshop Retouches. 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).
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.
Evolution of the personality of our character 
Cleaning and Inking in Photoshop
Cleaning. I already have the base for the character, now with my digitizer tablet I start to clean the sketch in Photoshop, assigning different line weights as I go on (explanation below).
Cleaning with the digitizer tablet on the left, Inking with Photoshop on the right
Inking. The next step is to ink our character (above right image), the first thing is that it’s critical to use a very high resolution (5000×5000 pixels) for several reasons :
- It’s more comfortable to work with.
- If later on in the process we decide to reduce the design, smaller mistakes wont be visible.
- If the work is the same, preferably let’s do it at a higher resolution so it is print ready.
- While vectorizing, the design would acquire accurate lines.
We have 3 types of lines (take a look to the final inking below) :
- Contour : the bigger lines.
- Area delimitators : for instance, the inferior limit of the jacket, medium thickness lines.
- Internal lines : the lines that mark the cheek, they are the most thin ones.
- 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 progresses, as noticed on the line in the chin.
What we shouldn’t do :
- Make shadows with lines: it would merely make the design messy.
- Create extremely thick lines without any variation in thickness.
- Have internal lines too long: 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.
- Draw straight lines : if you look closely, all the lines are slightly curved.
- Have small areas: ensure that your volumes are as big as possible, otherwise when the time comes to color you wont have sufficient space and it will end up staying flat.
Final inking, it’s very important to modulate the lines correctly.
To get the final inking we have various options:
- If you’re a drawing professional the best thing to do is to use your pencil lines, then simply clean them up in Photoshop. VIDEO TUTORIAL: Photoshop digital inking 1
- If like me, your hand-drawn lines are not very good, we ink the sketch with Photoshop’s vector tools. VIDEO TUTORIAL:Photoshop digital inking 2, if you’re not well versed with the pen tool it would be advisable to take a loot at this tutorial on Photoshop basic digital drawing.
Vectorizing with Silhouette for Illustrator
The first thing you need is the plug-in itself, Silhouette for Illustrator, you can download Silhouette here. On successfully downloading, decompress it with Winzip and put the file "SilhouettePlugIn.aip" in the plugins folder of Illustrator. Once inside the program you only need to make the silhouette palette visible (Window > Show Shilouette tool settings).
Then save your design from within Photoshop to the TIFF format (without transparency) and open it in Illustrator.
Then download the VIDEO TUTORIAL where I explain how to vectorize with Silhouette. Here is a screenshot of the parameters I use :
Now that we have our design vectorized we can edit it until the lines are perfect. I normally add a contour from Illustrator to give a sensation of balance to the design.
*** Note: when you add a contour though Photoshop it ends up rounding the borders, this doesn’t respect the angular details while Illustrator does. Depending on the sensation you wish to give your design you can use one or the other.
*** Note 2: I’m sure by now you’d be wondering … why have I used Photoshop to ink the bitmaps only to vectorize it later? Wouldn’t it have been better to use Illustrator from the get go? Thruthfully, it’s a personal choice, and here are the reasons for mine :
- I personally find inking in Photoshop more comfortable and quick, Illustrator exhausts me.
- If you have a digitizer tablet when using bitmaps you can paint or erase the lines by hand, which saves you a lot of time in the long run.
Asigning plain colors, gradient and volumes
Plain colors. Now that we have our vector inking, if you take a look the options in Silhouette, they are chosen to give us a black silhouette, and a bunch of white pieces on top. 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. Here’s the color palette I’ve used.
Plain colors
Adding gradients. We have to create gradients of at least two differentiable colors, one dark and one light, 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
Cutting the areas. As you have seen the gradient areas are too ample to get good illumination effects. So we have to cut these big areas in to smaller volumes (take a look to the image below).
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.
I’ve prepared a small VIDEO TUTORIAL to show you how it’s done, download it here.
Gradient colors with the areas cut in to smaller volumes
Adding shadows and lights
Shadows. 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.
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.
Animation so you appreciate the shadows.
Lights. In this case it’s not essential to use different layer modes, although you can always use the < strong >Screen blend mode to get lighter tones. Observe the animation below, first I make a soft illumination and later 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.
Observe that in the post I link to other tutorials or artices that cover the different phases of the process. 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.
26 September 2007 at 11:23 AM
GUAU! son increibles realmente me parecen facinantes!
27 September 2007 at 2:34 AM
un tutorial realmente bueno.. el resultado es genial. mil gracias
27 September 2007 at 9:34 AM
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
27 September 2007 at 10:59 AM
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.
29 September 2007 at 11:35 AM
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..
29 September 2007 at 6:16 PM
Deberian encargarme todo, se aceptan recomendaciones
1 October 2007 at 4:38 PM
Muy BuenO!!!!
7 October 2007 at 10:41 AM
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.
9 October 2007 at 12:12 AM
muy apero eres un verdugo sigue en eso ,gracias por enseñar tu experiencia
17 October 2007 at 5:14 PM
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!
17 October 2007 at 6:00 PM
You are welcome
25 October 2007 at 9:13 PM
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
30 October 2007 at 8:53 AM
Nice tut thnx alot saw this one on http://www.mr-tut.com
7 November 2007 at 1:43 PM
Sergio sos mi idolo! muchas gracias por el tuto…
19 November 2007 at 6:42 AM
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?.
19 November 2007 at 7:52 AM
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.
24 November 2007 at 9:23 AM
awesome! thank you so much
12 December 2007 at 11:12 AM
excelente son buenisimos tus tutoriales, si que me ha sido deayuda tu pagina muchas gracias.
3 January 2008 at 10:50 PM
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:
spearrow35@hotmail.com
PS.- Sorry about my bad english !!!
4 January 2008 at 9:28 AM
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.
5 January 2008 at 7:00 PM
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!!!
6 January 2008 at 12:49 AM
You are welcome Didier
9 January 2008 at 3:57 PM
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.
9 January 2008 at 7:56 PM
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.
10 January 2008 at 4:02 PM
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
14 January 2008 at 4:08 PM
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.
15 January 2008 at 12:36 AM
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.
18 January 2008 at 2:22 PM
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
18 January 2008 at 5:38 PM
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…
24 January 2008 at 4:55 AM
good job!
my question: how long does it take someone in the illustration-business to create such a illustration?
24 January 2008 at 12:32 PM
Hello, It depends mainly on the revisions, if the client doesnt ask too much corrections I can design a character in 6-10 hours.
25 January 2008 at 4:00 PM
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.
28 January 2008 at 7:17 PM
te falta mas explicacion porque cuando uno ta empezando hay cosas que no la domina pero si esta calidad
29 January 2008 at 6:08 AM
Hola Dato, siempre faltará explicación, es imposible hacer un tutorial al detalle de algo tan complejo.
Saludos
29 January 2008 at 3:22 PM
Magnifique, très beau travail!!!!
Very nice, Good job!!!
5 February 2008 at 6:41 AM
Gracias buen efecto eres muy buen dibujante despues de todo Saludos desde Venezuela. DTB
5 February 2008 at 3:38 PM
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
5 February 2008 at 8:50 PM
Hola Johny, muchas gracias por compartir esa otra manera de hacerlo.
Ahí queda, estoy seguro que a alguien le servirá de ayuda.
Saludos.
8 February 2008 at 10:21 AM
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.
9 February 2008 at 9:49 AM
altisimo trabajo el tuyo, acabo de encontrar tu web bien ahi
16 February 2008 at 4:57 PM
excellente tutorial muy buenos aportes
18 February 2008 at 1:49 PM
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
18 February 2008 at 5:22 PM
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.
20 February 2008 at 12:00 PM
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
20 February 2008 at 6:13 PM
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.
22 February 2008 at 10:40 AM
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.
22 February 2008 at 9:43 PM
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.
24 February 2008 at 7:44 AM
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.
24 February 2008 at 11:33 AM
eres muy modesto amigo, la verdad ilustras muy bien, me encanto el trabajo realizado, excelente.
24 February 2008 at 12:31 PM
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
28 February 2008 at 5:00 PM
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!
28 February 2008 at 5:20 PM
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.
5 March 2008 at 7:38 AM
espectacular!! te haz pasado …gracias por compartir tus conocimientos.
2 April 2008 at 9:45 PM
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!!!
26 April 2008 at 12:15 PM
Excellent illustrator tutorial!
30 April 2008 at 10:30 AM
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!!!
30 April 2008 at 11:12 AM
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.
1 May 2008 at 2:06 AM
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
3 May 2008 at 4:25 PM
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!!
3 May 2008 at 5:30 PM
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
4 May 2008 at 4:12 AM
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
5 May 2008 at 5:32 PM
Thx 4 the tut!
In my case I had to check the “Include white” box to be able to color the white areas.
9 May 2008 at 9:42 AM
[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!!!
9 May 2008 at 11:42 AM
Hola Michel, me parece que te confundes, no recuerdo haber hecho ningún tutorial sobre animación.
21 May 2008 at 8:31 AM
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…
27 May 2008 at 12:04 AM
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!!!
16 July 2008 at 1:51 PM
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
30 July 2008 at 11:20 AM
simplemente espectacular!!
30 July 2008 at 1:31 PM
Muy buen tutorial, gracias por las herramientas que compartes y los tips, me será de mucha ayuda. í«xito en todo
11 August 2008 at 12:57 PM
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.
11 August 2008 at 7:58 PM
Hello Francisco, its a problem with the .htaccess file of my server, Im working on it.
31 August 2008 at 1:52 AM
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…
12 September 2008 at 9:04 PM
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 gansterrap@hotmail.com les agradezco.
14 September 2008 at 1:38 PM
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.
21 October 2008 at 12:10 PM
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.
27 October 2008 at 2:45 PM
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.
27 October 2008 at 2:54 PM
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.
29 December 2008 at 4:24 PM
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.
30 December 2008 at 8:19 PM
Very nice monkey!!!
8 February 2009 at 2:15 AM
hey nadie habla español
8 February 2009 at 6:48 AM
Para eso está la versión en español: http://www.sosnewbie.com/es
15 March 2009 at 1:19 AM
TE FELICITO ESTAN MUY BIEN TUS ILUSTRACIONES
17 March 2009 at 2:45 PM
Hi, I think this is the best tut of all your tuts, Sergio, but it´s just my opinion.
19 March 2009 at 2:45 PM
Hola! Deberías poner más tutoriales o al menos artículos sobre Illustrator, aunque trabajas más con Photoshop. Saludos.
19 March 2009 at 3:23 PM
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.
22 March 2009 at 12:21 AM
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.
17 April 2009 at 4:20 PM
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!
10 May 2009 at 3:29 PM
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!!!
12 May 2009 at 5:50 PM
Cool monkey!
He’s evil…
5 June 2009 at 10:11 PM
Hola Flaco. Re groso el tuto. Te felicito. Me ayudó mucho.
2 July 2009 at 11:27 PM
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?
3 July 2009 at 4:54 PM
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.
3 July 2009 at 8:37 PM
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
13 July 2009 at 4:27 AM
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.
13 July 2009 at 3:58 PM
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.
5 August 2009 at 10:19 PM
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.
6 August 2009 at 6:15 AM
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.
9 August 2009 at 8:23 PM
eh, no respondiste mi duda
, no problem, creo q lo solucioné.
3 September 2009 at 9:26 PM
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.
8 September 2009 at 4:56 PM
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
8 September 2009 at 5:05 PM
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.
8 September 2009 at 5:17 PM
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
8 September 2009 at 5:42 PM
Hello Luis, I´m sorry I don´t work on spec, thanks a lot for the offering anyway.
8 September 2009 at 7:51 PM
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ú
12 September 2009 at 2:57 PM
Sergio, creo que no lo había preguntado:P pero ¿por qué trabajaste el personaje de forma vectorial? era para ser impreso?
21 September 2009 at 11:26 AM
Muito bom seus trabalhos ,sou grato por este tutorial! já adicionei aos meus favoritos!
Abraço!
4 October 2009 at 10:11 AM
Cool stuff! It is a really useful tutorial, thanks a lot!
6 October 2009 at 1:06 PM
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.
6 October 2009 at 1:31 PM
I used only Illustrator, look for the transparency palette, there is the blend modes.
6 October 2009 at 9:46 PM
Wow!!!!! Did not know that illustrator has this feature. Thanks you!!
27 October 2009 at 10:58 PM
wow!! amigo realmente me inspira saber de personas talentosas y tu web es muy interesante, te felicito y sigue asi amigo
4 November 2009 at 7:18 AM
“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.
13 November 2009 at 7:34 PM
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
18 November 2009 at 1:05 AM
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”
29 December 2009 at 8:18 AM
Great!!!!!!!!! I like it. Thanks so much for the great work.
14 January 2010 at 11:10 PM
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.