Articles

Un Tutorial Básico de Sprites

Aquí hay un recorrido básico de cómo convertir tu dibujo en pixel art usando algunos trucos de Photoshop o GIMP.

Paso 1: El dibujo

Tenga en cuenta que no hay detalles de máscara y que las manos son agradables y simples

Es bueno tener una tableta para dibujar directamente en un programa de arte como Photoshop. De lo contrario, escanee un dibujo con lápices pesados o líneas entintadas. Si quieres imitar un estilo de juego específico, usa un sprite ampliado como referencia para las proporciones y el ancho del cuerpo (lo que desafortunadamente no hice con este boceto). Mantenga los detalles al mínimo para no desordenar las cosas cuando las reduzca.

Tiempo: varía

Paso 2: Redimensionar

No redimensionar con proporciones restringidas: estire y aplaste para que coincida con las proporciones de su objetivo

Encuentre un sprite similar al tamaño (o pose) que desea copiar. Reduzca el dibujo y, al mismo tiempo, hágalo tan ancho como sea necesario para que coincida, si no lo resolvió en el paso 1. Tenga en cuenta que en este boceto, quiero aproximadamente la misma altura, pero un poco más ancho.

Tiempo: 30 segundos

Paso 3: Nitidez

Utilice la herramienta Umbral de Photoshop o GIMP para ahorrarse un montón de tiempo de limpieza

Combine la capa con la línea de trabajo redimensionada en una capa con un fondo blanco sólido. Vaya a IMAGE >AJUSTES > UMBRAL en Photoshop o su equivalente en GIMP para reducir la línea a píxeles puros en blanco y negro. Asegúrate de hacer zoom de cerca para ver mejor los píxeles. Mantenga todos sus detalles originales lo más comprensibles posible para que no tenga que consultar su dibujo original con demasiada frecuencia.
Este paso hará que limpiar las líneas y rellenar el color sea fácil y le ahorrará un montón de tiempo en la limpieza a mano.

TIEMPO: 10 Segundos

Paso 4: Limpieza

Perfilar los contornos hasta que estén de 1 píxel de ancho. No tenga miedo de romper algunos contornos, y no se preocupe por detalles más finos

Haga una capa solo para las líneas (elimine todo el blanco). Haz zoom y limpia los contornos. Si quieres romper líneas, este es el lugar para hacerlo. Aún no es el momento de trabajar en los detalles finos (de nuevo, máscara y manos), simplemente comienza a darte anclas para colorear. Cuando termine, bloquee la capa.

TIEMPO: 10-20 Minutos

Paso 5: Herramienta de relleno los planos

Se rellenan los colores planos – en este caso los colores de sombra

Rellenan los colores planos en una capa debajo de las líneas. Resuelve los detalles del atuendo, etc., pero no hagas ningún sombreado. Se añadirá luz después. Este paso realmente le da a spriting la sensación de «producción de cómics». Nota especial: Algunas personas prefieren usar los colores del área clara para sus planos, y luego agregar las sombras después. Esto producirá un efecto final diferente, así que experimenta.

TIEMPO: 2 o 3 Minutos

Paso 6: El sombreado

Ahorre tiempo y obtenga buenos colores usando blanco en capas configuradas para Superponer para iluminar pisos de sombra

Ahora mismo tiene una capa para líneas y una capa para pisos. Aquí es donde Photoshop le ahorra un tiempo importante. Inserta dos capas entre las líneas y los planos. Cámbialos a estilo Superpuesto y haz que el superior tenga un 50% de opacidad. Seleccione un lápiz de 1 o 2 píxeles y comience a colocar algunos blancos. Iluminación instantánea a través de sus colores.Nota: Primero trabaje con la capa de opacidad al 100%. Cuando tengas el sombreado sobre cómo te gusta, usa la herramienta magic want para seleccionar las áreas no blancas. Luego pasa a la capa de 50% para el sombreado medio (después de ocultar las hormigas marchantes de la varita). No querrás que las dos capas se superpongan a sus blancos o obtendrás reflejos adicionales.

TIEMPO: 30-90 Minutos

Paso 7: Comprobación de sombreado

Compruebe los detalles de su sombreado renderizando a escala de grises y eliminando las distracciones de color

A veces necesita ojos nuevos para comprobar que tiene la sombreado a la derecha.
Este es el aspecto que deberían tener tus capas: los planos rellenos con negro es lo que estamos agregando ahora mismo. Copie la capa de planos, bloquéela, rellénela con negro(Edite > Fill). A continuación, cambia tus dos capas blancas de Superpuestas a Normales. Deberías obtener esto:

Realmente no se me ocurre una mejor manera de probar el sombreado que eliminar todo el color del disfraz que distrae y aumentarlo al máximo contraste. Es la manera más fácil de encontrar cosas pequeñas que no se ven bien, o incluso cosas grandes que estabas demasiado concentrado para notar. Lo que es mejor, la corrección es solo una cuestión de arreglar los blancos, no cambiar todos y cada uno de los colores. Pruébalo también con un fondo negro.Hmm. Creo que le echaré otro vistazo a su mano izquierda antes de terminar por completo.

TIEMPO: 90 segundos para verificar; varía para correcciones

Paso 8: Líneas de color

Coinciden con la oscuridad del contorno con el resto del sombreado

Ahora que han hecho su trabajo b&w superpuesto para el paso 7, es hora de que los contornos se coloreen y antialiado en las zonas de luz. Con sus capas en ‘bloqueo’, debería ser un broche de presión. RECUERDE SIEMPRE: Trabaje con fondos de colores oscuros (pero no negros puros) cuando realice trabajos de contorno. Ayuda al antialiasing.

TIEMPO: 30-60 Minutos

Paso 9: Detalles & Limpiezas

rematar los detalles más finos

Este es el ‘sutileza’ de la etapa. * Consigue los colores correctos (La superposición en realidad hace un buen trabajo con el color) * Agrega detalles difíciles de pixelar (Triángulo en la máscara, líneas azules alrededor de los bordes de los guantes, etc.) *Termina los detalles sutiles que guardaste por ahora (manos) *Por último, busca errores. Tenga en cuenta que «me olvidé» de sus botas amarillas, pero con este proceso, es solo cuestión de agregar el amarillo a la capa plana. Es pre-sombreado!