Cómo hacer un Mockup con perspectiva

Un mockup con perspectiva dificulta el ajuste del diseño web

Cumpliendo mi promesa de ir haciendo una serie de mockups en diferentes dispositivos y ángulos, esta tarde se me ha antojado hacer un mockup con perspectiva.

Es el mock up (o mockup) de un teléfono móvil dispuesto en una vista que hará que el encaje de la imagen se complique. Veremos un truco para hacerlo correctamente. Además crearemos una pequeña máscara que tape los dedos y trabajaremos con la opacidad del relleno (no de la capa).

Ya sabemos de sobra que los mockups se pueden utilizar para presentar el diseño de una página web. También sabemos cómo se utiliza un mockup y cómo se puede crear uno. Cómo se selecciona una capa, cómo se rellena de color, cómo se transforma… así que las explicaciones en este artículo serán un poco más escuetas que en el tutorial anterior.

Si prefieres el tutorial en vídeo lo tienes al final del artículo. La explicación se hace más corta, pero te recomiendo que hagas una lectura primero, ya que puede haber algún detalle que se nos escape.

Problema al hacer un mockup con perspectiva

Cuando hacemos un mockup de frente, sabemos perfectamente cuánto debe medir la capa que luego convertiremos en objeto inteligente, es decir la que contendrá la imagen de nuestro diseño web. Pero cuando queramos hacer un mockup con perspectiva la cosa cambia y bastante.

Hacer un mockup con perspectiva no es tan sencillo

Como no te veo colocando la regla y el compás sobre el monitor del ordenador casi que vamos a resolverlo con otro método, que aunque solo sea aproximado en este caso nos servirá.

Recibe nuestros artículos mensualmente

y aprende más sobre los temas que te interesan directamente desde la bandeja de entrada de tu correo electrónico.

El error en el objeto inteligente al crear un mockup con perspectiva

Para empezar vamos a descargar la imagen. La he sacado de uno de los bancos de imágenes gratuitos más conocidos, en concreto de esta página de Pixabay.

Descarga la imagen para hacer el mockup con perspectiva

Una vez tenemos la imagen abierta con Photoshop, supongo que lo que harías sería crear una capa con forma rectangular para convertirla en objeto inteligente. Luego la distorsionarías con la herramienta de transformar hasta acoplarla a la pantalla.

Error de medida al crear un mockup con perspectiva

Pero a pesar de que los pasos son los correctos no podemos trabajar con una forma rectangular de cualquier proporción, porque luego no encajará bien la imagen que insertemos.

Si nos fijamos en la imagen de abajo donde hemos creado la capa del objeto inteligente a ojo, vemos que no encaja.

He utilizado el salva pantallas de un iPhone para tener las proporciones lo más parecidas posibles.

Selección incorrecta para la capa inteligente del mock up

Aunque sus límites superior e inferior están ajustados, todo lo que sobresale del rectángulo rojo por los lados se mostrará también en el mockup.

Capa del mockup mal planteada

Si para evitarlo deformas esta capa hacia los lados para ajustarla a la del objeto inteligente, se mostrarán aberraciones en el resultado final.

Con la finalidad de resolver este contratiempo y conseguir acabados más realistas en el mockup debemos intentar crear el objeto inteligente con unas proporciones lo más aproximadas a la de la realidad.

Calcular la medida correcta al hacer un Mockup con perspectiva

Si en lugar de una imagen descargada utilizas una tuya, o cuando sepas el modelo de dispositivo que se muestra, es muy fácil saber las proporciones. Revisando sus especificaciones técnicas del equipo tendrás las proporciones de la pantalla.

Como en este caso yo creo que no es un iPhone 6 aunque lo parece, cualquier especulación puede ser incorrecta. Así que vamos a usar un truco para calcular de forma más aproximada las proporciones reales.

El procedimiento es bastante poco ortodoxo y tal vez si esto lo lee un diseñador gráfico muy estricto o un delineante se llevarán las manos a la cabeza. Pero tengamos en cuenta que este tutorial y los de esta serie están destinados a que cualquiera pueda hacer un mockup con perspectiva.

Tutorial para que cualquiera pueda hacer un mockup

La idea general

La idea es pasar las medidas de ancho (eje X) y alto (eje Y) del mockup que ahora están en perspectiva a una vista sin ella. También tendremos en cuenta el posible giro sobre el eje Z (profundidad).

Trasladar las medidas a la capa del mockup

Para ello haremos una selección de la pantalla del teléfono y usando la herramienta Transformar la rotaremos sobre su vértice inferior izquierdo.

Recuerda que en el tutorial anterior enlazado al principio de este, tienes información más detallada sobre el uso de las herramientas de Photoshop. También tienes la posibilidad de descargar un curso gratuito si quieres aprender un poco más.

A pesar de esto en el vídeo al final del artículo te oriento con los atajos de teclado en cada una de las acciones.

Pasar las medidas en perspectiva del mockup a una vista frontal

Como en la imagen no están muy bien definidos los límites de la pantalla, he añadido una capa de ajuste de niveles para tener un poco más de contraste. Una vez realizada la selección la podemos apagar cuando queramos.

Paso 1. Selección de la zona en perspectiva

Necesitamos crear una nueva capa y hacer la selección de dos de los lados de la pantalla. El lado izquierdo y el inferior. Usaremos la herramienta lazo poligonal.

Selección de la pantalla en un mockup con perspectiva

