fbpx

Creación de un mockup de una página web

Para todos los diseñadores y aquellos principiantes interesados en plasmar sus productos de forma más realista o mostrar el trabajo realizado a sus clientes para que tengan idea de cómo propagar su marca existen el Mockup. Estos son plantillas previamente diseñadas que simulan lo real.

En este tutorial te mostraremos paso a paso una forma de crear un mockup usando las herramientas illustrator y Photoshop de adobe.

Antes de empezar lo ideal es que estés relajado para que dejes fluir tu creatividad. Empecemos de una forma sencilla:

¿Qué debo tener para empezar un mockup?

  • Computadora de escritorio o portátil que te permita trabajar cómodamente con las herramientas de adobe.
  • En este caso utilizaremos las herramientas photoshop e illustrator.
  • El diseño de lo que quieres mostrar. (Imagen de la marca o producto)
  • La imagen o plantilla que usaras como mockup.

También puedes crear tus propios mockups captando la esencia de lo que deseas con una cámara y tu creatividad.

Preparar la plantilla y área de trabajo.

  1. Abrimos nuestro mockup o plantilla en photoshop.
  2. Abrir Illustrator y crear un documento nuevo, puede ser con las dimensiones Standard A4.

Para el caso que presentaremos a partir del punto 3, usaremos una imagen plana. Es decir, que no existe relieve en nuestro mockup.

  1. Crear una figura geométrica en illustrator, preferible que el tamaño y forma se asemejen a el área en el mockup donde voy a colocar la imagen de la marca o producto que quiero resaltar. Si es un mockup que funciona con múltiples ilustraciones, entonces debemos crear una figura para cada área e identificarla con un nombre para saber dónde utilizaremos cada una. Podemos trabajar en el mismo documento de illustrator para este paso.
mockup step 3

Si lo que buscas con tu mockup es mostrar varias ilustraciones, en los siguientes pasos lo recomendable es ir trabajando individualmente cada figura creada en el punto 3.

Integrando plantillas

  1. Hacemos el famoso copy & paste, de illustrator a photoshop, de la figura o una de las figuras del punto 3. En photoshop se activará un cuadro de opciones al pegar, debemos seleccionar Objeto Inteligente (Smart Object) y Ok. Al terminar con este paso no pierdas lo que hiciste en illustrator porque será útil más adelante.
mockuo step 4
  1. Al pegar la figura en photoshop se crea una nueva capa o layer, haciendo doble clic sobre ella podemos colocarle un nombre que la identifique. Desplegamos el menú sobre la capa con clic derecho y seleccionamos la opción Convertir en objeto inteligente (Convert to Smart Object).
mockup step 5

La funcionalidad de esta opción es que podremos aplicar transformaciones a la figura (Paso 7) y al colocar el contenido (imagen de la marca o producto) sobre ella adoptará todas esas transformaciones. Por lo que si se hace un cambio del contenido en la figura solo es cuestión de reemplazarlo sin necesidad de rehacer las transformaciones.

  1. A la capa le ponemos un color y hacemos una copia sobre la cual vamos a trabajar. La capa original la ocultamos haciendo clic en el ojito que sale a su izquierda.
mockup step 6
  1. Lo ideal en este paso es bajarle un poco la opacidad a la copia que hemos generado en el paso 6. Con la herramienta Transformar (Ctrl + T en windows o Comando+ T si usas Mac) haremos que cada esquina de nuestra figura concuerde con cada esquina en el área donde la colocaremos en nuestro mockup. (Deformar)
mockup step 7.1
mockup step 7.2
mockup step 7.3

Por último, si necesitas hacer modificaciones, por ejemplo, de desenfoque o ruido este es el momento, en nuestros enlaces te dejaremos un video que te puede ayudar. De lo contrario estamos listos para trabajar en el contenido de nuestro mockup.

Amor a el contenido

  1. En este paso debes diseñar o agregar lo que quieres mostrar de tu producto o marca sobre las figuras que creamos inicialmente en illustrator para poder concordar con las dimensiones. Si lo que vas a usar es una imagen intenta adaptar su tamaño a el de estas figuras. Puedes utilizar el documento hecho anteriormente o guardarlo como una plantilla para futuras creaciones y trabajar sobre una réplica.
mockup step 8.1
mockup step 8.2
  1. Ahora copiamos nuestro contenido de photoshop y vamos a illustrator, esta vez usaremos la capa original que por ser un objeto inteligente tiene todas las modificaciones que se le hicieron a la réplica. Hacemos doble clic sobre el recuadro de la capa en la que vamos a pegarlo y se abrirá una nueva pestaña con la figura donde finalmente pegamos el diseño. Si es necesario lo ajustamos a el tamaño de la figura y guardamos.
mockup step 9.1
mockup step 9.2
mockup step 9.3
  1. Este es el momento decisivo. Volvemos a la pestaña donde esta nuestro mockup y aprobamos si el trabajo está listo o si necesita detalles.
mockup step 10

¡Finalmente hemos terminado!

Fuentes:

¿Te gustó este post?

Tenemos muchas publicaciones como esta!

Solo te enviaremos contenido de calidad. Prometido!

Una respuesta

Deja una respuesta

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

Dale Me gusta!

Compártelo con tus amigos

Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on pinterest
Share on whatsapp