Los Mockups y la técnica del Blueprint & Play

English version: Mockups and the blueprint & play technique

Un método que facilita la edición de Mockups para Photoshop a los usuarios.

En los últimos años el uso de las Maquetas ó Mockups de Photoshop se han convertido en un recurso muy apetecido por los diseñadores que buscan mejorar la presentación de sus proyectos, día a día están solicitando diferentes tipos de maquetas y cada vez más complejas, pero a pesar de eso el método de edición sigue siendo el mismo el cual consiste en actualizar el contenido de cada Objeto Inteligente (Smart Object) que conforman la escena resultando en muchos casos en una perdida total de tiempo.

En Original Mockups pensamos que esto debe cambiar, queremos mostrar un método que hemos venido usando con buenos resultados y que llamamos “Blueprint & Play” el cual le brindará a los usuarios las siguientes ventajas:

  1. Visualizar los diseños sobre las maquetas en un abrir y cerrar de ojos.

¿Como funciona?

La técnica consiste en añadir una capa especial que básicamente es un plano bi-dimensional que contiene las medidas y las guías necesarias para que los usuarios pongan su diseño completo allí. Luego mediante el uso de una Acción predefinida de Photoshop se copiaran automáticamente los segmentos necesarios del diseño dentro de cada Objeto Inteligente (Smart Object) que conforman la escena.

Es decir, el usuario pone su diseño en un plano (Blueprint) y la Acción hace el resto de trabajo por él, por ello la llamamos “Blueprint & Play”.

En la práctica

Para explicarlo mejor vamos a tomar como ejemplo la maqueta Shopping Bag Mockup 06 de Ktyellow donde se evidencian las ventajas de está técnica.

Esta maqueta se construye a partir de 8 Objetos Inteligentes: 6 para el exterior de la bolsa y 2 más para el interior.

Image for post
Image for post
Numero de Objetos Inteligentes. Rojo para el exteior y azul para el interior y sus respectivas capas.

Al usar la “técnica tradicional” el usuario tendría que cambiar el contenido de cada objeto manualmente, esto sería un completo dolor de cabeza especialmente cuando se hacen correcciones al diseño.

En lugar de eso, se añaden dos Objetos Inteligentes al inicio, uno contendrá el plano 2D para la parte externa de la bolsa de papel y el otro la parte interna.

Image for post
Image for post
Los Smart Objects en color Azul contienen los planos o blueprints

Allí hay unas guías muy claras de donde deberá quedar el diseño, sus tamaños e indicaciones, incluso, si es necesario se adjuntará la plantilla en vector para Illustrator la cual puede ser útil para usuarios que no tienen el diseño aún.

Image for post
Image for post
Guías y tamaños, Aquí es donde el usuario debe poner su diseño

Al finalizar la edición en los planos, se debe guardar y cerrar, pero a diferencia del método tradicional, no sucederá nada en la maqueta hasta que se dispare la Acción correspondiente, esta es la que hace la magia y le da sentido a esta técnica.

Los usuarios no tendrán que preocuparse por poner cada segmento de sus diseños en los Objeto Inteligentes, la acción recorrerá automáticamente cada uno de ellos y pondrá el segmento correspondiente del diseño en el lugar correcto.

Después de esto, se podrá apreciar el resultado final de la maqueta :).

Mira el siguiente video:

¿Donde están las acciones?

Mientras que esta técnica busca facilitar el proceso de edición a los usuarios, los autores de maquetas tendrán tareas adicionales, ellos deberán proveer las Acciones y las instrucciones necesarias para ponerlas a funcionar.

En Original Mockups, contamos con un repositorio de acciones, los usuarios las descargan desde su pagina de descargas y cada archivo que usa esta técnica tiene una capa de ayuda que le dice cual es la acción que se debe ejecutar.

Image for post
Image for post
Instrucciones de uso, esta presente en la Mayoría de archivos premium de Original Mockups

Desventajas

Las desventajas mayormente estarán del lado del autor de maquetas, pero si buscas la satisfacción del cliente valdrá la pena.

  • Los autores de maquetas se verán obligados a crear los planos, las acciones e indicarle cual deben ejecutar.

Si has usado los items de Original Mockups o estas en el camino de convertirte en un autor de maquetas, recomendamos fuertemente que tengas presente esta idea, que aunque pueda parecer difícil de llevar a cabo, el resultado será satisfactorio para nosotros los autores pero sobre todo para los clientes.

Nos gustaría saber que piensas, déjanos un comentario.

Por Alexander Ruiz @fenixkim, CO Propietario & CTO en Original Mockups, Colombia.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store