Rellena la capa por ejemplo con un color rojo. Selecciona un color frontal y usa las teclas Altl+Retroceso (Backspace).

Crea una nueva capa y con la misma selección rellénala de color verde. Así las tendrás bien diferenciadas.

El resultado será el mismo si clonas la capa anterior y la cambias de color.

Rellena las capas del mockup con colores diferentes

Estas son las capas que debes tener en el panel de capas de tu archivo. La misma selección en dos capas con diferentes colores.

Paso 2. Guías de Photoshop

Saca dos guías. Una vertical y otra horizontal. Colócalas para que se crucen en el vértice inferior izquierdo de la pantalla del teléfono.

Saca las guías de Photoshop sobre la imagen del mockup con perspectiva

Puedes apagar las capas si te molestan para ver los límites que buscas.

Paso 3. Transformación libre de las capas

Vamos a rotar las capas sobre el punto donde se cruzan las guías. Primero lo haremos con una y luego con la otra. Mientras trabajas con una capa es más cómodo que apagues la otra.

Una de las capas la vamos a rotar hasta que toque la guía vertical (eje Y).

En esta fase del proceso volveremos a acudir a la herramienta Transformar y moveremos el eje de transformación al punto de encuentro de las guías (punto de giro).

El punto de giro de la capa del mockup está en el encuentro de las guías

Repite el proceso con la otra capa pero alineándola con el eje X (guía horizontal).

Paso 4. Medidas reales de la capa del mockup

Ahora que tenemos alineada cada capa con su eje, crea una nueva capa que coincida con las medidas máximas de las anteriores. Dale un poco más de anchura en previsión de ese posible giro en el eje Z.

Rellénala de negro y tendrás la medida casi exacta de la pantalla.

Capa del mockup con la medida muy aproximada

En la imagen superior le he quitado opacidad a la capa para mejorar la comprensión, pero en tu mockup debe de ser opaca al 100%.

Esta capa vamos a convertirla en un objeto inteligente de Photoshop.

Imagen banner diseño web valencia

¿Hacemos juntos tu

Página web?

Te ofrezco un diseño web y un desarrollo de la página a la medida de tus necesidades.

Solicitar un Presupuesto!

La capa importante del mockup

Recordemos que lo de hacer un mockup con perspectiva es para que puedas presentar un diseño web mediante el mockup.

Como siempre la capa que lo va a contener y que es la más importante, la transformaremos en un objeto inteligente de Photoshop.

Convertir la capa donde muestras el diseño web en el mockup en objeto inteligente

Ahora ya podemos adaptar esa capa a la pantalla. De nuevo usaremos la herramienta Transformar (teclas Ctrl+T) y con el botón secundario del ratón seleccionaremos la opción Distorsionar.

Con la capa ajustada y distorsionada ya podemos editarla y pegar sobre ella la imagen deseada.

Como aprendimos en el anterior tutorial (y podrás recordar en el vídeo final) los objetos inteligentes se editan en un archivo independiente asociado al principal. Cualquier cambio efectuado en esa capa una vez guardada, se muestra en el archivo principal.

Para comenzar a editar el objeto inteligente clica dos veces sobre su miniatura en el panel de capas.

Montar el diseño web en el mockup

Ha llegado el momento de que montes tu diseño web responsive en la pantalla de este dispositivo.

En el archivo en el que se ha abierto el objeto inteligente crea una capa por delante de la de origen, que tenemos en color negro.

Crear nueva capa y pegar el diseño web

Puedes pegar en ella tu imagen prediseñada o añadir nuevas capas para componer tu diseño. Yo me voy a decantar por una imagen con la previsualización del diseño web en una sola imagen diseñada con antelación.

Si guardas el archivo y revisas el archivo original verás cómo va quedando la presentación de tu página web.

Si no lo has hecho todavía puedes apagar la capa de ajuste de niveles.

Presentación de un diseño web en un mockup con perspectiva

Casi lo tenemos terminado pero nos faltan tres detalles. Aplicar un modo de fusión que integra algunas sombras, simular el borde de la pantalla del teléfono y crear una máscara de capa que tape la zona de los dedos. Para estas últimas cuestiones es más práctico que sigas el vídeo.

Hacer un Mockup con perspectiva en vídeo

Para los últimos pasos y como repaso del proceso completo para hacer un mockup con perspectiva te dejo un vídeo tutorial.

De no ser por el vídeo el artículo se alargaría hasta el infinito y más allá y vas a pensar que hacer un mockup es más laborioso de lo que realmente es.

Ya has visto que cualquiera y en pocos minutos, puede fabricar su propio mockup con perspectiva o sin ella. Los mockups son un recurso estupendo para la presentación de tus proyectos de diseño web.

No te despistes porque pronto volveré con otro tutorial resolviendo nuevos retos y cuestiones sobre mockups.

Para finalizar y como siempre te digo, si te queda alguna duda por despejar puedes hacérmelo saber mediante el formulario de comentarios al final de la página.

Si te ha gustado comparte

About the Author

Ernesto Barrachina

¿Quieres ver mi biografía?

Aunque soy escultor y modelista de profesión, a los 40 decidí adaptar mis herramientas de trabajo. Un teclado y un ratón han sustituido a la arcilla, la silicona o al poliéster. Ahora me dedico al diseño web Valencia y el desarrollo de tu página web o de la imagen de tu marca pueden ser nuestro próximo proyecto.

¿Lo hacemos?

Siguiente
Anterior

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*