Packs de interfaz
Aetherlab Interfaz de tienda
12 elementos de tienda y economía (magitech) para interfaces de tema oscuro — paleta azul de laboratorio, acento cian etéreo. SVG y PNG transparente en 1x/2x/4x.

Sobre este pack
Aetherlab Interfaz de tienda es un conjunto de 12 elementos de tienda y economía dibujados en estilo magitech, donde las esquinas en punta y una pista de circuito llevan color arcano — fantasía con cableado debajo. 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.
Las esquinas en punta vienen del vocabulario de formas y no de un marco de fantasía, y es deliberado: este estilo es la mitad tecnológica de magitech, no la mitad tallada. Los degradados y las composiciones de contorno se alternan a lo largo del conjunto para que un panel de hechizos y un panel de instrumentos puedan compartir pantalla.
Dentro de ese estilo, esta es la lectura de Aetherlab: una interfaz de tema oscuro sobre una paleta azul de laboratorio con acentos en cian etéreo, construida en torno a un marco de borde único, botones biselados de 144x36, barras de núcleo hueco divididas en 22 segmentos e iconos a dos tintas sobre una rejilla de 24px. 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 Aetherlab, lo que significa que este kit y el kit de paneles de Aetherlab encajan sin redimensionar ninguno. Encaja bien en interfaces magitech, de alquimia y de ciencia arcana.
Descarga
Enlace directo · sin registro · sin página de esperaConjunto completo — fuentes SVG, exportados PNG en 1x/2x/4x, licencia y readme
Cómo se usa
- 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.
- 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.
- Coloca los puntos de existencias en el mismo lugar que usa cada fila y contrólalos por cantidad y no por color.
- 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
"Aetherlab Interfaz de tienda" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/aetherlab-shop-ui


