El diseño de mascotas para web es una de mis especialidades, en los últimos años he diseñado docenas de mascotas corporativas para web, el cliente suele quedar bastante satisfecho con el diseño pero después no sabe cómo sacarle el máximo partido.

A veces tienen que usarlas a tamaños muy pequeños, otras no están bien integradas con el contenido, muchas veces modifican el diseño con desastrosas consecuencias, otras veces son demasiado agresivos en la compresión de la imagen… y en muchos casos no se hace un uso real de los diseños.

Puntos a tener en cuenta para sacar el máximo partido a tu mascota.

• Antes de nada pregúntate si realmente necesitas una mascota, ¿es adecuado para tu público objetivo?.
• Planifica tu web para sacar el máximo partido a tu mascota.
• Recuerda que cuanto más grande uses la ilustración (dentro de lo razonable) más bonita se verá.
• Deja márgenes alrededor de la ilustración para que el diseño respire.
• Haz que la mascota interactue con la web, se creativo.
• Aplica tus colores corporativos en la mascota.
• Diseña una mascota versátil que puedas usar para banners, avatares, camisetas, o para tu página "about" (acerca de… ).
• Elige un concepto que vaya acorde con tus valores corporativos.
• Optimiza el peso de la ilustración, guarda como JPG al 60%.
• Si tienes que hacer posteriores modificaciones pídeselo al autor del diseño.
• Pide los diseños en alta resolución (hasta 7000x7000px) o en formato vectorial, así podrás imprimir cualquier tamaño que necesites.
• Observa si tu diseño cumple los principios básicos a la hora de diseñar una mascota.

Características de una buena mascota

• Memorable, tiene que causar impacto.
• Fácil de recordar, debe dejar huella en la memoria del observador.
• Debe ser único, debe ser fácil de discriminar respecto a los competidores.
• Atractiva, el personaje debe ser atractivo para el públcio objetivo.
• Icónico, el personaje debe representar los valores corporativos de la marca.
• Funcional, debe funcionar en banners, en el encabezado de la web, en el logo.

Maneras efectivas de integrar diseños de personajes en la web.

La utilización de la mascota integrada en el logotipo es la forma más común de integrar al personaje, así asociamos el personaje a la marca, es una de las maneras más efectivas de usar una mascota.

Podemos integrar la mascota de forma muy efectiva usándola como icono o integrada en los botones, podemos usarlo en el estado "over" de nuestros botones y animarlo en Flash:

Una de las maneras más efectivas consiste en usar la ilustración a todo el ancho de la web, sacrificas mucho espacio pero consigues un gran impacto visual. La web de John Cow era un buen ejemplo, lástima que estén reduciendo cada vez más el tamaño de la ilustración en lugar de optimizar el espacio restante.

No necesariamente tenemos que usar la mascota en el encabezado de la web, también podemos usarla para resaltar determinados elementos del diseño:

Y para terminar algunos banners con diseños de personajes:

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.

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.

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:

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, 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:

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

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.

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.

Diseño de partida, vamos a demostrar lo que podemos hacer

Hola amiguetes, se me ocurrió una idea que creo que puede ser interesante para vosotros, y muy divertida para mi, se trata de escribir un post sobre un encargo, en tiempo real. Iré actualizando el post conforme vaya avanzando el encargo, si hay suerte todo los días habrá novedades. Así vereis como el encargo va tomando forma desde los bocetos iniciales al acabado final, sin omitir ningún paso, espero no perderme… vaya presión!!!!!

El encargo está un poco avanzando pero no quiero perder vuestro interes así que para darle un poco de misterio os dejo alguna información:

