Packs de interfaz

Amberterm Ventanas modales

15 ventanas modales y avisos del sistema (terminal) para interfaces de tema oscuro — paleta negro cálido, acento ámbar de CRT. SVG y PNG transparente en 1x/2x/4x.

  • ui
  • svg
  • png transparente
  • modal
  • diálogo
  • confirmación
  • notificación
  • banda
  • terminal
  • terminal
  • terminal
  • ámbar
  • crt
  • retro
Hoja con 15 ventanas modales y avisos del sistema (terminal) de la familia Amberterm, dispuestos sobre un damero de transparencia y con sus medidas en píxeles escritas debajo
vista previa 1600×1691la transparencia se muestra como damero

Sobre este pack

Amberterm Ventanas modales es un conjunto de 15 ventanas modales y avisos del sistema dibujados en estilo terminal, donde hay un solo tono en seis niveles y nada más — un tubo de fósforo no tiene un segundo color. Contiene tres ventanas modales de gravedad creciente, tres placas de sistema y tres bandas de sistema, una fila inferior de tres botones, un botón de cierre, una atenuación de fondo por capas y un campo de entrada simple, otro enfocado y otro con error.

Una ventana modal no es un panel: detiene el juego, espera una respuesta y a veces esa respuesta no se puede deshacer. La forma habitual de decirlo es un borde rojo, que choca con el color de vida que ya está en pantalla y desaparece en cuanto alguien reteñe el kit a su propia paleta.

Todo el conjunto está construido con un solo matiz, incluidos el trazo y las marcas, porque un fósforo o un CRT ámbar no puede mostrar físicamente un segundo. El halo es una pila de trazos de opacidad decreciente, que es a lo que se parece el bloom de un tubo real y lo que un filtro de desenfoque hace mal a 4x.

Dentro de ese estilo, esta es la lectura de Amberterm: una interfaz de tema oscuro sobre una paleta negro cálido con acentos en ámbar de CRT, construida en torno a un marco de borde único, botones biselados de 128x46, barras de núcleo hueco divididas en 7 segmentos e iconos a dos tintas sobre una rejilla de 32px. 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.

La gravedad va en el grosor de la franja del borde superior y no en su color: tres píxeles para un aviso, seis para una advertencia y diez para algo destructivo. Así sobrevive a cualquier tinte y a cualquier captura en escala de grises. Las posiciones de los botones son fijas y deliberadas: cancelar a la izquierda y en relieve, la acción que confirma a la derecha y hundida. Ese orden se convierte en memoria muscular a lo largo de un juego, y un kit que lo cambia es la razón por la que alguien borra una partida por reflejo. La atenuación son cuatro escalones apilados y no una capa uniforme, porque una sola lámina negra sobre toda la pantalla mata el arte que pretende atenuar.

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 Amberterm, lo que significa que este kit y el kit de paneles de Amberterm encajan sin redimensionar ninguno. Encaja bien en terminales, consolas e interfaces de informática retro.

Descarga

Enlace directo · sin registro · sin página de espera
Descargar ZIP93 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 readmeZIP93 kB Obtener →
Ventana modal, grosor de aviso, SVG editableSVG6.1 kB Obtener →

Cómo se usa

  1. Mantén cancelar a la izquierda y la acción que confirma a la derecha en cada ventana, también en las que montes tú con la fila inferior.
  2. Elige la ventana por el grosor de su franja superior en lugar de reteñir un sprite. La señal es el grosor.
  3. Extiende la capa de atenuación detrás de la ventana al tamaño de tu pantalla y repítela: está dibujada por escalones y por eso escala sin artefactos de desenfoque.
  4. Usa el campo de entrada con error en lugar de un borde rojo. Duplica el subrayado, y eso se lee en escala de grises y junto a una barra de vida.

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
"Amberterm Ventanas modales" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/amberterm-modals