Cómo crear un mock up con Photoshop

Tutorial que explica cómo crear un mock up en apenas 10 minutos

Ernesto BarrachinaDiseño Gráfico2 Comentarios

Cómo crear un mock up con Photoshop
5 (100%) 6 votos

Como en un post anterior ya aprendimos qué es, para qué sirve y cómo se manipula un mockup, en este artículo iré con el siguiente paso lógico: crear un mock up.

Ya sabemos que es posible encontrar infinidad de páginas desde donde descargar mock ups, pero a menudo estos no se corresponden con nuestra idea inicial y somos nosotros los que tenemos que adaptarnos a lo que hay.

Así que, cuando quieras plasmar un diseño exactamente como lo has pensado y no encuentres la imagen adecuada, tienes la solución en tus manos: aprender a crear mock ups por tu cuenta y dejarte de limitaciones.

Además, diseñar tus propios mock ups con Photoshop hará que la presentación de ese proyecto sea única y quede super profesional. Tal y como lo habías pensado.

Desglose del tutorial para crear un mock up

En este primero de varios tutoriales sobre mockups, vamos a crear un mock up sencillo que muestre un simulacro de la página web de una clínica veterinaria vista en un dispositivo móvil.

De hecho, el mock up es tan simple que podrías hacerlo pegando una capa sobre otra 😀

No obstante, prefiero poner en práctica algunas de las acciones que nos vendrán muy bien para crear mock ups más complejos en el futuro.

El tiempo total para crear el mock up es de unos cinco o diez minutos, pero se nos hará un poco más largo, porque voy a tratarlo en plan tutorial para principiantes de Photoshop.

De esta forma, cualquier simpatizante del programa será capaz de crear su propio mock up mientras sigue este manual.

¡No sabía que diseñar un mock up fuera tan fácil! Cuéntalo en las redes

➡ Si no te apetece tanta lectura, puedes ir directamente al vídeo que encontrarás al final.

Dividiré el tutorial en tres secciones:

  1. La primera para preparar la imagen de fondo.
  2. La segunda para la crear el mock up propiamente dicho.
  3. Y una tercera para aportarle al mock up efecto realista.

Preparar la imagen de fondo del mock up

Lo primero que necesitamos para fabricar el mock up (o mockup) es una imagen de calidad sobre la que poder trabajar cómodamente.

Para el fondo he descargado esta imagen gratuita de Pixabay. Que por si no lo sabes, es mi banco de imágenes favorito y con el que colaboro cuando tengo ocasión.

La foto tiene una zona negra que facilitará el trabajo cuando insertemos la captura de la web.

Descarga la imagen que usarás de fondo para crear el mock up sobre ella

Aunque no es muy evidente, la pantalla del móvil viene un pelín torcida. Y como para la presentación la queremos enderezada, aprovecharemos para aprender cómo se usan las reglas y guías de Photoshop durante el diseño del mock up.

Mostrar las reglas de Photoshop

Abre la foto descargada con Photoshop y muestra las reglas desde el menú superior Vista > Reglas.

Las reglas de Photoshop ayudan a girar la imagen para crear el mock up

Aparte de informarnos sobre la medida de la imagen, usaremos las reglas para crear y eliminar guías.

Mostrar las guías de Photoshop

Desde el menú superior haz clic sobre Vista > Guía nueva para que emerja una ventana desde donde podrás crear guías verticales y horizontales.

Por el momento saca una guía vertical con la posición en 0px y luego aprenderemos a desplazarla.

Usamos las guías para rotar la imagen de fondo que sirve para crear el mock up

➡ En cuanto veas una linea vertical azul, justo en el borde de la imagen, ya la tienes.

Ahora saca otra guía, pero esta vez horizontal.

Mover las guías de Photoshop

Con la herramienta mover de Photoshop seleccionada (flecha negra menú lateral), ponte encima de la guía hasta que veas que el icono del cursor cambia.

Entonces podrás arrastrarla por la pantalla, mientras mantienes pulsado el botón derecho del ratón.

Mueve las guías para ajustar la imagen al mock up que vamos a crear

Ahora que sabes crear y mover las guías, colócalas de forma que se crucen en el límite inferior de la pantalla del móvil.

Ajustamos las guías para que formen el punto de rotación en la base del mock up

Crear y ocultar las guías de Photoshop desde las reglas

