Hola a todos, soyLicencia gris, Estoy muy feliz de traerles un tutorial de productos secos.
El contenido del tutorial es 100% original para mí, ya sea dise?o o código.El código está listo para todos, Es muy simple que puedas usarlo.Código abierto sin derechos de autor, todos pueden usarlo con confianza~
No sé cuándo, los sitios web en la nube de muchos fabricantes importantes se han convertido en iconos tan peque?os y tridimensionales.Mover el mouse dentro y fuera tendrá un peque?o efecto de movimiento interesante.
▲ Página de inicio de Alibaba CloudHttps://www.aliyun.com/
▲ El efecto dinámico de mover y mover iconos peque?os con el mouse
▲ Página de inicio de Tencent Cloud
▲ El efecto dinámico de mover y mover iconos peque?os con el mouse
Para ayudar a todos a comprender el proceso de realización de este efecto dinámico, Ah Hui escribió especialmente un tutorial muy detallado. Ense?arle a hacer y lograr estos efectos.Para los dise?adores, también puede aprender a hacer solo la parte del icono y dejar que el programador copie mi código directamente. 100% garantía de que su dise?o puede aterrizar.
No hay mucha tontería, echemos un vistazo al resultado final que hice (visite el enlace azul a continuación para verlo):
Https://www.pslkzs.com/demo/cloud/index.html
▲ Este es el efecto de mi desarrollo y producción.
Los modelos en el tutorial son muy simples, porque no puedo ense?arte a modelar, iluminar y renderizar durante horas... Debo usar el menor tiempo posible para hacerle comprender todo el proceso de realización. En el futuro, puede usar su propio método para completar su propio icono tridimensional de Alibaba Cloud y efectos móviles.
Nota especial:Este artículo no tiene nada que ver con Alibaba y Tencent. No sé cómo se hace su dise?o ni cómo se escribe el código. Solo uso mi propia experiencia para pensar en sus buenos resultados y ense?ar a todos a hacer y lograr efectos similares.
Para que el dise?ador junior vea todo el proceso con mayor claridad, grabé un video tutorial muy detallado,Te recomiendo que aprendas a través de videos, Para garantizar que cada paso sea muy claro. Si no es conveniente ver el video en la empresa, también puede ver directamente nuestro tutorial gráfico.
-Sección de tutoriales en vídeo-
Copie manualmente el enlace de texto subrayado azul a continuación y vaya a la estación b para verlo.
Video didáctico 1:"Juego previo diario》
Https://www.bilibili.com/video/BV1sS4y1o7Yk
Video didáctico 2:"Utilice C4D para hacer peque?os modelos de acción》
Https://www.bilibili.com/video/BV1sS4y1o7Yk? P = 2
Video didáctico 3:"Crea peque?os iconos en capas con Adobe Xd》
Https://www.bilibili.com/video/BV1sS4y1o7Yk? P = 3
Video didáctico 4:"Lograr efectos con código》
Https://www.bilibili.com/video/BV1sS4y1o7Yk? P = 4
Se enfatiza repetidamente que los dise?adores de UI no necesitan aprender a escribir código. Solo necesita prestar atención a cómo se hace la imagen de la parte de entrega. Por supuesto, si tiene más habilidades, verá el video completo más propicio para que su conocimiento sea más amplio. Más claro sobre el flujo de trabajo y la relación entre usted y I + D,Cuanto más sepa, más tendrá derecho a hablar. Nadie puede negar su dise?o con "inalcanzable".
-Parte del tutorial gráfico-
Tutorial 1:C4D hace un icono tridimensional dinámico
Efecto final
Paso 1Abra C4D para crear un nuevo cubo.
Paso 2Use la herramienta de zoom para aplanar el cubo un poco (también puede ajustar el panel de propiedades en la esquina inferior derecha e ingresar el valor específico)
Paso 3Ctrl + C Copia uno y Ctrl + V pega. Luego use la herramienta de movimiento para arrastrar y soltar la copia hacia arriba. Entonces tienes 2 cubos.
Paso 4Use la herramienta de zoom nuevamente para aplastar un poco la parte superior.
Paso 5Copia el cubo en la parte superior y arrástralo hacia arriba. De esta manera, has terminado con todo el icono.
▲ Sí, es así de simple.
Paso 6Haga doble clic en el marco rojo en la esquina inferior izquierda para agregar 1 material.
▲ Haga doble clic 3 veces en total para que pueda crear 3 bolas de material nuevas.
Paso 7Seleccione la bola de material que acaba de crear y cámbiela a blanco, naranja y negro.
▲ Preste atención a la esquina inferior izquierda, ahora hay tres bolas de material.
Paso 8Arrastra las tres bolas de material a los tres cubos.
▲ Preste atención a la esquina superior derecha, cada cubo tiene una bola de material. De esta manera, nuestro icono con material está listo.
Paso 9Selecciona el cubo blanco en la parte superior. En el fotograma 0 se encuentra un fotograma clave en el atributo H K de las coordenadas en la esquina inferior derecha.
Paso 10En la posición del fotograma 16, K otro fotograma clave para el atributo H y el atributo se cambia a 180 °
De esta manera, has terminado con la animación de rotación en la parte superior. El efecto es el siguiente:
De la misma manera, el cuadro K en el cubo naranja. Toda la animación está lista. Pero esta vez dejamos que el cubo naranja gire hacia atrás (el atributo H del cuadro 16 se cambia a-180 °) para que todo el movimiento esté listo.
Paso 11Haz clic en Render> Editar configuración de renderizado. A continuación, seleccione el formato de entrada es PNG y asegúrese de marcar el canal alfa. El PNG exportado de esta manera es un fondo transparente.
Paso 12 Cambie el cuadro de salida a “manual”, el cuadro inicial es 0 y el cuadro final es 16.
▲ Porque nuestra animación hizo 16 cuadros.
Paso 13: Haga clic en Render> Agregar a la cola de renderizado.
Paso 14: Haga clic en el botón de representación. De esta manera, se renderizan un total de 17 imágenes de 0 a 16 cuadros.
▲ Habrá una barra de progreso cian en el medio. Dependiendo de la configuración de su computadora, decida la velocidad de renderizado.
Estas son las 17 imágenes renderizadas. Todas son imágenes PNG con un fondo transparente, que es muy perfecto. Haremos algunas empalmes en el tutorial 3 para entregarlos al programador.
Tutorial 2 Hacer un peque?o movimiento con capas de calendario con Adobe Xd
Efecto final
El origen de la producción de este tutorial es que algunos estudiantes preguntaron en el grupo de WeChat si había alguna forma rápida de hacer la imagen a continuación. Así que pensé en la función de transformación 3D de Adobe Xd. Lo convirtió en una animación.
▲ Esta imagen es de una captura de pantalla de un grupo de amigos de WeChat. No sé qué dios lo hizo. Esto solo se usa para hacer tutoriales gratuitos, no para ningún uso comercial, si accidentalmente infringe sus derechos, o si no está contento, usé sus imágenes, puede eliminarlas en privado.
Paso 1Dibuje una vista frontal del calendario en Adobe Xd, lo simplifiqué aquí, dibujando solo 4 rectángulos redondeados. Y conviértelo en un grupo.
Paso 2Selecciona este grupo y haz clic en el botón Convertir 3D a la derecha.
Arrastre y suelte el icono del calendario en perspectiva.
Paso 3Seleccione la capa del botón verde y ajuste su eje z a 250. De esta manera, este botón se suspende.
Paso 4Seleccione el rectángulo blanco y ajuste su eje z a 150. De esta manera, el rectángulo blanco también está suspendido.
Paso 5Seleccione la penúltima capa y ajuste su eje z a 80.
De esta manera, haremos bien el efecto final de este efecto dinámico. A continuación, solo necesitamos exportar varias imágenes para completar todo el trabajo.
Paso 6Seleccione este grupo, cambie el nombre del grupo a "Grupo 20" y Ctrl E para exportar imágenes PNG. Esta es la imagen de nuestro vigésimo cuadro. Para ser precisos, es la imagen de nuestro último cuadro, porque puede que no haya tantos cuadros como 20.
Paso 7Cambie el eje z del rectángulo en nuestra tercera capa a 0 (originalmente era 80) y luego cambie el nombre del grupo a "Grupo 19". Después de seleccionar el grupo de nuevo, Ctrl + E exporta la imagen del fotograma 19.
Paso 8Cambie el eje z del rectángulo blanco a 75 (originalmente era 150) y luego cambie el nombre del grupo a "Grupo 18". Después de seleccionar el grupo de nuevo, Ctrl + E exporta la imagen del cuadro 18.
Paso 9Cambie el eje z del rectángulo blanco a 0 (originalmente era 75) y luego cambie el nombre del grupo a "Grupo 17". Después de seleccionar el grupo de nuevo, Ctrl + E exporta la imagen del cuadro 17.
Paso 10Seleccione la capa del botón verde, cambie el eje z directamente a 0 y luego cambie el nombre del grupo a "Grupo 16". Después de seleccionar el grupo de nuevo, Ctrl + E exporta la imagen del cuadro 16.
Hasta ahora, hay 5 imágenes en el eje Z. Esta es toda la animación en la que se eleva el eje Z. A continuación, volvemos a hacer una imagen animada del ángulo de rotación. Después de seleccionar todo el grupo, encontrará que la rotación del eje x se ajusta manualmente a 12 ° y la rotación del eje y se ajusta a-43 °.
Paso 11Cambie el eje y a-33 ° y luego cambie el nombre del grupo a "Grupo 15". Después de seleccionar el grupo de nuevo, Ctrl + E exporta la imagen del cuadro 15.
Paso 12Cambie el eje y a-23 ° y luego cambie el nombre del grupo a "Grupo 14". Después de seleccionar el grupo de nuevo, Ctrl + E exporta la imagen del cuadro 14.
Paso 13Cambie el eje y a-13 ° y luego cambie el nombre del grupo a "Grupo 13". Después de seleccionar el grupo de nuevo, Ctrl + E exporta la imagen del cuadro 13.
Paso 14Cambie el eje y a-0 ° y luego cambie el nombre del grupo a "Grupo 12". Después de seleccionar el grupo de nuevo, Ctrl + E exporta la imagen del cuadro 12.
Hemos hecho la animación de la rotación del eje y, y luego hacemos la animación de la rotación del eje x, el método es básicamente el mismo.
Paso 15Cambie el eje x a 6 ° y luego cambie el nombre del grupo a "Grupo 11". Después de seleccionar el grupo de nuevo, Ctrl + E exporta la imagen del cuadro 11.
Paso 16Cambie el eje x a 0 ° y luego cambie el nombre del grupo a "Grupo 10". Después de seleccionar el grupo de nuevo, Ctrl + E exporta la imagen del décimo cuadro.
De esta manera, todo nuestro calendario está aquí. Todas las imágenes de fotogramas necesarios para la animación ya están disponibles. Echa un vistazo a la pila de imágenes que acabas de guardar. De grupo 10 a grupo 20, en realidad solo hay 11 imágenes. En otras palabras, en realidad solo tenemos 11 cuadros.
Jaja, tal vez no puedas pensar en ello, el proceso de producción de nuestro efecto es tan simple y grosero. En el proceso de creación, debemos pensar con valentía e intentarlo con valentía.Los hermanos lo recuerdan: ?Mientras seas valiente, el fantasma femenino también puede dejarla tomar la licencia de maternidad!
El tutorial dinámico de Xd ha terminado aquí. Haremos algunas empalmes en el tutorial 3 para entregarlo al programador.
Tutorial 3 Realice el efecto de animación de mover y mover el mouse a través del código.
A continuación, empalmaremos los dos efectos de movimiento que hemos hecho antes en una imagen larga a entregar. Debe cortar el espacio en blanco adicional en la imagen y luego unirlo en una imagen larga vertical. Consulte la imagen a continuación para obtener más detalles:
El paso anterior requiere que utilice un software como PS para obtenerlo usted mismo y recuerde el ancho, la altura y varias imágenes en total de la imagen recortada. Con estos 3 mensajes clave, el programador puede escribir código para completar todo el trabajo.
A continuación, utilizaré mi propio complemento "PS Motion Code Assistant" para completar todo el trabajo, y el complemento generará automáticamente imágenes de crecimiento.
Dirección de descarga del complemento:
Https://www.pslkzs.com/animate/index.php
El siguiente paso se genera con un complemento.Si no está utilizando el complemento, no importa, puede empalmar manualmente las imágenes usted mismo. El empalme manual no es difícil, solo un poco problemático.Las imágenes de crecimiento de empalme son la base de la operación de PS (u otro software de dise?o), no escribiré un artículo aquí.
Paso 1Abra PS, cree un nuevo documento en blanco con una resolución de 1920*1080 de 72 ppp y abra el complemento "Asistente de código de acción PS".
Paso 2Haga clic en el primer botón del complemento para importar. Seleccione la carpeta donde almacenó los fotogramas de la secuencia de exportación C4D (debe haber solo imágenes png en la carpeta, nada más), de modo que todas las imágenes se "colocaran" en el PS.
▲ Puede ver en el panel de capas en la esquina inferior derecha que hay 17 imágenes de 0 a 16.
Paso 3Haga clic en el segundo botón del complemento para ordenar automáticamente. Después de hacer clic, se le dará el orden de las capas.
Paso 4Haga clic en el tercer botón del complemento para minimizar el corte. De esta manera, el espacio en blanco de la imagen se corta automáticamente por usted.
Aunque se ha cortado el exceso de tama?o, el ancho actual del icono sigue siendo de más de 400 píxeles. Solo necesitamos un icono peque?o y lo reduciremos en su conjunto.
Paso 5Imagen> Tama?o de imagen, cambie el ancho a 100, de modo que todo el icono se vuelva más peque?o.
▲ Recuerde marcar el botón de reducción proporcional. De esta manera, el ancho y la altura se vuelven más peque?os en su conjunto.
Paso 6Haga clic en el cuarto botón del complemento, generará un archivo de impulso. Contiene un html y una imagen larga empalmada.
Habrá una carpeta generada en el escritorio, que contiene un archivo html y una imagen png empalmada. Si abre este archivo html, puede ver el código generado.
▲ El asistente de código dinámico es una herramienta para generar efectos móviles cíclicos, pero esta vez no necesitamos este tipo de efectos móviles que se reproducen todo el tiempo. Solo lo necesitamos para generar un buen gráfico largo.
Este es el gráfico largo que genera, que es lo que necesitamos. Muy perfecto.
▲ El complemento también es muy íntimo y le da a la imagen generada un nombre significativo. El nombre de la imagen es: w100h1343steps17.png donde w representa el ancho, h representa la altura de toda la imagen larga y los pasos representan cuántos cuadros hay en total. Es decir: el ancho de una sola imagen peque?a es 100px, la altura es 1347/17 = 79, un total de 17 cuadros. Esta información clave debe usarse para la programación.
En este punto, el trabajo del dise?ador de UI está completo. El resto lo completan los programadores front-end. Si desea aprender código, o los programadores de su familia no saben cómo implementarlo. Puedes ver este video, me grabóEscribir código línea por líneaEl proceso de realización.
Dirección del video tutorial:
鄂公网安备 42010202002647号