Saltar al tutorial
lil cactus

Cómo hacer pixel art

Principiante10 minutosActualizado

Respuesta rápida

En Lil Cactus, empieza con un lienzo de 16 × 16 px y elige Lápiz en el grupo del pincel de la barra de herramientas. Pon Tamaño a 1 px y Opacidad al 100% y dibuja con mucho zoom. Para obtener una cuadrícula de un píxel, elige Más y luego Preferencias…, abre Guías y cuadrícula, pon el espaciado a 2 px y las subdivisiones a 2, y activa Ver y luego Mostrar y luego Cuadrícula. Amplía con Imagen y luego Tamaño de imagen… y Por aproximación (conservar bordes duros), usando un múltiplo entero, por ejemplo de 16 a 512 px.

Un cactus de píxeles de tres colores ampliado de 16 por 16 a 512 por 512 píxeles, que compara los bordes suaves de Bilineal con los bordes nítidos de Por aproximación
El mismo dibujo ampliado a 512 × 512: Bilineal (Antes) mezcla los bordes; Por aproximación (Después) mantiene separados los bloques de píxeles. Arrastra el control para comparar.
Tiempo
10 minutos
Nivel
Principiante
Necesitas
Un lienzo pequeño y un ratón para colocar los píxeles
Funciona con
Imágenes RGB nuevas y sprites PNG
Abrir el ejemplo en Lil CactusUsar tu propia foto

Gratis y sin registro. Tu foto no sale de tu equipo.

El pixel art se dibuja celda a celda en una imagen pequeña. El cactus de este tutorial usa tres colores de pintura y un fondo blanco. Lápiz deja trazos de bordes duros; al ampliar con Por aproximación (conservar bordes duros) se copian esos píxeles sin añadir colores mezclados entre ellos.