• Cliente: Mafia Death es un juego online basado en historias de la mafia.
• Encargo: diseño de 5 personajes y diseño de logotipo. Los personajes deben funcionar por separado y conjuntamente.
• Presupuesto: 1.750US$
• Entrega: alrededor de un mes
• Descripciones:
  1. “The Boss:” el jefe de la familia, ese que sólo tiene que mover una ceja para que seas hombre muerto. Un tío de pocas palabras, no especialmente fuerte físicamente… su mejor arma es el cerebro.
  2. El guardaespaldas: es el músculo del equipo, el que ata los cabos sueltos, ¿su sonido preferido? el de un cuello al partirse. Si lo ves aparcado delante de tu casa, tienes menos de 10 minutos para hacer tu testamento.
  3. “The Latin-Lover:” es el encargado de cerrar los tratos importantes. Un tipo elegante, atractivo, atlético, con buen gusto para la ropa y las mujeres, aire muy latino y con don de gente. Se pierde por las rubias y va un poco a su aire. Si te vas de marcha con él avisa en casa, no llegarás antes del mediodía.
  4. “The Girl:” sólo su sensulidad es comparable a su mala leche, fría y calculadora. Es un arma de precisión. Triunfa tanto entre hombres como entre mujeres. El último que rumoreó sobre su afinidad con Anjelina Jolie está criando malvas.
  5. “The little mad guy”: su lema es… "Sobrevivir es irrelevante, lo que importa es a cuantos te puedes llevar al otro barrio". Está tan hecho polvo de la cabeza que sólo es útil en misiones desesperadas. Fan de Joe Pesci. Muy importante: no preguntes por su cicatriz.

Que empiece el espectáculo!!!!!!!!!

Dia 1: abocetamos los 3 primeros personajes

Como me encantan las películas de la Mafia, me ahorré la búsqueda de referencias y fuimos directamente con los bocetos. Mi idea era encontrar un punto medio entre la elegancia de "El Padrino" y el aire moderno y cotidiano de "Los Soprano".

Le pedí ayuda con los bocetos a mi amigo Miguel Angel Ruiz, le mandé descripciones para cada personaje y esto es lo que me ha mandado de vuelta:

Aquí vemos los bocetos de los tres primeros personajes.

Lo primero que salta a la vista es el estilo, no es el estilo que normalmente manejamos en SOSFactory, pero no te preocupes al final nada desentonará. Lo importante en este punto es la actitud de los personajes, la pose, la expresión facial, la ropa… que cada personaje transmita lo que debe transmitir (fíjate en las descripciones al inicio del post):

1. "The Boss": me parece genial, es justo lo que necesitamos tiene una pose relajada pero transmite mucha fuerza con su mirada. Las piernas me parecen un poco cortas y la cintura un poco ancha, pero es un buenísimo punto de partida.
2. "The Bodyguard": este personaje también me parece bastante bueno. Me gustaría poner todos los personajes en una línea horizontal así que habra que modificar un poco la pierna derecha, es un poco corta. La pose de las manos no me termina de convencer, y la musculatura del brazo izquierdo hay que trabajarla un poco. La cara me parece perfecta.
3. "The Latin-Lover": este personaje va a necesitar bastante trabajo. La pose me gusta pero es demasiado lateral, nos deja muy poco espacio para la zona del pecho, no se verá nada bien, tampoco tenemos espacio para la pistola, así que lo pondremos en una pose a 3/4, un poco más frontal. La pose de los pies no me gusta nada los pondremos en angulo de 90º. La cara también habrá que retocarla, necesito que sea más atractivo.

Resumen del día: me gustan los bocetos, tecnicamente hay que mejorarlos bastante, pero transmiten las actitudes apropiadas, especialmente los dos primeros, el tercero lo tendré que hacer casi desde cero.

Nos vemos mañana!!!!!!

Día 2: bocetos del resto del equipo

Ya he recibido los bocetos del resto de personajes

1. "The Girl": de este personaje me gusta la expresión facial, pero tiene un aire demasiado clásico, me gustaría algo más moderno y sensual, creo que vamos a tener que hacer bastantes cambios.
2. "The little mad guy": me gusta su actitud pero técnicamente es muy mejorable. El brazo de la pistola es demasiado corto, la mano que sostiene el cigarro está demasiado pegada al cuerpo, la separaremos para que la pose sea más clara, la cintura demasiado ancha, hay que estilizarlo un poco. Parece demasiado joven, necesito un personaje más mayor.

Resumen del día: ya tenemos los bocetos de los 5 personajes, el resultado es bueno para los dos primeros personajes, para el resto haré bastantes cambios. Si hubiera tenido tiempo hubiera hecho yo mismo los bocetos pero dada las circunstancias (estoy liadísimo) la inversión mereció la pena. Restamos 250US$ de las ganancias.

Mañana haré la composición de la escena. Saludos!!

Dia 3: composición de la escena

