Cómo crear tu propio mock up

Tutorial para crear un mock up

Ernesto BarrachinaDiseño Gráfico2 Comentarios

Cómo crear tu propio mock up
5 (100%) 4 votos

En un artículo anterior hemos aprendido cómo se utiliza un mock up. Ahora que ya sabemos qué son los mock ups y para qué sirven, vamos con el siguiente paso que es aprender a crear un mock up nosotros mismos. Podrás usarlos para las presentaciones de proyectos gráficos o de páginas web.

Puedes encontrar infinidad de páginas web donde conseguir un mock up de forma legal. Pero como nosotros no queremos utilizar un mismo diseño para todos los proyectos, la solución más satisfactoria es aprender a crear un mock up por nuestra cuenta.

¿Qué mock up vamos a crear?

Este es el primero de una serie de tutoriales sobre mock ups, que ya tienes disponibles en el blog, de diferentes dispositivos, soportes y perspectivas cada vez más complejos.

En este primer tutorial vamos a crear un mock up sencillo. De hecho es tan simple que casi podríamos hacerlo pegando una capa sobre otra. Pero que nos vendrá muy bien para practicar acciones que necesitaremos dominar al crear mock ups más complejos.

Crearemos el mock up para la presentación de una hipotética página web de una clínica veterinaria vista en un smartphone.

El tiempo total para crear el mock up es de unos cinco o diez minutos, no obstante y aunque este tutorial se haga más largo voy a tratar el tema para principiantes de Photoshop. Así cualquier simpatizante del programa será capaz de crear su propio mock up mientras sigue este manual.

Dividiré el tutorial en tres secciones, una para preparar la imagen que usaremos de base, otra para la creación del mock up, y una última para darle un efecto realista. Al final del artículo tendrás un vídeo con el proceso completo.

Preparar el fondo sobre el que crear un mock up

El primer elemento que necesitamos para la fabricar el mock up (o mockup), que en inglés significa esbozo o maqueta, es un imagen de calidad sobre la que poder trabajar.

Para el tutorial he descargado una imagen gratuita que puedes encontrar y descargar en este banco de imágenes gratuito. La foto tiene una zona negra donde insertar la web responsive y que hará muy cómodo el trabajo.

Descargar la imagen para crear un mock up sobre ella

Ajustes iniciales del mockup: reglas y guías de Photoshop

Como este tutorial por sí solo es muy sencillo voy a aprovecharlo para enseñarte a usar de forma básica las reglas y guías de Photoshop, porque aunque no se nota la pantalla del móvil viene un pelín torcida, y para la presentación del mock up queremos enderezarla.

Mostrar reglas de Photoshop

Abre la foto descargada con Photoshop y saca 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, en este ejemplo vamos a utilizar las reglas para mostrar y eliminar guías. Cuando tengas las reglas a la vista hay que sacar las guías.

Mostrar 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 la guía en vertical u horizontal.

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

Guías para enderezar la imagen al crear un mock up

En cuanto veas una linea vertical azul justo en el borde de la imagen ya la tienes. Ahora saca una guía horizontal.

Con la herramienta mover de Photoshop seleccionada (flecha negra menú derecho) 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 la guía para ajustar el mock up que quieres crear

Ahora que sabemos crear y mover las guías colócalas de forma que se crucen en el límite inferior de la pantalla del teléfono.

Ajustamos las guías para la creación de un mockup

Sacar las guías desde las reglas

Es más cómodo sacar 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.

Si sitúas el cursor sobre una de las reglas e imaginas 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.

Podemos sacar las guías desde las reglas para ajustar el mock up en un diseño

Eliminar la guía desde la regla

Igual que hemos creado guías desde las reglas podemos eliminarlas. Tan solo debes ponerte sobre una de ellas y arrastrarla hasta la regla donde desaparecerá. Si quieres usarlas más tarde pero te molesta tenerlas a la vista ahora puedes ocultarlas temporalmente con el atajo de teclado Ctrl+,