Es mucho más cómodo mostrar las guías desde las propias reglas, porque hace el trabajo más fluido y no hay que recurrir al menú superior.

El sistema es parecido al que hemos usado para moverlas.

Sitúa el cursor sobre una de las reglas e imagina que en su borde hay una guía, solo tienes que hacer clic sobre la regla y arrastrar la guía que se generará automáticamente.

Para ajustar el mock up al diseño te será más cómodo sacar las guías de Photoshop desde las reglas

Para eliminar cualquier guía, solo hay que colocar el cursor sobre ella y arrastrarla hasta la regla para que desaparezca.

Aunque si quieres usarlas más tarde, pero de momento te molesta tenerlas a la vista, puedes ocultarlas temporalmente con el atajo de teclado Ctrl+, (coma).

Girar la imagen de fondo con Photoshop

Antes de ponernos a crear un mock up, vamos a girar la imagen unos grados para que el teléfono quede completamente vertical.

Si tienes abierta la capa como FONDO estará bloqueada y no podrás manipularla.

Capa fondo bloqueada antes de crear el mock up

Para convertirla en editable, accede al menú superior Capa > Nueva > Capa a partir de fondo.

➡ Guarda el archivo en formato PSD desde Archivo > Guardar como.

Con el atajo de teclado Ctrl+T activamos el modo de transformación de Photoshop.

En la parte central verás un punto, que en este caso indicará el eje de giro. Arrástralo y sitúalo en el punto exacto donde se cruzan las guías.

Eje de giro para transformar la imagen de fondo que nos servirá para crear mock up

Ahora ve a la parte superior de la pantalla, bajo el menú de herramientas y escribe 0,23 en la casilla correspondiente a los grados de giro.

Girar imagen sobre el eje del mock up desde el menú superior de Photoshop

De paso puedes probar con otras cantidades y ver lo que ocurre, o asignar grados en negativo ( – ) para que gire en el sentido contrario.

Si la vista no me falla, tenemos la pantalla ajustada para empezar a crear el mock up.

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.

Crear un mock up

El proceso de crear un mock up siempre es similar.

En el caso de presentaciones de páginas web, siempre habrá una capa de fondo que muestre el ordenador, la tableta o el teléfono y otra capa delante, donde se visualice tu diseño.

Más tarde pueden añadirse nuevas capas con brillos o reflejos, pero el concepto siempre es el mismo.

De momento nuestro mock up va a estar compuesto por dos capas.

  1. La primera actúa como fondo, y es con la que hemos estado trabajando hasta ahora.
  2. La segunda, delimitará y mostrará el diseño web seleccionado para el mock up, que trabajaremos en una capa inteligente para editarla independientemente.

Seleccionar el área del mock up

Vamos a crear una nueva capa con el tamaño y forma exacta de la pantalla negra donde ubicaremos nuestra imagen prediseñada.

Esta actuará como máscara solo mostrando el contenido dentro de la zona seleccionada.

Conforme vayamos fabricando el mock up lo irás entendiendo 😉

Selecciona la herramienta rectángulo redondeado desde la barra de herramientas lateral y asigna un radio de esquinas de 6px.

Seleccionar la herramienta para definir la zona del mock up donde incluir nuestro diseño

Coloca el cursor en la esquina superior izquierda de la pantalla negra y, mientras mantienes pulsado el botón del ratón, arrastra hasta llegar al final de la selección.

Definir la zona para la imagen prediseñada que contendrá el mock up

Si no te sale a la primera puedes modificar el trazado seleccionándolo desde el panel de trazados con el atajo de transformar que ya conoces (Ctrl+T).

También puedes reubicar el trazado mientras lo generas, pulsando simultáneamente la barra espaciadora del teclado.

Al principio cuesta acostumbrarse pero hay que pasar por este trance 😳

Si quieres volver atrás y empezar de nuevo puedes recurrir al atajo Ctrl+Alt+Z.

Ahora esta selección hay que pasarla a una capa inteligente.

Crear el objeto inteligente que albergará el diseño del mock up

Si no lo tienes a la vista, despliega el panel de trazados desde el menú superior Ventana > Trazados.

Para seleccionarlo haz clic sobre la miniatura mientras mantienes pulsada la tecla Ctrl.

Selección del trazado para la capa de mock up

Abre el panel de capas.

