Share
Las ilustraciones en píxeles son excelentes para hacer iconos de computadora, imágenes isométricas e incluso escenas completas. Se pueden hacer rápida y fácilmente utilizando Photoshop con un par de ajustes rápidos a la configuración de preferencias..
Sin embargo, el único inconveniente es que el arte de píxeles se ve mejor cuando cada píxel se ha colocado a mano en lugar de usar algún filtro de Photoshop. Así es, colocado a mano. Sé que esto suena un poco loco, especialmente cuando algunas escenas de píxeles tienen miles de píxeles en ellas. Pero sin la colocación de la mano, tu pixel art puede parecer una mala imagen de baja resolución, así que ten cuidado!
Creo que una buena regla general antes de comenzar es que deberías poder ver tu creación claramente como un grupo de ladrillos cuadrados de diferentes colores, pero luego si entrecierras los ojos y los borras, puedes distinguirlos como una imagen. Imagina que estás haciendo un mosaico de azulejos, pero no necesitas lechada..
A continuación se muestra una obra de arte de píxeles completa, crearemos algunas de las piezas más básicas de este trabajo..
OK vamos a configurar para el dibujo. En caso de que no tenga una copia de Photoshop, hay algunos programas dedicados gratuitos de dibujo de píxeles disponibles para descarga gratuita:
He jugado con ambos programas, pero regresé a Photoshop porque estoy acostumbrado a los comandos del teclado..
Si usó la herramienta de pincel en la friolera de 9 píxeles en lugar de 1, se producirá un suavizado y eso estropeará el efecto de píxel de borde duro. Así que quédate con 1 píxel. "Mantenlo delgado, mantenlo simple", como solía decir mi madre.
Cuando se ve el dibujo de píxeles al 100% (tamaño real), la herramienta de lápiz a 1 píxel de ancho es muy pequeña, por lo que puede resultarle difícil verla y manipularla. Una idea es ampliar la vista al 800% para que pueda ver lo que está haciendo. A menudo tengo una segunda ventana abierta en Photoshop con la misma vista de pantalla al 200%, así que puedo ver rápidamente cómo mi dibujo se ve de cerca y también un poco más al mismo tiempo..
Podemos guardar nuestro documento de trabajo como un archivo PSD y exportarlo para su uso en la Web más adelante como un archivo GIF. También podemos ampliar el archivo posteriormente y convertirlo en un TIF para la impresión CMYK..
De carne magra
Bien, vamos a dibujar algo como este libro abierto. Con la herramienta Pluma, dibuje alrededor del borde para crear su contorno negro. Luego rellena los colores planos de la página y marca de libro.
Cree la idea de texto en la página con algunas líneas de píxeles individuales. Vea cómo ponemos una pequeña curva en la línea para dar la impresión de una ligera curva en la página.
Por último, agregue algunos puntos destacados a la mitad de las páginas y al lado del marcador. Un pequeño toque agradable es un resaltado de un solo píxel en la esquina inferior exterior de cada página, solo da un toque de borde de página en lugar de ser un bloque sólido.
Una vez que tenga los conceptos básicos de contornos, colores, resaltes y sombreados, puede intentar construir otras formas simples..
Los íconos de píxeles como los de arriba se pueden diseñar como una serie de líneas que están a solo 90º entre sí y son muy cuadrados y rectángulos. De vez en cuando, es posible que necesites una línea en un ángulo.
Algo a tener en cuenta es que las líneas en ángulo se ven mejor cuando son un patrón regular. Si son irregulares (como los que se muestran a continuación), pueden aparecer grumosos y toscos cuando se ven pequeños. El segundo ejemplo a continuación es mucho más suave Los ángulos isométricos, que se ven muy bien con dibujos de píxeles, pero no es el ángulo "iso" de 30º que usó en la clase de dibujo técnico; en realidad es algo más cercano a 26.5º. 30º desafortunadamente da una línea abultada al 100%. Si haces una línea que regularmente pasa 2 puntos y 1 punto arriba, obtendrás 26.5º.
Intentaremos dibujar otra cosa que sea un poco más geométrica y que use más de esos patrones de líneas.?
La línea irregular se verá abultada al 100%..
Patrones de líneas suaves en diferentes ángulos.
Las líneas a lo largo de la longitud son fáciles, sabemos cómo hacerlas ahora, pero ¿qué hay de esos extremos redondos??
Estos dos son patrones regulares pero están cambiando de líneas horizontales anchas hacia abajo a cuadrados y luego a líneas verticales. Se ve un poco irregular, pero si desenfocas los ojos, se ve bien!
La curva en la parte superior derecha del registro es también el patrón inverso de la sección inferior izquierda. A menudo cuento los píxeles o recuerdo ciertas combinaciones. El combo de píxeles en el círculo es ...
Un poco difícil de dominar al principio, como usar curvas de Bézier en Illustrator, pero pronto te da una idea de ello. La longitud del registro es fácil: solo usamos el sistema 2 a lo largo de 1 y hacemos el registro tan largo o corto como queramos.
Los círculos concéntricos más pequeños en el extremo dan un bonito patrón de anillo y algunas áreas de sombreado más oscuro en la parte inferior del tronco le dan cierta profundidad. Le daremos al registro un color plano de abeto para comenzar, luego, para crear profundidad, podemos crear un tramado colocando píxeles de color de contraste a cada lado de nuestras líneas de luz alta / baja.
Puedes construir los patrones y hacerlos más complejos. Sin embargo, tenga cuidado: cuanto más realista y complicado intente obtener la imagen más borrosa puede aparecer si está destinada a reproducirse en un tamaño pequeño..
Tiré unos cuantos píxeles más al azar en el registro # 3, ya que quería que tuviera un aspecto rudo y un poco de contraste con la ardilla.
Para el registro final trabajé en un área de corteza pelada y una pequeña rama. Me pareció mejor completar primero un área o estilo y luego trabajar más en él. No creo que hubiera podido dibujar el registro de corteza desgarrada con un patrón de trama desde cero, sino que seguí agregando capas sobre la parte superior de las capas. Las etapas simples funcionan mejor!
Pasemos a algo un poco más irregular, como una ardilla para sentarse en nuestro registro. Para algo tan complicado como este, lo mejor es 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 propósitos editoriales, usé una fotografía como referencia. Entonces empiezo a dibujar. Presto especial atención al ángulo de ambas orejas y pies, ya que quiero que sigan las líneas isométricas..
Como se puede ver, el detalle es mínimo. Solo quiero obtener la forma básica y los ángulos correctos que se resuelvan primero. Haremos el resto del trabajo en Photoshop..
Introduce el boceto, coloca una nueva capa y crea la opacidad para que puedas ver claramente los píxeles que estás a punto de crear. No es una regla difícil y rápida, pero me parece que los dibujos de píxeles se ven mejor cuando tienen contornos negros.
Aquí estoy rodeando a mi Ardilla con la herramienta de lápiz creando el contorno negro. Una cosa que debe evitarse es agruparse donde los píxeles del contorno se tocan entre sí en más de un lado. Si dibuja un cuadrado adicional, simplemente bórrelo con su herramienta de borrador (que también se mantiene a 1 píxel de ancho, vea el círculo rojo) se verá más limpio y su público se lo agradecerá..
¡Todavía parece un poco desordenado pero se pondrá en forma! Las líneas de texto dentro de la ilustración también ayudan a darle un aspecto audaz, solo asegúrate de que sean de un color oscuro que no sean negros para hacer contraste. Llámame radical, pero fui marrón en este caso..
Cuando la forma esté completa, rellene el área interior con un bonito color de tono medio (marrón suave) y quizás use un color claro para resaltar algunos aspectos destacados.
La regla del contorno negro no es dura y rápida, dejé algunas líneas negras debajo de la mandíbula frontal y la pata, ya que era difícil ver lo que estaba pasando.
La colocación, eliminación y cambio de píxeles de la mano es donde interviene la habilidad. A veces. Pero una vez que comiences a entenderlo, podrás dibujar casi cualquier cosa, todo lo que necesitas es un poco de paciencia. Espero que esto te ayude, y te inspire a crear tu propio trabajo.!
Aquí hay algunos recursos para una mayor lectura de píxeles:
Suscríbase a Psdtuts + RSS Feed para obtener los mejores artículos y artículos de Photoshop en la web.
Accentsconagua