Share
En este tutorial, le mostraré cómo tomar su diseño plano (como en bidimensional, no plano como en la tendencia de diseño actual) y agregue un poco de vida burlándose de ella en un plano 3D en perspectiva. El propósito de esto es presentar su diseño de una manera más dinámica, dándole más profundidad y atractivo visual. Puede ser una forma muy efectiva de presentar imágenes a los clientes..
Hay un par de formas para lograr este efecto, como usar las propias herramientas 3D de Photoshop y crear capas 3D. Sin embargo, me siento más cómodo utilizando el software 3D adecuado, como 3ds Max, ya que ofrece mucho más control sobre la cámara, lo que le permite girar alrededor del plano 3D con un mayor control sobre la iluminación y la sombra. Inicialmente, puede parecer más complicado, pero cuando haya hecho esto una vez, más tarde podrá burlarse de su trabajo en cuestión de minutos..
Si eres nuevo en 3D, tenemos una gran cantidad de tutoriales para comenzar ... Los principios demostrados aquí son de aplicación agnóstica; Podrás aplicarlos a cualquier software 3D por ahí. Para seguir adelante, debe conocer Photoshop y haber abierto al menos un programa de herramientas 3D antes.
De todos modos, para este tutorial me burlaré del diseño de nuestra última aplicación llamada TriplAgent, que parece estar extendiéndose como un reguero de pólvora en esas redes. Puedes ver el diseño completo en mi cartera de Behance..
Abre tu aplicación 3D. Estoy usando 3ds Max 2012, pero como se mencionó anteriormente, puedes usar casi cualquier herramienta 3D.
Utilizo Vray como el motor de renderización principal porque ofrece luces y sombras realistas. Asegúrate de encender Iluminacion indirecta, pero también podrías usar el renderizador predeterminado de Max y lograr resultados similares.
Aplica ajustes similares a los de las capturas de pantalla..
Ahora es el momento de crear el fondo. Ir Crear> Bajo Primitivas estándar, elija VRayPlane. Aparecerá un plano como en la captura de pantalla siguiente. Simplemente arrástrelo hacia un lado, realmente no importa dónde.
El VRayPlane será el fondo de tu escena.. Muy bien, vamos a crear el plano real donde se sentará su diseño. De nuevo, ve a Crear> Primitivas Estándar> Caja. En "parámetros", ingrese las dimensiones como se indica a continuación (este es el tamaño de pantalla para un iPhone 5).
Obviamente, puedes ingresar las dimensiones que desees siempre y cuando tu diseño se adhiera a las mismas proporciones. Ahora tenemos que aplicar un mapa UV, para que el diseño se ajuste bien alrededor de las esquinas del avión. Vaya a "Modificar" en el panel de la derecha y elija Mapeo UVW de la Lista de Modificadores. Asegúrate de que "Planar" está seleccionado.
Es hora de aplicar los materiales, así que abre el Editor de materiales En la esquina superior derecha de la barra de herramientas principal. Cree dos materiales VRay, uno para su fondo (el plano VRay) y otro para su caja que acaba de crear. Arrastra y suelta el material sobre cada objeto..
Vamos a realizar un render rápido. Haga clic en la producción de procesamiento (el icono de la tetera) ...
Un poco gris y desnudo, pero es un buen comienzo.. Buen trabajo, es hora de ponerse un bonito vestido. Necesitamos aplicar nuestra imagen de maqueta real como un material al objeto 3D. Abra el editor de materiales y haga clic en el material que asignó al cuadro..
Desplácese hacia abajo hasta que vea el despliegue de Mapas, luego haga clic en Difuso> Mapas> Estándar> Bitmap y navega hasta la carpeta donde has guardado tu diseño..
Nota: Mi archivo era .png con dimensiones de 1136 x 640 píxeles.
Ahora verá su archivo envuelto alrededor de la esfera en la ranura de material. Haga clic en el icono a cuadros y verá el diseño envuelto alrededor de su caja en una vista en perspectiva. No se olvide de establecer el valor de desenfoque en 0.01 para obtener una representación nítida de su imagen.
Golpear Hacer...
Voila! El diseño envuelve muy bien alrededor de su caja. Continúa y guarda este archivo como png o tif. Es hora de cambiar el color de fondo y condimentar las cosas ...
Hay dos formas de cambiar el color de fondo. O puede cambiar el color del material asignado a su VRayPlane o puede cambiar el color en Photoshop. Te mostraré cómo hacer esto en Photoshop, porque es mucho más fácil cambiar el color sin volver a renderizar la escena..
Vamonos. Haga clic derecho en su VrayPlane y haga clic en "Ocultar seleccionado".
Necesitamos ocultar el fondo para que no aparezca en el renderizado.. Golpear Hacer y haga clic en el icono alfa como se ve a continuación en la captura de pantalla. Guarda la imagen como .png y hemos terminado aquí.
Es hora de pasar a tu mejor amigo, Photoshop.
Con el canal alfa podemos crear una máscara y aislar el fondo.. Tome el archivo alfa que acaba de guardar y ábralo en Photoshop. Ir Los canales y seleccione (CMD + A) el canal alfa en la parte inferior. Copiarlo en el portapapeles.
Abre tu imagen renderizada que guardaste previamente. De nuevo, vaya a la ventana de canales y pegue el canal alfa que acaba de copiar. Esta vez tenemos que seleccionar la máscara real, así que mantenga presionada la tecla CMD y haga clic en la máscara.
Asegúrate de que la máscara esté seleccionada. Abre la ventana de capas. Manteniendo pulsada la CMD tecla, clic izquierdo en Añadir máscara de capa como se ve abajo. El avión debe estar bien aislado del fondo..
Eliminando el fondo y aislando el plano.. Crea una nueva capa y rellénala con el color que quieras. Mientras se vea bien. Mkay.
Ahora vamos a añadir sombras. Puedes mantener la sombra que estaba en la imagen, pero esta vez vamos a usar las sombras de Photoshop. CMD + haga clic en su máscara de nuevo y cree una nueva capa. Rellene la selección con un color oscuro que coincida con su fondo. Abra los estilos de capa y juegue con el efecto de sombra paralela hasta que encuentre algo que le guste..
Asegúrate de que el ángulo de las sombras se vea bien. Buen trabajo, hemos terminado! Una forma más agradable de ver un diseño 2D, ¿no crees??
Esto es lo que podrías terminar con:
En este tutorial, hemos recorrido cómo tomar un diseño 2D y transformarlo en una maqueta 3D con perspectiva. Supongo que muchos de ustedes se sintieron un poco intimidados por todo el asunto del 3D, pero realmente es bastante básico una vez que lo aprenden..
Algunos próximos pasos interesantes serían intentar experimentar con diferentes tamaños de planos, usar diferentes ángulos de cámara y también cambiar la lente de la cámara para lograr una distorsión de la perspectiva. Puede ver el diseño completo en mi cartera de Behance y también ver la aplicación móvil TriplAgent. Gracias por seguirnos!
¿No tienes el tiempo o las habilidades para trabajar con Photoshop? No dejes que eso te detenga.
Placeit es un generador de maquetas; una herramienta en línea que le permite incrustar sus propios diseños (ya sean diseños de interfaz de usuario, logotipos, otros activos de marca) en escenas fotorrealistas. Definitivamente una alternativa rápida y fácil a Photoshop..
Gatito al lado de un iPhone X Maqueta acostada sobre un libro en una cama de chicas
Plantilla de iPhone X sobre una mesa vintage
Accentsconagua