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
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.
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.
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.
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.
Seguido de un derrame cerebral …
Y finalmente por un resplandor exterior.
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.
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.
Reduzca la opacidad de la capa de deslumbramiento al 8% y este será el resultado.
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.
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.
Primero, agregue un bisel y relieve.
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.
Paso 10
A continuación, agregue un pequeño círculo azul con el color # 30a7c4. Agrega un ligero estilo de capa de trazo.
Termine la cámara agregando un pequeño brillo de color claro al círculo azul.
Paso 11
Ahora vamos a crear el botón Inicio. Crea un círculo pequeño y rellénalo con # 000000.
Paso 12
A continuación, agregue un pequeño resplandor al botón de inicio con la herramienta Elipse.
Reduzca el relleno al 4%.
Paso 13
Agregue un poco de forma de rectángulo redondeado y reduzca el relleno para darle un aspecto transparente.
¡Y hemos terminado!
¡Tu iPad ya está terminado!
¡Agregue un poco de sombreado y un fondo y lo tendrá!
¿Todavía no eres usuari@ de Fiverr ?
Tenemos un post sobre Fiverr donde te contamos cono funciona.