Crear tier list: arrastrar y soltar, imágenes y PNG

Cómo hacer una tier list: filas, arrastrar y exportar

Una tier list ordena elementos en filas jerarquizadas, de S arriba a D abajo. Arrastre cada elemento a su fila, cambie el nombre o el color de las filas y exporte el tablero como PNG al doble de su tamaño en pantalla.

Método

Añada elementos de texto (uno por línea) o imágenes de su dispositivo: aparecen en la zona «Elementos por clasificar». Después muévalos a las filas S, A, B, C y D con el ratón, con el dedo (pulsación larga) o con el teclado. Cada fila se puede renombrar, cambiar de color o eliminar; sus elementos vuelven entonces a la zona por clasificar.

Sin arrastrar

Toque o haga clic en un elemento y elija su fila en «Mover a». Con el teclado: Tab para llegar al elemento, Espacio para tomarlo, flechas para moverlo, Espacio para soltarlo, Escape para cancelar. Esta vía sin arrastre cumple el criterio 2.5.7 de las WCAG 2.2, que pide que toda acción hecha arrastrando sea posible también con un solo puntero.

Ejemplo de exportación

La imagen se genera a escala 2: un tablero mostrado a 720 × 410 px da un PNG de 1440 × 820 px. El fondo sigue el tema del sitio (blanco en claro, azul noche en oscuro). Solo se exportan las filas, no la zona por clasificar.

Qué se guarda

• Se guardan en este navegador: nombres y colores de las filas, elementos de texto y su orden.
• No se guardan las imágenes. Permanecen en su dispositivo como dirección local temporal (URL blob), liberada al quitarlas o al salir de la página. Tras recargar, añádalas de nuevo.

Fuentes y fechas: W3C, Understanding WCAG 2.2, criterio 2.5.7 Dragging Movements; W3C, File API (URL blob y revocación) (verificado el 29/10/2026)

Preguntas frecuentes

¿Qué significa el rango S en una tier list?

S es la fila situada por encima de A, donde van los elementos considerados mejores. La herramienta empieza con cinco filas, S, A, B, C y D, que puede renombrar, cambiar de color, eliminar o ampliar.

¿Cómo pongo mis propias imágenes en una tier list?

Haga clic en «Añadir imágenes» y elija uno o varios archivos, hasta 60 a la vez. Las imágenes se quedan en su dispositivo y no se guardan: tras recargar la página hay que añadirlas de nuevo.

¿Cómo guardo mi tier list como imagen?

El botón «Exportar en PNG» descarga las filas como imagen a escala 2. Un tablero mostrado con 720 px de ancho da así un PNG de 1440 px de ancho, imágenes incluidas.

¿Se pueden clasificar elementos sin arrastrar y soltar?

Sí. Toque un elemento y elija su fila en «Mover a». Con el teclado, Espacio toma el elemento, las flechas lo mueven y Espacio lo suelta; Intro abre el menú de movimiento y Supr quita el elemento.

¿La herramienta es realmente gratuita?

Sí, todas las herramientas en Kristools son 100% gratuitas y accesibles sin registro.

¿Están protegidos mis datos?

Sí. Todo el procesamiento se realiza de forma segura y directa en tu navegador. No se envían datos personales a nuestros servidores.