Cómo usar un Mockup en archivo photoshop?

Share on facebook
Share on google
Share on twitter
Share on linkedin

Si quieres aprender a usar un archivo Mockup en Photoshop, acá te explico como.

Seguro en mas a de una oportunidad has necesitado usar un mockup para tus presentaciones de algún producto desarrollado por vos. Quieres ver de manera rápida y sencilla como se vería tu marca aplicada en un material o dispositivo y te frustraste pensando que tendrías que editar horas en photoshop su visualización. Bueno tengo buenas noticias, existe un mundo de infinitas posibilidades para ver como presentar miles de productos diferentes en la web, desde la presentación de una nueva página web, hasta remeras, cremas, tarjetas de presentación y comida!.

Bueno en primer lugar te digo que sin photoshop instalado en tu computadora te va a resultar demasiado difícil crear tu propio mockup, al menos que decantes por el uso de plataformas on-line que te dejan crear un mocukp desde cero (a partir de sus propias librerías) como CANVAS. Si lo haces , está bien también!. Pero si justo la opción que mas te gusta está en versión PSD, no tengas miedo, usarlo es mucho mas simple de lo que crees y no necesitas ser usuario avanzado de Photoshop para usarlo. Yo personalmente recomiendo a aquellas personas que son emprendedores y hacen todo el trabajo de su marca que se animen a usar Photoshop (y si me siguen van a ir aprendiendo muchos trucos para usar este hermoso programa). Les va a ayudar mucho a presentar sus productos y siempre es mas flexible que las plataformas de diseño on Line, aunque , de nuevo insisto, está perfecto usarlas!

Descargando el archivo Mockup en Photoshop

Usualmente cuando eliges una imagen de mockup en Photoshop, ésta se descarga en un archivo zip. con varios archivo dentro, un JPG o varios mostrando como se vería la imagen, aveces un archivo txt, y un archivo PSD. Este archivo es el único que nos importa ya que tiene dentro toda la información necesaria para completar nuestro mockup en Photoshop con la imagen de nuestra marca. Yo voy a usar de ejemplo un Free Mockup que descargué en Pixeden (Psd iPad Stationery Branding Mockup). Lo invito a descargar la misma imagen así vemos juntos el paso a paso (esto siempre ayuda para aprender un proceso en cualquier software de diseño)

Como ves, este archivo tiene varias capas muy prolijamente ubicadas en diferentes carpetas, esto ayuda mucho a organizar la información. En este caso la imagen es un Stationery, un modelo de mockup que sirve para mostrar distintas presentaciones de una marca (página web, tarjetas personales, flayers)

A continuación te voy a explicar cada carpeta como para que entiendas que función cumplen dentro del proyecto. Al final de este post podrás ver el tutoría en video para que puedas ver lo fácil que es usar un mockup en Photoshop

Entendiendo los Layer del Mockup en PSD

  • Overlays: aqui vemos varias capas, que son como el look and feel de la imagen, este archivo no es necesario que se modifique, funciona sobre cualquier imagen que pongamos.
  • iPad: aqui vemos un objeto inteligente. Los objetos inteligentes conservan el contenido original de la imagen con todas sus características originales, de tal modo que posibilitan la edición no destructiva de la capa en cuestión. Para que sirve? Pues bien, esta es la “gracia” de los archivos de mockups ya que haciendo doble click sobre la imagen se abrirá una nueva ventana de photoshop con la imagen original, y allí podremos editar la imagen de nuestra marca (mas abajo de este post explicaré bien este proceso)
  • Business card 1: aquí tendremos el objeto inteligente que aloja la imagen de una tarjeta personal y una capa de color sòlido
  • Business card 2: Ídem anterior
  • Invt. card: Objeto inteligente mas color sólido
  • Pen: capa de color salido
  • Letter paper
  • Letter paper: Objeto Inteligente mas color sólido
  • Background: capa de color sólido.

Ahora que detallé sobre el contenido de este archivo PSD, manos a la obra con nuestra edición.

Empecemos!

Supongamos que queremos editar la imagen que se ve en el iPad, en principio parecería que tenemos que editar la imagen deformarla y recortarla para que entre dentro del iPad de manera prolija, pero este trabajo ya está hecho y solo tenemos que reemplazar el contenido del objeto inteligente. Para esto, hacemos doble click sobre el objeto inteligente, se abrirá una nueva ventana de Photoshop con el nuevo contenido y es sobre este archivo que trabajaremos.

Aquí simplemente reemplazamos con nuestra imagen (logotipo, Print de pantalla de nuestra nueva web, etc)

Para esto vamos a Archivo (File) > Colocar (Place Embedded) seleccionamos nuestra imagen JPG o PNG y hacemos click en guardado (Save) Automáticamente se reemplazará la imagen nuestro PSD mockup.

A esta acción la repetimos con cada objeto inteligente de la composición

En el caso de las capas de color, si queremos reemplazar el fondo, o el borde de color de las tarjetas personales por ejemplo, solo hacemos doble click sobre la capa y se nos abrirá el menú de selección de color. Simplemente elegimos el color que nos gusta o coherente con el branding de nuestra marca, y listo! tenemos armado nuestro mockup. Por último vamos a Archivo (File) Guardar como (Save as) y seleccionamos el destino y formato de nuestra imagen (JPG o PNG)

Video Tutorial

Si quedó alguna duda aquí les comparto un video donde pueden ver como se puede preparar nuestro mockup.

Mira el tutorial en Video para no perderte nada

Y para todos aquellos que esten interesados en seguir profundizando en la herramienta Photoshop, les comparto el link de una pagina amiga PHOTOCLASE, que habla mucho sobre esto y que les puede sumar para seguir aprendiendo 🙂

Share on facebook
Share on google
Share on twitter
Share on linkedin

Dejá un comentario

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