Haciendo Sprites -Tutorial de Ms paint-

"Sprite" es la palabra con la que se define a los gráficos de mapa bits dibujados en un ordenador, por lo general usados en videojuegos. 

Con algo de practica es sencillo crearlos (lo complicado es animarlos).
He creado algunos cuantos relacionados con el mundo megaten , una de mis sagas favoritas. 

Les traigo este tutorial con la esperanza de que los que desean intentar hacer algo relacionado a esto no se echen para atrás usando escusas como que el "paint es muy difícil de usar" o "el paint es una porquería"  lo cual no es cierto.


Les enseñare como hice al Trompetista de Shin Megami Tensei Nocturne.

Antes que nada aclaro que esta es la forma en la que yo los hago, no es una regla o algo, otra cosa muy importante: hay que practicar.

Si algo no se entiende o ven algún error de cualquier tipo no duden en avisar, a decir verdad es mas difícil de explicar de lo que pensé XD

Para hacerlo necesitaremos un software especial que esta en todos los sistemas Windows y es el software más funcional y de mejor calidad que ha hecho toda esta empresa, me refiero por supuesto al MS Paint.

Por que a diferencia de otros nunca me has fallado.

Heil! paint!

Muchas personas dicen que el paint es un programa inútil, no lo subestimen, con algo de paciencia esta herramienta es mágica.

Estas son las herramientas necesarias:

*Lupa:

Dibujar en MS paint es muy distinto a hacerlo con papel, existen tablillas que te permiten conectarte a tu pc y hacer trazos como si de una hoja se tratara, lo que facilita hacerlos, o eso supongo por que nunca he usado una de esas, he hecho dibujos en MS Paint , grandes y pequeños  solo con el ratón de computadoras de escritorio  y con el ratón touch de las portátiles y se puede igual (quizás sea un poco mas cómodo con la primera) si se necesita buen pulso para hacerlo pero afortunadamente existe la herramienta lupa (o ampliar o como se llame)

Esta nos permite ampliar la vista de los dibujos y poder hacerlos pixel por pixel con gran precisión si necesidad de tener una mano muy habilidosa, eso si entre mas grande sea el dibujo mas tardaras en hacerlo así, recuerda pues que entre mas pequeño el dibujo mas fácil y rápido lo terminaremos.

(Recomiendo aumento x6 o x8, por lo general es el que yo uso)

*El lápiz y el pincel:

Indispensables, ambos se pueden usar para hacer trazos en dibujos grandes, en dibujos pequeños como los que vamos a hacer nos sirven para eso mismo y además, acompañado con la lupa, para hacer trazos pixel por pixel o punto por punto.

*Seleccionador de color:

Esta herramienta copia otro color que tengamos en la zona de trabajo, incluso si vemos un color interesante de otra imagen podemos cortarlo, pegarlo y luego copiarlo para poderlo usar en  nuestro dibujo.

*Bote de pintura:

Rellena la zona seleccionada, tiene que ser una zona de líneas cerradas, útil si se quiere colorear algo muy grande.  

*Selección:

Selecciona una area del dibujo, una vez seleccionada le damos clic derecho y se nos mostrara opciones tales como cortar, copiar etc…

No usaremos mucho esto para hacer el sprite, pero es buena herramienta y creo que se debe de mencionar.

*Deshacer:

Usando Ctrl Z podemos deshacer el ultimo cambio que hicimos, tengan en cuenta esto por si se equivocan

Recomendaciones:

*Esto es un ejemplo, apliquen lo que escribo en sus propios trabajos.

*Tengan mucha paciencia y no se desesperen.

*¡Háganlo por diversión y por favor no se presionen!

*Intenten crear sus propios personajes desde cero.

* Es buena idea empezar estudiando otros sprites y la mejor manera de hacer esto es modificando algún sprite ya existente, pero no se queden trabados ahí, intenten hacer algo por ustedes mismos.

*Si conforme lo van haciendo no va saliendo como lo planearon, no lo desechen, mas bien síganlo, a veces te puedes llevar una agradable sorpresa.  

*Recomiendo que guarden su trabajo en formato PNG, los demás formatos no conservan tanta calidad.

*Practiquen.

¡Empecemos!

1.- Necesitamos saber mas o menos que vamos a hacer e intentar dibujarlo como una mancha con la herramienta lápiz o pincel, o sea  no intentar entrar en detalles, también conviene visualizar el dibujo de una forma mas o menos geométrica, por ejemplo la cabeza del personaje será un circulo, la mandíbula un rectángulo, ¿Qué podrían ser los brazos? Bueno son dos líneas que crean un ángulo, las alas podríamos decir que tienen forma triangular con líneas curvas, su trompeta es una línea y su cuerpo, en la forma mas simplificada posible es una figura alargada y curva.

Si se que es difícil imaginárselo pero para eso tenemos esta imagen.

No se molesten en hacer figuras geométricas perfectas, traten de hacerlas de forma similar pero no exacta, no usen las herramientas para crear círculos y rectángulos, son inútiles ya que hacen ver al dibujo muy plano, si se pueden usar pero créanme que si lo hacen todo con la herramienta lápiz o pincel tendrá un efecto menos recto y mas “vivo”.

2.-Le agregamos algo de color, justo ahora puede ser cualquiera, pero no estaría mal que a partir de aquí definan las gamas de color que usaran, aquí empezamos a darle color al cuerpo, pueden usar el bote de pintura para las áreas grandes y el lápiz en pequeñas.

3.-Les recomiendo que hagan una especie de paleta con sus colores dentro de alguna parte de la zona de trabajo, pueden seleccionar el color cuando quieran con el seleccionador de color, también pueden seleccionarlo directamente del dibujo.

Nótese que no usare el color blanco puro para la túnica que es de ese color, uso distintas gamas de azul ya que las gamas más oscuras del blanco nos darían colores grises muy oscuros.

A mi no me gustan los colores predeterminados que tiene el paint, si se quiere una gama de color interesante lo mejor es hacer sus propios colores, para hacer esto le damos doble clic a cualquier color de la paleta predeterminada.

Luego se abrirá una ventana y le damos clic en “definir colores personalizados”

Ahora podremos seleccionar un color nuevo moviendo la cruz y cambiarle su gama tonal con la barra que esta junto.

Les recomiendo que no usen colores muy fuertes.

4.- Las gamas de color sirven para darle efectos de luz y sombra, lo mas recomendable es usar tres, pueden usar más pero con tres ya se ven bien.

Las gamas de color van de lo más claro a lo más oscuro y viceversa, por ejemplo estos son los colores de este sprite:

Ahora empezamos a agregarle sombras y luces, todo debe de tener una sombra o un efecto de luz, traten de ver como se compota la luz y la sombra en la tela, si nos fijamos aparecen sombras curvas, recuerden  que siempre se deben separar los colores más oscuros de los más claros con un color de tono medio. La luz se opone a la sombras, así de simple.

Otro efecto de sombra que puede ser útil a veces es el del tramado.

Flecha: Efectos de sombras y luces.

Circulo: Sombra de tramado.

5.-Hago lo mismo con las alas, solo que a estas les pongo sombras y luces de forma recta para que asemejen alas, le doy efecto de luz en la parte delantera para que parezca que la parte trasera del ala esta hacia atrás, retomare esta parte luego.

6.- Remplazo las líneas negras por unas mas claras para que parezca que su túnica  es de un blanco mas puro, esto no se nota mucho a simple vista pero se vera mejor al final, esto lo explico mas afondo al final.

7.-Agrego mas detalles y coloreo otras zonas, si ven algo que no les gusta pueden ir corrigiendo conforme avanzan y van detallando, por ejemplo la parte de la mano, esta sobras negras que hicimos al principio las pueden quitar con el borrador pero yo prefiero usar el pincel y el lápiz para corregirlo con mas precisión.

No se mortifiquen con las manos, háganlas de forma simple, un rectángulo con algunas líneas pequeñas al final y una línea mas pequeña que se opone a las otras, eso podría ser, pero no intenten detallarla con cinco dedos o algo así, las cosas muy pequeñas y con muchos detalles traten de simplificarlo lo mas posible, eso si, no olviden agregar luz y sombra, créanme, el camino para un buen sprite es el buen uso de estos dos.

8.- Ya quitamos todas las sombras del contorno, hay que procurar que la línea de contorno sea lo mas delgada posible, de un pixel nada mas, en uno de los lados de su cuerpo remplace la línea a un gris mas claro que el del contorno, esto da un buen efecto de luz.

También le agregué otro detalle a los brazos e introduje un nuevo color azul oscuro en la parte más oscura de su túnica, deje partes negras y partes de color mas clara, un si y otra no para darle efecto de movimiento, si se fijan las telas siempre tienen un movimiento ondulatorio.

Esas pequeñas líneas en el diseño original son triángulos y circulo imposibles de imitar aquí así que las simplifico con líneas que siguen el ritmo de la tela, es por eso que la lupa es tan importante aquí, esos pequeños detallitos son muy difíciles de hacer sin esta.

9.- Retomo las alas, ya tenia la estructura básica pero si se fijan aquí con la herramienta lápiz alargue algunos puntos para que se vieran como plumas, si ven alguna ala se darán cuenta que entre mas a la orilla estén la plumas mas largas son, por eso las líneas mas largas las puse al final, también detalle con luz y sombra los brazos.

10.- La trompeta es pan comido ya que tiene una forma muy simple,  una línea y unos círculos, y parte de un cono redondeado al final.

Lo malo es que es una zona muy rica en pequeños detalles que debido a su pequeñez me es imposible realizar en tan pequeña escala, por lo que así la dejaremos, solo le agregare luz y sombras al final.

11.- La parte divertida: el cráneo.

Simplifiquen todo, el pelo hagan una forma circular, el cráneo también es medio circular pero NO es un circulo, los ojos tienen forma medio circular pero NO son un circulo, por eso tan importante aprender a ver, el cráneo se va aplanando en la parte del frente, mientras que la parte superior se va curvando y la parte trasera se va alargando, aquí no se aprecia muy bien pero si tienen en cuenta que no todo es como creen que parece aprenderán a simplificar las cosas de forma adecuada.

Miremos que las cuencas de los ojos (y los ojos mismos) tienden a ser ligeramente alargados, digamos pues que las cuecas tienen una forma semi-ovoide bastante irregular.

Lo que yo hago es intentar hacer una forma semi-ovoide alargada con el lápiz, debido a que aqui menejamos pixeles es imposble crear un ovalo perfecto en tan pequeña escala, lo cual es perfecto, esto lo hace irregular y hace que si parezca un cráneo, la nariz es una forma medio triangular, lo emule aquí con una forma de L volteada.

Dientes superiores un rectángulo curvado, mandíbula inferior una línea que se va acoplando a la parte inferior del cráneo, yo las hago de un pixel, todo con luz y sombra por supuesto.

 Aquí no detalle mucho la zona de los dientes pero si quieren hacer algún craneo con dientes le recomiendo que no se vallan directamente a dibujarlos con las líneas mas oscuras (como el negro predeterminado) si no más bien usen interpolaciones de luz y sombra.

Por ejemplo, aquí lo dientes consisten solo en un pixel claro, uno oscuro, uno claro etc...

Se ve mejor de lejos pero de cerca pueden entender mejor a lo que me refiero.

12.- Uf! Por fin el final, le damos luces y sombras a lo que nos faltaba, le damos un efecto de curva al pelo y listo!

No supe como resolver la parte de la cabeza así que me fui a lo fácil y use un sombreado de forma de tramado, como dije puede llegar a ser útil.

 Colores usados + resultado final

Y al final me quedo esto:

*Truco extra 1: Usando la simetría para terminar mas rápido.
Esto solo es posible si se quiere hacer a un personaje de frente.
Casi todos los seres vivos son simétricos, si tomamos a un humano y lo dividimos por la mitad ambas partes serán casi iguales, como si se vieran en un espejo.

--Pequeño paréntesis que no tiene mucha relación con el tema--
(Dentro del dibujo clásico el hemisferio derecho es el mas creativo ya que no se centra en las definiciones, si no en las formas, por desgracia todos somos dominados por el izquierdo que es el descriptivo, una buena forma de mejorar nuestra perseccion y activar el emfisferio derecho es dibujar algo que nos sepamos de memoria, luego intentar dibujarlo de nuevo pero de forma invertida, algo así como las imágenes de caras que forman copas, esto es un buen método para mejorar en el dibujo ya que se aprende a ver como lo hacen los artistas.)

Volviendo al tema, les enseñaere de que hablo.
Primero dibujare un tema que como podrán haber imaginado ya es de mis favoritos debido a su prácticidad y buen aspecto; un cráneo.

Dibujamos todo como en el principio, pero solo hacemos la mitad, pueden ayudarse colocando una linea guia de forma vertical para no salirse.

Le damos color, luces y sombras, nótese que solo use 2 tonos amarillos y 2 grises.

Ahora, podemos hacer esto de la forma  justa y tradicional, que seria dibujar el resto imitando la parte ya hecha y así fortalecer nuestro hemisferio izquierdo, o podemos hacer trampa, despues de todo paint nos permite hacerlo, ademas si bien confio en el ejercicio de la caras en papel dudo que sea igual de eficaz en paint, cabe mencionar que el titulo dice "Truco extra1: Usando la simetría para terminar mas rápido" así que hagamos trampa y terminemos mas rápido!

Con la herramienta "seleccion" (el rectángulo punteado) seleccionamos el cráneo y le damos cilc derecho, luego clic en copiar y luego pega.
Tomamos la copia y le damos clic derecho y seleccionamos "voltear o girar" y luego en "voltear horizontalmente" (el mensaje puede variar dependiendo de la versión de paint que tengas)
Después la posicionamos del lado contrario a la original y hacemos que se unan.
Si no les agrada el aspecto pueden usar el comando deshacer y modificar un poco el dibujo.

Esto ultimo es para darle un toque de luz y de sombra.
Seleccionamos un color amarillo mas claro y un gris mas claro, y aclaramos uno de los lados del cráneo.

Listo!

¿Ven que fácil es tener un dibujo simétrico con esto?
Eh notado que este tipo de sprite es muy usado en algunos RPGs...



 

*Truco extra  2: cambiar la paleta de color.

Esto tiene que ver con lo que hice en el paso 6 donde remplace el color negro por uno mas claro, si al finalizar no nos convencen los colores o quieren cambiar el color de un sprite ya hecho intenten este truco que descubrí por accidente hace muchos años mientras cortaba imágenes, es probable que muchas personas ya conozcan este truco pero para los que no, aquí esta.

Esto también se puede hacer solo con el bote de pintura, pero se tardaria mucho, con este truco es muchísimo mas rápido y con menos probabilidades de equivocarse.

Primero, esto se puede hacer en algunos programas de edición pero el paint puede hacerlo siempre y cuando el dibujo tenga pocos colores.

Aquí tenemos este que tiene 21 colores:

Definimos cuales serán los nuevos colores, remplacemos las gamas azules por moradas y el amarillo por un marrón o cafe, sip hagámosla castaña XD

OK, primero seleccionamos la herramienta “seleccionador de color” y le damos clic derecho a la parte que queramos remplazar, en este caso será el amarillo oscuro (técnicamente es un anaranjado pero me referiré a el como un amarillo), ahora ese color se convertirá en el color de fondo.

 Por lo general el color de fondo es el blanco, en la barra de color se nos muestra siempre cual es el color de fondo actual.

 El color de fondo es el que se encuentra detrás del color principal, en este caso el negro.

Una vez hecho esto damos clic en la herramienta “selección”  (el rectángulo punteado), cuando lo selecciones aparecerá los siguiente dos cuadros  en la parte inferior, si seleccionas el ultimo el color de fondo se harán transparente, hacemos eso y así lo dejamos.

En la primera imagen esta activada la opción de tener el color secundario (fondo) de tono opaco, si seleccionamos la parte inferior ese color secundario sera transparente.  

Ahora con la misma herramienta seleccionamos el sprite y lo cortamos dándole clic derecho y dándole clic en cortar.

Quedara un cuadro de color amarillo oscuro (el nuevo fondo) como este:

Entonces seleccionamos el color que lo remplazara, en este caso un color café oscuro, con el bote de pintura rellenamos el espacio.

Ahora volvemos a usar la herramienta “selección”  y le damos clic derecho y pegar (o CtrlV), lo ponemos encima del cuadro café oscuro y si hicieron todo bien ahora el amarillo oscuro será transparente y se vera en su lugar el café oscuro.

Quizás ahora no se note mucho, pero ya remplazamos un color.

Repetimos este proceso con todos los colores, yo prosigo con el siguiente  amarillo de tono medio y lo remplazo con el café medio.

Selecciono el color transparente, selecciono el remplazo, corto...

 Queda un espacio de fondo...

Lo remplazo con el bote de pintura...

Pego y el cambio se hace mas obvio cada vez.

Y hacemos lo mismo con el amarillo mas claro para tener algo asi:

Hacemos lo mismo con los azules, reemplazándolos con tonos morados y tendremos esto:

Otros ejemplos:

 

Tarde menos tiempo en editar el color para tener todos estos  que en hacer el sprite original.

Si aprendes los pasos, lo cual no es difícil, puedes usar esta técnica para hacer muchos personajes de una forma práctica y rápida a partir  del mismo sprite.

Por ejemplo puedes hacer un sprite, copiarlo y cambiarle el color, y con algunos cuantos agregados que le des a la copia puedes tener un nuevo personaje como hice aquí:

La versión original era el unicornio, me tomo más o menos entre 30 y  40 minutos en terminarlo!!! (supongo que fue por que me distraje intentando hacer dos cosas a la vez jeje)

No obstante use al unicornio como base para hacer al bicornio que es una copia idéntica del unicornio solo que con el color cambiado y algunas ligeras diferencias, lo mismo con el kelpie.

Lo genial es que tarde más o menos 30 minutos en hacer tanto a kelpie como a bicornio, un poco mas de una hora en este trió, si los hubiera hecho desde cero hubiera tardado el doble.

Hacer todo esto fue divertido, pero muy cansado, espero que les sirva de algo.

Bueno, creo que eso es todo, me despido, si quieren saber algo mas o no entendieron algo no duden en preguntar!

  

Nos vemos he-ho!