13 Feb Drunken Monkey Photoshop tutorial

Posted at 12:21h in Tutoriales by sergio ordonez 0 Comments

En este tutorial de Phosohop voy a explicar como diseñé por encargo, el personaje para Drunken Monkey Collectibles, empresa dedicada a la venta de juguetes y coleccionables. Daré un repaso a todo el proceso de creación, desde los bocetos al color digital con Photoshop. Espero que os guste! 🙂

1- Briefing

El briefing es un instrumento en forma de preguntas claves para recoger información acerca de la compañía que nos contrata:

Nombre: Drunken Monkey Collectibles (Mono Borracho en español)
Sector: juguetes y coleccionables
Audiencia: de 5 a 25 años
Mensaje a comunicar: quieren un personaje con mucha actitud, agresivo pero que resulte amigable, muy enérgico, una especie de heroe con un toque oriental.
Referencias: Drunken Master es una película de Jackie Chan del año 1978, el protagonista usa una técnica de Kung Fu muy cómica, especialmente por la posición de las manos. Especificaron que el personaje pareciera alcoholizado.
Aspectos ténicos: destinado a web e impresión. Debe funcionar junto al logo pero también por separado.

2- Buscando referencias

Tenemos toda la información, hora de buscar referencias en las que basarnos. Por suerte de pequeño me gustaban mucho las películas de Karate, recuerdo que después de ver esta película me pasé varios días aporreando a mi hermano usando exactamente la misma técnica. La primera imagen que me viene a la cabeza es Jackie Chan (un desconocido en aquella época, al menos para mí) en esa pose tan característica.

Después de ver el video creo que ya estamos en condiciones de empezar 🙂

Este video de 10 minutos es un manual de poses antológicas, la clave era encontrar una pose no demasiada cómica que transmitiera agresividad como el cliente quería, busqué en Google y encontré una con el equilibrio justo entre comicidad y heroísmo:

Para las ropas no hubo problema, decidimos ponerle un Kimono, algo sencillo para no sobrecargar el diseño. Para añadir otros accesorios espero a tener el personaje diseñado.

3- Dibujando el personaje

Antes de empezar a dibujar hay que tener en cuenta algunas cosas:

En un sólo dibujo el personaje tiene que transmitir la actitud deseada.
El personaje tiene que ser atractivo y original.
La pose tiene que ser clara y reconocible, tiene que funcionar en tamaños pequeños.
No hay que sobrecargar el dibujo. Las líneas deben sugerir los volúmenes al colorista, cuantas menos líneas más limpio será el diseño y mayor sensación de volumen conseguiremos con el color.

Diferentes poses que probamos para nuestro personaje, elegimos la tercera

Lo mejor es empezar con bocetos en papel, después como no tengo mucha técnica con el dibujo tradicional lo paso a Photoshop y dibujo con la tabla digitalizadora (uso una Wacom Intuos3 A6). Dibujo todo en alta resolución (unos 6000x6000px), por un lado es más fácil ya que los errores se verán más pequeños y por otro podremos imprimir más grande.

Aquí puedes ver la evolución del dibujo paso a paso:

Evolución del personaje, desde el boceto al acabado final, unas 6 horas de trabajo

Ahora os explico el proceso de forma un poco más detallada:

1. Encaje de líneas: planificamos la pose empezamos con el típico muñeco hecho de palitos. En este paso lo más importante es encontrar la expresión corporal correcta, ajustar las proporciones del personaje e intentar que la pose sea lo más clara posible
2. Encaje de formas: damos formas a las líneas y empezamos a definir el personaje
3. Refinamos las formas: conectamos y suavizamos los volúmenes.
4. Añadimos detalle: seguimos refinando volúmenes y añadimos detalles al personaje.
5. Boceto final: en este punto el personaje ya esta completo. Ya sólo queda limpiarlo y entintarlo.
6. Entintado:
  - Opción 1: entintado digital con Photoshop, mediante las herramientas de dibujo vectorial y con ayuda de la tabla digitalizadora. Es la opción más fácil si como yo, no eres buen dibujante.
  - Opción 2: entintado mixto. Hacemos el dibujo final con lápiz, escaneamos y después mediante Photoshop convertimos el lápiz en tinta. Si eres muy limpio dibujando es la mejor opción.
  - Opción 3: entintado tradicional, el entintado de toda la vida. Esta opción sólo para los más experimentados.
