Bebop Cafe

Tomá una taza y relajate

Cómo lograr un look de “dibujo a mano” usando scribble

June7


Tal vez ya lo habrás visto, scribble es uno de los efectos que vienen en Illustrator para rellenar objetos. Nada fuera de lo común, pero con un pequeño giro, el resultado puede llegar a ser interesante.


Hace tiempo, un cliente me pidió ilustraciones para un folleto educativo que sería impreso a una tinta.
Como sólo se trataba de unas pocas ilustraciones me pareció sencillo. Pero resultó que el cliente quería que los dibujos fueran solamente líneas de contorno basados en unas fotografías que él había tomado.

Hice lo que me pidió, pero el resultado me pareció poco menos que aburrido. Así que se me ocurrió darle un poco de vida agregando algo de volumen y sombras sin tener que recurrir al uso de grises y gradientes. Tal vez hice un poco de trampa… Pero al final, al cliente le gustó el resultado.

Así que esto fue lo que hice:

Paso 1

Editá una fotografía usando Photoshop para Desaturar (Desaturate: shift+cmd+U)

Paso 2

Aumentá el contraste al máximo usando los niveles (Levels: cmd+L) Mové los controles hacia el centro. Guardá esta copia.

Paso 4

Ahora abrí un nuevo documento en Illustrator y colocá la imagen usando Place ( File>Place )

Paso 5

Después seleccioná el objeto y convertilo usando Object>Live Trace>Make and Expand

Ya tenés la la foto convertida en vectores.

Todo lo que tenés que hacer ahora es ir a filtros, estilizar y aplicar el scribble Filter>Stylize>Scribble.
Pero antes de hacer eso, copiá el objeto y guardalo por ahí porque lo vas a necesitar después.
Como lo que queremos es dar volumen, vamos a necesitar varios grados de sombras.

Hacé lo siguiente:

Paso 6

Primero, aplicá el scribble al objeto y ajustá la opciones para lograr un trazo más ligero.

Paso 7

La primera opción de variación debe ajustarse a 0
En las opcioines de línea, deben quedar en 1pt para ancho de trazo, 0 curvatura y espaciado 5.

Ahora podés girar y ajustar el control de ángulo para lograr un trazo parejo.

Nota: ojo que el resultado de estos ajustes depende en gran parte del tamaño del objeto. Así que jugá un poco con estos controles hasta que logrés el efecto deseado.

Ahora la parte ruda: para aquellas áreas donde querés un sombreado más pesado, tenés que usar la copia del objeto que habíamos reservado por ahí.

Paso 8

Usá la herramienta del cuchillo (knife tool) para cortar esas áreas que querés oscurecer más.

Paso 9

Ahora podés colocar esos cortes donde correspondan sobre el objeto que ya teníamos con scribble
Aplicales el efecto scribble otra vez, sólo que esta vez girá el control del ángulo hacia el lado contrario para lograr una sombra más pesada.

Podés repetir este paso cuantas veces considerés necesario hasta lograr el efecto.

(Esta parte es opcional) Otra forma de lograr esas sombras adicionales es usando la fotografía original como referencia y calcando las zonas sombreadas con la herramienta de pluma (P) sobre la fotografía en sí, de este modo:

Para hacer eso, sólo tenés que abrir la foto desde el Illustrator: usá File>Open y luego con la herramienta de selección (V) hacé click sobre la imagen, copiala y pegala en tu documento.

Y finalmente, podés darle un último toque agregando algunas líneas de contorno general usando la herramienta de la pluma. (Ésta es opcional también)


Fotografía de: Michael Loccisano

Lo que realmente quería era lograr un efecto que diera el look de un dibujo hecho mano a un objeto en vectores. Al final, se logró una textura que le da un toque interesante a su manera.

También podés experimentar con íconos y fuentes. O tal vez podés hacerla a la inversa, usar trazos blancos sobre un fondo negro.

¿Qué más podría hacerse con este efecto? ¿alguna idea?

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Design Float
  • Meneame
  • StumbleUpon
  • Technorati
  • Twitthis
  • Reddit
Publicado bajo la categoría Diseño, Tutoriales
Un comentario to

“Cómo lograr un look de “dibujo a mano” usando scribble”

  1. On June 7th, 2010 at 12:40 EvolutionwebdesignersNo Gravatar Says:

    Excelente aporte!

Tu correo no será publicado

Ejemplo de URL

Tu comentario:

This site is using OpenAvatar based on
Security Code: