Este tutorial está hecho para los más novatos, pues no sólo trata el antialiasing- es decir, sombreado de los bordes, de un sprite en este caso- sino que mezcla el uso de los colores y pequeños errores típicos del novato, así que espero que os sirva, ya que dominar esta técnica de suavizado no es tan fácil (yo tambien tengo problemas a veces jeje).

.: El sprite :.




Este es el sprite que usaremos para empezar, está en formato GIF, que junto a PNG son los dos formatos más utilizados y recomendados, puesto que BMP es muy pesado (aunque al comprimirse pese poco), y JPG/JPEG mutila la calidad del sprite (NUNCA uséis este último, estropea vuestro trabajo si no sabéis ajustar la calidad).
Este sprite está plagado de fallos que intentaremos arreglar paso a paso.


.: Errores comunes :.




Bien, hay pixels que sobran en los bordes de este sprite, la línea debe mantener su grosor si queremos hacer un buen sprite, y en este caso, debe ser de un píxel.



Luego está el punto desde el que viene la luz, en este sprite no hay ninguno en concreto, así que, poniendo una flechita indico la dirección desde donde procede la luz, y cambio el sombreado del sprite para que sea más coherente ( aquí como podéis ver, la luz viene de arriba a la derecha).



Hagamos ahora un repaso a los colores. Son chillones, poco realistas... no queda bien usar tonos saturados para nuestros dibujos pixelados. Además, el contraste se tiene que tener siempre en cuenta, así que diferenciamos también colores que se parezcan mucho.
El pelo rubio, además, era un poco verdoso, añadimos más valor de rojo y restamos verde para que se vea mejor (antes no se me daba muy bien hacer personajes rubios, salían de color amarillo verdoso).
Además, eliminamos ese negro puro que hay en los bordes, y lo sustituimos por verde oscuro y violeta oscuro, que quedan mejor y no descontrastan tanto.


.: Bordes Suaves :.




El siguiente error se encuentra en los bordes, y aquí es donde aplicaremos el 'antialiasing', suavizaremos los bordes para que no queden tan mal, ni nos coman tanto espacio.
Lo mejor es que lo veáis vosotros mismos, haced click en el gif para observar cómo voy suavizando estos bordes. A veces hay que utilizar más colores, pero en este caso podemos usar los que ya había en la paleta para realizarlo. Las líneas de un píxel se van borrando un poco, y se ponen colores más claros que van sustituyendo las zonas donde antes estaban, aunque eso no significa que se borre el color usado para estos bordes.




Finalmente, damos una serie de retoques al sprite. Por un lado, con la técnica del 'antialiasing' dominada, la utilizamos en los detalles que añadimos ahora. He decidido añadir un verde más claro en la ropa, un poco chillón, el pelo ahora tiene unos brillos más pequeños y el lazo azul ahora está algo más detallado. La mirada también se ha retocado para ser algo más oscura.

.: Finalizando :.




Bueno, este es el resultado final : ) Esta técnica requiere práctica, no la vais a dominar a la primera, pero una vez lo hagáis, os daréis cuenta de lo útil que es, además de que se puede aplicar de varias formas.
Hay quien suaviza mucho más que yo sus sprites, dando la sensación de un dibujo más que de un sprite, por ejemplo Domino, que usa muchos más colores, como en este sprite:


Así que podemos decir que existen varias formas de suavizar bordes, es una técnica que muestra también nuestro estilo, como la elección de colores : D

Volver atrás