GIMP – Prototipo por sectores (Guillotina)

Cuando se trata de generar recursos para nuestra web, y sobre todo para la presentación rápida de prototipos interactivos, GIMP nos trae una herramienta muy interesante y útil llamada “Slices”, traducido al español como “Rodajas”. Lo que hace es generar una tabla HTML cuya grilla se basa en las líneas guía presentes, permitiendo añadir eventos JS e hipervínculos a cada celda. Para ello, realiza cortes a lo largo de las mismas como si de una guillotina o cutter se tratara, por lo que, a diferencia de la herramienta de mapa de enlaces, nos dejará una carpeta conteniendo todas las imágenes resultantes de estos cortes.

Para ello, encuadramos dentro de las guías las imágenes que queremos recortar, tal y como se muestra abajo, y vamos a Filtros > Web > Rodajas…

Se nos abrirá un diálogo desde el cuál podremos configurar la carpeta destino, el prefijo de los nombres de archivos de imagen, su formato, y el archivo HTML, que es el que le mostraremos al cliente, al cual podemos agregarle eventos JS de onmouseover y onclick para las distintas zonas.

El archivo resultante es un bloque HTML con una tabla que contiene en cada celda cada una de las imágenes generadas por GIMP formando en su totalidad la página completa; encontraremos el JS al final del archivo.

Nótese que el archivo viene con un comentario, el cual nos advierte que, por sí solo, no es un documento HTML válido, ya que carece de DTD, de la etiqueta <html>, y la estructura básica <head> y <body>. Más bien todo el contenido debería ir entre <body> y </body>.

De todas formas, el archivo, tal y como viene, puede abrirse en cualquier navegador y será cuestión de añadirle los enlaces y eventos correctos para darle interactividad. Esta es una forma sencilla y rápida de presentar nuestro diseño web, para que el cliente pueda emitir una devolución basada en un prototipo similar a cómo se vería el resultado final, la maqueta.

Si ya se encuentran en la etapa del maquetado, también será útil para, como les decía al principio, obtener rápidamente los recursos gráficos y fotográficos para el sitio, ya que todos ellos serán colocados dentro de una carpeta aparte…

Espero que les haya servido este tip, si fue así, compártanlo con quien crean que le pueda servir. Se agradece también like y comentarios. Un saludo interplanetario.

Leave a Reply