Cómo elaborar una maqueta con diseño responsivo para el iPhone sin utilizar Photoshop

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

Final product image — What You'll Be Creating

Si has creado una aplicación que funciona en diferentes dispositivos, es una buena idea permitirle a tus potenciales usuarios conocerla al ubicarla en una maqueta responsiva. Puedes hacerlo fácilmente con el generador online de maqueta con diseño responsivo en Placeit.

Síguenos en nuestro canal de Envato Tuts+ en YouTube:

Cómo elaborar una maqueta con diseño responsivo para el iPhone sin utilizar Photoshop

Paso 1

Ve a Placeit.net. Navega hasta Mockups (maquetas) y encuentra la pestaña Responsive Devices (Dispositivos Responsivos).

Paso 2

Aquí puedes ver una completa biblioteca de potenciales maquetas para tu aplicación. Hay muchos dispositivos disponibles, pero si estás interesado particularmente en uno, puedes ajustar la búsqueda mediante los filtros observados en el lado izquierdo.

Paso 3

Incluso después de aplicar el filtro, tienes más de 100 propuestas para elegir. Puedes mostrar tu aplicación en muchas pantallas al mismo tiempo, ya sea en un entorno neutral o dentro de una escena fotografiada. Coloca tu cursor sobre la maqueta para ver un ejemplo de él mientras es usada. Después de que encuentres la que te gusta, solo haz clic en ella para comenzar la edición. Utilicé ésta plantilla para maqueta.

Paso 4

Aunque no lo creas, ¡ya has hecho la mayor parte del trabajo! Una vez que hayas elegido tu maqueta, solo necesitas subir las capturas de pantalla de tu aplicación a ella. Según la maqueta, encontrarás un par de botones Upload Image (Subir Imagen) a la izquierda. Haz clic en la primera, aquí estará la pantalla del iPhone.

Paso 5

Selecciona la captura de pantalla de tu iPhone y recórtala al tamaño de la pantalla. Cuando termines, haz clic en Crop (Recortar).

Paso 6

Dale un segundo para subir. Después de que aparezca en la pantalla de la maqueta del iPhone, estás listo para agregar otra captura de pantalla. Haz clic en el otro botón y repite el proceso, esta vez seleccionando tu captura de pantalla para el iPad.

Paso 7

Después de que subas tus capturas de pantalla, puedes eliminarlas o recortarlas de nuevo. También puedes incorporar algún texto o una gráfica.

Paso 8

Una vez que termines, solo desplázate hacia arriba y haz clic en Download (Descargar). Puedes comprar este diseño, o descargarlo gratuitamente como parte de tu suscripción ilimitada.