7. Retoques finales: una vez terminado me aseguro que todo esté perfecto. Reasigno pesos de lineas, limpio manchas o lineas descompensadas, simplifico volúmenes, corrijo errores… a veces incluso rehago partes del dibujo.

Fíjate que tenemos 4 tipos de lineas:

1. 1. Contornos: las lineas más gruesas de todo el conjunto. Dan apariencia de unidad al conjunto.
  2. Delimitadoras de areas: distinguen elementos dentro del diseño, le damos 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.

Que no debemos hacer nunca:

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

8- Correcciones: normalmente pido la aprobación del cliente en cada paso (concepto, boceto, entintado, color) así que no suelen haber demasiadas correcciones. En este caso sólo diseñé un par de peinados diferentes:

4- Démosle un poco de color

Para el color normalmente uso Photoshop ó Illustrator, el proceso es básicamente el mismo, lo hago en varias etapas:

Muchos ilustradores pintan todo en una capa, yo prefiero tenerlas por separado, así puedo hacer modificaciones de color en cualquiera de los tonos del diseño, ya sean luces o sombras. A continuación voy a explicar brevemente cada paso, si quieres entrar en detalles te aconsejo que veas el videotutorial de coloreado con Photoshop.

4.1.- Colores Planos

Lo ideal es tener un archivo de las líneas sobre fondo transparente, en el caso de que hayamos entintado de forma tradicional tendremos las líneas sobre fondo blanco así que tenemos que extraer las líneas del dibujo. La ventaja de este método es que podemos colorear las líneas fácilmente aunque existen otros métodos… como poner la capa del dibujo en modo multiplicar encima de todas las capas de color.

Creamos una capa por debajo de la capa del dibujo y la rellenamos con colores planos de valor medio (ni muy claros ni muy oscuros), con esto conseguimos dos objetivos:

1. - Vamos eligiendo el esquema de color.
  - Nos sirve para hacer selecciones rápidas de las diferentes áreas del diseño, usando la varita mágica.

4.2.- Sombras

Creamos un nuevo grupo de capas y las nombramos «Skin» (piel), después crearemos una capa y la nombraremos «Shadows», aquí vamos a pintar las sombras. Hay que poner la capa en modo «Multiplicar».

Antes de ponerte a pintar a lo loco estudia los volúmenes, intenta visualizarlos en 3 dimensiones, entiende cada volumen por separado, y después imagínate que estan conectados, aquí os dejo un pequeño estudio:

Estudio del volumen de la cara

Ahora si empezamos a pintar a pintar las sombras, usé el mismo color base de la piel (pero al tener la capa en modo «Multiplicar» podemos diferenciarlos) teniendo en cuenta varias cosas:

1. - Dejar un margen de sombra cerca de los bordes, más grueso en el borde inferior ya que la luz viene de arriba, después añadiremos reflexiones para marcar bien los contornos.
  - Hay que conseguir el equilibrio justo entre sombras suaves y duras. Normalmente las superficies curvas y amplias son suaves (Volumen 1), y las angulosas son duras (Volumen 4).
  - Hay que dejar espacio para las luces, no vale sobrecargar el dibujo de sombras.

Este es el proceso que sigo para pintar sombras

1. 1. Esta es la imagen original, usé la varita mágica en los colores planos, para seleccionar la cara (puedes esconder las líneas punteadas con CTRL+H)
  2. Rellené el area con el mismo color de fondo (pero con la capa en modo multiplicar)
  3. Borro hasta conseguir un degradado (también puedes hacerlo directamente con la herramienta degradado)
  4. Añado un borde duro al degradado.
  5. Vamos con el segundo volumen, repetimos el paso 2
  6. Repetimos el paso 3
  7. Repetimos el paso 4
  8. Añadí un degradado por la parte superior