Girar la imagen base del mock up

Antes de ponernos a crear un mock up vamos a girar la imagen unos pocos grados para tener el teléfono completamente vertical. Si tienes abierta la capa como FONDO estará bloqueada y no podrás manipularla, así que para liberaralay convertirla en editable hazlo desde la ruta del menú superior Capa > Nueva > Capa a partir de fondo.

Capa fondo bloqueada antes de crear el mock up

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

Con el atajo de teclado Ctrl+T activamos el modo de transformación del programa. 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 para transformar la imagen al crear un 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

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

Si la vista no me falla tenemos la pantalla ajustada para empezar a crear un 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

A la hora de crear un mock up el proceso siempre es similar. Una capa donde aparece el ordenador o la tableta que actúa de fondo y otra delante donde se visualiza tu diseño. Más tarde pueden añadirse nuevas capas con brillos o reflejos pero el concepto siempre es el mismo.

Seleccionar el área del mock up

De momento nuestro mock up va a estar compuesto por dos capas. La primera hace de fondo y es con la que hemos estado trabajando hasta ahora. La otra delimitará y mostrará el diseño web seleccionado para el mock up, que trabajaremos en una capa inteligente y que podrá editarse independientemente.

Vamos a crear una nueva capa con el tamaño y forma exacta de la pantalla negra. Actuará de máscara y solo mostrará el contenido dentro de la zona seleccionada. Conforme vayamos fabricando el mock up lo irás entendiendo.

Seleccionamos la herramienta de rectángulo redondeado desde la barra lateral y le asignamos un radio en las esquinas de 6px.

Seleccionar la herramienta para definir la zona del mock up

Una vez seleccionada la herramienta colocamos el cursor en la esquina superior izquierda de la pantalla negra y mientras mantenemos el botón del ratón pulsado arrastramos hasta llegar al final de la selección.

Seleccionar zona útil para 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 (Ctrl+T) podrás modificar la selección. También puedes reubicarlo  mientras lo generas >si a la vez pulsas 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 debes pasarla a una capa inteligente.

Crear el objeto inteligente

Si no lo tienes a la vista despliega el panel de trazados. Para seleccionarlo haz clic sobre la miniatura mientras mantienes pulsada la tecla Ctrl.

Selección del trazado para la capa de mock up

Ahora abre el panel de capas y luego ve al menú superior y crea una nueva capa desde Capas > Nueva > Capa. Desde el panel de capas clica sobre la nueva capa para seleccionarla. Asegúrate de que queda por encima de la anterior.

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

Convertir trazado en capa para crear el mock up

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

Rellenar la selección 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 va a permitir editar esa capa en un archivo diferente y asociado al principal. Todas las modificaciones que hagamos en ese archivo se mostrarán en el principal gracias a la ventana que crea el objeto inteligente.

Editar un objeto inteligente para crear un mock up

En el panel de capas clica sobre la miniatura del objeto inteligente de Photoshop para que se abra un archivo nuevo donde añadir el contenido a mostrar en el mock up.

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

Añadir contenido al mock up

Previamente ya teníamos preparado el archivo que queremos utilizar en el mock up, así que solo tenemos que añadirla al nuevo archivo y guardarlo. Por supuesto la imagen deberá tener las medidas 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.

Colocar imagen para crear un mock up

Crear la máscara de recorte del mock up

Tu imagen colocada ha creado una nueva capa sobre la anterior. Vamos a crear una máscara de recorte para que la imagen de la web del veterinario tenga las esquinas redondeadas. 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 y haz clic con el botón derecho del ratón. Selecciona 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!

¿Cómo crear un efecto realista en un mock up?

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 frontal de cristal del smartphone. Estos detalles así como la adición de reflejos es lo que le dan vida a los mock ups.

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

Añadir borde a una capa de Photoshop

