Home Blog/ Estilo de Vida/
Estilo de Vida

¬ŅC√≥mo hacer un mockup? ¬°Lleg√≥ la hora de darle vida a tus incre√≠bles dise√Īos!

Rocío González - 09 Mar 21

Articulo

7 min.

¬ŅC√≥mo hacer un mockup? Si eres un dise√Īador gr√°fico o de web, seguro has dado con el post indicado ūüďĆ.

No importa si te dedicas al dise√Īo gr√°fico o de web, siempre buscar√°s la forma de visualizar y darle vida a tus creaciones, y de mostrarle a tus clientes c√≥mo quedar√° el proyecto que con tantas expectativas esperan, una vez est√© finalizado. Pero, ¬Ņsab√≠as que, adem√°s de las impresiones y los montajes, existe una alternativa mucho mejor para mostrar tus dise√Īos? ūüėé

Pues si¬†existe. Por ello, en esta oportunidad te ense√Īaremos c√≥mo hacer un mockup de manera sencilla y con herramientas completamente accesibles. ¬ŅComenzamos?

ūüó£ SPOILER ALERT: las alternativas de c√≥mo hacer un mockup te las contamos¬†en detalle¬†al final¬†ūüėČ.

 

√ćndice:¬†

  1. ¬ŅQu√© es un mockup?
  2. Ventajas del mockup
  3. ¬ŅC√≥mo hacer un mockup?

 

¬ŅQu√© es un mockup?

Antes de contarte c√≥mo hacer un mockup, nos parece mejor explicarte, primero, de qu√© se trata esta t√©cnica y por qu√© deber√≠as empezar a implementarla en tu agencia de dise√Īo o en tus trabajos freelance.¬†

Un mockup es un fotomontaje a escala elaborado por un dise√Īador gr√°fico o de web, el cual le brinda al cliente una vista previa sobre¬†c√≥mo quedar√° un proyecto determinado.¬†

De este modo, se logra ahorrar en gastos de montaje e impresi√≥n, ya que los mockups pueden realizarse f√°cilmente con programas de dise√Īo y fotograf√≠a, para luego verlos en un entorno determinado y en funcionamiento. As√≠, el dise√Īador se asegura la capacidad de desarrollo de su trabajo, mientras que, el cliente obtiene una visi√≥n mucho m√°s detallada y realista del dise√Īo que tanto espera.¬†

Además, lo bueno de esta técnica, es que puede aplicarse para diferentes fines. De ahí que, encontramos mockup arquitectónicos, mockup para sitios web, revistas, tarjetas de presentación, rótulos, logos, o bien, para objetos que usamos en el día a día, tales como remeras, termos, vasos o mockup para tazas. 

Como ya ves, su utilidad es muy variada. Por ello, como dise√Īador web o gr√°fico es tan importante que aprendas c√≥mo hacer un mockup efectivo y de calidad ūüíĮ.

 

mockup para taza.jpg

Imagen: Freepik 

 

mockup para etiqueta.jpg

Imagen: Freepik 

 

Imagen: Freepik 

 

Crehana Premium

 

Ventajas del Mockup

Como habr√°s notado, el mock up suele utilizarse para varios fines, no importa la profesi√≥n o el tipo de dise√Īo del cual se trate.¬†

Sin embargo, antes de ense√Īarte c√≥mo hacer un mockup de un producto o de una p√°gina web, o de cualquier otro dise√Īo que necesites, nos pareci√≥ conveniente contarte, tambi√©n, cu√°les son los beneficios de adoptar esta incre√≠ble t√©cnica de fotomontaje gr√°fico en tu agencia o en tus proyectos.¬†

 

1. Signo de profesionalismo 

Sin duda, los mockups para dise√Īo gr√°fico o de web le estar√°n dando un valor agregado no solo a tus trabajos, sino tambi√©n, a toda tu agencia o marca unipersonal.¬†

Esto se debe, principalmente, a que al implementar esta técnica, estarás fortaleciendo mucho más el compromiso con tus clientes, ya que les estarás mostrando de la forma más realista y exacta posible cómo quedará finalizado el trabajo que te han encargado. 

 

2. Visualiza tus ideas

¬ŅTe ha pasado, alguna vez, no saber c√≥mo representar las ideas que tienes en tu mente para llevar a cabo tus dise√Īos? Pues, con esta t√©cnica de fotomontaje, esto es posible, ya que aprendiendo c√≥mo hacer un mockup en photoshop¬†o en cualquier otro programa de dise√Īo, edici√≥n y fotograf√≠a, podr√°s plasmar f√°cilmente en la pantalla tus dise√Īos a escala.¬†

 

3. Ahorra tiempo y dinero

Generalmente, en los proyectos de dise√Īo gr√°fico o de web se invierte mucho tiempo y dinero realizando los montajes y las impresiones necesarias para cada uno de los trabajos que pide el cliente. Y, ni hablar cuando esto se traduce en varias modificaciones y mejoras.

Sin embargo, puedes ahorrarte este problema fácilmente si aprendes cómo hacer un mockup, ya que el mismo funciona como una prueba de usabilidad y de control de calidad que permite encontrar los errores antes de crear el prototipo final. 

 

