Hola a todos maraqueros, siguiendo el hilo de la sección en la que escupía pestes de los malos diseños tanto en juegos como en prototipos, hoy he decidido iluminaros a todos con la cálida luz de mi sabiduría XD.
Bromas aparte, tengo ya unos años de experiencia en el mundo del diseño gráfico y espero poder ayudaros a un nivel básico.
Herramientas de diseño.
Lo primero que necesitas es una serie de programas de diseño adecuados a lo que pretendes hacer, del mismo modo que no cocinas la sopa en la parrilla, tampoco se diseña con el Power Point. Lo ideal es usar un programa profesional, la familia Adobe se creó para eso, Illustrator, Photoshop, Acrobat e Indesign, son las herramientas profesionales estándar del sector y si tienes facilidad para aprender a manejar software, sin duda deberías decantarte por estos programas. Hay además infinidad de cursos y tutoriales gratuitos online, así que seguro que hay alguna respuesta en la red para cualquier duda que te surja.
 |
| Unas buenas herramientas son fundamentales para empezar el proyecto con buen pie. |
Ilustrator: Es un programa de diseño vectorial (ahora os explico que es eso).
Photoshop: Diseño de mapa de bit (imágenes JPG y esas cosas).
Indesign: Para maquetar manuales de reglas extensos (aunque el Word te cumple la función también).
¿Qué opino de los programas libres? Están bien si te ofrecen una alternativa más simple a las herramientas profesionales (no trabajes con un cañón si puedes usar una pistola), pero si son igual de complicados/completos que los profesionales… no le veo el sentido.
Vamos a empezar con algunos temas técnicos.
Imágenes vectoriales vs. Mapa de Bits.
¿Y eso que es? Pues te explico, la imagen vectorial trabaja con formas geométricas, el mapa de bits es un porrón de píxeles de colores ordenados (punto rojo, punto amarillo, punto rojo, rojo, azul, verde oscuro, azul… así hasta los millones de puntos que use la imagen). Para que lo entendáis, un circulo vectorial es una línea redonda alrededor del centro (es una cantidad de información bastante pequeña), un circulo de mapa de bits es un circulo construido con bloques de Lego, cuanto más grande es la imagen más pequeños son los bloques en relación a esta y mejor se ve (y más pesa). Cuando trabaje con gráficos vectoriales, me resultará muy fácil cambiar cosas como el color de relleno o el color y grosor de las líneas. La otra ventaja es que puedes escalar el elemento todo lo que quieras sin que pierda definición (lo que vulgarmente se llama ‘que se te ve el pixel’).
 |
| Usaremos vectores para iconos y dibujos de linea y bitmaps para fotos e ilustraciones. |
Lo correcto es trabajar fotos e ilustraciones en Photoshop y después coger esos archivos TIF y JPG y meterlos en el Ilustrator. Sobre ellos meteremos el resto de elementos como números, cuadros con texto, casillas, etc… (en otras ocasiones lo haremos al revés, importando los elementos vectoriales a la imagen de Photoshop, ya veremos eso otro día).
Mapas de Bit RGB y CMYK.
Joder con las siglas, que mareo… bueno, no os aburro. RGB es el sistema de color que usa una pantalla, suma colores para llegar al blanco. CYMK por contra es lo que se usa para imprimir, sumas colores y llegas al negro. Es importante conocer la diferencia por un motivo.
Si imprimes una imagen RGB, el resultado será siempre un misterio. No es que los rojos te vayan a salir azules, pero si es muy posible que te cambien los tonos de los colores y que aquello que en tu pantalla se veía de lujo y bien contrastado, resulta en unos números de un naranja pálido que apenas se distinguen del marrón asquerosete del fondo. Así que aseguraos de trabajar en CMYK para preparar vuestros archivos de impresión.
Resumiendo, para el blog y los emails RGB, para imprimir los prototipos CMYK.
 |
