Cómo utilizar una plantilla de Mockup en 3 sencillos pasos

Con una tendencia cada vez mayor hacia el comercio electrónico y la marca digital, es importante que los diseñadores tengan un conjunto único y realista de maquetas en su arsenal. Mientras que lanzar su diseño a un cliente, una plantilla realista de la maqueta puede ayudarle a eclipsar la competición. En pocas palabras, la maqueta correcta puede ayudar al cliente a visualizar lo que el producto final se verá con más claridad.

A lo largo de este artículo, revisaremos cómo utilizar archivos PSD independientes con objetos inteligentes. Los objetos inteligentes son simplemente capas especiales que preservan el contenido fuente de una imagen. Por lo general, contienen ráster y datos de imagen vectorial, y son extremadamente útiles cuando se utilizan plantillas de mockup. Objetos inteligentes aíslan las ilustraciones originales que están intentando colocar dentro de la escena del resto de los efectos visuales que se le aplican.Vamos a aprender a usar una plantilla de maqueta en 3 sencillos pasos.

Paso # 1: Buscar y descargar

Usted encontrará un montón de PSD mockup archivos para trabajar con alrededor de la web – esto incluye tanto los artículos gratuitos y pagados. En cuanto a maquetas pagadas, Creative Market  tiene una categoría completa dedicada a ellas. Compruébelo si está buscando plantillas únicas y listas para usar.

Antes de comenzar, es importante familiarizarse con la estructura de carpetas de una plantilla de modelo profesional. Cuando descarga una maqueta PSD, normalmente se guarda como un archivo comprimido. Una vez que extraiga su contenido, eche un vistazo a lo que el vendedor ha incluido. Idealmente, debería poseer los siguientes archivos:

  • .psd de la maqueta, que es el archivo de origen que va a editar
  • .jpg archivo de la maqueta, una vista previa de la plantilla en acción
  • .txt o .pdf que explica de qué se trata la maqueta, quién la hizo y su política de licencias.

Para este ejemplo, vamos a usar una  mockup de bolsa de Creatsy, aquí en Creative Market. Aquí es cómo se ve el producto:

Paso # 2: Abrir y localizar el objeto inteligente

Descomprimir el archivo y echar un vistazo a lo que está dentro:

Como he mencionado antes, usted encontrará a menudo una vista previa de .jpg, un archivo de fuente de .psd, y una cierta clase de documentación sobre el producto.

El siguiente paso es abrir el archivo .psd en Adobe Photoshop y estudiar sus capas. Lo que encontrará dependerá de lo complejo y detallado que sea una maqueta. Entender cómo funcionan las capas en la plantilla que está utilizando es importante porque finalmente va a reemplazar sus elementos predeterminados con su contenido personalizado.

Nuestro archivo de mockup de la bolsa, por ejemplo, consta de tres capas: una para el color de fondo, una para la bolsa en sí, y otra para la pequeña etiqueta que ves a la izquierda. También hay una capa para las flores blancas que salen de la bolsa.

Si se enfrenta a cualquier dificultad al localizar una capa en particular, puede hacer clic en el icono EYE (👁) para cambiar la visibilidad. El siguiente paso es localizar el objeto inteligente y abrirlo.

Objeto inteligente

En Photoshop, los objetos inteligentes son las capas que soportan datos de imagen de imágenes ráster o vectoriales. Éstos guardan el contenido de la imagen permitiéndole realizar una edición no destructiva de una capa. Una capa que contiene un Objeto Inteligente tiene un ícono particular sobre él que se parece algo al que dice “Diseño”:

Paso # 3: Coloque su contenido

El último paso es reemplazar el contenido de la maqueta de la plantilla por su propio contenido personalizado. Para ello, haga clic en el icono Objeto inteligente de la capa. Si lo hace, se abrirá una nueva ventana de Photoshop que mostrará sólo la ilustración que va a reemplazar. En mi caso, el Smart Object se abrió de la siguiente manera:

Puede ver que el contenido de mockup predeterminado es un conjunto de capas editables. Lo estoy reemplazando con un patrón colorido del arte de Funderful. Sólo tiene su obra de arte deseado listo y arrástrelo en la ventana de objetos inteligentes que acaba de abrir. Pulse el botón Guardar una vez que haya terminado.

Ahora vuelve al archivo PSD original y encontrarás los nuevos cambios en su lugar. La misma maqueta de plantilla se ve así:

¡Añada un poco de texto de la comercialización y apagado usted va!

Conclusión

El uso de plantillas de simulación es bastante fácil. Todo lo que tiene que hacer es seguir estos tres pasos básicos y su trabajo está hecho. ¿Con qué frecuencia utiliza maquetas para sus proyectos de diseño? Deje sus comentarios a continuación.