Edgy Character spanish version

 

Diseno de mascota con Photoshop al estilo SOSFactory

Hola artistas del Photoshop, mi nombre es Sergio Ordóñez, el autoproclamado genio detrás de SOSFactory, autoproclamada pionera en el diseño de mascotas corporativas para web. PSDTuts me ha contratado para diseñar un personaje en exclusiva para vosotros, estimados lectores, vaya suerte que teneis...
SUMARIO

1. Conceptos básicos: actitud, pose, línea de acción y silueta
2. El Briefing y búsqueda de referencias
3. Antes de empezar a dibujar
4. Del boceto a la línea final
5. Extraemos las líneas
6. El color: la importancia del pincel histórico, colores planos, sombras, luz suave, luz fuerte y contornos
7. Colorización
8. Efectos
9. Presentación final
10. Agradecimientos 

1.- Conceptos básicos

Cuando comencé a diseñar mascotas, como todo buen novato, empezaba mis diseños sin tener ni idea de lo que realmente quería contar. En este tiempo aprendí que la planificación es la diferencia entre un diseñador profesional y otro que no lo es.
Por eso y porque me pagan por palabras os voy a machacar con un poquito de teoría :)
La actitud. La personalidad es la clave de una mascota bien diseñada. Todos los elementos del diseño (expresión facial, expresión corporal, simbología, ropas, elementos externos...) tienen que fomentar la actitud del personaje, que dependerá de los valores corporativos de nuestro cliente. Veamos algunos ejemplos:

1. Personaje para restaurante-barbacoa. Gracioso, amigable, cómico.
2. Antiheroe. Colores que denotan peligro (amarillo y negro), pose negativa (brazos cruzados al pecho), mirada malvada.
3. Personaje "cool". Mirada agresiva, pulgar levantado, sacando pecho, colores agresivos.
4. Heroe. Amigable, dinámico, fuerte, confiable, colores suaves.

La pose. Tenemos que transmitir la actitud deseada en una sola pose memorable, limpia, fácil de recordar y de distinguir para eso tenemos que cuidar la línea de acción y la silueta.
Un error muy común cuando diseñamos para web consiste en posar la mascota sin tener en cuenta el area donde se va a usar. Para asegurarnos que el personaje se vea lo más grande posible tendremos que adaptar la pose al espacio, ejemplo:

Línea de acción. La línea de acción marca la intención del movimiento del personaje, la dirección en la que van dirigidas sus energías. Aquí podeis ver algunos buenos ejemplos:

La silueta. El maestro de la animación Raúl Garcia lo explica a la perfección en este ejemplo, es un ejercicio en el que se busca el dibujo que más claramente defina la historia: "Llenar una taza de té"

	El primer intento es vago y no define la acción de forma concisa. No hay ninguna línea de acción que describa el movimiento de echar té en la taza o ninguna tensión que indique peso o equilibrio. La silueta de éste dibujo es amorfa y sin interés.
	Buscando esa clara silueta se ha intentado separar el brazo de la tetera.
	Taza y tetera estan ahora claramente separados del cuerpo, pero la silueta todavía no es clara.
	La silueta de los brazos es mucho más clara. La tetera se inclina más hacia abajo para indicar la acción de echar el té.
	La pose del brazo que sujeta la taza se ha modificado para que parezca más natural. El cuello del personaje se ha acentuado para lograr una mejor silueta.
	La silueta es más efectiva al añadir un plato a la taza y incluir una mejor pose de la mano.
	Doblando el brazo que sujeta la tetera y extendiendo el dedo de la mano se logra una silueta más interesante.
	Inclinando la cabeza se ha logrado la silueta más efectiva al crear un espacio negativo que dirige la atención a la boca de la tetera.

Observa como la silueta de la figura 4 es totalmente descriptiva, no necesitamos ver el relieve del personaje para entender la acción. Cuando diseñamos mascotas corporativas, en muchos casos no podremos conseguir siluetas tan perfectas, aún así, es lo ideal.

2.- El Briefing y búsqueda de referencias.

En este caso, PSDTuts me dio total libertad, así que me dejaré llevar por mi instinto y nos saltaremos el briefing.
Después de conocer al cliente tenemos que buscar referencias, las ideas originales suelen tardar un poco en aparecer, la búsqueda de referencias nos ayuda a deshechar las ideas directas en favor de otras alternativas.
Algunos consejos para hacer que surga la chispa:

• La mejor fuente de inspiración a la hora de conceptualizar un tema son las webs de stock de fotos ya que a diferencia de Google, las imágenes están clasificadas por temáticas
• También podemos hacer búsquedas en Google Images aunque el resultado es más aleatorio
• Podemos hacer búsquedas en comunidades de arte como Deviantart
• Si necesitas practicar anatomía o ropas puedes usar revistas de culturismo o de moda, todo vale
• También puedes construirte una biblioteca de imágenes en tu propio disco duro, clasifícalas bien