4.3.- Valores medios de iluminación

Mediante degradados definimos la fuente de luz, para eso creamos una nueva capa, la nombramos «Source Light» y la colocamos por debajo de las sombras.

Estos son los pasos que seguí:

8.- Este es el paso en el que nos quedamos anteriormente
9.- Volvemos la capa de «Sombras» a modo normal. La habíamos colocado en modo multiplicar por que estabamos usando el mismo color que el fondo, sólo para mayor comodidad. Ahora parecerá que no hicimos nada, pero no te preocupes.
10.- Nos vamos a la capa «Source Light» y hacemos un degradado con un color más claro… y magia!!! Elegí una fuente de iluminación desde arriba-izquierda.

4.4.- Luces

Volvemos a crear un nueva capa llamada «Lights» (luces), y la ponemos arriba de todas.

Teniendo en cuenta la fuente de luz (arriba-izquierda) vamos pintando las luces para los diferentes volúmenes. Las luces deberían quedar en la parte superior, os dejo una captura para que mostraros como las hice:

Pintamos las luces con Photoshop

4.5.- Reflexiones

En esta etapa simplemente añadimos unas lineas de brillo a los contornos, así los reforzamos y todo se ve más claro. Simplemente pinto la linea y después la difumino un poco:

4.6.- Color de líneas

Este paso es opcional, normalmente me gusta fundir las lineas con el color para conseguir un resultado más suave, más estilo pintura que dibujo, lo que hago es colorearlas. Como ya extraímos las líneas del dibujo, ahora sólo tenemos que seleccionarlas (CTRL+click en el thumbnail de la capa «Lineart») y pintarlas, lo ideal es elegir un color un poco más oscuro que el tono de piel, así se diferencia un poco. Me gusta tener el color de las lineas en una capa diferente a las del dibujo, por si tengo que hacer modificaciones.

Este es el resultado final

El resto de las partes del personaje las coloreo con la misma técnica, una por una, como puedes imaginar el proceso es bastante largo, normalmente invierto unas 4-6 horas sólo en el color… pero merece la pena, no crees?

5- Diseñando el logotipo

El encargo constaba de diseño de personaje y diseño de logotipo. Mi intención era conseguir un logotipo limpio y simple, legible, compuesto sólo de tipografía para no sobrecargar el diseño, que funcionara junto con la mascota pero también por separado.

Quería un logotipo divertido, que transmita fuerza y estabilidad, pero también flexibilidad y mucha energía. Os dejo el razonamiento de mis elecciones:

Plain O Matic (by Utopiafonts)

Tipografía: es una fuente gruesa, pesada pero flexible gracias a las partes redondeadas de algunos caracteres. Sólo modifique el ancho de los caracteres, demasiado anchos para mi gusto.

Formato: elegí un formato de 3 líneas, usando dos tipografías diferentes. Así diferenciamos el nombre de la marca (con más peso, por eso más grande) y la actividad que realiza.

Linea base: la linea base de la palabra «Drunken» es irregular, un toque desenfadado. La palabra «Monkey» es regular, sugiere estabilidad y da unidad al diseño.

Bordes: irregulares por arriba, para enfatizar ese toque desenfadado; un poco más regulares por abajo para sugerir estabilidad; regulares por los lados, para dar apariencia de unidad a las dos palabras que conforman el logotipo.

Forma: ancha por arriba y estrecha por la parte de abajo, sugiere actividad, energía, poder. Use unas barras horizontales para dar estabilidad al logotipo y para dar más unidad al diseño.

Mayúsculas: más energía para nuestro logotipo.

Renderizado: normalmente cuando diseño para web añado biselados y efectos, esta vez elegí un enfoque más práctico y usé colores planos, ideal para imprimir a bajo coste. Cuando el presupuesto lo permite hago diferentes versiones del logotipo.

Colores: amarillo y negro (sugiere peligro, acción, excitación), use el blanco para conseguir el máximo contraste sobre fondo negro.

6- Presentación final

Aquí va la versión final:

Espero que os haya sido de utilidad!!