Dibuja y amplía un cactus de píxeles en siete pasos

  1. Abre un lienzo de 16 × 16 y añade una capa de dibujo

    Abre el ejemplo vacío de esta página. Si prefieres empezar tu propio lienzo, elige Archivo y luego Nuevo…, pon Anchura y Altura a 16 y deja Unidades en Píxeles. Fondo se queda en Blanco. Haz clic en Crear.

    Elige Capa y luego Nuevo y luego Nueva capa. En el panel Capas, haz doble clic en su nombre, escribe Cactus y pulsa Enter. Deja Cactus seleccionada, encima de Fondo.

    Ajustes de Nuevo documento con Anchura 16, Altura 16, Píxeles y fondo Blanco
    Usa un lienzo diminuto: estas medidas son píxeles de la imagen, no de la vista ampliada.
    El pie de Nuevo documento con el botón Crear marcado con un círculo
    Crea el lienzo después de fijar sus medidas.
    El panel Capas con Cactus seleccionada encima de una capa Fondo blanca
    Dibuja en Cactus; Fondo pone el papel blanco.

  2. Elige un verde y luego el Lápiz a 1 px

    Elige Ventana y luego Color. En su campo #, en la fila marcada como Frontal, sustituye el valor por 4A8654.

    Haz clic con el botón derecho en el botón de la barra de herramientas que está debajo del Cuentagotas, o mantenlo pulsado, y elige Lápiz. Pon Tamaño a 1 px. Modo, que indica cómo se mezcla un trazo con los píxeles existentes, se queda en Normal. Opacidad controla lo sólido que es el trazo; déjala al 100%.

    Suavizado estabiliza el trazo; déjalo a 0 para colocar estas celdas. Deja desmarcadas las dos casillas de presión para que el tamaño y la opacidad sean uniformes. Deja desactivado Borrado automático para que, al pintar sobre un píxel, se siga usando el color frontal.

    El panel Color con el verde 4A8654 en el campo # de la fila Frontal, marcado con un círculo
    Escribe el verde en el campo #.
    El grupo del pincel de la barra de herramientas con el botón del grupo y la opción Lápiz marcados con un círculo, junto a las herramientas vecinas
    El Lápiz comparte botón con el Pincel; vista ampliada.
    Opciones del Lápiz con el control Tamaño marcado con un círculo y puesto a 1 px
    Los trazos del Lápiz de un píxel rellenan celdas sueltas de la imagen.
    Opciones del Lápiz con Modo Normal, Opacidad 100 por ciento y Suavizado 0 por ciento
    Deja Normal, Opacidad al 100% y Suavizado al 0%.
    Las casillas Presión: tamaño, Presión: opacidad y Borrado automático del Lápiz, todas desmarcadas
    Deja estas tres casillas desmarcadas para este dibujo.

  3. Muestra una cuadrícula de un píxel

    Elige Más y luego Preferencias… y luego Guías y cuadrícula. Espaciado de la cuadrícula (px del documento) fija la distancia entre las líneas principales; ponlo a 2. Subdivisiones por celda principal divide esa distancia; ponlo a 2. Haz clic en Cerrar.

    Elige Ver y luego Mostrar y luego Cuadrícula y luego Ver y luego Ajustar a la pantalla. Ahora las líneas tenues separan cada píxel, con líneas más marcadas cada dos píxeles. La celda blanca de arriba a la izquierda es la columna 1, fila 1. Cuenta las columnas desde la izquierda y las filas desde arriba.

    El menú Más con Preferencias marcado con un círculo
    Abre Preferencias desde Más.
    Las secciones de Preferencias con Guías y cuadrícula marcado con un círculo
    Elige Guías y cuadrícula en Preferencias.
    Ajustes de Guías y cuadrícula con Espaciado de la cuadrícula 2 y Subdivisiones 2 marcados con un círculo, más el botón Cerrar
    Un espaciado de 2 px dividido en 2 da una cuadrícula de un píxel.
    El menú Ver y su submenú Mostrar, con Cuadrícula marcado con un círculo
    Activa Ver › Mostrar › Cuadrícula.
    El lienzo blanco vacío de 16 por 16 con un zoom del 3200 por ciento y celdas de cuadrícula de un píxel
    El ejemplo con un zoom del 3200%. Cada celda pequeña es un píxel de la imagen.

  4. Dibuja el tronco y los brazos

    Deja Cactus seleccionada y el verde como color frontal. Arrastra por el centro de las celdas. Haz un trazo distinto para cada línea de la lista:

    • Tronco: tres trazos verticales en las columnas 8, 9 y 10, cada uno de la fila 3 a la fila 10.
    • Brazo izquierdo: trazos horizontales por las columnas 5–7 en las filas 6 y 7. Añade su punta vertical en la columna 5, filas 4–5.
    • Brazo derecho: trazos horizontales por las columnas 11–13 en las filas 7 y 8. Añade su punta vertical en la columna 13, filas 5–6.
    Cuadrícula de un píxel con el tronco verde del cactus y dos brazos levantados, antes de la maceta y los toques de luz
    La silueta verde, con cada celda pintada todavía visible en la cuadrícula.

  5. Añade la maceta y los píxeles más claros

    En el campo # del panel Color, escribe B66B4B para la maceta. Pinta la fila 11 por las columnas 6–12, las filas 12 y 13 por las columnas 7–11 y luego la fila 14 por las columnas 8–10.

    Cambia el valor de # a A0C78D. Añade una franja clara en la columna 8, filas 4–9. Añade dos celdas más claras en la columna 5, filas 5–6, y una en la columna 11, fila 7. Usa la cuadrícula completa del paso 3 para contar sus posiciones.

    Oculta Cactus con su botón del ojo para compararlo con Fondo vacío y vuelve a mostrarla.

    Una vista más cercana de la cuadrícula con el cactus de píxeles terminado, con brazos verdes, toques de verde más claro y una maceta de terracota
    La planta terminada, recortada más de cerca para que se distingan sus celdas.
    El panel Capas con Cactus encima de Fondo y los dos botones del ojo marcados con un círculo
    Cactus contiene el dibujo. Fondo controla el blanco que hay detrás.

  6. Guarda el original pequeño y luego amplía

    Elige Archivo y luego Guardar como y luego Proyecto de Lil Cactus… mientras el lienzo todavía mide 16 × 16. Así conservas las dos capas editables al tamaño original del dibujo.

    Elige Imagen y luego Tamaño de imagen… Deja Unidades en Píxeles, el botón de la cadena enlazado y Remuestrear activado. Remuestrear cambia el número de píxeles. Pon Anchura a 512; Altura pasa también a 512. Elige Por aproximación (conservar bordes duros) en el menú de remuestreo y haz clic en Cambiar tamaño.

    Es una ampliación de 32×: cada píxel original se convierte en un bloque de 32 × 32.

    Tamaño de imagen pasando de 16 por 16 a 512 por 512 con las medidas enlazadas, Remuestrear activado y Por aproximación seleccionado
    Elige Por aproximación antes de hacer clic en Cambiar tamaño.

  7. Exporta el PNG y vuelve al tamaño de dibujo

    Elige Archivo y luego Exportar y luego PNG… y haz clic en Exportar. El archivo nuevo mide 512 × 512 px. Elige Edición y luego Deshacer para volver al dibujo de 16 × 16 para tu siguiente edición.

    Ahora Archivo y luego Guardar actualiza el proyecto.

