Cómo crear una maqueta de iPad en Photoshop

En este tutorial de Photoshop, le mostraré cómo crear una maqueta de iPad de aspecto realista desde cero.

Como diseñador, saber cómo presentar profesionalmente su aplicación de iPad o maqueta de diseño web móvil es una habilidad importante. Este tutorial describe todos los pasos para crear una maqueta de iPad. A continuación puede ver cómo se verá la versión terminada.


Imagen final

Cómo crear una gran maqueta de iPad en Photoshop


Detalles del tutorial

Programa: Adobe Photoshop CS6 (las versiones CS3 + también funcionarán)
Tiempo estimado de finalización: 60 minutos
Dificultad: Intermedio


Paso 1

Abra un nuevo documento de Photoshop con un ancho de 4000 px y una altura de 3072 px. Seleccione la herramienta Rectángulo redondeado y cree una forma con las dimensiones que se muestran en la imagen a continuación.

Cómo crear una gran maqueta de iPad en Photoshop 1
Esta es la base del iPad.


Paso 2

A continuación, vamos a agregar un ligero trazo alrededor del cuerpo. Esto suavizará los bordes duros de la forma y le dará un efecto más realista.

Cómo crear una gran maqueta de iPad en Photoshop 2

El trazo es muy sutil pero vale la pena el esfuerzo más adelante.


Paso 3

El siguiente paso es crear el borde plateado que envuelve la base del iPad. Simplemente duplique la forma del cuerpo y cambie el color a # b4b8bb, que es un color gris plateado. Usar la herramienta Transformar (Pulsación de tecla Cmd / Ctl + T), amplíe el cuerpo gris unos píxeles a cada lado. Vea abajo.

Cómo crear una gran maqueta de iPad en Photoshop 3
Esta capa plateada se convierte en el borde alrededor del iPad.


Paso 4

Ahora vamos a agregar los estilos de capa para esta forma plateada. El primer estilo de capa que agregaremos es un bisel y relieve.

Cómo crear una gran maqueta de iPad en Photoshop 4

Seguido de un derrame cerebral …

Cómo crear una gran maqueta de iPad en Photoshop 5

Y finalmente por un resplandor exterior.

Cómo crear una gran maqueta de iPad en Photoshop 6

Para obtener los mejores resultados, haga coincidir exactamente los ajustes de Estilo de capa.


Paso 5

Lo siguiente que debe crear es el resplandor de la pantalla del iPad. Crearemos una forma de rectángulo blanco y la voltearemos hacia un lado usando la herramienta Transformar (Pulsación de tecla Cmd / Ctl + T). Asegúrese de que la forma cubra el iPad de un extremo a otro.

Cómo crear una gran maqueta de iPad en Photoshop 7

Asegúrese de que la forma cubra el iPad de un extremo a otro.


Paso 6

Ahora vamos a agregar una máscara de capa a la capa de deslumbramiento para que solo aparezca en el iPad. Manteniendo presionado Cmd / Ctl, haga clic en la forma en el panel Capas. Vea la imagen a continuación. Después de seleccionar los píxeles, agregue una máscara de capa a la capa de deslumbramiento.

Cómo crear una gran maqueta de iPad en Photoshop 8

Reduzca la opacidad de la capa de deslumbramiento al 8% y este será el resultado.

Cómo crear una gran maqueta de iPad en Photoshop 9


Paso 7

Lo siguiente que vamos a agregar es la captura de pantalla del sitio web. Vamos a colocar esta imagen como un Objeto Inteligente, lo que nos permitirá volver atrás y editar la pantalla del iPad cuando queramos. Si desea obtener más información sobre los objetos inteligentes, Lee este artículo.

Cómo crear una gran maqueta de iPad en Photoshop 10

Cambie el tamaño del objeto inteligente para que se ajuste a la pantalla del iPad.


Paso 8

Ahora se agregarán algunos estilos de capa al objeto inteligente.

Cómo crear una gran maqueta de iPad en Photoshop 11

Primero, agregue un bisel y relieve.

Cómo crear una gran maqueta de iPad en Photoshop 12

Luego, agregue un trazo.


Paso 9

Ya casi terminamos con el iPad, solo tenemos que agregar la cámara y el botón de Inicio. Primero abordaremos la cámara. Comience creando un pequeño círculo con la herramienta Elipse. Rellena el color con # 000000 y agrega una sombra paralela.

Cómo crear una gran maqueta de iPad en Photoshop 13


Paso 10

A continuación, agregue un pequeño círculo azul con el color # 30a7c4. Agrega un ligero estilo de capa de trazo.

Cómo crear una gran maqueta de iPad en Photoshop 14

Termine la cámara agregando un pequeño brillo de color claro al círculo azul.

Cómo crear una gran maqueta de iPad en Photoshop 15


Paso 11

Ahora vamos a crear el botón Inicio. Crea un círculo pequeño y rellénalo con # 000000.

Cómo crear una gran maqueta de iPad en Photoshop 16


Paso 12

A continuación, agregue un pequeño resplandor al botón de inicio con la herramienta Elipse.

Cómo crear una gran maqueta de iPad en Photoshop 17

Reduzca el relleno al 4%.

Cómo crear una gran maqueta de iPad en Photoshop 18


Paso 13

Agregue un poco de forma de rectángulo redondeado y reduzca el relleno para darle un aspecto transparente.

Cómo crear una gran maqueta de iPad en Photoshop 19


¡Y hemos terminado!

¡Tu iPad ya está terminado!
Cómo crear una gran maqueta de iPad en Photoshop 20


¡Agregue un poco de sombreado y un fondo y lo tendrá!

Cómo crear una gran maqueta de iPad en Photoshop

¿Todavía no eres usuari@ de Fiverr ?

Tenemos un post sobre Fiverr donde te contamos cono funciona.

Deja un comentario