Ya tenemos todos los miembros del equipo, ahora tenemos que ponerlos en línea buscando una buena composición. Creo que el personaje central debería ser el jefe, a su derecha ira su guardaespaldas (su hombre de confianza), a la izquierda el negociador (completando el trío de personajes importantes), al lado de éste irá la chica (añadimos un poco de tensión sexual) y el pequeñin en el lado contrario para compensar la composición (este personaje va por libre).

Resumen del día: ya tenemos la composición de la escena, al ponerlos juntos la cosa promete, se ve mucho mejor de lo que me esperaba. A partir de ahora me encargaré de retocar cada personaje.

Que empiece la diversión !!!

Dia 4: limpieza de los bocetos

En este paso lo que intento es corregir las cosas que ya comenté en el día 2, para eso uso mi Wacom y Photoshop, a partir de este punto todo lo que hago es digital. Uso bocetos antiguos, referencias de otros diseños o fotografías, dibujo una y otra vez hasta que todo queda bien definido. Os pongo debajo de cada dibujo las correciones de las que ya hablamos el segundo día.

"The Boss": hice las piernas más largas, reduje un poco de cintura, añadí algunos detalles al traje, definí un poco los volúmenes y retoque bastante la cara.

"The Bodyguard": trabajé principalmente la zona del torso, fíjate que eché más abajo los brazos para que darle un poco de aire a la cara. Retoqué bastante el brazo izquierdo y corregí un poco la altura de las piernas.

"The Latin-Lover": este personaje está rehecho casi por completo. Hice una pose un poco más frontal y baje los brazos para ganar un poco de espacio en la zona del pecho, puse una pose de piernas más elegante y le puse una cara más atractiva.

"The Girl": de este personaje sólo conservé la expresión facial. Por suerte tenía un boceto sin usar que encajaba bastante bien. Ahora es mucho más sensual y tiene un look más moderno. Usé como referencia a Anjelina Jolie.

"The little mad guy": este personaje también lo cambié casi por completo. El brazo de la pistola era demasiado corto así que lo saque un poco, la mano del cigarro también la separé del cuerpo con lo que conseguimos una silueta mucho más clara, estilicé la pose dándole una cintura más estrecha y abriendo las piernas (una pose mucho más activa), le añadí una cicatriz más clara y un mentón más pronunciado.

Resumen del día: los dos primeros personajes fueron fáciles de corregir, a partir del tercero los redibujé… todo va según lo previsto.

Mañana más

Dia 5: entintado de los personajes

Ya tenemos todos los bocetos preparados, ahora toca pasarlos a limpio, se lo he encargado a mi amigo Carlos, es muy limpio dibujando al modo tradicional, todo lo dibuja con lápiz después yo mismo convierto sus lineas a tintas y las retoco hasta que todo queda perfecto. Uso este tutorial sobre entintado digital con Photoshop.

Aquí podeis ver la progresión.

Ya regresé de mis vacaciones por Berlín, y lo prometido es deuda, aquí os dejo unas comparativa de los bocetos corregidos y las versiones entintadas. Poco que comentar aquí, mi amigo Carlos es una máquina del dibujo… muchas horas de vuelo.

Haz click en la imagen para ver la imagen ampliada

Resumen del día: después de una semanita de semi-vacaciones en Berlín vuelta al tajo. Tenemos todos los dibujos listos para el color, ahora empieza la diversión de verdad.

Saludos!!!

Dia 6: color

Como ya sabreis, el color es mi especialidad, lo que más me gusta y en lo que más tiempo invierto. Normalmente coloreo con un estilo cartoon con colores muy brillantes, en este caso va mejor algo más sobrio, divertido pero misterioso, con tonos oscuros muy contrastados.

Hice una versión con colores fríos, se ve bien pero creo que colores un poco más calidos, con tonos más gastados va mejor con el tema. No creais que coloreé todo desde el principio, usé la herramienta de corrección de color de Photoshop (CTRL+B) y añadí un poco de Cyan y Verde. Fíjate que fácil!!

Resumen del día: después de muchas horas de pruebas el color se ve muy bien, el reto será componer la escena para que los 5 personajes funcionen como un todo.

Mañana otro poquito!!

Día 7: coloreando al Latin-Lover y a la chica

Ahora que tengo definida la paleta de colores voy más rápido. Los personajes siguen pareciéndome buenos por separado, pero demasiado cargados cuando los pongo juntos, por eso decidí suavizar un poco más los colores, aquí va el segundo personaje listo:

Y aquí tenemos a la chica se ve muy bien pero tenemos un problema, el esquema de color más llamativo es el de la derecha pero la versión más coherente con el resto de personajes es la de la izquierda, si por mí fuera sacrificaría al personaje por el bien de la ilustración pero el cliente no piensa lo mismo… veremos que pasa.

Resumen del día: ya está hecho lo más difícil, elegir los esquemas de color, así que voy bastante rápido y empiezo a sentirme cómodo. Sería de esperar que conforme avance el color mejore.

Mañana más!!!

Día 8: coloreando al Little Mad Guy y al Bodyguard

Bueno chic@s, por fín terminé con todos los personajes

Estoy especialmente contento con estos dos últimos, son exactamente como me los imaginé al principio, por desgracia lo conseguí a partir del tercer personaje (aunque los primeros tampoco están nada mal). Fijaos que estos personajes se ven bien por separado, pero al ser un color más suave y con una fuente de luz menos contrastada resultan más armónicos y funcionarán mejor al componer la escena.

Es la primera vez que hago un personaje con barba de pocos días, creo que la textura está bien conseguida. La peor parte de este personaje fue la musculatura… ufff!!! pero que quedó bien. También corregí la posición de las manos.

Resumen del día: los dos últimos personajes fueron bonitos, rápidos y divertidos de hacer, al fin cogí la mecánica. Después de 5 personajes con este estilo de color puedo decir que lo domino, me vendrá genial para el futuro.

No pude esperar más y ya los puse todos juntos, tendreis que esperar un poco (hay que darle emoción ) pero os puedo adelantar que la ilustración está de muerte. Hasta el Lunes!!!

Día 9: ilustración final

Por fin el gran día, después de muchas horas de trabajo se puede decir que la ilustración está acabada. Hice algunas correcciones de color para acoplar cada personaje,

Haz click en la imagen para ampliar

Resumen del día: como era de esperar tuve que hacer algunas modificaciones para conseguir que los personajes se acoplaran bien. Estoy bastante contento con el resultado.

El próximo día vamos con el logotipo, estoy un poco estancado, se aceptan sugerencias

Hello buddies, looks like I was really busy during the last month, as you noticed I dont post too much latelly, but its because I was working in the biggest and more detailed tutorial I have ever write, PSDTuts hired me to write a tutorial about mascot design in Photoshop.

The tuto explain all the steps at time to design a mascot, from the skechts to the final rendering in Photoshop, this time explaining a new color technique, the use of history brush, the fusion mode layers … and much more.

This tutorial is for the PLUS PSDTuts section, but dont worry, for just 9US$ month (22US$ 3 months) you have access to the tutorial and files (including the final design, it worth 600US$).

Just a little support for this guys, keeping in mind the quality of the content and the price they paid to get a exclusive design for PSDTuts readers.

Outcome

This is the final design, you can download some free wallpapers doing click in every image

En este artículo 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 acabado final con Photoshop. A lo largo del post encontrarás enlaces a diferentes artículos hospedados en SOSNewbie, donde cubro más en detalle cada fase del proceso.

Espero que os guste

SUMARIO

1. El Briefing
2. Buscando referencias
3. Dibujando el personaje
4. Démosle un poco de color:
   • Colores planos
   • Sombras
   • Valores medios de iluminación
   • Luces
   • Reflexión
   • Color de líneas
5. Diseñando el logotipo
6. Presentación final

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 exáctamente 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 estaría bien repasar los principios básicos en el diseño de mascotas corporativas. 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. 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:

• 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 colorización 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 tendrémos 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:

• 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:

• 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. 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 llanada "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

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

Haz click en la imagen para ver las diferentes versiones para web o impresión que suelo hacer si el presupuesto lo permite

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

Como buen diseñador que soy (:P) me gusta presentar mis diseños de forma vistosa y profesional, aquí va la versión final:

Espero que os haya sido de utilidad
Saludos!!!!!

Sergio Ordóñez
www.sosfactory.com

Haz click en la imagen para ver el video sobre color digital con Photoshop

Se trata de un videotutorial de photoshop donde muestro muy rápidamente el proceso que sigo a la hora de colorear nuestras mascotas en SOSFactory. Ten en cuenta que el tiempo real para conseguir nuestro acabado dura alrededor de 3 horas por diseño, este tutorial es una versión muy resumida, hecha expresamente para este artículo.

Pronto haré un video mucho más completo y lo iremos dando por números

]]>