Ejemplo práctico:

1. Necesitamos representar el concepto "pecado" en una ilustración
2. Vamos a Matton y hacemos una búsqueda del termino "pecado" ("sin" en inglés)
3. Obtenemos fotografías que nos ayuda a conceptualizar el tema "pecado".
4. Fíjate en los resultados:

• manzana y serpiente (pecado original)
• hombre con dinero (codicia)
• tarta de boda (adulterio)
• manos en posición de oración (penitencia)
• chica castigada (desobediencia)
• pastelería (gula)...

WARNING 1 : inspirarse es válido, plagiar, no.
WARNING 2: Si la web o el artista en cuestión es útil lo correcto es contribuir con su labor, al menos muéstrale tu agradecimiento, si además donas aunque sea un US$, mucho mejor.

3.- Antes de empezar a dibujar

¿Tableta digitalizadora o ratón? Si no tienes una tabla digitalizadora te aconsejo que te compres una Wacom, las hay a precios muy asequibles, eso sí, que sea Wacom. Si no, puedes hace el boceto a lápiz y usar el ratón y las herramientas de dibujo digital de Photoshop para entintarlo (en el caso del color es aún más recomendable usar tableta), aunque tardarás muchísimo más tiempo.
Este sería el proceso:

Con la adquisición de mi querida Wacom Cintiq 21UX (el monitor de la derecha), he cambiado mi método. Ahora hago todo digitalmente, desde el boceto inicial hasta el acabado final. Pinto las líneas a mano porque me resulta más cómodo y más rápido que hacerlo con las herramientas de dibujo vectorial.

¿Photoshop o Illustrator? Es una elección personal, a mí las herramientas de dibujo vectorial de Illustrator me desesperan. Prefiero usar Photoshop, dibujar las líneas a mano y ayudarme de las herramientas de dibujo para líneas difíciles. Al trabajar en alta resolución la posterior vectorización es muy fácil, para eso uso un plugin the Illustrator llamado Silhouette.

4.- Del boceto a la línea final

Es muy importante que trabajes en alta resolución, yo uso un lienzo tamaño A3 a 300 píxeles por pulgada, el trabajo será el mismo, y tiene muchas ventajas:

• Los fallos se verán menos, especialemente si luego usas el diseño en pequeña escala
• Es más cómodo ya que puedes hacer zoom y retocar líneas
• Si necesitas vectorizarlo el resultado será más limpio

Aquí podeis ver unas capturas del personaje en diferentes fases, desde el boceto a la línea final. Por desgracia no hay trucos, sólo práctica y más práctica:

1. Dummy 2d: boceto hecho de palitos, sirve para posar al personaje y medir proporciones
2. Dummy 3d: damos volumen al personaje. Uso formas geométricas muy simples
3. Añadimos ropas: voy añadiendo ropa al personaje y voy puliendo detalles
4. Añadimos los accesorios y pulimos la línea un poco más. Asigno pesos de líneas
5. Línea limpia: limpio todo el boceto con mucha paciencia

Fíjate que el grosor de la línea (peso de línea) es variable, esta es una de las partes más laboriosas. La regla general es, líneas gruesas para los contornos, líneas más delgadas para las partes interiores.
Con esto conseguimos que el observador distinga mejor las formas, especialmente útil para ilustraciones muy complejas donde además podemos jugar con el grosor de líneas para dar profundidad a la ilustración.

5.- Extraemos las líneas

Cuanto tenemos nuestro dibujo acabado y en una sóla capa, podemos extraer las líneas del fondo o poner la capa en modo multiplicar e ir añadiendo el color en capas por debajo. Yo prefiero extraerlas, así luego puedo colorear las líneas fácilmente.
Fíjate que voy a pintar el skate y el personaje por separados, así cuando terminemos podemos usar dos versiones, con o sin skate.

Para extraer las líneas haz lo siguiente:

1. Asegúrate que tienes tus líneas en una sola capa
2. Asegúrate que estás en modo de color RBG (Image>Mode>RBG Color)
3. Ve al panel de Channels y haz click en el Canal Azul
4. Elige cualquier herramienta de selección y haz click derecho dentro del lienzo, elige Select Inverse
5. CTRL+C
6. CTRL+V
7. Tendrás las líneas en una capa diferente pero si te fijas los contornos tendran pixeles en blanco, haz CTRL+U y pon Lightness a -100 con lo que las líneas serán completamente negras
8. Haz lo mismo con la capa Background pero pon Lightnes a +100, con lo que el fondo será completamente blanco

Si eres un poco vago puedes descargarte esta acción de Photoshop para extraer las líneas de tus dibujos. Así te ahorras hacerlo manualmente.

