En éste post y en éste os hablé hace algún tiempo de algunos generadores de texto simulado bastante útiles para la creación de prototipos, mockups etc. Hoy me gustaría compartir con vosotros algunas herramientas que vengo utilizando de un tiempo a esta parte para generar imágenes simuladas que se pueden utilizar igualmente en la creación de cualquier maqueta y prototipo para diseño editorial, diseño web etc.
Placeholder.com
Esta web muestra, como su nombre indica, una imagen placeholder con el ancho, alto y color de fondo y de texto indicado. Por defecto el texto que aparece es el de las dimensiones de la imagen en píxeles (lo cual es muy útil cuando se está definiendo un layout por ejemplo). Para ello simplemente hay que introducir una URL dónde pasamos los parámetros que serán representados en la imagen. Esta url, por ejemplo, pintaría esta imagen
https://via.placeholder.com/400X150.png/3333FF/00000/
Aunque también se puede personalizar el texto que aparece en la imagen con una URL como ésta.
https://via.placeholder.com/400X150.jpg/FF0000/ffffff?text=Adobe
Esta sería la imagen que pintaría
los dos primeros parámetros después de via.placeholder son las dimensiones de la imagen en píxeles (si únicamente introduces un número entonces la imagen aparece cuadrada con las mismas dimensiones de ancho y alto), a continuación se introduce la extensión del formato que se quiere utilizar seguido del código del color de fondo y el del texto, ambos en formato hexadecimal. Por último se añade el parámetro del texto si se quiere colocar en lugar de los números de las medidas.
Lorempixel
Cuando queramos ir un paso más allá y que las imágenes simuladas no se limiten a pastillas de colores, este recursos está francamente bien pues lo que crea son fotografías simuladas como la que hay a continuación que puede utilizarse en todo tipo de maquetas y que surge a través de una URL como ésta
Lorempixel.com/600/300/business/
los números tras el prefijo Lorempixel representan las dimensiones de la imagen simulada seguido de la temática que queramos que tenga la foto. Aparte de negocios (business) hay tematicas como naturaleza (nature), deportes (sports), transporte (transport) o abstractas (abstract) …y sí… si os lo estabais preguntando también se pueden poner gatos (cats) ! 😀
Si no especificamos el tema simplemente crea una imagen aleatoria de cualquier tema y si añadimos el sufijo «g» la crea en escala de grises como el ejemplo que genera esta URL
http://lorempixel.com/g/400/200/
De todos modos si vais a la página Lorempixel.com podéis ver todo el listado de parámetros.
Espero que estos recursos os puedan ser de utilidad.
Uklaworld 
Deja un comentario