Roku Channel Builder

1 Plantilla de diseño

Netflix

Banner grande arriba con botón de Play, filas horizontales por categoría.

Apple TV+ minimalista

Limpio y con mucho espacio en blanco, menos color decorativo, foco sutil.

Guía de canales

Tipo Pluto TV — cuadrícula densa, ideal para muchos canales numerados.

Grid clásico

Todo en una sola cuadrícula, sin banner — más simple y directo.

Forma de las tarjetas

Ancha (16:9)

Como Netflix — horizontal, ideal para miniaturas de TV.

Cuadrada

Proporción 1:1 — como portadas de álbum/podcast.

Vertical

Como pósters de película — más alta que ancha.

Mostrar números grandes en los canales de TV (como el "Top 10" de Netflix) Mostrar el botón de Play grande en el banner (plantilla Netflix)

Estilo del botón de Play

Sólido

Transparente (contorno)

Sombra debajo de las tarjetas (se ve más moderno, con profundidad) Esquinas de las tarjetas

Rectas

Curvas

Muy curvas

Las esquinas curvas se logran con una máscara — se ven mejor sobre fondos de color sólido que sobre fotos.

2 Datos del canal

Nombre del canal Subtítulo / eslogan (opcional)

Color de acento (tarjeta seleccionada)

Color de fondo (respaldo si no subes foto)

Color del texto en las tarjetas Foto de fondo (opcional, JPG o PNG, se ve detrás de todo)

Tamaño exacto para Photoshop: 1920 x 1080 px. Si subes otro tamaño, se recorta automáticamente al centro. Si no subes nada, se usa el color de fondo de arriba.

Ícono del canal (opcional, JPG o PNG)

Tamaño exacto para Photoshop: 336 x 210 px. Este es el que se ve en la pantalla de inicio de tu Roku, junto a tus demás apps. Si no subes nada, se genera uno básico con el nombre del canal.

3 Animación de carga (al abrir la app)

Esta es la animación que se ve un instante justo después de la pantalla de carga de Roku, antes de mostrar el menú — tú decides qué imagen aparece, qué incluye, y cuánto dura.

Tu logo o imagen para esta pantalla (opcional, JPG o PNG)

Tamaño exacto para Photoshop: 1280 x 720 px. Esta imagen es lo que aparece y se desvanece suavemente en la animación de abajo. Si no subes nada, se usa el nombre del canal en texto grande.

Duración total (segundos)

Entre 1 y 6 segundos. Si la haces muy larga, se siente lenta para abrir el canal.

Anillos de radar (crecen y se desvanecen en bucle) Insignia "EN VIVO" con punto parpadeante Barra de progreso que se llena

3.5 Botones "TV / Radio"

Los botones para elegir TV o Radio — aparecen junto al Play en Netflix/Apple, y como pantalla de bienvenida al abrir Pluto.

Mostrar los botones TV / Radio ¿Qué mostrar en el botón?

Solo ícono

Solo texto

Ícono + texto

Texto del botón de TV

Texto del botón de Radio

Color de los botones (en reposo, sin foco) Tamaño de los botones (px)

Ancho

Alto

Hazlos angostos y largos (ej. 500 x 90) para que se vean como una barra, o cuadrados (ej. 250 x 250) — tú decides la proporción.

Fondo de los botones

Color sólido

Usa el color de arriba.

Imagen que yo suba

Tu propia foto/gráfico de fondo para cada botón.

Las esquinas y la sombra de estos botones se controlan arriba, en "Esquinas de las tarjetas".

4 Canales de TV

Nombre de esta fila

Nombre

URL del stream (.m3u8)

Imagen del canal (opcional):

Tamaño exacto para Photoshop: 340 x 191 px (Ancha)

La imagen ya tiene el nombre escrito (ocultar texto encima)

5 Estaciones de radio (opcional)

Nombre de esta fila Forma de las tarjetas de radio

Ancha

Cuadrada

Vertical

Independiente de la forma de TV — elige la que mejor le quede a tus carátulas de radio.

URL base de API de carátulas en vivo (opcional, AzuraCast)

Si la dejas vacía, o si una estación no tiene carátula en vivo, se usa la imagen que subas abajo.

6 Personalización avanzada

Aquí controlas los detalles que antes estaban fijos — insignia "EN VIVO", estrella de favoritos, y la pantalla que sale al sonar una radio.

Texto de la insignia "en vivo" sobre cada canal

Color de la insignia "en vivo"

Color de la estrella de favoritos

Texto de la pantalla al sonar una radio Color de fondo de esa pantalla

El texto de esa pantalla usa tu color de acento (el que pusiste en el paso 2) — así todo combina.