6.- El color

Ya he escrito varios tutoriales sobre como colorear con Photoshop, para no aburrios voy a intentar algo diferente:

1. Primero pintaremos los colores planos: sirven para hacer selecciones rápidas de las diferentes areas
2. Pintaremos las sombras, tonos medios, tonos claros y brillos, en capas diferentes, usando sólo 3 colores
3. Haremos los cambios de color necesarios en cada capa para que el personaje esté a todo color
4. Añadiremos efectos jugando con los modos de capas

Estos son los tres colores que he elegido para pintar al personaje, como dije después colorizaremos al personaje con comandos de Photoshop así que la elección de los colores no es muy imporante, sólo ten en cuenta que necesitas un color oscuro para sombras, medio para luz general, y claro para contornos y luces más intensas.

La importancia del Pincel Histórico

El Pincel histórico es una herramienta muy potente y que uso con mucha frecuencia, ya que podemos "bloquear" partes de nuestro diseño que ya estén terminadas y seguir trabajando en el resto sin estropearlo. Os pongo un ejemplo muy básico:

Cuando practiques un poco te darás cuenta de las infinitas posibilidades que ofrece esta herramienta, como vemos en el ejemplo podemos usarlo a modo de borrador (sin miedo a borrar partes ya terminadas); podemos hacer lo mismo para pintar en vez de borrar; si sacamos varios snapshots del mismo diseño, podemos conseguir versiones intermedias; podemos bajarle la opacidad al pincel y fusionar varias versiones del mismo diseño; incluso jugar con las tonalidades... no tengas miedo de experimentar.
WARNING: el pincel historia funciona por capas, la capa que queramos modificar debe existir en ambos puntos de la historia. Si fusionamos o eliminamos la capa en cuestión, el pincel histórico no funcionará.
Para ver el uso del Pincel histórico en vivo puedes visitar este videotutorial de como colorear con Photoshop.

Colores planos

Por debajo de la capa de líneas creamos una capa que llamamos Flat Colors, vamos rellenando el dibujo con colores que difieran bastante entre ellos, para facilitar las posteriores selecciones, puedes hacerlo con las herramientas que quieras, cuidando que no te huecos.
Esta capa sólo la usaremos para hacer selecciones, si por ejemplo queremos pintar el pelo de nuestro personaje, cogemos la herramienta Magic Wand tool y hacemos click en el pelo. Con lo que conseguimos una selección rápida y limpia.

Color base

Desactivamos la capa Flat Colors y la ponemos donde menos nos moleste. Haciendo CTRL + Click en el icono de dicha capa obtendremos una selección del contorno completo del personaje.
Creamos una capa nueva que llamaremos Color Base y lo rellenamos con un color plano, en este caso escogí el color #e37750, es un color que me resulta cómodo.

Sombras

Creamos una nueva capa por encima del color base, la llamaremos Shadows. En esta capa pintaremos las sombras con el mismo color base, pero pondremos la capa temporalmente en modo Multiply.
He elegido una fuente de luz que viene desde arriba-izquierda, si no tienes mucha práctica puedes usar un muñeco articulado en una habitación oscura con un punto de luz fuerte para usarlo como referencia. Saber dar un volumen coherente con ese punto de luz es la parte más difícil, y no hay otro truco que practicar.
Observa que las sombras no tienen que ocupar todo el dibujo, hay que dejar espacio para la iluminación. Os pongo unas capturas para que os hagais una idea de cómo suelo pintar las sombras:

1. Imagen con el color base
2. Voy aislando los volúmenes más grandes
3. Con el Pincel histórico, con un pincel grande y bordes suaves borro la parte donde la luz incide
4. Refuerzo las sombras con un pincel pequeño y bordes duros
5. Hago el resto de los volúmenes. Uso el Pincel Histórico (ver ejemplo más arriba)
6. Cuando todos los volúmenes están sombreados, hago los brillos de los contornos usando la herramienta Eraser. Estos brillos ayudan a reforzar los contornos, con lo que ganamos nitidez, muy importante si usamos el diseño en escalas muy pequeñas.

Iluminación suave

Cuando tenemos las sombras pintadas creamos una capa por debajo, la llamaremos Soft Light.

Usaremos la herramienta degradado para dar una iluminación suave que nos servirá de base para la posterior iluminación.

