Aprende cómo crear pixel art en Photoshop

Las ilustraciones en pixeles son magníficas para hacer íconos, imágenes isométricas y hasta escenas completas en computadora. Pueden crearse fácil y rápidamente utilizando Photoshop con un par de ligeras modificaciones en los ajustes de preferencias.

Sin embargo, la única desventaja es que el pixel art luce mejor cuando cada pixel ha sido colocado manualmente, lo contrario a utilizar algún filtro Photoshop. Es correcto, colocado a mano, sé que esto suena descabellado, especialmente cuando algunas escenas de pixeles tienen miles de pixeles. Pero sin la colocación manual tu pixel art puede lucir como una imagen con baja resolución, así que ¡tómalo en cuenta! 

Pienso que una buena regla de oro antes de comenzar el tutorial de arte pixel es que deberías poder ver tu creación claramente como un grupo de diferentes ladrillos cuadrados de color, pero luego si haces bizcos y desenfocas tus ojos, puedes hacer que resulte una imagen. Imagina que estás haciendo un mosaico, solo que no necesitas una lechada. 

A continuación se muestra una completa pieza de dibujo en pixeles, y crearé algunas de las piezas más básicas en este trabajo.

Software para dibujar pixel art

Bueno, comencemos a dibujar. Solo en caso de que no tengas una copia de Photoshop, hay algunos programas gratuitos dedicados a los dibujos en pixeles que puedes descargar gratuitamente:

• Pixen (Mac)
• Graphics Gale (Win)
• Encuentra más aplicaciones en este enlace.

He experimentado con ambos programas, pero regresé a Photoshop porque estoy acostumbrado a los comandos del teclado.

Ahora configuremos la página para nuestro pixel art Photoshop

1. Primero abre las preferencias en Photoshop y establece la interpolación de imagen en "Por aproximación".
2. Crea una nueva página de 300 px por 300 px en una resolución de 72 ppp.
3. Selecciona la herramienta Lápiz en 1 pixel. Las herramientas Lápiz y Borrador son las únicas que realmente necesitarás.
4. Ocasionalmente podrías usar la varita mágica para seleccionar un área para rellenar, solo asegúrate de que la opción Suavizado esté desactivada.

Si usaste la herramienta pincel en 9 pixeles en lugar de 1, obtendrás un suavizado y arruinará el efecto de pixel con borde definido. Así que apégate a 1 pixel. ¡Usa solo lo necesario! como solía decir mi mamá..

Cuando tu arte pixel es visto al 100% (tamaño real) la herramienta lápiz en una anchura de 1 pixel es muy pequeña, así que podría resultarte difícil verla y manipularla. Una idea es expandir la vista a 800% para que puedas ver lo que haces. A menudo tengo una segunda ventana abierta en Photoshop con la misma vista de pantalla en 200%, así que puedo ver rápidamente cómo mi dibujo se aprecia de muy cerca y también desde un poco más lejos al mismo tiempo.

Podemos guardar nuestro documento para crear pixel art como un archivo PSD y exportarlo para usarlo en la web posteriormente como un archivo GIF. También podemos agrandar el archivo después y convertirlo en TIF para impresión CMYK.

Comencemos a dibujar pixel art en Photoshop

Muy bien, empecemos intentando algo como este libro abierto. Con la herramienta Pluma dibuja alrededor del borde para crear tu contorno negro. Luego rellena los colores lisos de la página y el separador de libro.

Crea la idea de texto en la página con algunas líneas de pixel. Observa cómo ponemos un ligero pliegue en la línea para dar la impresión de una leve curva en la página.

Por último añade algunas iluminaciones en el centro de las páginas y en el lateral del separador. Un bonito detalle es una iluminación de un solo pixel en la parte inferior en la esquina exterior de cada página, da una insinuación de un borde de página en lugar de ser un bloque sólido.

Una vez que tengas las bases de los contornos, los colores, las iluminaciones y el sombreado, puedes probar la elaboración de otras formas sencillas.

Líneas de pixel anguladas

Los íconos de pixel como los que se muestran arriba pueden diseñarse como una serie de líneas que están a 90° una de otra y son casi cuadrados y rectángulos. Aunque ocasionalmente, podrías necesitar una línea en un ángulo. 

Algo a tener en mente es que las líneas anguladas lucen mejor cuando son un patrón regular. Si son irregulares (como las mostradas abajo), pueden parecer grumosas y crudas cuando se ven pequeñas. El segundo ejemplo de abajo es de ángulos isométricos mucho más suaves, que lucen sensacional en dibujos en pixeles, pero no es el ángulo "iso" de 30° que usaste en la clase de dibujo técnico, en verdad está algo más cerca de los 26.5°. Desafortunadamente 30° te proporciona un línea grumosa en 100%. Si haces una línea que regularmente corre 2 puntos encima y 1 punto arriba, obtendrás 26.5.

¿Podemos tratar de dibujar algo más que sea un poco más geométrico y utilice más de esos patrones de línea en el tutorial pixel art? 

Cómo hacer pixel art en Photoshop tomando como referencia un tronco

Las líneas rectas que marcan el largo son fáciles pues ahora sabemos cómo hacerlas, pero ¿qué hay sobre las que rodean los extremos?