4. Muestra previa del trabajo finalizado

Una de las mejores maneras para convencer y satisfacer a tus clientes sobre el trabajo que est√°s haciendo, es mostr√°ndoles, etapa por etapa, c√≥mo va quedando el dise√Īo en marcha. Por este motivo, es tan importante que sepas c√≥mo hacer un mockup, ya que, de esta manera, tus clientes podr√°n corroborar tus dise√Īos y evaluar si los mismos son el resultado que ellos est√°n buscando.¬†

 

5. Ventas r√°pidas y efectivas

Como te hemos dicho anteriormente, si comienzas a implementar la t√©cnica del mockup en tu agencia o marca unipersonal, podr√°s comprobar c√≥mo tus clientes estar√°n cada vez m√°s satisfechos con el servicio que les est√°s ofreciendo y las propuestas de dise√Īo que le est√°s brindando.¬†

Esto, sin duda, te permitir√° acelerar el proceso de venta de cada proyecto que realices. En otras palabras, si aprendes c√≥mo hacer un mockup gr√°fico, de web, arquitect√≥nico o de cualquier otro tipo, estar√°s haciendo una gran inversi√≥n ūüíį.¬†

 

mockup dise√Īo grafico.jpg

Imagen: Pinterest 

 

mockup de producto.jpg

Imagen: shillingtoneducation.com

 

revistas mockup.jpg

Imagen: shillingtoneducation.com

 

¬ŅEst√°s comenzando como freelancer? ¬°Descarga gratis nuestro presupuesto para dise√Īo gr√°fico!

cotizacion-diseno-grafico

 

¬ŅC√≥mo hacer un mockup?

Ya te hemos explicado de qu√© se trata esta incre√≠ble t√©cnica de fotomontaje y sus beneficios. Ahora, es tiempo de que aprendas c√≥mo hacer un mockup f√°cil, r√°pido y efectivo para cualquier proyecto de dise√Īo que necesites.¬†

Comenzaremos explicándote los dos aspectos más importantes a tener en cuenta a la hora de crear un mockup para cualquier tipo de proyecto. 

 

1. Evaluar los objetivos de la empresa o del cliente

En primer lugar, debes considerar que, para construir un mockup, tendr√°s que definir¬†de la forma m√°s clara posible los objetivos de la empresa o del cliente que te encarga el proyecto. En otras palabras, evaluar cu√°les son los fines del dise√Īo y qu√© se desea transmitir a trav√©s del mismo.

 

2. Investigar dise√Īos similares y competencia

En segundo lugar, tendr√°s que buscar y analizar qu√© otros dise√Īos o proyectos similares al que te han encomendado, se han hecho anteriormente. M√°s a√ļn, deber√°s estudiar sus caracter√≠sticas y prestar especial atenci√≥n tanto a sus puntos d√©biles como a los fuertes, para crear as√≠, un mockup gr√°fico o de web √ļnico y mejor que los de la competencia.¬†

 

¬†Ahora bien, teniendo en cuenta estos dos puntos claves pasaremos a explicarte c√≥mo hacer un mockup, dependiendo del dise√Īo que quieras crear y los programas que te conviene usar¬†ūüėČ.

 

Como hacer un mockup web

Comenzaremos explic√°ndote c√≥mo hacer un mockup para una p√°gina web o una plataforma ūüíĽ.¬†¬†¬†

 

  1.  Antes que nada, crearás la arquitectura de tu plataforma en donde queden bien definidas tus categorías y páginas web. Desde ya, esto lo harás en base al contenido que quiere comunicar tu cliente.
     
  2.  Una vez definida la estructura del sitio web, pasarás a establecer las partes comunes del mismo, es decir, el pie de página, la barra lateral y la cabecera.
     
  3. Luego, definirás cada uno de los modelos de página que deberías crear, tales como la página de inicio, términos y condiciones, sobre nosotros, etc.
     
  4. Ya habiendo definido cada una de las páginas web del sitio, pasarás a construir sus maquetas de contenido digital. Para ello, evaluarás en detalle el objetivo de cada una de ellas, es decir, lo que buscan transmitir, para luego, definir así, su estructura final.

 

Cabe destacar que, en esta etapa, deberás prestar especial atención a la experiencia del usuario. En otras palabras, tendrás que analizar qué información buscará primero la audiencia y, si se trata de una tienda e-commerce, qué dudás tratará de despejar primero el consumidor, antes de concretar la compra. 

De todos modos, si tienes dudas sobre este √ļltimo punto, te recomendamos que realices nuestro curso online de experiencia del usuario.¬†

 

  1. ¬°Ya casi tienes listo tu mockup para sitio web! Solo te falta definir los colores de tu sitio, la tipograf√≠a, la imagen principal, el logo de la empresa y todo lo que incluye el dise√Īo final de la plataforma.
     
  2. ¬°Listo!¬†ūü§© ¬°Ya tienes tu mockup web!

 

A continuaci√≥n, te dejamos un peque√Īo listado con algunas de las herramientas disponibles para crear la maqueta de un sitio web:¬†

 

mockup para sitio web.jpg

