Cómo diseñar los fondos de tu reporte

boltInicio rápido

La primera vez que abres el generador aparece un recorrido de 6 pasos con animaciones de la propia app (usa ← → para avanzar y Esc para saltarlo). Puedes volver a verlo en Ayuda › Ver recorrido.

Al abrir el generador ya hay una página de ejemplo («Resumen Ejecutivo») con 4 KPI, una tabla, una dona y una línea de tendencia. Puedes modificarla o empezar otra.

1. Elige un punto de partidaEn Insertar › Explorar 59 plantillas elige una página por tema (ventas, finanzas, mantenimiento, calidad…) o sigue con la de ejemplo.
2. Ajusta el tamañoEn Estilo › Página y exportación define ancho y alto (1280 × 720 es el estándar 16:9 de Power BI).
3. Arma la páginaDesde Insertar agrega KPI, tarjetas, textos, líneas o tu logo. Arrástralos y cambia su tamaño desde las esquinas.
4. Dale tu estiloEn Estilo elige colores, radio de esquinas, sombra y altura del encabezado.
5. RevisaEn Asistente › Revisar detecta solapes, márgenes y separaciones irregulares.
6. ExportaExportar › PNG de página (o ZIP con todas): revisas el fondo final, pulsas Descargar y lo pones de fondo en Power BI.

Tip: los gráficos que ves en el lienzo son muestras para imaginar el resultado. El PNG exportado solo lleva el fondo; tus visuales reales los pones en Power BI.

space_dashboardLa pantalla

grid_viewPlantillas

Insertar › Explorar 59 plantillas abre la galería: 59 páginas listas en 13 categorías (Dirección, Comercial, Finanzas, Operaciones, Logística, Producción, Mantenimiento, Calidad, Seguridad, Personas, Marketing, Servicio y Territorio).

1. Busca por nombre o filtra por categoría y haz clic en una miniatura para verla en grande.
2. Prueba una de las 8 paletas o Colores de mi página, elige el tamaño del lienzo y si conservas tu logo del encabezado.
3. Pulsa Crear página con esta plantilla. Se agrega como página nueva (no reemplaza nada) y puedes deshacerlo con Ctrl + Z.

Reportes completos

Comercial, Finanzas, Logística, Producción, Mantenimiento, Calidad y Seguridad traen además un reporte completo: al elegir cualquiera de sus plantillas aparece el botón Crear reporte completo, que agrega todas las páginas del área de una vez, con la misma paleta y tamaño (se deshace en un solo paso).

Las páginas que guardaste en Estilo › Mis estilos y plantillas aparecen arriba, en Mis plantillas (también como categoría): un clic crea la página.

Nota: las cifras y gráficos de las plantillas son ficticios y no salen en el PNG; las tarjetas se crean sin visual de Power BI asociado.

add_boxAgregar y editar elementos

En la pestaña Insertar del panel izquierdo:

• ＋ KPI: tarjeta pequeña con espacio para ícono e indicador.
• ＋ Tarjeta: bloque para un gráfico o tabla.
• ＋ Decorativa: bloque de fondo que no corresponde a ningún visual (franjas, contenedores).
• ＋ Texto: títulos o notas que quedan «impresos» en el fondo. Editas texto, fuente, tamaño, peso, color y alineación.
• Líneas y formas: horizontal, vertical, rectángulo y elipse. Cambias color, grosor, trazo (continuo, discontinuo, punteado), relleno y opacidad. Para un círculo, iguala ancho y alto.
• Logo de la empresa › Subir logo como capa: PNG o JPG de menos de 8 MB. Mantiene su proporción y la transparencia del PNG.

Al seleccionar algo, el panel derecho cambia a Elemento, ordenado en secciones: Básico (título de referencia y Visual de Power BI: el tipo de visual que irá en esa tarjeta —columnas, barras, líneas, área, anillo, embudo, cascada, mapa de árbol, dispersión, medidor, tarjeta, KPI, tabla, matriz, segmentador o mapa—, que eliges en una cuadrícula de miniaturas: al pasar el mouse la tarjeta lo muestra en su tamaño y con un clic queda elegido; viaja en el layout.json a HERO BI), Posición y tamaño (X, Y, ancho y alto exactos, y la posición para Power BI), Apariencia (ícono, colores, texto) y Avanzado (tipo de elemento e ID).

Importante: el título de una tarjeta es solo una referencia para ti; no se dibuja en el PNG. Si quieres un título impreso en el fondo, usa ＋ Texto.

layersCapas, grupos y orden

• La pestaña Capas lista todo lo que hay en la página. Desde ahí seleccionas, ocultas, bloqueas y cambias el orden (↑/↓ para traer adelante o enviar atrás).
• Bloquear evita mover algo por accidente (por ejemplo, el encabezado).
• Agrupar (Ctrl+G) mueve varios elementos como uno; Desagrupar con Ctrl+Shift+G. Para cambiar el tamaño de un miembro, primero desagrupa.
• Selecciona varios con Shift+clic o arrastrando un rectángulo desde una zona vacía. Para empezar el rectángulo encima de una tarjeta, usa Seleccionar › Seleccionar área.

straightenAlinear con precisión

