September 26th, 2007

Ilustracion vectorial Illustrator

por Sergio Ordonez at 9:38 am en Diseño Mascotas, Photoshop, Video tutoriales, Dibujo, Illustrator

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.

Twisted Monkey diseño final
www.twistedmonkeystudios.com

Ingredientes:

  1. Papel y lápiz.
  2. Escaner.
  3. Photoshop.
  4. Illustrator.
  5. Silhouette (plugin para Illustrator).
  6. Conceptos básicos de Photoshop e Illustrator.
  7. Mucha paciencia.
  8. 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.

Diseño mascota boceto
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.

Personaje evolucion personalidad
Evolución de la personalidad de nuestro personaje :P

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

Entintado digital
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:

  1. Es más comodo.
  2. Si después reducimos el diseño, los pequeños fallitos no se verán.
  3. Si el trabajo es el mismo, hagámoslo grande, así podremos imprimir.
  4. Al vectorizarlo conseguiremos lineas más precisas.

Tenemos 3 tipos de lineas (fíjate en el entintado final más abajo):

  1. Contorno: son las lineas más gruesas de todo el conjunto.
  2. Delimitadoras de areas: ej. el límite inferior de la camisa, grosor medio.
  3. Lineas internas: la linea que marca la mejilla, son las más finas.
  4. 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:

  1. Sombrear con lineas: sólo conseguimos ensuciar el diseño.
  2. Lineas extremadamente gruesas y sin variaciones de grosor.
  3. 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.
  4. Lineas rectas: si te fijas todas las lineas están curvadas ligeramente.
  5. 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
Entintado final, es muy importante conseguir modular las lineas correctamente.

Para conseguir este entintado final tenemos varias opciones:

  1. 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
  2. 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:

Parametros vectorizacion

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:

  1. Para mí Photoshop es más cómodo y rápido, Illustrator me desespera.
  2. 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
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
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 cortes
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.

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

Luces illustrator

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.

Twisted Monkey diseño final
www.twistedmonkeystudios.com


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.

Post relacionados:

  1. Vectoriza tus imagenes con Silhouette
  2. Dibujo en Photoshop (Recopilatorio)
  3. Previsualiza archivos de Illustrator

66 comentarios »

GUAU! son increibles realmente me parecen facinantes!

Comments de Wydblog — September 26, 2007 @ 11:23 am

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

Comments de SaG — September 27, 2007 @ 2: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

Comments de Kristian — September 27, 2007 @ 9:34 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.

Comments de Sergio Ordonez — September 27, 2007 @ 10:59 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..

Comments de Jaques — September 29, 2007 @ 11:35 am

Deberian encargarme todo, se aceptan recomendaciones :P

Comments de Sergio Ordonez — September 29, 2007 @ 6:16 pm

[…] Link: Ilustracion vectorial Illustrator […]

Pingback de Ilustración vectorial a partir de un boceto at Tutoblog: weblog de tutoriales — October 1, 2007 @ 10:56 am

[…] “sosnewbie” me encuentro con un excelente tutorial, que explica como vectorizar […]

Pingback de Tutorial de vectorizacion | MJG Adrian — October 1, 2007 @ 3:36 pm

Muy BuenO!!!!

Comments de Josmell — October 1, 2007 @ 4:38 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

Comments de henry — October 25, 2007 @ 9:13 pm

Sergio sos mi idolo! muchas gracias por el tuto…

Comments de Lucas (Wydblog) — November 7, 2007 @ 1:43 pm

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

Comments de johny — November 19, 2007 @ 6:42 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.

Comments de Sergio Ordonez — November 19, 2007 @ 7:52 am

[…] 62 Killer Photoshop tricks Sergio Ordóñez é un diseñador español que mostra como facer unha Ilustracion vectorial con Illustrator paso a paso. Creating-a-stunning-digital-smoke-effect Abrir y modificar un gif animado con […]

Pingback de phts…op!!! « phohp — December 11, 2007 @ 3:12 pm

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

Comments de Marcos — December 12, 2007 @ 11:12 am

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.

Comments de Diana — January 9, 2008 @ 3:57 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.

