Reliquary Kit de paneles — paneles con barra de título y botones

El marco tallado al que se le ha quitado el calor. El roble se lee como una taberna; esto se lee como una cripta, y la diferencia no es solo la paleta — la banda de cabecera sustituye al segundo marco concéntrico y un botón biselado sustituye a la pestaña redondeada. Los remates de esquina y las gemas engastadas en ellos son la misma geometría en los dos, y eso es lo que los mantiene en el mismo estilo en vez de ser dos kits de fantasía sin relación.

Dos paneles nine-slice — un marco de ventana con barra de título con esquinas de 12 px y un marco interior rehundido con esquinas de 10 px — cubren casi cualquier caja que necesite un menú: diálogos, rejillas de inventario, fondos de lista, tooltips y paneles de estadísticas. Una banda de título va integrada en la parte superior del panel, así que la cabecera de un diálogo no necesita un segundo sprite ni alineación manual. Los dos se estiran limpiamente a cualquier tamaño porque las esquinas nunca escalan y el centro es un relleno plano.

Sobre los paneles se apoyan doce sprites de botón biselados: normal, hover, pulsado y desactivado, cada uno dibujado tres veces —una barra estándar de 128×56, un botón de icono cuadrados cuadrado y un botón compacto para barras de herramientas y acciones en línea. Los tres tamaños son archivos separados y no un sprite escalado porque el dibujo depende del tamaño: el bisel calculado a 56 px se recalcula en los menores, no se encoge. El estado pulsado baja su cara dos píxeles y quita el brillo superior en lugar de solo oscurecer, que es lo que hace que un botón se sienta pulsado y no simplemente recoloreado.

Cuatro piezas menores cubren lo que un menú necesita entre los paneles: un tooltip con punta, una barra de título que se apoya en el borde superior de un panel, un separador de sección con marca central y una etiqueta para contadores y estados. Ninguna es el panel de ventana a otro tamaño: un nine-slice ya se estira a cualquier medida, así que un segundo archivo con otro ancho sería relleno y no un componente.

Todo viene dos veces. Las fuentes SVG son los archivos en los que se dibujó el kit — ábrelos, cambia los seis tonos de índigo profundo o el único acento de plata pálido y vuelve a exportar. Los exportados PNG son planos, transparentes y preescalados a 1x, 2x y 4x para motores que quieren bitmaps, sin alfa premultiplicado y sin sombra horneada fuera de los límites del sprite.

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