Packs de interfaz

Efectos de estado Sunset Drive

12 marcos de estado e indicadores de tiempo (vaporwave) para interfaces de tema oscuro — paleta índigo crepuscular, acento rosa flamenco. SVG y PNG transparente en 1x/2x/4x.

  • ui
  • svg
  • png transparente
  • mejora
  • perjuicio
  • efecto de estado
  • enfriamiento
  • vaporwave
  • vaporwave
  • vaporwave
  • synthwave
  • retro
  • hud
Hoja con 12 marcos de estado e indicadores de tiempo (vaporwave) de la familia Sunset Drive, dispuestos sobre un damero de transparencia y con sus medidas en píxeles escritas debajo
vista previa 1600×1091la transparencia se muestra como damero

Sobre este pack

Efectos de estado Sunset Drive es un conjunto de 12 marcos de estado e indicadores de tiempo dibujados en estilo vaporwave, donde las esquinas redondeadas y plegadas llevan losas rosa y verdeazulado sobre un fondo índigo profundo. Contiene marcos de mejora, perjuicio y neutro, marcos permanente y por expirar, cinco pasos del anillo de duración, una barra de duración y una insignia de acumulación.

Un icono de mejora está en pantalla tres segundos y el jugador nunca lo mira de frente: lo capta por el rabillo del ojo. Eso descarta la solución habitual: un borde verde para lo bueno y uno rojo para lo malo se cae en los modos para daltónicos y choca con los colores que el propio juego ya usa en ese HUD.

Este es el único estilo de marco que admite una curva; todos los demás del catálogo son estrictamente angulares. Los degradados recorren el eje largo en dos paradas saturadas en vez de desvanecerse hacia un neutro, porque un degradado vaporwave desvaído se lee como un error en vez de como una atmósfera.

Dentro de ese estilo, esta es la lectura de Sunset Drive: una interfaz de tema oscuro sobre una paleta índigo crepuscular con acentos en rosa flamenco, construida en torno a un marco de borde único, botones biselados de 176x48, barras de núcleo hueco divididas en 8 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.

Mejora y perjuicio se separan en cambio por la forma. El marco de mejora empuja sus esquinas hacia fuera y el de perjuicio las pliega hacia dentro: uno crece, el otro come. Ambos sobreviven a una captura en escala de grises. La duración es un anillo alrededor del icono y no una barra debajo, porque una barra empuja cada icono unos píxeles hacia abajo y rompe la fila. Los anillos llegan en cinco pasos y no como un sprite porque la mayoría de motores no pueden recortar un SVG en tiempo de ejecución: un anillo que se llena es un shader o un atlas de pasos, y el atlas funciona en todas partes. Los marcos llegan vacíos: tu propio icono de efecto va en el centro.

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 Sunset Drive, lo que significa que este kit y el kit de paneles de Sunset Drive encajan sin redimensionar ninguno. Encaja bien en interfaces synthwave, ambientadas al anochecer y retrorrománticas.

Descarga

Enlace directo · sin registro · sin página de espera
Descargar ZIP113 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 readmeZIP113 kB Obtener →
Marco de mejora, esquinas hacia fuera, SVG editableSVG1.7 kB Obtener →

Cómo se usa

  1. Pon tu icono de efecto en el centro rehundido a alrededor del 60 % del ancho del marco; el rehundido está dibujado con ese margen.
  2. Cambia el marco entero entre mejora y perjuicio en vez de teñir uno, porque la diferencia está en las esquinas.
  3. Reproduce los anillos de duración como una secuencia ordenada de lleno a vacío, o usa el anillo al 50 por ciento como fotograma único cuando el resto exacto no importe.
  4. Ancla la insignia de acumulación a la esquina superior derecha del marco y dibuja la cifra con tu propia tipografía: aquí no se dibujan dígitos.

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
"Efectos de estado Sunset Drive" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/sunsetdrive-status-effects