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

Diseño plano con el radio recogido casi del todo. La familia plano clara usa esquinas de 20px y botones tipo pastilla porque apunta al juego casual; esta usa 8px y botones cuadrados porque una pantalla de estrategia es sobre todo filas y un radio generoso desperdicia justo el ancho donde van los números. No hay contornos ni sombreado en ninguna parte — la profundidad son tres pasadas de sombra apiladas y nada más.

Dos paneles nine-slice — un marco de ventana con barra de título con esquinas de 8 px y un marco interior rehundido con esquinas de 6 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 cuatro estados de botón de esquinas rectas: normal, hover, pulsado y desactivado. Están dibujados sobre la misma base de 120×36 con esquinas de 6 px, así que cambias la textura en un único widget de botón y obtienes todo el ciclo de interacción sin mover un rectángulo. El estado pulsado baja su cara dos píxeles y quita el brillo superior en vez de solo oscurecerse, y eso es lo que hace que un botón se sienta pulsado y no simplemente recoloreado.

Todo viene dos veces. Las fuentes SVG son los archivos en los que se dibujó el kit — ábrelos, cambia los seis tonos de gris azulado o el único acento de verde menta y vuelve a exportar. Los exportados PNG son plano, 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 Zero 1.0 — Dominio público. Sin atribución. Términos completos · Qué significa en la práctica