Para añadir un trazo alrededor de una capa recurriremos al botón FX (parte inferior del panel de capas). Deberás tener el objeto inteligente seleccionado (tu capa). Pulsa fx y selecciona Trazo. Lo verás al final del desplegable. Configúralo como en la siguiente imagen o como te guste más.

Crear trazo en la capa del mock up

Ya nos va quedando poco para terminar de crear el mock up ¿no crees?. Pues para darle un acabado realista vamos a añadirle un brillo que recorra la pantalla del teléfono de arriba a abajo.

Crear reflejos en un mock up

Desde el panel de capas crea una nueva capa:

Nueva capa para crear el reflejo del mock up

Nos aseguramos de que el color frontal es negro. Tienes un botón abajo, a la izquierda de tu pantalla para 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

Como la parte delantera del teléfono es de cristal, el brillo deberá recorrerla por completo a excepción de su marco. Antes de aplicar el efecto deberemos hacer otra selección, para lo que usaremos de nuevo la herramienta rectángulo redondeado, a la que esta vez le daremos un radio de 62px.

Seleccionar zona de la capa para el brillo del mock up

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. Te recuerdo que lo has hecho antes desde el menú superior Edición > Rellenar (color frontal). Esta es tu capa para el reflejo.

Como necesitamos que el reflejo solo ocupe una parte de la pantalla en el mock up, necesitamos crear una máscara en una nueva capa, así que crea otra 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 y crea un triángulo en el área que va a ser el reflejo en el mock up.

Solo tienes que hacer clic sobre los puntos que van a definir el triángulo y rellenar la capa de color blanco (color frontal o de fondo).

Lazo poligonal para crear la máscara 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 web.

Ahora ve al panel de capas y con la capa del triángulo seleccionada crea una máscara de recorte (clicando sobre la capa con el botón secundario del ratón, opción crear 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.

Máscara para que tenga la forma del mock up

Crear un degradado

Necesitamos que el reflejo sea traslúcido por la parte inferior, así que en la máscara de capa vamos a aplicar un degradado en blanco y negro con la herramienta de degradados que encontrarás en la barra lateral.

Con la transición de negro a blanco en el degradado conseguiremos que la máscara la 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 el que es en blanco y negro.

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

Haz clic sobre la miniatura de la máscara en la capa del triángulo para seleccionarla, y aplícale a ella el gradiente. Clica sobre la pantalla donde quieras que empiece y arrastra hasta donde termine de abajo a arriba.

Aplicar degradado al brillo del mock up creado

Esto va cogiendo forma y ya casi has creado tu mock up.

Nos gustaría quitarle un poco de opacidad al blanco para dejarlo niquelado. En el panel de capas puedes modificar la opacidad de la capa seleccionada que por defecto viene al 100%. Yo lo he puesto a 35%.

Recortar el mock up

Para finalizar el trabajo de crear un mock up solo nos queda recortar y eliminar esos espacios raros que aparecieron al girar la imagen.

Usa para ello la herramienta recortar:

Herramienta para recortar los sobrantes del mock up

Intenta evitar con la selección los espacios transparentes de los extremos:

Recortado de la zona útil al crear un mock up

Enhorabuena, has terminado de crear tu primer mock up.

Crear un mock up en vídeo

Para finalizar este tutorial y poder afianzar lo aprendido en el artículo puedes repasar todo el proceso de crear un mock up en vídeo.

Ya sabes cómo crear un mock up y ya puedes hacer tus presentaciones más profesionales. Ahora estás preparado para el siguiente reto, crear un mock más complejo. Como por ejemplo el siguiente de la serie, un mockup en perspectiva.

Si te ha quedado alguna duda sabes que puedes usar el formulario de comentarios para hacérmelo saber. Estaré encantado de resolver tus dudas 😉

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 »

2 Comentarios en “Cómo crear tu propio mock up”

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.