SOSFactory Blog

Choose your language / Elige tu idioma:

En este artículo vamos a dar una pasada a cuestiones generales sobre diseño de mascotas para páginas web: composición, pesos de lineas, formatos de archivo, estilos y esquemas de color… Fíjate que a lo largo del texto hay enlaces a páginas donde se desarrolla cada cuestión con mas detenimiento.

Si algo no queda claro simplemente pregunta e iremos añadiéndolo al artículo

¿Dónde usaremos nuestra mascota?

Esta es la pregunta clave cuando empezamos a diseñar nuestro personaje, es diferente diseñar un personaje para incluirlo en un logotipo dentro de una página web que para imprimir a gran formato.

Normalmente nos dan un area dentro de la página donde tenemos que hacer encajar al personaje. Así que tenemos que dejar espacio al resto de la maquetación.

Te aconsejo que nunca empieces a diseñar tu personaje sin saber dónde se colocara, si es posible haz una captura de pantalla de la página web e imprímela, utilízala para hacer los primeros bocetos. Si no te puedes encontrar sorpresitas.

Formato de formato, tamaño y resolución

Cuando diseñamos mascotas para páginas web si puedo elegir prefiero usar bitmaps a vectores, si tienes una Wacom es bastante mas cómodo y más rápido. Normalmente uso bitmaps de menos de 7000×7000px, dependiendo del ordenador que tengas podrás permitirte trabajar a mayor o menor tamaño.

Bitmaps: el tamaño importa. A veces aunque diseñamos para página web, no se descarta el uso de material impreso, por ejemplo merchandising. Por eso aunque entregues un diseño para web de 200×200px es mejor hacerlo al mayor tamaño posible, y despues reescalarlo al tamaño final, por dos motivos:

1. Es mas cómodo porque no hay q prestar tanta atención a los pequeños detalles. Al reducir el tamaño eliminas las imperfecciones.
2. Puedes cobrar un extra por el archivo en alta resolución u ofrecerlo como servicio añadido como hacemos en Sosfactory.

Aun as í ésta es la regla general a la hora de elegir formato:

1. Mapas de bits: para presentación en monitor ya sea web o multimedia o impresión hasta 60×60cm a la máxima calidad (300ppp) o 120×120cm a calidad media (150ppp).
2. Vectores: para impresion a calidad máxima a mas de 60×60cm.

En cuanto a la resolución, usa 72ppp para web o multimedia y 300ppp para impresión a la máxima calidad. Si usas 150ppp la impresión tendrá calidad media.

Concepto

Esta es la fase creativamente más compleja, tenemos que recopilar el máximo de información posible acerca de la compañía que nos contrata, para esto lo mejor es diseñarse un briefing o al menos preguntar cosas como:

1. ¿A qué se dedica la empresa?
2. ¿Quienes son sus competidores?
3. ¿Qué quieren comunicar?
4. ¿Audiencia a la que va destinada?

No hay fórmulas… todo es cuestión de estudiar la marca y a esperar que surga la magia, después ya será cuestión de técnica a la hora de plasmar el concepto.

Proporciones del diseño, linea de acción, pose y silueta

Proporciones. Son muy importantes cuando diseñamos para web. Imagínate que en la cabecera de nuestra página web sólo tenemos 100px de alto… si diseñamos una mascota muy delgada, a ese tamaño difícilmente sera visible, y nos perdemos todos los detalles de la cara. Ni que decir que la cara es nuestra principal baza.

Por este motivo desde Sosfactory casi siempre usamos estilo cartoon cuando diseñamos para web, un personaje con proporciones normales funciona para una portada de Marvel pero dificilmente funcionará a 100px de alto, al menos en una pose normal…

Linea de acción. Un elemento importante para mejorar el dinamismo en los dibujos es el contar con una silueta marcada del personaje en la que podamos conseguir una buena línea de acción.

Dibujos de Raúl García.

La línea de acción marca la intención del movimiento del personaje, su dinamismo, la dirección en la que van dirigidas sus energías. Todos los elementos deben estar organizados para acentuar esa línea de acción que marca la dirección y la actitud del personaje hacia el movimiento que va a realizar. Una buena forma de empezar a animar es dibujar primero la línea de acción y a partir de ella construir el personaje.

La pose y la silueta. El dibujante debe de buscar el dibujo ideal que cuente una historia por sí mismo y resuma eficazmente la esencia de la pose.

He encontrado un ejemplo del maestro de la animación Raúl Garcia que lo explica a la perfección, 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 linea 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.

Color: esquemas y estilo

Antes de decidir el esquema de color pide alguna muestra del entorno donde la usarán, pregunta si prefieren algún esquema de color en especial… normalmente te dirán que uses sus colores corporativos.

Si eres principiante este selector de esquemas de color te puede servir de ayuda, aunque siempre puedes usar imagenes que te gusten e ir cogiendo muestras para hacer tu propia biblioteca de colores.

Lo mismo para el estilo, hay tantos estilos como artistas o como públicos a los que se destina. Piensa en la sensación que quieres transmitir.

Ejemplo A: pinceles duros, contraste entre sombras y luces, colores saturados dan mas sensación de agresividad… estaria bien para un público adolescente.

Ejemplo B: pinceles suaves, poco contraste entre sombras y luces, colores mas apastelados, dan mas sensación de calidez… estaria bien para un público infantil.

Si eres un usuario avanzado de Photoshop seguramente ya sepas como cambiar los esquemas de color de un diseño ya terminado, pero por si acaso nunca esta de más hacer un boceto de color antes del diseño final, así si hay correcciones (que siempre las hay), te ahorras bastante tiempo.

Aquí podeis ver un videotutorial donde explico como colorear con Photoshop.

Optimización de la imagen final

Hay una regla bastante sencilla: si son colores planos mejor grabar para web en formato GIF si hay degradados mejor usar JPG (60% de calidad es suficiente).

Para entrar en detalles te recomiendo que eches un vistazo al post sobre optimización imagenes para web.