| Los colores que más van a cambiar son los tonos brillantes, que no pueden obtenerse en impresora. |
Tamaño de las imágenes.
Este es otro de los grandes errores que comete un novato. Si se ve bien en pantalla, se verá bien impreso… mal. O… voy a subir esta bonita foto de 8 mega píxeles a mi blog… mal también.
La resolución de una imagen para verla en pantalla debe ser de 72 ppp (puntos por pulgada), y para imprimir entre 200 y 300 ppp.
Para que os hagáis una idea, un A4 de buena calidad (300 ppp) mide unos 2500×3500 píxeles y pesará unas 2 megas y media (si es un JPG), esa misma imagen para verla en pantalla tendrá unos 600×800 píxeles y bien comprimida pesará unas 100 Kb. Así que ya sabéis, fotos grandes para imprimir, fotos pequeñas para los blogs y e-mails.
 |
| En pantalla se ve estupendamente pero cuando imprimas verás esto. |
Bueno, aclarados algunos de los aspectos técnicos, vamos a empezar con la parte artística y subjetiva del meollo. El diseño propiamente dicho. Vamos a repasar algunos de los errores más comunes y como solucionarlos.
El mal de Royo (Luis).
Estamos haciendo las cartas para nuestro prototipo de ‘magos vs. cachondas’ y ya tenemos un montón de dibujos de Luis Royo de tremendas guerreras sin armadura, las metemos en las cartas y les ponemos encima el texto con unas letritas blancas de las que hablaremos después… y ¡Oh, sorpresa!, no se ve un carajo.
Es un error de bulto muy común, confundir ‘bonito’ con ‘sobrecargado’. Mantén un diseño limpio y cuadriculado (deja las fantasías en maquetación para cuando seas un experto) que no distraiga la atención sobre lo realmente importante, la información de juego del elemento que estás diseñando. Sé que esto parece una contradicción con lo que comentaba en la primera entrega de esta serie sobre el buen aspecto, pero como ya os digo bonito puede (y suele) ser discreto. Tomad como ejemplo el CO2, es un juego con un diseño cuidado pero muy esquemático y minimalista, todo iconos y fondos de color.
 |
| CO2 es un ejemplo de diseño minimalista, todo ventajas para el diseñador novato (foto BGG). |
El terror gótico.
Este es el otro gran mal de la informática popular, los ordenadores deberían venir con 2 fuentes, arial y times y para el resto que fuera obligatorio sacarse un titulo en artes gráficas.
Vamos a ver ¿Para qué ponemos texto en una carta/tablero/loseta? – Para leerlo.
Entonces… ¿porqué demonios usas una fuente que es casi ilegible a tamaño 16 sobre fondo blanco? (ya no hablemos de la misma fuente a tamaño 7 sobre la entrepierna de la guerrera sin armadura). Olvídate por favor de fuentes góticas, galácticas y de las mil y una noches. Si tienes dudas entrecierra los ojos, si puedes seguir leyendo los textos es una buena fuente (ya hablaremos más adelante de cuando el aspecto puede ponerse por encima de la funcionalidad, pero es muy pocas veces, así que de momento está prohibido).
 |
| Puedes sacrificar media carta para poner un dibujo mono, pero no la jugabilidad. |
La cabra de los diez mil retoños.
Otro defecto común de los diseños amateur es la falta de estilo, una imagen común que unifique todos los elementos del juego. Esto le da un aspecto muy descuidado al juego, parece que lo hayamos montado allí mismo con lo que hemos encontrado en un baúl viejo.
¿Qué cosas puedes hacer para unificar el estilo de diseño de tu juego?
– Usa una única fuente para todos los textos (o al menos fuentes similares).
– Usa un mismo criterio para las ilustraciones, si son dibujos en blanco y negro estilo old-school que sean todos así, no mezcles, dibujos, con fotos, con capturas de pantalla de Dragon Ball (esto a veces es un currazo de búsqueda por internet, pero es importante).
– Y lo mismo para los elementos de maquetación. Si las fichas llevan un fondo suave de color, no pongas un fondo con texturas recargadas para las cartas y una foto aérea para el tablero. Si el icono de ‘herido’ es una sencilla cruz roja, no hagas que el de sigilo sea un detallado dibujo de Altair.
 |
