Advertisement
  1. Design & Illustration
  2. Product Mockup

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

Scroll to top
Read Time: 4 min

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

Final product imageFinal product imageFinal 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).

responsive devices mockupsresponsive devices mockupsresponsive devices mockups

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.

filter search resultsfilter search resultsfilter search results

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.

select your interactive mockup templateselect your interactive mockup templateselect your interactive mockup template

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.

upload first imageupload first imageupload first image

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).

crop first imagecrop first imagecrop first image

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.

upload second imageupload second imageupload second image
crop second imagecrop second imagecrop second image

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.

add text or graphicadd text or graphicadd text or graphic

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.

download mockupdownload mockupdownload mockup

Plantillas para maqueta con diseños responsivos

¿Te diste cuenta qué fácil es? Ahora déjame mostrarte un par de maquetas que puedes usar para presentar tu aplicación a potenciales clientes.

Maqueta de una MacBook Pro y un iPhone

Con esta maqueta, puedes mostrar fácilmente la aplicación en su versión móvil, así como en una pantalla más ancha. Luce simple y elegante.

Mockup of MacBook Pro and an iPhoneMockup of MacBook Pro and an iPhoneMockup of MacBook Pro and an iPhone

Maqueta de iPhone en un entorno natural

La naturaleza ahora está muy en boga, así que ¿por qué no usar un entorno natural para presentar tu aplicación? Esta maqueta te ofrece espacio para tres capturas de pantalla de dispositivos móviles.

IPhone Mockup in a Natural SettingIPhone Mockup in a Natural SettingIPhone Mockup in a Natural Setting

Maqueta de Android

Si vas a vender tu aplicación en la Google Play store, entonces, ¡necesitas algo atractivo! Esta plantilla para maqueta te ofrece docenas de fondos de aspecto moderno, junto con diferentes fuentes para el texto.

Android MockupAndroid MockupAndroid Mockup

Creador de captura de pantalla en la tienda de aplicaciones del iPhone

Crea una bonita captura de pantalla para la App Store en segundos con esta plantilla para maqueta. Experimenta con diferentes colores, fuentes y gráficos para crear una presentación perfecta para tu aplicación.

IPhone App Store Screenshot MakerIPhone App Store Screenshot MakerIPhone App Store Screenshot Maker

Creador de capturas de pantalla para la App Store con pantalla angulada

Si necesitas algo más dinámico, ¡esto te gustará! Aquí la pantalla es angulada, lo cual le brinda una sensación orgánica a la presentación. ¡Combínala con un genial fondo y una fuente prolija para el mejor aspecto!

App Store Screenshot Maker with Angled ScreenApp Store Screenshot Maker with Angled ScreenApp Store Screenshot Maker with Angled Screen

¡Eso es todo!

Ahora sabes cómo elaborar una maqueta con diseño responsivo para el iPhone sin utilizar Photoshop.

responsive iphone mockup generatorresponsive iphone mockup generatorresponsive iphone mockup generator

Si quieres aprender más sobre el uso de Placeit para tus diseños, intenta también estos tutoriales:

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Design & Illustration tutorials. Never miss out on learning about the next big thing.
Advertisement
Start your 7-day free trial*
Start free trial
*All Individual plans include a 7-day free trial for new customers; then chosen plan price applies. Cancel any time.