Packs de interfaz

Dusk Interfaz de tienda

12 elementos de tienda y economía (pixel art) para interfaces de tema oscuro — paleta violeta nocturno, acento ámbar. SVG y PNG transparente en 1x/2x/4x.

  • ui
  • svg
  • png transparente
  • tienda
  • tienda
  • economía
  • mercader
  • inventario
  • píxel
  • pixel art
  • pixel art
  • retro
  • 2d
Hoja con 12 elementos de tienda y economía (pixel art) de la familia Dusk, dispuestos sobre un damero de transparencia y con sus medidas en píxeles escritas debajo
vista previa 1600×669la transparencia se muestra como damero

Sobre este pack

Dusk Interfaz de tienda es un conjunto de 12 elementos de tienda y economía dibujados en estilo pixel art, donde cada esquina es una escalera de píxeles enteros y nada tiene suavizado. Contiene cuatro estados de fila de compra, una pestaña de categoría activa y otra inactiva, una tira de monedero, un selector de cantidad, una tira de confirmación de compra y tres indicadores de existencias contables.

Una pantalla de tienda tiene una tarea que una de inventario nunca tiene: decir qué no se puede pagar antes de pulsar el botón. La mayoría de los sets gratuitos lo resuelven poniendo el precio en rojo, algo que falla con quien no puede leer ese rojo y vuelve a fallar en una captura en escala de grises. Además choca con el color de vida que ya usa el resto de la interfaz.

El contorno avanza en escalones de 4px y el sombreado es un dithering Bayer en vez de un degradado, así que el conjunto sobrevive a escalarse por un factor entero — la única manera de escalar pixel art sin que se convierta en papilla.

Dentro de ese estilo, esta es la lectura de Dusk: una interfaz de tema oscuro sobre una paleta violeta nocturno con acentos en ámbar, construida en torno a una banda de cabecera cruzando la parte superior del marco, botones de esquinas rectas de 96x32, barras con marcas divididas en 6 segmentos e iconos rellenos sobre una rejilla de 16px. Esas medidas son la razón por la que dos familias pueden compartir un estilo artístico sin ser intercambiables: el estilo decide cómo se dibuja un borde, los números deciden para qué sirve la interfaz.

Los cuatro estados de fila se distinguen por estructura y no por color. La fila asequible lleva una franja continua en el borde izquierdo, la inasequible lleva una franja discontinua y una barra que tacha su campo de precio, y la ya comprada cierra ese campo y marca su esquina superior derecha. Eso hace que el estado sobreviva a un tinte, a un filtro de daltonismo y a una captura sin saturación. El indicador de existencias es contable por lo mismo: cinco puntos, un punto y ninguno se leen como lleno, escaso y agotado sin una sola palabra ni un solo color.

Cada sprite viene como SVG editable y como PNG transparente en 1x, 2x y 4x, así que puedes soltar los PNG directamente en un motor o abrir el vector y cambiar un color. Dibujado con las mismas medidas que el resto de la familia Dusk, lo que significa que este kit y el kit de paneles de Dusk encajan sin redimensionar ninguno. Encaja bien en juegos de pixel art.

Descarga

Enlace directo · sin registro · sin página de espera
Descargar ZIP36 kB

Conjunto completo — fuentes SVG, exportados PNG en 1x/2x/4x, licencia y readme

Archivos incluidos en este pack
ArchivoFormatoPesoDescarga
Conjunto completo — fuentes SVG, exportados PNG en 1x/2x/4x, licencia y readmeZIP36 kB Obtener →
Fila de tienda, simple, SVG editableSVG2.7 kB Obtener →

Cómo se usa

  1. Aplica el nine-slice a las filas en sus zonas rectas izquierda y derecha; el campo de precio de la derecha tiene ancho fijo, así que un nombre largo nunca lo saca de sitio.
  2. Para lo que no se puede pagar usa la franja discontinua y el precio tachado en lugar de un tinte rojo. Ambos son patrón y no color, así que aguantan en escala de grises.
  3. Coloca los puntos de existencias en el mismo lugar que usa cada fila y contrólalos por cantidad y no por color.
  4. La tira de confirmación y el selector de cantidad comparten altura, así que una tienda puede ponerlos en la misma línea sin redimensionar ninguno.

Licencia

Creative Commons Atribución 4.0 — Gratis para uso comercial. Atribución obligatoria. Términos completos · Qué significa en la práctica

Línea de crédito para copiar
"Dusk Interfaz de tienda" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/dusk-shop-ui