Ve al menú superior para crear una nueva capa desde Capa > Nueva > Capa.

Desde el panel de capas clica sobre la nueva capa para seleccionarla, asegurándote de que queda por encima de la anterior.

Este es el aspecto que tendrá tu Photoshop, con la pantalla seleccionada rodeada de una línea discontinua y la nueva capa seleccionada (en azul).

Convertir el trazado en una capa para introducir el diseño del mock up en su interior

El siguiente paso es rellenar el área seleccionada en la nueva capa, desde el menú superior Edición > Rellenar (color frontal).

Rellenar la selección del mock up

Tienes un botón abajo a la izquierda de tu pantalla, con el que seleccionar los colores frontal y de fondo por defecto.

Con el icono de las flechitas puedes intercambiarlos.

Color frontal blanco en la nueva capa del mock up

Esa capa, ya coloreada en negro, hay que transformarla en un objeto inteligente clicando con el botón secundario del ratón sobre la zona azul de la capa.

Convertir objeto inteligente para crear el mock up

El objeto inteligente nos permitirá editar esa capa en un archivo diferente asociado al principal.

De tal forma, cualquier modificación que hagamos en ese archivo se mostrarán en el principal gracias a la «ventana mágica» que crea el objeto inteligente.

➡ Así que manos a la obra.

Clica sobre la miniatura del objeto inteligente para que se abra el nuevo archivo donde añadir el contenido a mostrar en el mock up.

Insisto en que cualquier cambio que hagamos en este archivo, después de guardarlo con Ctrl+S, se verá reflejado en el archivo principal de forma automática.

Añadir nuestro diseño al mock up

Previamente ya teníamos preparado la imagen que queremos implementar en el mock up, así que solo tenemos que añadirla al nuevo archivo y guardarlo.

Por supuesto la imagen deberá tener las proporciones adecuadas.

Si no has preparado alguna este es un buen momento. Debe medir 440px x 775px, así tendrá un poco de margen a los lados.

Abre el archivo desde Archivo > Colocar, busca en tu ordenador la imagen y colócala en Photoshop.

Para ir finalizando el mock up debes colocar la imagen prediseñada sobre el fondo

Definir el contenido del mock up con una máscara de recorte

Tu imagen colocada habrá creado una nueva capa sobre la anterior.

Ahora vamos a crear una máscara de recorte para que la imagen de la web del veterinario tenga las esquinas redondeadas y se adapte a la forma de la pantalla del móvil.

Es decir, vamos a usar la forma de la capa negra para delimitar lo que muestra la capa de la web.

  • Selecciona la capa de la clínica.
  • Haz clic con el botón derecho del ratón.
  • En el desplegable pulsa sobre Crear máscara de recorte.

➡ Tus capas quedarán así:

Mascara de recorte para crear un mock up

Guarda este documento con Ctrl+S y revisa el archivo principal.

Ahora mismo tienes tu imagen con los bordes redondeados ajustada al tamaño de la pantalla y formando parte del mock up 😀

Vamos a ajustarlo para darle un poco de gracia.

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!

Mock ups con efectos realistas

Ahora que ya tenemos prácticamente creado el mock up, vamos a terminar de darle estilo con un borde negro que simule el límite de la pantalla y un brillo para el cristal del smartphone.

Este tipo de detalles, así como la adición de reflejos, es lo que da vida y proporciona un aspecto mucho más realista a los mock ups.

➡ Trabajaremos solo en el archivo principal, así que puedes cerrar el otro si quieres.

Simular el límite de la pantalla del teléfono

Para añadir un trazo alrededor de la capa recurriremos al botón FX (parte inferior del panel de capas).

Debes tener el objeto inteligente seleccionado (tu capa).

  • Pulsa fx y selecciona Trazo.
  • Configúralo como en la siguiente imagen o como más te guste.

Crear trazo en la capa del mock up

Ya no puede quedar mucho para terminar la creación del mock up ¿no crees? 😉

Cierto, pero para aportarle un acabado más profesional y realista vamos a añadirle un brillo que recorra la pantalla del teléfono de arriba a abajo.

Crear un reflejo en el mock up

Desde el panel de capas crea una nueva capa.

Nueva capa para crear el reflejo del mock up

➡ Asegúrate de que el color frontal es negro.

Como la parte delantera del teléfono es de cristal, el brillo deberá recorrerla por completo con excepción de su marco.