Por qué Por aproximación conserva la paleta

Tamaño de imagen se abre con Bilineal seleccionado. Con esta ampliación, mezcla los colores a lo largo de los bordes. Por aproximación (conservar bordes duros) conserva los tres colores de pintura del dibujo y el fondo blanco.

Detalle ampliado del borde del cactus con bloques cuadrados de color uniforme de Por aproximación
Por aproximación: bloques de píxeles sólidos, mostrados ampliados.
El mismo borde del cactus ampliado con Bilineal, con colores intermedios que se mezclan entre los bloques
Bilineal: los colores se mezclan en los bordes del mismo dibujo.

Qué hacer a continuación

Pixel art: preguntas y respuestas

¿Dibujar pixel art es lo mismo que pixelizar una foto?

No. En Lil Cactus, este método coloca celdas de color una a una para dibujar un sprite. Filtro › Pixelizar › Pixelizar…, en cambio, agrupa los píxeles de una imagen existente en bloques más grandes.

¿El pixel art puede tener fondo transparente?

Sí. En Lil Cactus, oculta Fondo con su botón del ojo, como se ve en el paso 5, y elige Archivo › Exportar › PNG… La capa Cactus sigue visible sin el papel blanco.

¿Debo guardar el pixel art como PNG o como JPEG?

Usa PNG en Lil Cactus para conservar la paleta y admitir transparencia. JPEG puede introducir colores de más alrededor de los bordes nítidos y no conserva la transparencia.

¿Por qué no veo la cuadrícula de un píxel?

En Lil Cactus, las líneas secundarias de la cuadrícula de esta receta aparecen con un zoom del 800% o más. Ver › Extras tiene que estar activado, además de Ver › Mostrar › Cuadrícula. El espaciado de la cuadrícula depende de las preferencias de este navegador, así que otro navegador puede mostrar una cuadrícula distinta. La cuadrícula es una superposición del editor y no aparece en el PNG exportado.

¿Puedo deshacer un solo trazo del Lápiz?

Sí. En Lil Cactus, Edición › Deshacer quita el último arrastre o clic del Lápiz como un solo paso de historia. Edición › Rehacer lo restaura.

¿Puedo ampliar pixel art con una escala no entera?

Sí, pero en Lil Cactus los múltiplos enteros dan bloques uniformes. Una ampliación no entera puede hacer que algunos píxeles originales queden más anchos que otros, incluso con Por aproximación.

Publicado  · Última revisión