En esta entrada te enseñaremos como hacer un mock up sencillo y profesional con Photoshop, antes de continuar te invitamos a suscribirte a nuestro canal de Youtube en https://bit.ly/youtube_joystickmx nos ayudarías mucho!
Un MockUp nos permite visualizar y mostrar nuestra creación de una forma muy realista, reemplazando un elemento de una fotografía con nuestro diseño. Es muy sencillo y práctico de hacer.
Para mostrarte como realizar el tuyo, hemos creado este sencillo tutorial.
Paso uno:
Descargar la imagen que utilizaremos de fondo y abrirla en Photoshop. Hay que tener algunas cosas en cuenta, es ideal que la pantalla sea negra y cuanto más simple sea la perspectiva, más fáciles serán los siguientes pasos.
Para nuestro MockUp Utilizaremos estas dos fotografías.
Paso dos:
Dibuja una forma simple utilizando la herramienta “Forma” que se encuentra en la barra de herramientas. No tiene que alinearse perfectamente, pero asegúrate que cubra toda la figura por completo.
Consejo: Utilizar guías te ayudará a que este proceso sea más fácil.
Paso tres:
Convierte tu forma en un objeto inteligente. Para convertir tu forma en un objeto inteligente, simplemente tienes que hacer clic derecho en la capa de tu forma y seleccionar “Convertir en objeto inteligente” en el menú desplegable.
Paso cuatro:
Ahora vamos a hacer que nuestro objeto inteligente se ajuste a la pantalla del monitor para eso utilizaremos la “Herramienta transformar” nos dirigimos a Edición> Transformar> Distorsionar para comenzar a editar la forma de nuestro Objeto inteligente.
Consejo: Te recomiendo reducir la opacidad de nuestro objeto inteligente para así ver la imagen de abajo más fácilmente. Hacemos clic y arrastramos las esquinas para obtener el tamaño y la forma necesaria. Hay que recordar que los dispositivos electrónicos suelen mostrar un borde negro delgado alrededor de los bordes de la ventana de visualización, por lo que no queremos llenar la pantalla por completo.
Hacemos clic en la palomita para aplicar los cambios y volvemos a subir la opacidad de la capa al 100%.
Paso cinco:
Ahora es el momento de agregar la imagen a nuestro MockUp. Para hacer esto primero hacemos doble clic en la miniatura de nuestro objeto inteligente en el panel de capas. Si simplemente hacemos doble clic en la capa en sí, esto no funcionará. Deberemos hacer clic en el icono de la imagen junto al nombre de la capa. Una vez hecho esto, se verá una nueva pantalla emergente que parece tener la misma forma que nuestro Objeto Inteligente.
Abrimos la imagen que utilizaremos en Photoshop (ARCHIVO> ABRIR). Ahora, arrastramos y soltamos nuestra nueva imagen en esta pantalla usando la herramienta «Mover». Cambiamos el tamaño de la imagen para llenar la pantalla. Ahora, hacemos clic en GUARDAR y cerramos la ventana. ¡Tenemos que asegurarnos de no cerrar todas las ventanas de Photoshop porque todavía necesitamos nuestra imagen de fondo original!
Consejo: Si mantenemos presionada la tecla Mayús, se colocará la nueva imagen directamente en el centro del Objeto inteligente.
Paso seis:
Cuando regresemos a nuestra imagen de fondo ahí aparecerá la imagen que insertamos en nuestro Objeto inteligente.
En este punto, es posible que se pueda dejar nuestro MockUp como está, pero hay algunos trucos que se puede usar para hacerla aún más realista.
- ¿La pantalla es demasiado brillante? Si la imagen original tenía un fondo negro, simplemente tenemos que reducir la opacidad de nuestra capa de Objeto Inteligente para oscurecer las cosas.
- Agrega sombras. Hay muchas formas de hacer esto en Photoshop, pero una de las más simples es usar el efecto Color Burn con el pincel. Sin embargo, hay que tener cuidado de no alterar demasiado la imagen. Si te equivocas, solo Ctrl + Z.
- Juega con las opciones de Multiplicar, Subexponer entre otras opciones que se encuentran en panel de capas.
Ahora que tenemos los pasos, seguimos adelante y aplicamos el mismo proceso al resto de las pantallas en la imagen. ¡Y así quedará nuestra imagen completa!
Puedes descargar el archivo creado dando clic al siguiente enlace: https://www.joystick.com.mx/producto/mockup-computadoras-flotantes/
¿Dónde puedo descargar Mockups gratis?
Puedes descargar mockups gratuitos o de pago, muchas veces los de pago son de mejor calidad y no son tan costosos. A continuación, te dejo una lista de páginas donde puedes descargar mockups gratis:
- https://graphicburger.com/mock-ups/
- https://www.freepik.com/free-psd/mockup
- https://www.pixeden.com/free-graphics/
- https://www.mockplus.com/
- https://placeit.net/
- http://www.pixeden.com/
- https://www.mockupworld.co/all-mockups/
¡Y listo! No podemos pensar en nada más inspirador que ver cómo nuestras ideas cobran vida, si quieres recibir todas nuestras novedades, noticias y nuevos cursos de la Academia directamente en tu correo electrónico no olvides suscribirte a nuestra lista de correo.
