Tiempo para escribir un tutorial sobre ilustración vectorial. En este post voy a explicar el proceso que seguí a la hora de diseñar por encargo (desde SOSFactory) la mascota en formato vectorial de Twisted Monkey Studios, productora de películas de terror.
Ingredientes:
- Papel y lápiz.
- Escaner.
- Photoshop.
- Illustrator.
- Silhouette (plugin para Illustrator).
- Conceptos básicos de Photoshop e Illustrator.
- Mucha paciencia.
- Opcional: Una tabla digitalizadora.
El Briefing
Lo primero es conocer a nuestro cliente. Para eso tenemos una herramienta que se llama Briefing, es una serie de preguntas claves prediseñadas para conocer la compañía y sus necesidades. Lo podemos hacer de una manera más o menos formal.
En este caso vamos a diseñar un personaje para una productora de películas de terror, querían como mascota un mono, pero no el típico mono simpático. Se nos ocurrió la idea de vestirlo con una camisa de fuerza y con un cuchillo goteando sangre… mucha sangre. Tenía que parecer simpático pero a la vez intrigante.
Dibujo tradicional y retoques en Photoshop
Siempre aconsejo empezar cualquier diseño al modo tradicional, con papel y lápiz, especialmente si es ilustración. Por muy buena que sea tu tabla Wacom nunca llegará a la precisión del lápiz tradicional.
Dibujo tradicional. La imagen de la izquierda es mi dibujo a lápiz, empiezo a abocetar con un lápiz de color rojo, cuando estoy contento con los resultados remarco las lineas con un lápiz de grafito. Como ves, es más un boceto que un dibujo acabado, por desgracia mi calidad de linea no es tan buena como la de los profesionales del cómic, pero no hay que preocuparse ya que para eso está el ordenador. Lo importante es tener los conceptos bien asimilados, y aplicarlos al personaje que queremos diseñar.
Dibujo tradicional a la izquierda, retoques con Photoshop a la derecha.
Retoques en Photoshop. Una vez consigo algo decente como punto de partida lo escaneo desde Photoshop y empiezo a mover cosas, jugar con las expresiones de la cara, la pose… hasta que consigo algo que me agrada (image de la derecha).
Fíjate como va cambiando el personaje a lo largo del proceso, cuando no tienes muy claro lo que quieres hacer lo mejor es empezar con cualquier cosa e ir retocando hasta que consigues lo que buscas… nunca te deprimas si no sale a la primero, es lo más normal.
Evolución de la personalidad de nuestro personaje
Limpieza y entintado en Photoshop
Limpieza. Ya tengo la base del personaje, ahora con mi tabla digitalizadora empiezo a limpiar el boceto desde Photoshop, asignando diferentes pesos de linea (explicación más abajo).
Limpieza con tabla digitalizadora a la derecha, entintado con Photoshop a la izquierda
Entintado. El siguiente paso es entintar el personaje (imagen de la derecha), lo primero que hay que decir es que es muy importante usar alta resolución (5000×5000 pixels) por varias razones:
- Es más comodo.
- Si después reducimos el diseño, los pequeños fallitos no se verán.
- Si el trabajo es el mismo, hagámoslo grande, así podremos imprimir.
- Al vectorizarlo conseguiremos lineas más precisas.
Tenemos 3 tipos de lineas (fíjate en el entintado final más abajo):
- Contorno: son las lineas más gruesas de todo el conjunto.
- Delimitadoras de areas: ej. el límite inferior de la camisa, grosor medio.
- Lineas internas: la linea que marca la mejilla, son las más finas.
- Lineas de trancisión: empiezan como contorno y se menten en el interior del diseño. La hacemos gruesa y la vamos afinando según se adentra, por ejemplo la linea de la barbilla.
Que no debemos hacer:
- Sombrear con lineas: sólo conseguimos ensuciar el diseño.
- Lineas extremadamente gruesas y sin variaciones de grosor.
- Lineas internas demasiado largas: estas lineas son para marcar volúmenes, tienes que hacerlo de forma sutil, es sólo una guía para cuando colorees.
- Lineas rectas: si te fijas todas las lineas están curvadas ligeramente.
- Pequeñas areas: intenta que tus volúmenes sean lo más grandes posible, si no a la hora de colorear no tienes espacio y se quedará plano.
Entintado final, es muy importante conseguir modular las lineas correctamente.
Para conseguir este entintado final tenemos varias opciones:
- Si eres un profesional del dibujo lo mejor es usar tus lineas a lápiz, simplemente las limpiamos en Photoshop.VIDEOTUTORIAL: entintado digital en Photoshop 1
- Si como en mi caso, lo tuyo no es la limpieza, entintamos el boceto con las herramientas vectoriales de Photoshop. VIDEOTUTORIAL: entintado digital en Photoshop 2,si no estás familiarizado con la herramienta pluma mejor que eches un ojo a este tutorial sobre dibujo digital básico con Photoshop.
Vectorizado con Silhouette desde Illustrator
Lo primero que necesitas es el plug-ing Silhouette para Illustrator, puedes descargárte Silhouette aquí después descomprímelo con Winzip y coloca el archivo "SilhouettePlugIn.aip" en la carpeta de plugins de Illustrator. Ya dentro del programa, sólo tienes que hacer visible la paleta de Silhouette ("Ventana> Show Silhouette tool settings").
Segundo, desde Photoshop guarda tu diseño a formato TIFF (sin transparencia) y ábrelo en Illustrator.
Tercero bajarte el VIDEOTUTORIAL donde explico como vectorizar con Silhouette. Aquí os dejo una captura de los parámetros que yo uso:
Ni que decir que ahora que tenemos nuestro diseño vectorizado podemos editarlo hasta conseguir que las lineas queden perfectas. Normalmente añado un contorno desde Illustrator para dar una sensación de equilibrio al diseño.
*** Nota: cuando añades un contorno en Photoshop te redondea las esquinas, no respeta los detalles angulosos mientras que Illustrator sí que lo hace. Dependiendo de la sensación que imprimir a tu diseño, te conviene usar uno u otro.
*** Nota 2: supongo que te estarás preguntado ¿por qué he usado Photoshop para entintar con mapas de bits para después vectorizarlo?, ¿no es mejor usar Illustrator directamente? es una elección personal, estas son mis razones:
- Para mí Photoshop es más cómodo y rápido, Illustrator me desespera.
- Si tienes una tabla digitalizadora al usar mapas de bits puedes pintar o borrar trazos a mano, lo que te ahorra mucho tiempo.
Asignando colores planos, degradados y volúmenes
Colores Planos. Pues ya tenemos nuestro entintado vectorial, si te fijas las opciones de Silhouette están escogidas para que nos salga una silueta negra, y un montón de trozos blancos superpuestos. Ahora sólo tenemos que rellenar cada area blanca con el color que nos guste, yo normalmente uso tonos medios, ni muy oscuros ni muy claros. Aquí os dejo la paleta de colores que he usado.
Colores planos
Añadiendo degradados. Tenemos que crear degradades de al menos 2 colores diferenciables, uno oscuro y otro claro, pero no muy extremos porque luego añadiremos luces y sombras. Por ahora no prestes mucha atención a la dirección del degradado, sólo estamos escogiendo las tonalidades de color, después los orientaremos para dar cierta coherencia a la iluminación.
Degradados de color
Cortando las areas. Como habrás comprobado las areas de los degradados son demasiado amplias para conseguir buenos efectos de iluminación. Así que tenemos que ir cortando estas grandes areas en volúmenes más pequeños (fíjate en la imagen de abajo).
Después vamos retocando los degradados para intentar conseguir una iluminación coherente, hay una regla básica muy importante: al lado de un color oscuro siempre va un color claro.
He preparado un pequeño VIDEOTUTORIAL para mostrar como se hace, descargatelo aquí.
Degradados de color con las areas cortadas en volúmenes más pequeños
Añadiendo sombras y luces
Sombras. Crearemos una capa y la ponemos en modo Multiplicar, así tenemos agrupados todos los vectores de sombra. IMPORTANTE: si haces las sombras en modo normal tendrás que ajustar los vectores muchísimo para no tapar las lineas negras, por eso las hacemos en modo Multiplicar, este modo se hace transparente por encima del color negro.
Simplemente cogemos un color similar (a veces también uso degradados) al de fondo y vamos haciendo pequeños vectores para marcar las areas en sombras.
Animación para que aprecies las sombras.
Luces. En este caso no es imprescindible usar diferentes modos de capa, aunque siempre puedes echar mano del modo Trama para conseguir tonos más claros. Observa la animación de abajo, primero hago una iluminación suave y después añado unos toques fuertes de luz para reforzar los contornos.
Toques finales
Pues ya sólo nos quedaría añadir sangre en cantidades industriales. Para eso me hice con los vectores gratis de Gomedia (si los usais ponedles un enlace en vuestra página, hay que ser agradecidos) La sangre está añadida en una capa por encima de todas pero por debajo del ojo derecho, en modo Multiplicar.
Observa que en el mismo post enlazo a otros tutoriales o artículos que cubren diferentes fases del proceso, aun así, soy consciente de que en un tutorial tan complejo se me habrán quedado mil cosas sin explicar, si tienes alguna duda simplemente coméntala, intentaré responderla tan pronto como sea posible e iré añadiéndola al tutorial.
26 Septiembre 2007 at 11:23
GUAU! son increibles realmente me parecen facinantes!
27 Septiembre 2007 at 2:34
un tutorial realmente bueno.. el resultado es genial. mil gracias
27 Septiembre 2007 at 9:34
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 Septiembre 2007 at 10:59
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 Septiembre 2007 at 11:35
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 Septiembre 2007 at 18:16
Deberian encargarme todo, se aceptan recomendaciones
1 Octubre 2007 at 16:38
Muy BuenO!!!!
7 Octubre 2007 at 10:41
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 Octubre 2007 at 0:12
muy apero eres un verdugo sigue en eso ,gracias por enseñar tu experiencia
17 Octubre 2007 at 17:14
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 Octubre 2007 at 18:00
You are welcome
25 Octubre 2007 at 21:13
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 Octubre 2007 at 8:53
Nice tut thnx alot saw this one on http://www.mr-tut.com
7 Noviembre 2007 at 13:43
Sergio sos mi idolo! muchas gracias por el tuto…
19 Noviembre 2007 at 6:42
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 Noviembre 2007 at 7:52
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 Noviembre 2007 at 9:23
awesome! thank you so much
12 Diciembre 2007 at 11:12
excelente son buenisimos tus tutoriales, si que me ha sido deayuda tu pagina muchas gracias.
3 Enero 2008 at 22:50
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 Enero 2008 at 9:28
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 Enero 2008 at 19:00
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 Enero 2008 at 0:49
You are welcome Didier
9 Enero 2008 at 15:57
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 Enero 2008 at 19:56
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 Enero 2008 at 16:02
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 Enero 2008 at 16:08
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 Enero 2008 at 0:36
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 Enero 2008 at 14:22
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 Enero 2008 at 17:38
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 Enero 2008 at 4:55
good job!
my question: how long does it take someone in the illustration-business to create such a illustration?
24 Enero 2008 at 12:32
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 Enero 2008 at 16:00
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 Enero 2008 at 19:17
te falta mas explicacion porque cuando uno ta empezando hay cosas que no la domina pero si esta calidad
29 Enero 2008 at 6:08
Hola Dato, siempre faltará explicación, es imposible hacer un tutorial al detalle de algo tan complejo.
Saludos
29 Enero 2008 at 15:22
Magnifique, très beau travail!!!!
Very nice, Good job!!!
5 Febrero 2008 at 6:41
Gracias buen efecto eres muy buen dibujante despues de todo Saludos desde Venezuela. DTB
5 Febrero 2008 at 15:38
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 Febrero 2008 at 20:50
Hola Johny, muchas gracias por compartir esa otra manera de hacerlo.
Ahí queda, estoy seguro que a alguien le servirá de ayuda.
Saludos.
8 Febrero 2008 at 10:21
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 Febrero 2008 at 9:49
altisimo trabajo el tuyo, acabo de encontrar tu web bien ahi
16 Febrero 2008 at 16:57
excellente tutorial muy buenos aportes
18 Febrero 2008 at 13:49
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 Febrero 2008 at 17:22
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 Febrero 2008 at 12:00
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 Febrero 2008 at 18:13
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 Febrero 2008 at 10:40
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 Febrero 2008 at 21:43
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 Febrero 2008 at 7:44
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 Febrero 2008 at 11:33
eres muy modesto amigo, la verdad ilustras muy bien, me encanto el trabajo realizado, excelente.
24 Febrero 2008 at 12:31
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 Febrero 2008 at 17:00
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 Febrero 2008 at 17:20
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 Marzo 2008 at 7:38
espectacular!! te haz pasado …gracias por compartir tus conocimientos.
2 Abril 2008 at 21:45
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 Abril 2008 at 12:15
Excellent illustrator tutorial!
30 Abril 2008 at 10:30
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 Abril 2008 at 11:12
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 Mayo 2008 at 2:06
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 Mayo 2008 at 16:25
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 Mayo 2008 at 17:30
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 Mayo 2008 at 4:12
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 Mayo 2008 at 17:32
Thx 4 the tut!
In my case I had to check the “Include white” box to be able to color the white areas.
9 Mayo 2008 at 9:42
[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 Mayo 2008 at 11:42
Hola Michel, me parece que te confundes, no recuerdo haber hecho ningún tutorial sobre animación.
21 Mayo 2008 at 8:31
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 Mayo 2008 at 0:04
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 Julio 2008 at 13:51
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 Julio 2008 at 11:20
simplemente espectacular!!
30 Julio 2008 at 13:31
Muy buen tutorial, gracias por las herramientas que compartes y los tips, me será de mucha ayuda. í«xito en todo
11 Agosto 2008 at 12:57
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 Agosto 2008 at 19:58
Hello Francisco, its a problem with the .htaccess file of my server, Im working on it.
31 Agosto 2008 at 1:52
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 Septiembre 2008 at 21:04
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 Septiembre 2008 at 13:38
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 Octubre 2008 at 12:10
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 Octubre 2008 at 14:45
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 Octubre 2008 at 14:54
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 Diciembre 2008 at 16:24
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 Diciembre 2008 at 20:19
Very nice monkey!!!
8 Febrero 2009 at 2:15
hey nadie habla español
8 Febrero 2009 at 6:48
Para eso está la versión en español: http://www.sosnewbie.com/es
15 Marzo 2009 at 1:19
TE FELICITO ESTAN MUY BIEN TUS ILUSTRACIONES
17 Marzo 2009 at 14:45
Hi, I think this is the best tut of all your tuts, Sergio, but it´s just my opinion.
19 Marzo 2009 at 14:45
Hola! Deberías poner más tutoriales o al menos artículos sobre Illustrator, aunque trabajas más con Photoshop. Saludos.
19 Marzo 2009 at 15:23
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 Marzo 2009 at 0:21
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 Abril 2009 at 16:20
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 Mayo 2009 at 15:29
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 Mayo 2009 at 17:50
Cool monkey!
He’s evil…
5 Junio 2009 at 22:11
Hola Flaco. Re groso el tuto. Te felicito. Me ayudó mucho.
2 Julio 2009 at 23:27
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 Julio 2009 at 16:54
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 Julio 2009 at 20:37
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 Julio 2009 at 4:27
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 Julio 2009 at 15:58
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 Agosto 2009 at 22:19
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 Agosto 2009 at 6:15
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 Agosto 2009 at 20:23
eh, no respondiste mi duda
, no problem, creo q lo solucioné.
3 Septiembre 2009 at 21:26
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 Septiembre 2009 at 16:56
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 Septiembre 2009 at 17:05
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 Septiembre 2009 at 17:17
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 Septiembre 2009 at 17:42
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.
8 Septiembre 2009 at 19:51
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 Septiembre 2009 at 14:57
Sergio, creo que no lo había preguntado:P pero ¿por qué trabajaste el personaje de forma vectorial? era para ser impreso?
21 Septiembre 2009 at 11:26
Muito bom seus trabalhos ,sou grato por este tutorial! já adicionei aos meus favoritos!
Abraço!
4 Octubre 2009 at 10:11
Cool stuff! It is a really useful tutorial, thanks a lot!
6 Octubre 2009 at 13:06
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 Octubre 2009 at 13:31
I used only Illustrator, look for the transparency palette, there is the blend modes.
6 Octubre 2009 at 21:46
Wow!!!!! Did not know that illustrator has this feature. Thanks you!!
27 Octubre 2009 at 22:58
wow!! amigo realmente me inspira saber de personas talentosas y tu web es muy interesante, te felicito y sigue asi amigo
4 Noviembre 2009 at 7:18
“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 Noviembre 2009 at 19:34
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 Noviembre 2009 at 1:05
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 Diciembre 2009 at 8:18
Great!!!!!!!!! I like it. Thanks so much for the great work.
14 Enero 2010 at 23:10
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.
10 Febrero 2010 at 4:12
Hey there, felicitaciones, creo q eres el mejor ilustrador vectorial de mascotas q he visto…de verdad q bien q existan artistas asi.