Packs de interfaz

Bunker Kit de navegación

15 componentes de navegación y entrada (equipo de campaña) para interfaces de tema oscuro — paleta oliva de campaña, acento rojo de señal. SVG y PNG transparente en 1x/2x/4x.

  • ui
  • svg
  • png transparente
  • pestañas
  • barra de desplazamiento
  • desplegable
  • menú de ajustes
  • militar
  • equipo de campaña
  • militar
  • táctico
  • plantilla
  • hud
Hoja con 15 componentes de navegación y entrada (equipo de campaña) de la familia Bunker, dispuestos sobre un damero de transparencia y con sus medidas en píxeles escritas debajo
vista previa 1600×1528la transparencia se muestra como damero

Sobre este pack

Bunker Kit de navegación es un conjunto de 15 componentes de navegación y entrada dibujados en estilo equipo de campaña, donde hay paneles estarcidos con esquinas rectas, un trazo hueso y exactamente un color de señal. Contiene pestañas activas e inactivas, la guía de una barra de desplazamiento, su tirador y dos flechas, un desplegable en estado cerrado y abierto con su menú, campos de texto en reposo y con foco y botones redondos de cerrar, atrás, más y menos.

La mayoría de los kits de interfaz gratuitos se quedan en paneles y botones, lo que significa que la primera pantalla de ajustes que montes es el momento en que empiezas a dibujar tu propio arte. Esto es el resto: las piezas que un menú necesita de verdad antes de funcionar.

Ningún resplandor y ningún degradado: una caja pintada no brilla, y la contención es todo el look. Las siluetas se mantienen cerca del rectángulo y ganan su diferencia con hombros escalonados y raíles de borde en vez de con cortes, que es como se comportan de verdad las marcas de campaña estarcidas.

Dentro de ese estilo, esta es la lectura de Bunker: una interfaz de tema oscuro sobre una paleta oliva de campaña con acentos en rojo de señal, construida en torno a un marco de borde único, botones biselados de 152x42, barras de núcleo hueco divididas en 12 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.

El campo de texto con foco ensancha su contorno en vez de solo cambiar de color, porque un anillo de foco que es únicamente un matiz desaparece en modo de alto contraste y se lleva por delante la navegación por teclado. La pestaña activa se funde con la superficie de debajo en vez de solo aclararse, y eso es lo que la hace leerse como conectada.

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 Bunker, lo que significa que este kit y el kit de paneles de Bunker encajan sin redimensionar ninguno. Encaja bien en interfaces tácticas, de supervivencia y militares.

Descarga

Enlace directo · sin registro · sin página de espera
Descargar ZIP53 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 readmeZIP53 kB Obtener →
Pestaña de navegación, activa, equipo de campaña, SVG editableSVG1.2 kB Obtener →

Cómo se usa

  1. Aplica nine-slice a la guía de la barra de desplazamiento solo en vertical; el tirador es un sprite aparte, así que puedes dimensionarlo según la proporción del contenido sin estirar sus líneas de agarre.
  2. El menú desplegable es un sprite aparte del control cerrado — dibújalo en una capa por encima de todo lo demás o quedará recortado dentro del panel que lo contiene.
  3. Usa los botones redondos de más y menos como un par de incremento al mismo tamaño que el botón de cerrar para que una fila de ajustes mantenga un solo ritmo.

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
"Bunker Kit de navegación" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/bunker-navigation-kit