Antes de aplicar el efecto nos toca hacer otra selección, para lo que recurriremos de nuevo a la herramienta rectángulo redondeado, a la que esta vez daremos un radio de 62px.

Seleccionar los límites de la capa donde aplicar los brillos realistas del mock up que estás creando

Ve al panel de trazados y selecciona el trazado, igual que has hecho anteriormente, clicando sobre la miniatura mientras tienes pulsada la tecla Ctrl.

Con tu nueva capa seleccionada (en color azul), rellena la selección con el color frontal negro.

Esta es tu capa para el reflejo.

Como queremos que el reflejo solo ocupe una parte de la pantalla del mock up, necesitamos crear una máscara en una nueva capa.

Crea una nueva capa.

Herramienta de selección lazo poligonal

En la parte superior del panel de Photoshop verás la herramienta de selección lazo.

Manteniendo pulsado el icono se desplegará un selector de herramientas.

➡ Selecciona lazo poligonal.

En el área que simulará el reflejo, haz clic en tres puntos para definir el triángulo y rellena la capa de color blanco (color frontal o de fondo).

Con el lazo poligonal crea la máscara para el brillo del mock up

Pon la capa de color negro en modo de fusión TRAMA, desde el panel de capas para que desaparezca el color negro y se vea la imagen diseñada previamente.

Modo de fusión Trama para ver la imagen del mock up

En este momento debes poder ver bajo el triángulo blanco la imagen de tu diseño.

➡ Ahora ve al panel de capas.

Con la capa del triángulo seleccionada, crea una máscara de recorte para que la capa solo se muestre dentro del rectángulo redondeado que forma el cristal (capa de color negro).

Crear una máscara de capa

Toca crear una máscara de capa desde el panel de capas.

Las máscaras ocultan el contenido de una capa pintando con negro sobre ella. Si la capa es blanca muestra el contenido por completo.

La máscara permite que solo se muestre una parte de la capa que actuará como brillo

En nuestro caso la pintaremos con un degradado de blanco a negro.

Crear un degradado en la máscara de capa

Queremos un reflejo traslúcido por la parte inferior, así que pintaremos la máscara con la herramienta de degradados que verás en la barra lateral.

Con la transición de negro a blanco en el degradado conseguiremos que la máscara de capa oculte de forma gradual esa capa.

Herramienta degradado para la máscara de capa del mock up

Va a la parte superior y clica sobre el desplegable de los degradados.

Selecciona blanco y negro.

Seleccion del degradado a aplicar en la máscara del mock up

Selecciona la capa del triángulo y aplícale el gradiente, clicando donde quieras que empiece y arrastrando hasta donde quieras que termine, de abajo a arriba.

Al aplicar un degradado, el brillo del mock up tendrá un efecto más realista

Esto va cogiendo forma y casi has terminado tu mock up.

Solo una cosa más. Bajar el porcentaje de opacidad de 100% a 35% en la capa blanca del reflejo.

Encuadre del mock up

Para terminar de crear el mock up solo te queda recortar y eliminar esos espacios transparentes que aparecieron al girar la imagen de fondo.

Para ello usa la herramienta recortar

Herramienta para recortar los sobrantes del mock up

Evita con la selección los espacios transparentes de los extremos.

Recorta el mock up con el encuadre que hayas decidido

Enhorabuena, acabas de crear tu primer mock up 😀

Presenta el diseño de tu proyecto con un mock up realizado por ti Cuéntalo en las redes

Crear un mock up en vídeo

Para finalizar el tutorial y por si acaso te has perdido en algún punto, te propongo que le eches un vistazo a este vídeo con el proceso completo para la creación de un mock up.

Pues bien, ahora que ya sabes cómo crear un mock up para conseguir presentaciones profesionales sin limitaciones, estás preparado para el siguiente reto: diseñar un mockup con perspectiva.

¿Te atreves?

Y tranquilo/a, porque eres libre de hacer cualquier consulta relacionada con el diseño de mock ups. Estaré encantado de resolverlas a través del formulario de comentarios 😉

Si te ha gustado comparte

Más sobre el autor

Ernesto Barrachina

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.

¿Quieres un Diseño Web Valencia?

« Siguiente
Anterior »

2 Comentarios en “Cómo crear un mock up con Photoshop”

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.