1. Tenemos las sombras pintadas
2. Con la herramienta degradado (del color #feeaa9 a transparente y en modo esférico) voy tiarando degradados en las zonas donde llegaría más luz
3. Pongo la capa de sombras en modo normal. El resultado es una iluminación global y suave, que nos sirve de base para pintar las luces más fuertes.

Aquí podeis ver la configuración que uso para hacer los gradientes:

Iluminación fuerte

Creamos una capa justo por debajo de las líneas y la nombramos como Hard Light. El proceso es básicamente el mismo que para las sombras pero a la inversa. En vez de pintar las zonas profundas, pintamos las zonas salientes, usé el color #ffeeae.

Contornos

Creo una capa por debajo de las sombras y la nombro Reflections. Me gusta reforzar los volúmenes añadiendo brillos a los contornos, con esto conseguimos que se distingan bien las formas y se aprecie mejor el volumen. Recuerda que en la fase de sombras borramos los contornos, ahora sólo tenemos que poner una capa por debajo de las sombras e ir pintando con un poco de cuidado.

7.- Colorización

Ahora empieza lo divertido :)
Ya tenemos la iluminación terminada, todos los volúmenes están definidos y tenemos los diferentes niveles de luz (sombras, tonos medios y tonos claros) por separado. Ahora jugando con el comando CTRL+U de Photoshop colorearemos al personaje rápidamente:

1. Seleccionamos el pelo, recuerda que tenemos la capa Flat colors para esto
2. Desactivamos todas las capas de color menos el Color Base, y nos quedamos en esta capa. Teclea CTRL+U para modificar los parametros del color, elegí un marron medio
3. Activamos la capa Shadows. Otra vez CTRL+U, elegí un color más oscuro
4. Activamos la capa Soft Light. CTRL+U, elegí un tono más claro
5. Ahora vamos a la capa Hard Light y modificamos el color
6. Por último a la capa Reflections. Elegí un tono más saturado para que destace

Fíjate que los colores que elegí son de la misma gama pero ligeramente diferentes, con lo que conseguimos una gama cromática más amplia. Podemos ir más lejos, incluso dentro de la misma capa podemos usar varios colores, exageré un poco para que veas las posibilidades:

Aquí puedes ver como coloreé cada parte del personaje:

Prueba tus propias combinaciones de color hasta que consigas alguna que te guste.

8.- Los efectos

Ya tenemos la base del color terminada, ahora vamos a jugar con capas en diferentes modos de fusión (paleta Layers, el menú de arriba a la izquierda) para darle más profundidad al color. Todas las capas deben ir por encima de la capa de las líneas:

Cuando terminemos podemos fusionar todas las capas (antes haz una copia de seguridad), e ir añadiendo más efectos. Podemos usar el Dodge Tool para aclarar zonas o el Burning Tool para oscurecerlas, podemos jugar con el equilibrio de color (CTRL+B), con los niveles (CTRL+L)... con un poco de imaginación puedes conseguir resultados muy llamativos.
Como dije al principio, pintaré el skate por separado, así tenemos podemos usar dos versiones. La técnica que usé es la misma que para el personaje.

Y por fin terminamos, se ve bien ¿no te parece?.

9.- Presentación final

Como buenos profesionales que somos tenemos que cuidar la presentación. Con un par de logotipos, algunas imagenes del arsenal de los amigos de Gomedia y un poco de imaginación, podemos hacer una presentación como esta (haz click en las imágenes para descargar los wallpapers) :

Fíjate que buena idea haber hecho el skate por separado, ahora tenemos 2 versiones diferentes con el mismo esfuerzo:

Esta es la versión a todo color, pero también podemos jugar sólo con las lineas (por suerte las hice bastante gruesas):

No os asusteis, no voy a explicar como hacer estos wallpapers, ya tengo el record de "scroll down" en PSDtuts... me puedo retirar tranquilo... por ahora :P

10.- Y poco más...

Bueno amigos, ya sólo aprovechar la oportunidad para hacer un llamamiento... a esas "grandes" empresas dentro del ámbito editorial que obtienen su material gracias a la explotación, que se llenan los bolsillos sin compartir un sólo céntimo (a los artistas nos dejan la FAMA); que tomen como modelo a PSDTuts, tan generosa y tan atenta con el artista como con el lector, demostrando que la rentabilidad de un negocio no depende de la obtención de la materia prima al mínimo coste, sino de la calidad de la misma y del ingenio a la hora de venderla.
Gracias a Eden por crear sitios tan grandes como PSDTuts, en especial a Sean por su flexibilidad.
Gracias a mi amiga Anita, por ayudarme de forma desinteresada, y por traducir este artículo.
Y por último gracias a los lectores de PSDTuts, espero que hayais llegado hasta el final (?), que hayais aprendido muchas cosas (?) o que al menos hayais disfrutado de este tutorial.
Ni que decir que si teneis alguna pregunta la responderé con mucho gusto :)
Saludos!!
Sergio Ordóñez

Portafolio: SOSFactory
Blog: SOSNewbie
Deviantart: sergitosuanez

link download PDS: http://hotfile.com/dl/62521004/030b53a/93_Edgy_Character.rar.html