| Un diseño uniforme da una sensación más profesional. El efecto es sutíl a pequeña escala, pero muy importante cuando vemos el juego en conjunto. |
Las herramientas prohibidas.
Hay una serie de costumbres entre los diseñadores noveles que te llevarán directo al reverso tenebroso, sin pasar por las paradas de miedo, ira y odio. Son como los morros de silicona, no quedan bien, así que no te los pongas (cuando tengas más experiencia podrás jugar con esos botones, pero por ahora te van a dar más problemas que otra cosa).
Los degradados. El degradado es difícil de usar correctamente y acaba dando problemas de claridad con textos que se ven bien en una parte del degradado y mal en otra (ya no hablemos de los degradados que mezclan colores…). Usa colores planos.
Los efectos. Este mal viene heredado desde el ancestral Power Point y sus transiciones ‘bonitas’. El problema con estas cosas es que no ves el momento de parar. Empiezas a meter ¡Volumen! ¡Efecto 3D! ¡Textura!… y te perece que cada vez está más chulo ¿pero tú has visto alguna vez a Falete vestido de largo?… pues eso.
Bueno, con esto creo que ya me he enrollado bastante por hoy, en la próxima entrega entraremos con algunos consejos sobre cómo diseñar pensando en la producción futura del juego.
Este fin de semana mis piratas estarán conquistando las Jornadas de Rol y Juegos de Mesa de Gandía (espero veros a alguno por allí), así que la próxima tocará reseña del evento. Nos vemos, y recordad que podéis seguir el blog en facebook, Google+ y twitter en 2maracasD10.
Una entrada muy interesante.
Coincido con eban, y de utilidad básica. Gracias
Hola quería felicitarte por esta entrada es estupenda para los que se inician (y para los no tan nuevos). Yo llevo bastante tiempo con photoshop (años) y soy muy cuidadoso con la mayoría de cosas que has dicho, pero pese a eso siempre se aprenden cosas y se acaba de dar el caso. Un saludo
Gracias a todos por el interés. Seguiremos con la sección XD
Me parece un buena articulo.
Sobre ¿Qué opino de los programas libres? coincido en que si hay un herramienta sencilla para hacer algo la uses pero si vas a comenzar es mejor no invertir un dinero en software (los programas de adobe no son precisamente gratuitos,cada uno debe costar como unos 1000€).
Lista de programas libres y gratuitos (Recordar que un programa libre, no tiene porque ser gratuito)
Inkscape: Es un programa de diseño vectorial.
Gimp: Diseño de mapa de bit
Scribus: Para maquetar manuales de reglas extensos
Libreoffice: Suite ofimática que serviría para crear manuales
Encontrarás Mooc, tutoriales y manuales.
¿Que los programas de Adobe no son gratuitos?… yo encontré una oferta muy buena que me venía todo grátis con el windows 7 incluido, el office, el autocad y un montón de programas más, además de películas, series, música, juegos… Aarrrrr!!! P- )
Ningún programa de Adobe de la línea profesional es gratuito y dudo que nadie te los regale. Lo más barato son las suscripciones mensuales que dependiendo del nivel de acceso que necesites es mas o menos asequible.
Pero sí, cualquier programa de Adobe de los que has nombrado cuestan entre 500-1000€ en sus ediciones profesionales.
¿O no sabéis usar programas de descarga? ¿o han conseguido convenceros de que bajarse el Photoshop con el uTorrent es ilegal? -_-
Falete vestido de largo…es la imagen mental que necesitaba hoy XD
Gracias por el artículo y felicidades por el blog, útil y entretenido a partes iguales, ¡buen trabajo!
Gorgeous!
Acabo de leerme esta entrada y me has enganchado al tema del diseño de juegos (bueno, en realidad también ha sido porque estoy desarrollando una modificación del Love Letter para un trabajo de estudios y tus consejos creo que podré aplicarlos para que me ayuden a ello). Espero ponerme al día con toda tu sección de diseño y a ver si me animo a diseñar y/o rediseñada alguna cosilla.
Gracias por toda la info.