Estas dos son patrones regulares pero están cambiando de líneas horizontales amplias a cuadrados y luego a líneas verticales. ¡Luce un poco dentado pero si desenfocas tus ojos ¡se ve correctamente! 

La curva en el extremo superior derecho del tronco también es el patrón inverso de la sección inferior izquierda. A menudo cuento los pixeles o recuerdo ciertas combinaciones. La combinación de pixeles en el círculo es...

• 3 cuadrados (transversalmente)
• 2
• 111
• 222(abajo)
• 6
• 2
• 1

Un poco complicado de acostumbrarse al principio como usar las curvas bézier en Illustrator pero pronto tienes una "sensación" de dominio. La longitud del tronco es fácil: solo usamos el sistema 2 a lo largo y 1 arriba y hacemos el tronco tan largo o corto como queremos.

Círculos concéntricos más pequeños en el extremo proporcionan un agradable patrón de anillo en algunas áreas de sombreado más oscuro en la parte inferior del tronco generando mayor profundidad. Daremos al tronco para comenzar un color de abeto, luego para crear profundidad, podemos crear un tramado colocando pixeles de color contrastante a cada lado de nuestras líneas de claro alto/claro bajo. 

Puedes construir los patrones y hacerlos más complejos. Mientras más realista y complicado intentes y obtengas más tolerancia, la imagen puede parecer que está destinada a reproducirse en tamaño pequeño. 

Coloqué algunos pixeles más aleatoriamente en el tronco #3 pues quería tener un aspecto áspero y contrastar un poco con la ardilla.

Para el tronco final trabajé en un área de corteza pelada y una rama pequeña. Me pareció mejor completar un área o aplicar estilo primero y luego trabajar en los detalles. No creo que pudiera haber dibujado el tronco con la corteza pelada con un patrón de tramas desde cero, en lugar de ello solo añadí capas sobre capas. ¡Las etapas sencillas funcionan mejor cuando aprendes cómo hacer pixel art en Photoshop! 

Dibujos en pixeles irregulares

Pasemos a algo un poco más irregular, como una ardilla sentada en nuestro logo. Para algo complicado como esto en el tutorial pixel art, es mejor comenzar con lápiz y papel. 

Primero dibujé un cuadrado isométrico en mi página para obtener las dimensiones correctas. Ya que estamos usando este ejemplo particular para fines editoriales, utilicé una fotografía como referencia. Luego comienzo a hacer el boceto. Presto particular atención al ángulo en ambas orejas y patas pues quiero que sigan las líneas isométricas en el arte pixel.

Cómo puedes ver el detalle es muy minimalista, solo quiero obtener la forma básica y los ángulos correctos que trabajamos primero. Haremos el resto del trabajo para aprender cómo hacer pixel art en Photoshop.

Toma el boceto, ponlo en una nueva capa y manipula la opacidad para que puedas ver claramente los pixeles que estás a punto de crear. No es una regla difícil y rápida pero me parece que los dibujos en pixeles lucen mejor cuando tienen contornos negros.

Aquí voy a rodear mi ardilla con la herramienta lápiz creando el contorno negro. Una cosa que debe evitarse son protuberancias en donde los pixeles del contorno se tocan en más de un lado. Si dibujas un cuadro adicional solo elimínalo con tu herramienta borrador (también mantenido en una anchura de 1 pixel, mira el círculo rojo) lucirá más nítido y tu audiencia lo agradecerá.

Aún se ve un poco desprolijo ¡pero tomará forma! Líneas clave dentro de la ilustración también ayudan a darle una apariencia audaz, solo asegúrate de que sean de un color oscuro pero no negro para que hagan contraste. Puedes llamarme radical pero elegí el marrón aquí.

Cuando la forma está completa rellena el área interior con un bonito color de tono medio (café suave) y quizá uses un color claro para hacer notar algunas iluminaciones en el pixel art Photoshop.

La regla del contorno negro no es difícil y rápida. Dejé algunas líneas clave negras debajo de la mandíbula y la pata pues se dificultaba ver lo que ocurría.

Conclusión del tutorial pixel art Photoshop

En la eliminación, el cambio y la colocación manual de los pixeles es donde entra en juego la habilidad. A veces. Pero una vez que comienzas a dominarlo, podrás dibujar cualquier cosa en pixel art, todo lo que requieres es paciencia. Espero que esto te ayude, te inspire ¡para que tú mismo puedas crear pixel art de manera maravillosa!

Recursos adicionales sobre cómo hacer pixel art en Photoshop

Estos son algunos recursos para leer sobre dibujar pixel art:

• Tutorial pixel art de Mark (muestra sombreado de pixeles con más detalle y crear personajes de pixeles llamados "Sprites")
• Crear pintura pixel art pixel a pixel - Consejos y tutoriales. Una buena lista de sitios sobre trabajar con pixeles para visitar.
• 20+ inspiradores recursos, tutoriales y artistas de pixeles - una colección de recursos pixel art aquí en Psdtuts+.
• Algunos archivos de trabajos con pixelese que he dibujado y animado como archivos gif. ¡Mira la ardilla en acción!

Suscríbete al RSS Feed de Psdtuts+ para los mejores tutoriales y artículos de Photoshop en la web.