Cómo usar un Mockup

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

Ernesto BarrachinaDiseño Gráfico, Diseño webDeja tu comentario

Cómo usar un Mockup
5 (100%) 7 votos

Usar un mockup se ha convertido en algo obligatorio cuando queremos presentar proyectos de cualquier índole. Ya sea una página web, una aplicación, una revista, o lo que sea, si no usas mockups te has quedado desfasado.

¿Qué dirían tus clientes si no les mostraras el diseño de su página web, con una simulación del resultado final en diferentes dispositivos utilizando mockups?

Recurrir a los mockups para que el cliente se haga a la idea del diseño antes de existir el producto, es una forma atractiva y eficaz de revalorizarte como profesional incluso antes de haber comenzado a trabajar a fondo en el proyecto.

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

¿Qué es un mockup?

Antes de aprender a usar un mockup, anglicismo que podemos escribir mockup o mock up, veamos qué 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 una manera muy chula de presentar un proyecto audiovisual que lo destaca y aumenta la comprensión sobre el mismo.

Gracias a los mockups, el cliente se hará una idea de cómo va a quedar el diseño final 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 fabricarse sus propios mockups, pero sería un trabajo muy laborioso tener que hacer cada uno de los que va a usar a lo largo de su carrera.

Lo mejor en «la era del compartir» es crear unos cuantos mockups y compartirlos en las páginas adecuadas, como los bancos de imágenes gratuitos.

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.

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

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

Plataforma para descargar mockups y usar en tus proyectos

Cómo usar un mockup

Ahora que sabes qué es un mockup y para qué sirve, vamos a aprender a utilizarlo aprovechando los objetos inteligentes de Photoshop. Estos permiten editar de forma no destructiva una capa, porque se edita en un archivo independiente asociado el archivo original.

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

Lo primero que tienes que hacer es buscar un mockup que te guste y que cubra tus necesidades.

Descárgalo y ábrelo 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 lo he descargado así, y tal cual lo vamos a analizar.

  • La primera y segunda capa corresponden a un brillo. Utilizan 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 el 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 ocultar.
  • La última capa en este caso tampoco nos importa demasiado, porque ni se va a ver ni la vamos a usar. Podríamos ocultarla.

Esto puede parecer lioso, pero a nosotros al usar un mockup nos va a dar igual la complejidad del archivo. Solo nos hace falta 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 hay que 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.

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.

Editar el objeto inteligente para mockup

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 las capas que NO interesan (que podríamos eliminar porque no se van a ver).

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, o como en este caso sobre la primera, ya que añadiremos un contenido totalmente nuevo.

Así nos aseguraremos de que la siguiente capa se añadirá por encima de las anteriores.

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.

Busca la imagen que quieres usar en el mockup

Cuando se coloca la imagen necesitaremos ajustarla un poco de tamaño porque no corresponderá con las medidas exactas del mockup.

Colocar la capa para usar en el mockup

Para ello usaremos el atajo de teclado Ctrl+T. Estirando de las esquinas modificadoras ajustaremos la medida. Recuerda que para transformar de forma proporcional debes tener pulsada la tecla Shift.

Transformar la capa que usaremos en el mockup

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

Hemos ajustado la capa que queremos usar en el mockup a las medida del objeto inteligente

El archivo base del mockup

Con tu capa sobre la capa original (que ya podemos eliminar), y ahora que has guardado este archivo, puedes seleccionar la pestaña que te lleva al archivo general y ver los cambios.

Guarda el archivo general.

Ya tenemos la imagen como fondo del mockup

Vamos a añadir un texto. El sistema no tiene nada de especial.

En el archivo del objeto inteligente, sobre la capa naranja que usamos de fondo, añade cualquier texto.

Añadir texto sobre la capa de fondo del mockup

Guarda y revisa el archivo general porque ya tendrás terminada tu presentación en un mockup.

Con este paso consideramos que has aprendido a usar un mockup

Guarda el archivo principal.

Con este sencillo y rápido proceso hemos aprendido a cómo usar un mockup. Y que gracias a los objetos inteligentes de Photoshop nos evitaremos transformar la imagen manualmente y añadirle máscaras o filtros que no comprendemos.

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

Si eres de los que te gusta más que te lo expliquen en vídeo, te he preparado uno con el proceso completo para que aprendas cómo usar un mockup.

Ahora que ya sabes 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

Más sobre el 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.

¿Lo hacemos?

« Siguiente
Anterior »

Deja un comentario

INFORMACIÓN BÁSICA SOBRE LA PROTECCIÓN DE TUS DATOS

Todos las datos marcados con asterisco (*) son obligatrorios. Si no los indicas no podrás comentar en el blog.

Responsable de la web: Ernesto Barrachina Rubio (EBWEB) +Info

Finalidad de los datos: Gestionar los comentarios que realizas en este blog. +Info

Legitimación: Consentimiento del interesado. +Info

Destinatarios: No se comunican los datos a nadie más. +Info

Plazo de conservación de los datos: Hasta que no se solicite su supresión por el interesado.

Los datos que me facilitas estarán ubicados en los servidores de Dinahosting (proveedor de hosting de EBWEB) fuera de la UE en Otros. Dinahosting está ubicado en la UE, con los niveles de protección adecuados según Comisión de la UE. Ver política de privacidad de Dinahosting.

Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en ebweb@ebweb.es así como el derecho a presentar una reclamación ante una autoridad de control.

Puedes consultar la información adicional y detallada sobre Protección de Datos en mi página web: https://ebweb.es, así como consultar mi política de privacidad.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.