Cómo usar un Mockup

Imagen de una presentación que explica cómo usar un mockup

Usar un mockup se ha convertido en lo más habitual hoy en día para la presentación de proyectos de cualquier tipo. Antes de entregar el diseño de una página suelo mostrar su aspecto final utilizando un mockup para la simulación de la página web en diferentes dispositivos.

Utilizar un mockup para que el cliente se haga idea del diseño final de la página web, mucho antes de existir, es una forma atractiva y eficaz de revalorizar un diseño incluso antes de haber comenzado el proyecto.

Aunque la técnica puede parecer compleja en este post te lo explico paso a paso. Ademas al final del artículo haremos un repaso en vídeo del proceso completo de cómo usar un mockup.

¿Qué es un mockup?

Antes de aprender a cómo usar un mockup, anglicismo que podemos escribir mockup o mock up, veamos lo que es. En la famosa Wikipedia encontramos que la definición de mockup es la siguiente:

Definición de un mockup en Wikipedia
Es decir una maqueta, y además una manera muy chula de presentar un proyecto audiovisual que lo destaca y aumenta la comprensión sobre el mismo.

El cliente podrá hacerse a la idea de cómo va a quedar su diseño tal cual, en una presentación que bien podría haberla hecho un diseñador gráfico profesional.

¿Dónde conseguir un mockup?

Evidentemente uno mismo puede hacerse sus propios mockups, pero sería un trabajo muy laborioso tener que hacer cada uno de los que le van a hacer falta a lo largo de su carrera.

Lo mejor en “la era del compartir” es hacer unos pocos y compartirlos en las páginas adecuadas como behance.net, graphicburger.com o dribbble.com.

Dónde conseguir mockups y cómo usar un mockup

Se pueden compartir de forma gratuita o de pago. Así todo el mundo dispondrá de multitud de opciones y variedades de mock ups para elegir.

Un sitio fantástico para descargar mockups es Mockup World.

Cómo usar un mockup

Ahora que sabes qué es un mockup y para qué sirve vamos a aprender a usarlo aprovechando los objetos inteligentes de Photoshop. Estos permiten editar de forma no destructiva la capa porque se edita independientemente, pero asociada el archivo original.

¿Cómo funcionan las capas al usar un mockup?

Lo primero que vas a hacer es buscar un mockup que te guste y que cubra tus necesidades. Debes descargarlo de manera legal y a continuación abrirlo con Photoshop.

Cómo usar un mockup con Photoshop

Si tenemos un poco de conocimiento del programa enseguida veremos a qué corresponde cada capa. El archivo viene así, y tal cual lo vamos a analizar.

  • La primera y segunda capa corresponden a un brillo. Utilizan a la capa 3 como máscara de recorte y solo muestran el contenido que ocupa la capa 3.
  • La capa 3 es un objeto inteligente. Es la capa que nos interesa y que vamos a usar.
  • En la grupo de las siguientes capas está la imagen de fondo, a la que le han añadido una máscara, y debajo la copia de seguridad de la imagen que podríamos apagar.
  • La última capa, en este caso tampoco nos importa demasiado porque no se va a ver, ni la vamos a usar y también podríamos apagarla

Esto puede parecer lioso, pero a nosotros para usar un mockup nos va a dar igual la complejidad del archivo. Solo vamos a usar y manipular una de las capas. La del objeto inteligente.

Una vez comprendemos más o menos el archivo, vamos a buscar la imagen que queremos insertar en nuestro mockup.

Recibe nuevos artículos mensualmente

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

Manipular el mockup

Para implementar nuestra imagen en el mockup debemos manipular el objeto inteligente por separado del archivo general. Al guardar los cambios realizados en el archivo del objeto inteligente se mostrarán en el archivo principal. Ponte a ello que es muy sencillo.

El objeto inteligente del mockup

Volvemos a Photoshop. Situamos el cursor sobre la capa 3 (el objeto inteligente) y clicamos dos veces. Aparecerá una ventana emergente (que podemos desconectar para el futuro), le damos a ok y mágicamente se abrirá un nuevo archivo de Photoshop con la imagen de muestra del mockup.

En este momento tendremos dos archivos de Photoshop abiertos: el general y el del objeto inteligente.

Lo mágico del asunto es que la imagen en el archivo del objeto inteligente se nos muestra plana. Sin ningún tipo de perspectiva ni deformaciones.

Cómo crear un mockup y usar el objeto inteligente Photoshop

Como en el caso anterior, ni nos tiene que preocupar la distribución de las capas, ni por qué están ahí. Solo tenemos que añadir nuestra imagen encima de la capa a sustituir. Podemos poner una imagen, un texto o las dos cosas.

Para añadir una nueva capa al archivo y que contenga nuestra imagen, clicamos sobre la capa a sustituir. Así nos asegurarnos de que la siguiente capa se añadirá por encima.

Imagen banner diseño web valencia

Construimos

Tu Marca

Si necesitas ayuda con tu proyecto de diseño gráfico no tienes más que decirlo.

Solicitar un Presupuesto!

Insertar la imagen en el mockup

Nos dirigimos al menú superior (izquierda) y clicamos sobre el elemento de menú Archivo. En el desplegable buscamos Colocar. Clicamos y seleccionamos la imagen en la carpeta navegando dentro del ordenador.

Cuando se coloca la imagen necesitaremos ajustarla un poco de tamaño porque no corresponderá con las medidas exactas del mockup. Para ello usaremos el atajo de teclado Ctrl+T. Estirando de las esquinas modificadoras ajustaremos la medida. Recuerda que para transformar de forma proporcionada debes tener pulsada la tecla Shift.

El consejo anterior sobre cómo transformar la capa no te hará falta si eres un habitual de Photoshop y pretendes usar un mockup. Pero en el caso de necesitarlo porque no controlas el programa, al final del artículo tienes acceso a un curso básico de Photoshop gratuito. Mientras tanto tienes esta herramienta online para ajustar el tamaño de tu imagen si es necesario.

Una vez la tengamos a nuestro gusto, clicamos Enter y guardamos el archivo.

Objeto inteligente sustituido aprendiendo a usar el mockup

El archivo base del mockup

Si te has asegurado de que tu capa está delante (arriba) de la capa original (que ya podemos eliminar), ahora que ya has guardado puedes seleccionar la pestaña que lleva al archivo general y ver los cambios.

Si te gusta guarda el archivo y tendrás tu presentación terminada en un mockup.

Has aprendido cómo se utiliza un mockup

Con este sencillo y rápido proceso hemos aprendido cómo usar un mockup. Gracias a los objetos inteligentes de Photoshop podemos evitar tener que transformar nuestra imagen manualmente y añadir máscaras o filtros que no comprendemos.

Vídeo del proceso de cómo usar un mockup

Ahora que has aprendido cómo usar este tipo de recursos puedes aprender a crear tu propio mockup en una serie de nuevos tutoriales que se irán complicando. Como con este del mockup en perspectiva.

Para más información y trucos básicos sobre Photoshop, te recomiendo que descargues este curso de Photoshop gratuito.

Si durante la explicación crees que he dado alguna cosa por sabida o algo no te ha quedado claro, puedes recurrir al formulario de comentarios un poco más abajo.

Si te ha gustado comparte

Información del autor

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.

Siguiente
Anterior

Deja un comentario

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

*