• Todo se ajusta a una grilla de 5 px y a guías que aparecen al alinear bordes o centros con las tarjetas vecinas.
• Mantén Alt mientras arrastras para mover píxel a píxel sin grilla ni guías. En Vista puedes apagar solo la grilla.
• Flechas mueven 1 px; Shift+flechas, 5 px.
• Organizar › Alinear selección y Distribuir / tamaño igualan bordes, reparten el espacio o igualan tamaños.
• Separación exacta (panel Elemento): selecciona dos elementos o grupos, indica los píxeles y la dirección; mueve el segundo para dejar esa distancia exacta.
• Vista › Márgenes y medidas muestra las distancias al borde y entre tarjetas.

paletteEstilo y páginas

• En Estilo eliges si el cambio aplica a esta página o a todas: fondo, tarjeta, borde, primario, suave, texto, radio de esquina, sombra y altura del encabezado.
• Usa los colores de tu marca: el primario pinta la franja del encabezado y los acentos; el suave, los círculos de los íconos.
• En Página y exportación cambias el nombre, el ancho, el alto y la escala del PNG (2× da una imagen más nítida en pantallas grandes).
• Cada página puede tener su propio tamaño y estilo. Agrega páginas desde el listado superior del panel izquierdo.

Mis estilos y plantillas

• Guardar estilo guarda los colores y medidas de la página actual con el nombre que escribas (por ejemplo, tu marca). Aplicar los pone en la página activa.
• Guardar página como plantilla guarda la página completa (tamaño, estilo, tarjetas, textos, formas y logo). Usar crea una página nueva igual, lista para adaptar.
• La biblioteca vive en tu navegador. Exportar biblioteca descarga un archivo para llevarla a otro equipo o compartirla con tu equipo; Importar biblioteca suma su contenido sin borrar lo tuyo.

image_searchPartir de un boceto o captura

Si ya tienes un diseño (un boceto, una captura de otro reporte o una imagen generada), puedes convertirlo en una página editable desde la pestaña Prototipo:

1. Pulsa Seleccionar archivo y carga un JPG, PNG o WebP. Para probar, usa Abrir ejemplo (ficticio).
2. Arrastra sobre la miniatura para recortar solo el área del reporte (o escribe X, Y, ancho y alto). Imagen completa toma todo.
3. Indica el tamaño de destino del lienzo.
4. Con el asistente con IA configurado, Analizar recorte con IA detecta tarjetas, KPI y títulos. Sin IA, igual puedes usar la imagen como referencia y dibujar encima.
5. Crear página editable agrega una página nueva; nunca reemplaza las existentes.
6. Para el logo del boceto, recórtalo y pulsa Añadir recorte como logo.

En Comparar con el prototipo puedes ver solo el diseño, solo el original, ambos superpuestos o un deslizador para comparar lado a lado. La referencia nunca sale en el PNG.

Privacidad: analizar con IA envía la imagen recortada al servidor y al proveedor del modelo. No uses capturas con datos confidenciales si no estás autorizado.

auto_fix_highAsistente

• Revisar: lista solapes, elementos fuera del lienzo, márgenes, separaciones desiguales y KPI con poco espacio.
• Proponer ajuste: ordena las tarjetas por filas con márgenes uniformes. La propuesta se ve con contornos azules; la aplicas, la descartas o la deshaces.
• Plantillas: Resumen ejecutivo, Análisis comercial y Detalle operativo. Cada una crea una página nueva.
• Asistente con IA (opcional): escribes una instrucción («deja 3 KPI arriba y dos gráficos grandes») y propone un diseño que puedes aplicar. Requiere que el administrador configure el servicio y te entregue un token de acceso.

downloadExportar

insert_chartUsarlo en Power BI

1. Opcional pero recomendado: Exportar › Tema Power BI y en Power BI Ver › Temas › Buscar temas. Tus gráficos usarán tus colores y los visuales quedarán sin fondo ni borde.
2. En Power BI Desktop, configura la página con el mismo tamaño que en el generador (Formato › Configuración del lienzo › Personalizado).
3. Ve a Formato de página › Fondo del lienzo › Imagen, carga el PNG, ajuste Ajustar y transparencia 0 %.
4. Ubica cada visual sobre su tarjeta. Selecciona la tarjeta en el generador: el panel Elemento muestra su Posición en Power BI (con «Copiar posición»), o descarga todas en Exportar › Coordenadas (CSV). Escríbelas en Formato › General › Propiedades. En los KPI ya se descuenta el espacio del ícono.
5. Si no usaste el tema, desactiva a cada visual el fondo y el borde para que se vea la tarjeta del PNG.

Truco: si exportas con escala 2×, la imagen se ve más nítida, y Power BI la ajusta igual al tamaño de la página.

saveGuardar tu trabajo

• El generador guarda el diseño automáticamente en este navegador (lo ves en la barra de estado). Si borras los datos del navegador, cambias de equipo o usas una ventana privada, se pierde.
• La copia automática incluye páginas, bocetos, referencias, recorte y preferencias. Si empiezas a trabajar mientras se recupera una copia anterior, eliges entre Recuperar copia anterior y Conservar trabajo actual.
• Usa Guardar proyecto para tener un archivo propio y Archivo › Abrir proyecto (o arrástralo a la ventana) para recuperarlo.
• Si cierras la pestaña con cambios que aún no se guardaron, o si el navegador no pudo guardar la copia completa, te avisará antes de cerrar.
• Tus diseños no se suben a ningún servidor. Solo se envía información si usas el asistente con IA.
• ¿Sin internet? Descarga la versión sin conexión: un solo archivo HTML que abres con doble clic en Chrome o Edge.

keyboardAtajos de teclado

help_outlinePreguntas frecuentes