Cómo crear y diseñar Mockups en Photoshop Tutorial // Marco Creativo

hola a todos qué tal estáis hoy marcó garcía diseñador gráfico y esto es un nuevo vídeo de marco creativo antes de continuar con el tema de hoy me gustaría disculparme porque es que bueno sí que es verdad que al principio de que en este canal intente imponer me el subir un vídeo todas las semanas que sé que muchas veces habéis estado esperando ese vídeo pero últimamente por problemas de tiempo de trabajo hace falta el dinero para poder pagar y necesito trabajar más en al final necesito más tiempo y el tema de hacer los vídeos es bastante complejo la verdad es que pensaba que iba a ser más fácil pero prepara un guión prepara todos los materiales prepara los ejercicios graba luego edita que se me tiró horas y horas editando entonces al final es mucho tiempo disculpad si no consigo sacar un vídeo a la semana pero bueno un vídeo cada dos semanas de momento es lo que estoy haciendo así que eso por lo menos lo vais a tener tengo una noticia y es que adobe stock se ha interesado por el canal y dado un par de cuentas para regalar os la entonces voy a hacer un concurso no sé si conocéis adobe stock puesto que es la página de adobe donde podéis comprar e imágenes fotografías vectores vídeos también y también mo caps que es el tema del que vamos a hablar hoy tenéis montones y montones de plantillas que poder utilizar imágenes vídeos vectores etcétera y cada cuenta tiene 100 ítems 100 archivos de adobe esto que os podéis descargar gratuitamente sin límite de tiempo estoy decir no tengo un plazo de tres meses para descargarme todas las fotos no podéis ir descargando cuando las necesitéis sin límite de tiempo hasta que consumáis esos 100 ítems para vosotros totalmente gratis como participar en este concurso de las dos cuentas pues bueno esto lo voy a contar al final del vídeo de qué vamos a hablar hoy hoy vamos a hablar de moke apps pero que es un mo cap pues un mo cap es una plantilla con un diseño ya preestablecido se basan en fotografías reales o montajes que parecen puede ser un montaje en 3-d o puede ser un montaje en photoshop pero que simula la realidad a través de esta plantilla nosotros podemos abrir este archivo en photoshop porque normalmente todos los motores que yo conozco están en photoshop pues tiene una capa que pone aquí tu diseño hacemos doble clic en esa capa quitamos ese diseño metemos nuestro diseño y entonces se actualizaría nuestro diseño con las transformaciones en algún efecto de desenfoque cambios de color cualquier efecto que tenga ese diseño para que parezca real sobre la foto se aplicaría a nuestro diseño tenéis muchos en internet que podéis utilizar y también en la página de adobe stock tenéis cientos y cientos de plantillas demo caps para utilizar pero yo os voy a explicar también cómo podréis haceros vuestro propio mocap entonces qué es lo que he hecho yo pues bueno yo he cogido unas tarjetas de visita que son estas que hice para un cliente a la que santa mónica formación porque las he cogido porque por la cara de atrás no tienen nada entonces a mí esto me sirve para poder colocarlas en la mesa hacer unas fotos y luego ya sobre esta foto ya meter mi diseño a aplicar las transformaciones etcétera y se me ha ocurrido como las tarjetas son prácticamente blancas las voy a colocar sobre este fondo que no sé si se va a ver bien vale que es un fondo para cortar manualidades y pegar cortes y demás en el fondo que se utiliza pues para trabajar encima y así no rayar la mesa y así por lo menos la tarjeta va a destacar un poco porque he probado hacerla sobre la mesa que tengo de la mesa que las mesas que tengo aquí en el estudio son puertas vale son puertas de una casa que las iban a tirar y me las que de entonces la recicla y me dice mesas algún día haré un tour por el estudio para que veáis cómo es lógico lo cado sobre el fondo blanco pero las tarjetas también yo es que no soy muy bueno haciendo fotografía no es lo intentado pero no queda ambiente y al final decido ponerlos sobre este fondo gris que ya la tarjeta sea de más y bueno vamos a ver como he hecho las fotos y ahora pasaremos a editar estas fotos en photoshop para poder aplicarle estos efectos y realizar nuestro propio moca y este es el resultado de las fotografías que he hecho las he retocado un poco vale la aplicado un pequeño viñeteado y luego en el fondo simplemente le he quitado un poco de color a las líneas vale dejado un poco más grisáceo y ha quitado manchitas y cositas que habían por ahí así es como he hecho los tres pero me voy a quedar con este para hacer el ejercicio que es lo primero que vamos a hacer nos vamos a ir illustrator creamos un documento nuevo el estándar a 4 voy a hacer dos cajas con el tamaño de mi tarjeta el tamaño aquí en europa es 55 milímetros de anchura por 85 milímetros de altura de relleno blanco y de trazo ninguno y vamos a escribir la palabra delante para saber qué zona es la de delante y la de atrás hacemos una copia de ésta y a esta le vamos a poner detrás quiero hacer un inciso y es que las plantillas que yo he utilizado para hacer las transformaciones han sido éstas para este caso que son unas tarjetas de visita no ha habido problema y funciona bien pero si tenemos algún tipo de moca más complejo como pueden ser la etiqueta para una botella de vino una página de un catálogo que tiene algo de curvatura yo aconsejo que utilicéis este tipo de plantillas porque estas plantillas al llevar unas líneas horizontales y verticales nos van a permitir ver mejor cómo está quedando esa transformación y si se adapta o no a la realidad les voy a empezar por adelante selecciono todo copio me voy a photoshop pego y lo voy a pegar como objeto inteligente le damos ok importante ahora este paso esta capa que acabamos de pegar la vamos a llamar diseño delante y la vamos a convertir en objeto inteligente esto quiere decir que ahora esta capa pasa a ser un objeto inteligente y todas las transformaciones que aplique después se van a aplicar sobre la capa y no sobre el contenido por lo tanto si yo cambio el contenido en cualquier momento este nuevo contenido va a quedar ya con el efecto de transformación no sé si me estoy explicando bien pero bueno quiero que entendáis eso vale que a convertir un objeto inteligente esta capa todas las transformaciones que le apliquen se van a aplicar sobre la capa pues cuando yo haga doble clic voy a poder editar el contenido de esta capa y este nuevo contenido va a volver a recibir todas esas transformaciones que tenía la capa tengo como objeto inteligente voy a poner un color para saber que esta capa es mi objeto inteligente y voy a que hacer una copia voy a trabajar sobre esta copia y al original le voy a quitar el ojo que los originales siempre van a estar arriba y yo siempre voy a trabajar sobre la copia la copia realmente es como un clon por lo tanto si yo edito el diseño original se van a cambiar todas las copias que tengo en photoshop esto es algo que mola mucho lo primero que vamos a hacer es con la herramienta transformar colocarlo sobre las esquinas vale como yo no estoy visualizando bien si eso lo que podemos hacer es bajarle un poco la opacidad para ya poder colocar sobre las esquinas vale importante os digo cómo hacer esto vale cuando yo le doy a transformar comando tm si yo me acerco una esquina y apretó la tecla comando veis que el icono cambia pues cuando ese icono cambia que decir que ya puedo transformar libremente por lo tanto ya puedo colocar esta esquina donde me interesa más o menos la esquina quería por aquí vale esta zona de aquí también apretó la tecla comando comando en mac vale en windows pues no sé será la tecla control para poder transformar libremente vale pero bueno alguna tecla tiene que ser vale algo así tecla comando siempre press presionada para poder transformar libremente vale más o menos por aquí esta esquina está desenfocada pero luego desenfocar hemos nosotros también nuestro diseño para que sean más realistas pero más o menos por donde caiga la esquina más o menos por donde nosotros creamos que tiene que ir esta esquina vale pero pasa una cosa si os fijáis la tarjeta la original está un pelín curva por la zona de arriba y por la zona de abajo entonces no se adapta bien mi diseño a la tarjeta como hacemos eso pues también desde la herramienta de transformar ahora vamos a deformar y sólo hacemos pulsando sobre este icono de aquí arriba lo veis esto va a generar una malla sobre mi diseño y entonces nosotros tirando de esta zona vamos a poder curvar veis que yo puedo curvar les voy a poder darle la curva que necesito para que se ajuste mejor a la tarjeta original y aquí igual voy a tirar hacia afuera hasta que más o menos quede curvado de la misma manera cuando lo tengamos le damos ok ya tenemos la d ahora vamos a hacer la de atrás lo mismo nos vamos a illustrator seleccionamos el contenido de la parte de atrás pegamos como objeto inteligente aplicamos y también importante convertimos esta parte en objeto inteligente diseño detrás le voy a aplicar también un color voy a hacer una copia la voy a poner por detrás y le voy a quitar el ojo al original para tener los originales como he dicho siempre por la zona de arriba entonces ya sobre la copia que he hecho le voy a bajar un poco la opacidad y voy a volver a transformar como héctor adelante para que las esquinas coincidan [Música] vale más o menos ya tenemos todas las esquinas pero también esta tarjeta también es un pelín más curva entonces eso también lo tenemos que adaptar de la misma manera volvemos a transformar pulsamos sobre el icono de forma tiramos para que se ajuste a la tarjeta y por aquí también vale ya tenemos el diseño de delante y el diseño de detrás ya transformados y colocados sobre la fotografía ahora lo siguiente voy a quitar el ojo la fotografía por estas zonas está un poco desenfocado por aquí más entonces voy a intentar conseguir que estos diseños también tengan el mismo desenfoque y esto pues no es fácil yo lo hago probando con la herramienta de desenfoque de iris hasta que más o menos las zonas quedan prácticamente igual desenfocadas esto es difícil yo no sé si habrá otra manera de hacerlo pero bueno yo lo hago así y más o menos el resultado pues queda bastante bien selecciona la capa de adelante me voy a filtro desenfoque de iris entonces aparece este círculo si no lo habéis utilizado nunca este circulito del centro es la zona que está enfocada no voy a poner aquí abajo en la esquina de aquí abajo entonces podéis ya trabajar con este otro círculo voy a doblarlo para que esté así un poco hacia arriba la cantidad de enfoque aplicando sobre la hoja es demasiado voy a bajarlo a un 6 voy a fijar en las esquinas vale que es lo que más me preocupa quizás seis es mucho fijaos vale en esta zona de la tarjeta que más o menos debería tener el mismo desenfoque yo creo que 4 se acerca bastante a la realidad toda esta zona está enfocada aquí también está un poco enfocado el desenfocado perdón como veis aquí está más desenfocado y por aquí también empieza a desenfocar sí yo creo que casi hemos cuadrado a la primera colocando el punto aquí y allí dándole un 4 quizás aquí está un poco más enfocado de la cuenta lo que puede hacer es este punto bajarlo un poco hacia abajo se desenfoque un poco más vale más o menos las actitud es prácticamente imposible si alguien lo consigue chapo genial bien yo creo que más o menos el desenfoque lo tenemos vale va sí en radial hacia esta zona que está más desenfocada pues bueno le damos ok ahora está de atrás también seleccionamos la capa filtro desenfoque de iris voy a hacer el mismo proceso voy a colocar el punto en esta esquina de aquí voy a aplicarle yo creo que esta esquina aquí hemos aplicado un 4 y ésta está un poco más desenfocada yo creo que le vamos a aplicar unos 6 voy a hacerlo también más o menos lo que es el círculo vaya en esta dirección no va a quedar perfecta porque perfecto es como he dicho imposible yo no tengo tantas nociones de retoque digital pero bueno yo lo dejaría así tal cual yo creo que se parece bastante al original por último si os fijáis voy a poner la opacidad al cien por cien para verlo mejor si os fijáis veis que hay ruido y mi diseño no tiene ruido entonces lo que hago es por encima de una de las capas voy a empezar por esta por la de atrás por encima voy a crear una nueva capa la vería más ruido voy a meter esta capa dentro de la capa de mi diseño para eso nos posicionamos en medio de las dos capas pulsamos la tecla alt y veis que aparece este icono vale esto es para crear una máscara de recorte todo el contenido de esta capa se va a meter dentro de lo que es mi diseño nos vamos a edición rellenar rellenamos con el negro ok filtro ruido añadir ruido monocromático hemos dicho para que no tenga color 12 le damos ok y ahora este ruido lo vamos a poner en modo drama para que se queden sólo las partes a esta capa de ruido le voy a bajar un poco la opacidad y le voy a poner un 70 y esta misma capa la vamos a duplicar comando j la vamos a poner por encima de la capa de delante y lo mismo con la tecla alt nos ponemos en medio para que lo que es el ruido se aplique solamente al diseño y no a toda la fotografía que ha pasado pues que ya tenemos el moho coupet & water ya tenemos el mod cap mockus suena un poco así raro ya tenemos el moca hecho en una vez que ya apliquemos el diseño final veremos cómo queda si queda bien si hay que retocar algo del desenfoque es hay que retocar algo del ruido pues bueno eso ya lo vemos una vez aplicado el diseño pero a priori lo hemos conseguido entonces ahora vamos a hacer nuestro diseño nos vamos a ir a illustrator voy a hacer una copia destaca y voy a escribir cómo diseñar mo caps como éste con la tipografía futura bold voy a bajar lo que es el interlineado mola y esto lo vamos a poner chiquitín voy a crear un efecto de unas líneas y voy a ir luego a deformar esas líneas para que tengan un efecto un poco más orgánico un poco más extraño a de un poco más moderno a mí me gusta ese efecto así que lo voy a hacer para estas tarjetas y lo que voy a hacer es dibujar una línea por ejemplo aquí con un color negro y le voy a aplicar un efecto de distorsionar y transformar transformar para generar copias de esta línea 50 copias voy a darle previsualizar y en el eje vertical voy a mover esto por ejemplo 2 milímetros vale eso es mucho voy a ponerlo 1 y en vez de 50 voy a decirle 100 vale para tener sobrante para que luego a la hora de si queremos imprimir estas tarjetas que tengamos sangre para que tengamos sobrante alrededor de nuestra tarjeta ok vale ahora sobre estas líneas voy a aplicar una deformación voy a hacerme una copia voy a hacer también lo mismo de aquí hacia abajo y aplicar también ese mismo efecto para poder deformar esto no puedo tener una línea con una transformación tienen que ser todo líneas entonces lo que voy a hacer es expandir este objeto expandir la apariencia ahora ya puedo aplicar este efecto qué efecto es pues es un efecto que tenemos y que se llama herramienta de formar esto lo que hace es de forma las líneas si yo hago zoom y hago esto es cómo va deformando las líneas si hace efecto como de montañas de ondas cosas extrañas pero que molan mucho [Música] más o menos se nos ha quedado una cosa extraña pero bueno es un efecto llamativo y sobre ésta también vamos a hacer lo mismo seleccionamos objeto expandir apariencia [Música] ahora lo que vamos a hacer es aplicar un degradado a estas líneas como más me gusta hacerlo es expandir la apariencia de las líneas para que no tengan trazos sino que ya sean un relleno entonces luego aplicar el degradado sobre el relleno para mis más fácil y me da más opciones me voy a ir a objeto expandir y le voy a decir que quiero expandir lo que es el trazo vale y con este aquí al lado igual objeto expandir sólo lo que es el trazo ok vale entonces ahora le voy a aplicar un degradado al relleno de un color similar a mi corporativo a un color morado este sería mi degradado y con esto voy a hacer lo mismo voy a aplicar mi degradado y por último una caja a esta palabra y esta palabra la voy a poner de color blanca porque si no no se ve un pimiento así que color blanco y solamente queda aplicar aquí mi logotipo que lo voy a aplicar de color blanco para que sea así como un poco rayado que cueste leerlo pero que sepas que está ahí la marca vale ya tendríamos lo que es la tarjeta con la sangre y todo perfecto para poder copiar y pegar en photoshop yo aconsejo que os quedéis solamente con el contenido de la tarjeta y que la sangre la elimine y por lo tanto hacer dos copias y esta es la que voy a acotar para poder copiar y pegar en photoshop voy a hacer una copia de esto comando ce comando f lo voy a poner por encima de todo y voy a seleccionar esta caja que acabo de copiar por encima de todo y las líneas y ahora hay una opción en el busca trazos que es esta de aquí que es recortar si yo le doy a esta opción vais a ver que recorta las líneas exactamente a la medida de mi tarjeta y lo mismo voy a hacer con esto así es cómo quedaría el diseño entonces ahora copiamos nos vamos a photoshop y aquí en mi objeto inteligente pone diseño delante vale pues yo voy a hacer doble clic sobre la miniatura de aquí voy a pegar mi nuevo diseño el de atrás lo podemos ocultar voy a guardar y entonces una vez que guarde voilà ya tengo aquí mi diseño ahora tenemos que ponerlo en modo multiplicar para que el blanco desaparezca cambiamos también el diseño de detrás selecciono todo esto copiamos pegamos ocultamos el de atrás para que no se vea salvamos y entonces cuando volvamos al mocap ya se habrá cambiado que el samu lado no me digáis que no al final estos son pequeños detalles pequeños truquitos para que podáis hacer que vuestros trabajos sean más profesionales si podéis hacerlo es vuestro moca si tenéis una cámara de fotos más o menos decente tenéis algún fondo o algún sitio donde poder poner pues una hoja de carta unas tarjetas o un cartel o algo que podáis fotografiar y luego encima poner vuestro diseño va a quedar genial importante el tema del concurso que tenéis que hacer para poder participar en el concurso es hacer cuatro cosas solamente lo primero si no estáis suscritos al canal de youtube vale suscribirse a este canal de youtube aquí abajo donde pone suscribir le dais también darle a la campanita porque si no cuando saca algún nuevo vídeo pues ya sabéis que las notificaciones no van a llegar tenéis que darle like al vídeo también tenéis que compartir el vídeo en alguna de nuestras redes sociales nada igual si es twitter instagram o facebook para que el vídeo tenga difusión y así pues adobe tenga un poco más de repercusión ya que se ha enrollado dándonos estas dos cuentas que por lo menos pues el vídeo puede llegar a más gente y el último paso que es importante tenéis que dejar un solo comentario el que deje más comentarios no va a poder la cuenta así que solo un comentario indicando me por qué queréis ganar esta cuenta de adobe stock sí que están muy atentos en futuros vídeos porque haré uno hablando de los resultados y de los ganadores de este concurso sorteo como queráis llamarlo si queréis hacerme alguna pregunta relacionada con este vídeo no lo hagáis en los comentarios del vídeo que esto solamente va a ser para el concurso vale hacerlo a través de facebook instagram o twitter que también voy a publicar ahí el vídeo y sabéis que podéis seguirme por ahí también podéis hacerme preguntas por esos canales yo espero poder seguir haciendo más vídeos no tengo suficiente tiempo pero voy a sacar tiempo donde pueda así que nos vemos en próximos vídeos sean muy felices por favor hasta luego [Música]