Comments de Sergio Ordonez — January 9, 2008 @ 7:56 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.

Comments de Diana — January 14, 2008 @ 4:08 pm

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.

Comments de Sergio Ordonez — January 15, 2008 @ 12:36 am

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

Comments de Diana — January 18, 2008 @ 2:22 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…

Comments de Sergio Ordonez — January 18, 2008 @ 5:38 pm

[…] Link a Ilustración vectorial Illustrator […]

Pingback de Xcitingart » Tutorial Ilustración vectorial Illustrator — January 23, 2008 @ 7:03 am

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.

Comments de Diana — January 25, 2008 @ 4:00 pm

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

Comments de dato — January 28, 2008 @ 7:17 pm

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

Saludos

Comments de Sergio Ordonez — January 29, 2008 @ 6:08 am

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

Comments de Sail — February 5, 2008 @ 6:41 am

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

Comments de johny — February 5, 2008 @ 3:38 pm

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

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

Saludos.

Comments de Sergio Ordonez — February 5, 2008 @ 8:50 pm

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

Comments de xnideax — February 9, 2008 @ 9:49 am

excellente tutorial muy buenos aportes

Comments de freestick — February 16, 2008 @ 4:57 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

Comments de Diego vz — February 18, 2008 @ 1:49 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.

Comments de Sergio Ordonez — February 18, 2008 @ 5:22 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

Comments de Ivan — February 20, 2008 @ 12:00 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.

Comments de Sergio Ordonez — February 20, 2008 @ 6:13 pm

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.

Comments de Ivan — February 24, 2008 @ 7:44 am

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

Comments de Fernando — February 24, 2008 @ 11:33 am

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

Comments de Sergio Ordonez — February 24, 2008 @ 12:31 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!

Comments de Rodrigo — February 28, 2008 @ 5:00 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.

Comments de Sergio Ordonez — February 28, 2008 @ 5:20 pm

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

:)

Comments de akami — March 5, 2008 @ 7:38 am

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

Comments de Checo Espinosa — April 2, 2008 @ 9:45 pm

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

Comments de Michel — April 30, 2008 @ 10:30 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.

Comments de Sergio Ordonez — April 30, 2008 @ 11:12 am

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

Comments de MICH — May 3, 2008 @ 4:25 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

Comments de Jose A. — May 3, 2008 @ 5:30 pm

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

Comments de Sergio Ordonez — May 4, 2008 @ 4:12 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!!!

Comments de Michel — May 9, 2008 @ 9:42 am

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

Comments de Sergio Ordonez — May 9, 2008 @ 11:42 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…

Comments de alejandro — May 21, 2008 @ 8:31 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!!!

Comments de jóga — May 27, 2008 @ 12:04 am

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

Comments de Alejo López Ospina — July 16, 2008 @ 1:51 pm

simplemente espectacular!!

Comments de Henry — July 30, 2008 @ 11:20 am

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

Comments de Davo — July 30, 2008 @ 1:31 pm

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…

Comments de Manuel B. # — August 31, 2008 @ 1:52 am

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.

Comments de Michael — September 12, 2008 @ 9:04 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.

Comments de Sergio Ordonez — September 14, 2008 @ 1:38 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.

Comments de gee!!! — October 21, 2008 @ 12:10 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.

Comments de Nelson — December 29, 2008 @ 4:24 pm

TE FELICITO ESTAN MUY BIEN TUS ILUSTRACIONES

Comments de MAIQ ZUÑIGA — March 15, 2009 @ 1:19 am

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

Comments de Diana — March 19, 2009 @ 2:45 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.

Comments de Diana — March 19, 2009 @ 3:23 pm

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.

Comments de Diana — March 22, 2009 @ 12:21 am

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

Comments de JMChakoN — May 10, 2009 @ 3:29 pm

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

Comments de nicolas — June 5, 2009 @ 10:11 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?

Comments de Josue — July 2, 2009 @ 11:27 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.

Comments de Sergio Ordonez — July 3, 2009 @ 4:54 pm

RSS Sindicación de los comentarios de este post. TrackBack URI

Haz un comentario

XHTML: Etiquetas permitidas:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>