Imagen: Freepik

 

mockup website.jpg

Imagen: Mockupworld.com

 

Cómo hacer un mockup en Photoshop

Crear mockups o fotomontajes en Photoshop ser√° la soluci√≥n ideal para tus dise√Īos publicitarios o editoriales. Recuerda que, el mismo es un software de pago. Sin embargo, a la hora de llevar a cabo tus dise√Īos, este programa te estar√° prometiendo la calidad que tanto t√ļ como tu cliente esperan.¬†

Dicho esto, a continuaci√≥n, te contaremos paso por paso c√≥mo crear un mockup en este editor de fotograf√≠a e im√°gen ūüď∑.¬†

 

  1. Primero, tendrás que descargar en Lightroom la imagen de la cual partirás para realizar tu mockup. La misma puedes obtenerla desde un banco de imágenes o, simplemente, utilizando una fotografía que tengas almacenada en tu móvil u ordenador. 
     
  2. Una vez que cuentes con tu imagen descargada en Lightroom, podr√°s corregir, ah√≠ mismo, cualquier imperfecci√≥n mediante la herramienta ‚ÄúStop Removal Tool‚ÄĚ, as√≠ como tambi√©n, modificar las luces y las sombras que sean necesarias.
     
  3. Luego, pasar√°s a mejorar el ruido de la imagen, lo cual permitir√° que tu mockup luzca m√°s realista. Para ello, usar√°s las herramientas ‚ÄúSharpening Panel‚ÄĚ y ‚ÄúNoise Reduction Panel‚ÄĚ.
     
  4. Cuando ya cuentes con tu imagen editada en Lightroom, tendr√°s que exportar la misma a Photoshop, para continuar con tu dise√Īo mockup.
     
  5. Una vez que transfieres tu imagen de Lightroom a Photoshop, comenzar√°s a realizar con ella tu mockup. Presiona Ctrl + t para ajustar mejor tu dise√Īo y trabajar m√°s c√≥modo.
     
  6. ¬†Ok, lleg√≥ el momento de crear tu mockup en Photoshop. Para ello, te recomendamos que, primero, le des opacidad a la imagen que est√°s dise√Īando para que puedas ver mejor lo que est√°s haciendo.¬†
     
  7. Luego, ir√°s creando perspectiva haciendo click en los v√©rtices, procurando, a su vez, que la imagen de la capa superior contin√ļe bien adaptada a la imagen de fondo. Aunque no lo creas, aqu√≠, ya est√°s d√°ndole forma a tu objeto inteligente, y as√≠, al mockup en su totalidad.
     
  8. A continuaci√≥n, deber√°s guardar tu objeto inteligente en un archivo, para luego abrirlo y seguirlo editando. Para ello, haz click en el recuadro miniatura del mismo y gu√°rdalo en un nuevo archivo de dise√Īo.
     
  9. Vuelve a la interfaz de Photoshop, en donde tienes tu imagen¬†previamente editada en Lightroom y tu objeto inteligente. Ambos deber√°n estar bien adaptados al dise√Īo final que buscas. Este fotomontaje que observas en la pantalla es tu mockup.
     
  10. Finalmente, aplica sobre tu mockup los efectos de sombras e iluminaci√≥n que hagan falta, sin olvidar, adem√°s, otros efectos especiales y modos de fusi√≥n;¬†dos factores cruciales a la hora de dise√Īar un mockup en Photoshop.
     
  11. ¬°Perfecto! Ya has aprendido c√≥mo hacer un mockup en Photoshop ūü§©.

 

mockup en photoshop.jpg

Imagen: visualbitstudio.com

 

como hacer un mockup en photoshop.jpg

Imagen: visualbitstudio.com

 

mockup hecho en photoshop.jpg

Imagen: visualbitstudio.com

 

Crehana Premium


 

Cómo hacer un mockup online gratis

Por otro lado, si no te llevas muy bien con Photoshop y lo que quieres es crear mockups gratis en la web ūüíĽ, entonces, en ese caso, cuentas con varias clases de softwares, los cuales podr√°s elegir de acuerdo al estilo de mockup que necesitas dise√Īar. Sin embargo, deber√°s considerar que, si bien son programas gratuitos, la mayor√≠a cuenta con otra versi√≥n de pago, la cual tiene¬†acceso a distintas herramientas y otras funcionalidades.

Dicho esto, pasaremos a darte una lista de algunos de los generadores gratuitos de mockups sobre los cuales estamos hablando: 

 

 

mockup para tarjeta.jpg

Imagen: Freepik

 

como hacer mockup para libros.jpg

Imagen: shillingtoneducation.com

 

En definitiva, si eres un dise√Īador gr√°fico o de web y quieres aportarle un valor agregado a tus dise√Īos y a tu empresa, es de suma importancia que aprendas c√≥mo hacer un mockup efectivo y de calidad para cada uno de tus proyectos ūüß©. As√≠, estar√°s obteniendo mayor productividad en tus trabajos y clientes, quienes estar√°n mucho m√°s satisfechos ūüėé. Y bien, ¬Ņqu√© esperas para crear tu pr√≥ximo mockup?