Share
Photoshop se ha convertido en una herramienta multipropósito que puede crear algunas animaciones complejas sin la necesidad de comprar software adicional. En este tutorial, le mostraremos cómo crear y componer una animación 3D con efectos de sonido e iluminación. También cubriremos técnicas sobre cómo optimizar su tiempo de renderizado. Empecemos!
Los siguientes recursos fueron utilizados durante la producción de este tutorial..
Cree un nuevo documento con la resolución de video que prefiera. En este caso, estoy usando 720 px por 480 px.
Elija un color de primer plano y de fondo y use la herramienta Degradado para hacer un degradado radial como se muestra. Asegúrese de que el icono de degradado radial esté seleccionado en el menú superior.
El siguiente paso es crear nuestro objeto 3D que luego texturizaremos y animaremos. Puede usar o construir cualquier objeto que desee, pero para este tutorial, usaremos un objeto 3D de uno de mis tutoriales anteriores (incluido en los recursos). Para aprender a crear este objeto, consulte mi tutorial de Realistic Chrome Hood Ornament Premium.
Ahora añadiremos el objeto 3D a nuestra escena. Vaya a Archivo> Abrir y navegue hasta el archivo "3D_object.psd". Esto se abrirá como un nuevo documento..
Queremos mover la capa "Objeto 3D" a la escena en la que estábamos trabajando. Normalmente, usaría la herramienta Mover (V) para hacer clic y arrastrar la capa desde el lienzo hasta la pestaña de documento correcta en la parte superior. Si se desplaza sobre una pestaña de documento, se abrirá ese documento para permitirle colocar la nueva capa en ese documento nuevo. Desafortunadamente, con una capa 3D, no puede usar la Herramienta Mover directamente. Entonces, tendremos que usarlo indirectamente..
En el documento "3D_object.psd", asegúrese de que la capa de Objeto 3D esté seleccionada en el Panel de Capas. Además, asegúrese de seleccionar la herramienta Marquee rectangular (M).
Manteniendo presionada la tecla Ctrl cambiará el cursor a la herramienta Mover temporalmente, lo que ahora nos permitirá hacer clic y arrastrar la capa 3D de un documento a otro. Continúe y mantenga presionado Ctrl + Shift mientras hace clic y arrastra el objeto del lienzo a nuestro documento de trabajo. Al pasar sobre el documento de trabajo se abrirá.
Cuando se abra el documento de trabajo, arrastre el cursor sobre el lienzo y suelte el botón del mouse para colocar la capa. Como teníamos Shift, la capa se colocará automáticamente en el centro del lienzo..
Con la capa 3D seleccionada, asegúrese de que el Panel de propiedades y el Panel 3D se hagan visibles. Si estos paneles no están visibles, simplemente ábralos yendo a Ventana> 3D, o Ventana> Propiedades. Aquí hay un ejemplo de ambas ventanas cuando se selecciona "Vista actual":
Nuestro siguiente paso es pasar y aplicar texturas a cada superficie. Si vamos al Panel 3D, podemos ver los tres grupos de objetos que conforman nuestro objeto 3D. Al girar una capa de grupo, podemos ver la capa Objeto 3D así como su capa Material.
Seleccione la capa "Material de bisel frontal" del objeto "Elipse" en el Panel 3D. En el Panel de propiedades, realice los siguientes ajustes. Nuestro objetivo es crear un material cromado para esta superficie..
Para aplicar este material a otras superficies, debemos guardarlo en el Selector de materiales. Para hacer esto, haga clic en la ventana de vista previa del Selector de materiales en el Panel de propiedades, seleccione el ícono de engranaje pequeño para abrir un panel desplegable con opciones adicionales y elija Nuevo material. Nombra el nuevo material "Chrome".
Para aplicar el material "Chrome" recién creado al resto de las capas de material "Ellipse", vuelva al Panel 3D y presione Mayús al hacer clic en el resto de las superficies. A continuación, vaya al Selector de materiales en el Panel de propiedades y navegue a nuestro material "Chrome".
Ahora, todo el objeto "Ellipse" debe ser texturizado con el material "Chrome". Como puedes ver, no hay mucha diferencia. Esto es porque no hay nada que reflejar. Nos ocuparemos de esto más tarde.
Usaremos el mismo material "Chrome" para el objeto "TUTS". Seleccione todas las capas de material para el objeto "TUTS" y aplique el material "Chrome". Tu imagen debe parecerse a la siguiente:
El último material que necesitamos aplicar está en la capa "Respaldar el material de inflación del frente". Seleccione esta capa de material y aplique la siguiente configuración en el Panel de propiedades.
Photoshop incluye automáticamente un plano de fondo en cada escena 3D (indicada por la cuadrícula). También permite la opción de proyectar sombras en ese plano de tierra. En el Panel 3D, seleccione la capa "Entorno", luego vaya al Panel de propiedades y asegúrese de que las configuraciones del plano de sombra y tierra estén configuradas como se muestra:
Dado que nuestro objeto está "de pie" en el plano del suelo, la sombra del objeto se proyectará sobre él. Eventualmente queremos que el objeto esté paralelo al plano del suelo y la luz directamente arriba para que la sombra se proyecte directamente debajo del objeto..
Para lograr esto, primero moveremos el objeto a su posición. Asegúrate de que la herramienta Mover (V) esté seleccionada y, en el Panel 3D, selecciona la capa "Escena" (esto selecciona todos los objetos a la vez).
Usa el widget en pantalla para rotar la escena 90 grados alrededor del eje X. También puede establecer manualmente la rotación utilizando la pestaña Coordinada en el Panel de propiedades.
Por último, usa el widget en pantalla para mover la escena hacia abajo para que esté más cerca del plano del suelo.
El siguiente paso es ajustar la iluminación para obtener sombras que se vean mejor. En el Panel 3D, seleccione la capa "Infinite Light 1" y use el widget en pantalla para girar la luz de modo que, si apunta directamente hacia nuestro objeto.
Aquí hay un ángulo diferente para que podamos ver cómo se ve la sombra. Si necesita reposicionar el objeto para que esté más cerca o más lejos del plano de tierra, consulte el Paso 11.
Antes de que terminemos de ajustar la iluminación, movamos la cámara para que estemos de frente al objeto ... En el Panel 3D, seleccione la capa "Vista actual" y use las herramientas en el Menú superior para manipular la posición de la cámara.
Para guardar esta cámara, vaya al Panel de propiedades y haga clic en el menú desplegable en "Ver". Nombre esta cámara "Render". Guardar la cámara la agregará automáticamente a nuestro Panel 3D para que podamos saltar entre varias cámaras en cualquier momento.
Ahora, es hora de terminar la iluminación. Vamos a cambiar la configuración de la luz para permitir que una pequeña cantidad de sombra sea visible desde detrás del objeto. Esto ayudará a que nuestra escena se vea demasiado plana contra el fondo. En el Panel 3D, seleccione la capa "Infinite Light 1" de nuevo y realice los siguientes cambios en el Panel de propiedades.
Observa que ahora podemos ver algo de la sombra.
Para terminar de iluminar nuestra escena, vamos a agregar una luz basada en imágenes (IBL). Como su nombre lo indica, utiliza una imagen para iluminar la escena (esencialmente imitando la iluminación de la imagen). El resultado es una escena mucho más natural y realísticamente iluminada..
En el Panel 3D, seleccione la capa "Entorno". En el Panel de propiedades, asegúrese de que IBL esté marcado y haga clic en el icono para cargar una textura. Anímate y agrega la imagen de la sala de estar del Tutorial Assets..
Nuestra escena ahora está iluminada por el IBL que se representa en el fondo de nuestro lienzo. Esta imagen es solo para referencia y no se renderizará en el fondo.
Mientras la capa Entorno esté resaltada, veremos esta imagen de referencia así como un widget en pantalla que se puede usar para rotar la IBL. Al mover la imagen, podemos cambiar los reflejos en nuestra escena. Siéntase libre de rotar el ambiente como mejor le parezca.
Por último, los reflejos aparecen demasiado amarillos. Podemos cambiar esto editando la imagen de origen para el IBL. Para ello, vaya al Panel de propiedades, haga clic en la miniatura de IBL y haga clic en Editar textura.
Esto abrirá el archivo de textura en una nueva ventana. He usado Imagen> Ajuste> Reemplazar color para reemplazar el amarillo a azul. Esto no tiene que parecer realista; solo estamos introduciendo un nuevo color.
Así es como nuestra escena refleja los nuevos colores del mapa IBL..
Ahora crearemos una pequeña cantidad de animación en nuestra escena. Comience haciendo clic en el botón Crear línea de tiempo de video para activar la línea de tiempo. Si este botón no está visible, puede ir a Ventana> Línea de tiempo.
La capa "Objeto 3D" ahora se representará como una capa de video en la línea de tiempo del video.
Ya que estaremos animando la "Posición de escena 3D" de la capa "Objeto 3D", gire hacia abajo la capa "Objeto 3D" en la línea de tiempo.
En el Panel 3D, asegúrese de que la capa "Escena" esté seleccionada. A continuación, mueva el indicador de Hora actual a la marca de 15 cuadros y haga clic en el icono "Activar animación de fotograma clave".
A continuación, mueva el indicador de tiempo actual a la marca "00" y use el widget en pantalla para rotar la escena aproximadamente 30 grados alrededor del eje Y. Un nuevo fotograma clave debería aparecer automáticamente en el primer fotograma de la Posición de escena 3D.
Desplazar el indicador de tiempo actual de un lado a otro entre los fotogramas clave nos permitirá previsualizar la animación.
Use el control deslizante directamente debajo de la barra de tiempo para establecer el punto final de nuestra área de trabajo en 15 cuadros.
Antes de renderizar la animación, podemos hacer pequeños cambios para optimizar el tiempo de renderizado. Vaya a Edición> Preferencias> 3D y establezca el umbral de alta calidad de Ray Tracer en 4. Alternativamente, si desea una representación final más pulida y no le importa esperar un poco más, no dude en configurar esto en 5 o incluso 6 ( Solo estamos renderizando 15 cuadros después de todo.
Vaya a Archivo> Exportar> Renderizar video y aplique la configuración como se muestra. Estaremos renderizando nuestra escena como una secuencia JPG en lugar de un video. Esto nos dará más control más adelante. Recomiendo guardar las imágenes fijas en una nueva carpeta para organizar mejor los archivos.
En este punto, guarde su archivo y abra un documento nuevo. Vamos a construir una rápida animación en 2D de nuestro efecto de deslumbramiento. Más tarde aplicaremos esto a nuestro objeto 3D. Cree un nuevo documento de 525 px por 300 px con un fondo negro.
Cree una nueva capa llamada "Glare" y use la herramienta Rectangular Marquee para hacer una selección horizontal como se muestra.
Seleccione la herramienta Degradado y asegúrese de que esté configurada en Primer plano a Degradado transparente y lineal. Además, establece el color de primer plano a blanco.
Usando la herramienta de degradado, haga un pequeño degradado en la parte inferior de la selección.
Presione Ctrl + D para deseleccionar.
Gire (Ctrl + T) la capa "Deslumbramiento" como se muestra.
El siguiente paso es animar esta capa a través de nuestro lienzo. Para hacer esto, abra la línea de tiempo como lo hicimos en el Paso 17.
Gira la capa "Deslumbramiento" y haz clic en el ícono para habilitar la animación de fotogramas clave para la propiedad "Posición".
Mueva el indicador de tiempo actual al cuadro 50 y haga clic en el ícono Agregar fotograma clave para establecer la posición ...
Mueva el indicador de tiempo actual más abajo en la línea de tiempo (para encuadrar 90, más o menos) y mueva la capa "Deslumbramiento" a través del lienzo como se muestra. Un fotograma clave debe generarse automáticamente en esta posición.
Al presionar la barra espaciadora se previsualizará la animación.
Siéntase libre de embellecer esta animación como mejor le parezca. He agregado algunas capas adicionales con diferentes tipos de reflejos que se mueven a diferentes velocidades. Aquí hay una breve vista previa.
Vaya a Archivo> Exportar> Renderizar video. Ya que estamos trabajando con una animación 2D (y no tenemos que preocuparnos por los tiempos de representación), podemos guardar como un archivo .MOV.
Ahora que hemos terminado nuestra animación de deslumbramiento 2D, podemos volver a nuestra escena original para trabajar en el efecto de deslumbramiento..
Para esta siguiente parte, queremos que el objeto sea todo negro. Haga clic en la primera capa de material del objeto "TUTS" y cambie la configuración del material en el Panel de propiedades como se muestra.
Guarde este material como hicimos en el Paso 6. Nómbrelo como "Negro reflejado".
Aplicar esta textura a cada superficie en los tres objetos. El resultado debe ser un objeto reflexivo irrealista..
Una de las grandes características de Photoshop es la posibilidad de agregar GIF animados o archivos MOV como texturas. Aplicaremos el archivo MOV que creamos previamente al IBL en nuestra escena. Esto creará la apariencia de nuestra animación de deslumbramiento 2D que se reflejará en nuestro objeto..
En el Panel 3D, seleccione la capa "Entorno" y, en el Panel de propiedades, haga clic en la miniatura IBL y seleccione Reemplazar textura. Seleccione el archivo 2D Glare MOV que acabamos de crear..
Al presionar la barra espaciadora se mostrará una vista previa de la animación, pero solo se mostrarán los primeros 15 cuadros, ya que ajustamos el área de trabajo en el Paso 20. Continúe y amplíe el área de trabajo a 90 cuadros.
Como se explica en el Paso 15, podemos usar el widget en pantalla para manipular la posición de la IBL. Actualmente, si obtiene una vista previa de la animación, la IBL se posiciona de tal manera que no refleja el 'resplandor' en nuestra animación. Establezca el indicador de tiempo actual hacia el final de la línea de tiempo (cuando el resplandor en nuestro archivo .MOV comienza a animarse).
Gire la IBL hasta que veamos ese resplandor en los reflejos de nuestro objeto..
Como hay texturas mínimas en nuestra escena, nuestra escena se renderizará un poco más rápido. Sin embargo, hay algunos pasos adicionales que podemos tomar que harán poca diferencia visual, pero un ahorro de tiempo significativo al renderizar.
Haga clic en cada capa de objeto y desactive Sombras de captura y Sombras de conversión (que se encuentran en el Panel de propiedades).
Seleccione la capa "Infinite Light 1" y deseleccione Sombra en el Panel de propiedades.
Seleccione la capa "Entorno" y desmarque Sombra en el Panel de propiedades. Además, establece la Opacidad de la Sombra del plano de tierra en 0%.
Por último, como paso opcional, vaya a Edición> Preferencias> 3D y configure el Umbral de alta calidad de Ray Tracer en 3 o 4.
Lo último que debemos hacer antes de renderizar es hacer que el fondo sea negro sólido. Selecciona la capa "Fondo" y dale un relleno negro.
Al igual que hicimos en el Paso 22, vaya a Archivo> Exportar> Renderizar video y renderice la animación como una secuencia de imágenes JPG.
Ahora que tenemos todos nuestros componentes representados, podemos comenzar a componer nuestra animación en un nuevo documento, utilizando la línea de tiempo del video. Vaya a Archivo> Abrir y navegue a la carpeta donde guardamos nuestra secuencia de imágenes de animación 3D. Asegúrese de marcar la casilla Secuencia de imágenes antes de abrir.
Ya que estamos trabajando con capas de video, puede recibir el siguiente mensaje antes de abrir el archivo. Cuando el archivo está abierto, solo ve a Ver y desmarca la Corrección de ración de aspecto de píxeles para corregir.
A continuación, vaya a Archivo> Colocar y seleccione el último fotograma solo de nuestra animación 3D. Esto colocará el último cuadro de nuestra animación en la misma capa que nuestro archivo de video.
Notar que el archivo parece ser más ancho que el lienzo. Esto se debe a que nuestra capa de video está representada en una relación de aspecto de píxeles diferente a nuestra imagen fija. Podemos ajustar manualmente los mangos para corregir..
El siguiente paso es agregar la animación de deslumbramiento 3D a nuestra escena. Vaya a Archivo> Colocar y navegue hasta la imagen de animación deslumbrante. Asegúrate de abrirlos como una secuencia de imágenes. Tenga en cuenta que esto convierte automáticamente la capa de video en un objeto inteligente. Esto es importante para los pasos posteriores (alternativamente, puede hacer clic con el botón derecho en cualquier capa de video en el Panel de capas y seleccionar "Convertir en objeto inteligente").
Para iniciar el efecto de deslumbramiento inicial, seleccione la capa de animación de deslumbramiento 3D y establezca el Modo de fusión en Esquivar lineal (Agregar).
Si recorres la animación, puedes ver cómo este modo de fusión afecta a la escena..
Como se señaló anteriormente, nuestra capa de video deslumbramiento 3D es un objeto inteligente. Como un objeto inteligente, ahora podemos aplicar filtros inteligentes a la capa de video. Usaremos filtros inteligentes para mejorar nuestro efecto de deslumbramiento. Haga una copia de la capa de deslumbramiento en el Panel de capas y nombre a este "Resplandor borroso". Esto agregará automáticamente una nueva capa a nuestra línea de tiempo de video.
Déle a este un Desenfoque gaussiano (Filtro> Desenfoque> Desenfoque gaussiano) configurado en 6.8 píxeles. Esto agregará ese brillo que a menudo acompaña a un resplandor..
Podemos ser creativos con el resplandor agregando un Desenfoque radial. Continúe y haga otra copia de la capa de deslumbramiento original y vaya a Filtro> Desenfocar> Desenfoque radial. Establezca la cantidad en 100. Siéntase libre de agregar un segundo desenfoque radial para un énfasis adicional (los filtros inteligentes se pueden agregar varias veces).
Tu escena debe parecerse a la siguiente.
Ahora que nuestra animación está casi terminada, vamos a agregar algunos toques finales. Agregue una nueva capa usando el Panel de capas y rellene con negro. Nombre esta capa "Fade".
En la línea de tiempo del video, gire hacia abajo la capa "Fade" y, haga clic en el icono Cronómetro para habilitar la animación de fotogramas clave para la propiedad Opacidad. Cuando habilite la animación de fotograma clave, se colocará un fotograma clave en el lugar de su indicador de tiempo actual: vuelva a colocarlo en el cuadro 00.
Crea otro en el décimo cuadro. Puede hacer clic y arrastrar un fotograma clave después de agregarlo para posicionarlo de manera más precisa.
Con el segundo fotograma clave aún activado (donado por el resaltado amarillo), ajuste la Opacidad de la capa "Desvanecimiento" al 0% usando el Panel de capas. Nuestro fundido está ahora completo.
Lo último que debe hacer es agregar el audio que se encuentra en los Recursos del tutorial. Usaremos un paquete de clips de sonido llamado "Magic Wooshes". Este archivo incluye cuatro clips 'woosh' de seaparet.
En la parte inferior de nuestra línea de tiempo de video, haga clic en el símbolo más en el final de la capa de pista de audio. Cargue el clip de sonido "Wooshes 01.mp3".
Al presionar la barra espaciadora se previsualizará la animación con el sonido. Este clip de audio parece que funcionará mejor cuando el efecto de deslumbramiento pase sobre nuestro objeto. Mueve este clip de sonido para que el 'woosh' se reproduzca a medida que el resplandor comienza a moverse sobre nuestro objeto..
Actualmente, el audio sigue reproduciéndose hasta el final de nuestra animación, para solucionar este problema, tendremos que recortar el clip. Haga clic en el final de la pista de audio y arrástrelo hacia atrás para que termine con nuestra animación..
En este punto, siga adelante y arrastre las capas restantes hacia atrás para que terminen con la animación..
El audio todavía se corta temprano. Para arreglar eso, añadiremos un fundido de salida al audio. Haga clic en el icono de flecha al final de la pista y establezca Fade Out en .5 seg..
Si lo desea, puede agregar otra pista de audio al principio de nuestra escena para reproducirla cuando nuestro objeto gire a su posición. Para agregar otra pista de audio, haga clic en el icono de notas musicales en la pista de audio y seleccione Nueva pista de audio.
Solo repita los pasos 47-49. He encontrado que el clip "Wooshes 02.mp3" funciona bien, sin embargo, requiere un poco más de ajuste.
Finalmente, vaya a Archivo> Exportar> Renderizar video.
¡Has terminado! A continuación se muestra la animación final con efectos de sonidos:
Accentsconagua