Olá a todos, eu souLicen?a cinza, Estou muito feliz em trazer a todos um tutorial de produtos secos.
O conteúdo do tutorial é 100% original por mim, seja o design ou a parte do código.O código está pronto para todosé muito simples que você pode usar.Código aberto sem direitos autorais, todos podem usá-lo com confian?a~
N?o sei quando, muitos dos principais sites de nuvem da fábrica se tornaram o uso deste pequeno ícone muito tridimensional,A entrada e a saída do mouse ter?o um efeito interessante.
▲ A página inicial de AliyunHttps://www.aliyun.com/
▲ O efeito de mover o mouse para dentro e fora do pequeno ícone
▲ Página inicial da nuvem Tencent
▲ O efeito de mover o mouse para dentro e fora do pequeno ícone
Para ajudar todos a entender o processo de realiza??o desse efeito de movimento, Ah Hui escreveu um tutorial muito detalhado. Ensine você a fazer e alcan?ar esses efeitos.Para designers, você também pode aprender apenas a fazer a parte do ícone e deixar o programador Copy meu código diretamente. 100% de garantia de que seu design pode pousar.
N?o há muita bobagem, vamos dar uma olhada nos resultados finais que eu fiz (visite o link azul abaixo para ver):
Https://www.pslkzs.com/demo/cloud/index.html
▲ Este é o efeito que desenvolvi e produzi.
Os modelos no tutorial s?o muito simples, porque eu n?o posso te ensinar modelagem, ilumina??o e renderiza??o por horas... Eu tenho que usar o menor tempo para você entender todo o processo de realiza??o. No futuro, você pode usar sua própria maneira de completar seus próprios pequenos ícones e efeitos de movimento estéreo Alibaba Cloud.
Nota especial:Este artigo n?o tem nada a ver com Alibaba e Tencent. N?o sei como seu design é feito e como o código é escrito. Eu apenas uso minha experiência para pensar sobre os resultados que eles fazem e ensinar a todos que podem fazer e alcan?ar efeitos semelhantes.
Para dar ao designer júnior uma vis?o mais clara de todo o processo, gravei um tutorial em vídeo muito detalhado,Eu recomendo que você aprenda através do vídeoIsso garante que cada etapa seja muito clara. Se você n?o está na empresa para assistir a vídeos, você também pode assistir diretamente ao nosso tutorial gráfico.
-Se??o de tutoriais em vídeo-
Todos copiam manualmente o link de texto sublinhado da fita azul abaixo e v?o para a esta??o b para verificar.
Vídeo de ensino 1:"Prelúdio diário"
Https://www.bilibili.com/video/BV1sS4y1o7Yk
Vídeo de ensino 2:"Usando C4D para fazer pequenos efeitos de modelagem"
Https://www.bilibili.com/video/BV1sS4y1o7Yk? P = 2
Vídeo de ensino 3:"Use o Adobe Xd para criar pequenos ícones em camadas"
Https://www.bilibili.com/video/BV1sS4y1o7Yk? P = 3
Vídeo de ensino 4:"Realizar efeitos com código"
Https://www.bilibili.com/video/BV1sS4y1o7Yk? P = 4
é enfatizado repetidamente que os designers de interface do usuário n?o precisam aprender a escrever código. Você só precisa se concentrar em como a imagem da parte de entrega é feita. Claro, muitas habilidades n?o pressionam o corpo, e assistir a todo o vídeo é mais propício para que seu conhecimento se torne mais amplo. Seja mais claro sobre o fluxo de trabalho e a rela??o entre você e P & D,Quanto mais você sabe, mais você tem o direito de falar e ninguém pode negar seu design com "inatingível".
-Se??o de tutoriais gráficos-
Tutorial 1:C4D faz um efeito de ícone estereoscópico
Efeito final
Passo 1Abra C4D para criar um novo cubo.
Passo 2Use a ferramenta de zoom para esmagar o cubo um pouco (você também pode ajustar o painel de propriedades no canto inferior direito, digite o valor específico)
Passo 3Ctrl + C para copiar um, Ctrl + V para colar. Em seguida, use a ferramenta móvel para arrastar a cópia para cima. Ent?o você tem 2 cubos.
Passo 4Use a ferramenta de zoom novamente para esmagar o topo um pouco.
Passo 5Copie o cubo no topo e arraste para cima. Dessa forma, você completa o ícone inteiro.
▲ Sim, é simples assim.
Passo 6Clique duas vezes na moldura vermelha no canto inferior esquerdo para adicionar um material.
▲ Clique duas vezes no total 3 vezes para que você possa criar 3 novas bolas de material.
Passo 7Selecione a bola de material que você acabou de criar e mude para branco, laranja e preto.
▲ Preste aten??o no canto inferior esquerdo, agora existem três bolas de material.
Passo 8Arraste três bolas de material para três cubos.
▲ Preste aten??o no canto superior direito, cada cubo tem uma bola de material. Dessa forma, estamos prontos com ícones de material.
Passo 9Selecione o cubo branco no topo. O quadro 0 é um quadro-chave para o atributo H K nas coordenadas no canto inferior direito.
Passo 10Na posi??o do 16 ° quadro, um quadro-chave é K para o atributo H e o atributo é alterado para 180 °
Dessa forma, você completa a anima??o de rota??o no topo. O efeito é mostrado abaixo:
Da mesma forma, contra o quadro K do cubo laranja. Toda a anima??o está pronta. Mas desta vez deixamos o cubo laranja girar de volta (o atributo H do 16 ° quadro é alterado para-180 °) para que todo o efeito de movimento seja feito.
Passo 11Clique em Renderizar> Editar configura??es de renderiza??o. Em seguida, selecione o formato de entrada é PNG e certifique-se de marcar o canal alfa. O PNG exportado é um fundo transparente.
A etapa 12 muda o quadro de saída para "manual", o quadro inicial é 0 e o quadro final é 16.
▲ Porque nossa anima??o fez 16 quadros.
Etapa 13 Clique Renderiza??o> Adicionar à fila de renderiza??o.
Etapa 14 Clique o bot?o de renderiza??o. Desta forma, de 0 a 16 quadros, um total de 17 imagens s?o renderizados.
▲ Haverá uma barra de progresso ciano no meio. Dependendo da configura??o do seu computador, decida a velocidade de renderiza??o.
Estas s?o as 17 imagens renderizadas, todas s?o imagens PNG com fundo transparente, muito perfeitas. Vamos fazer algumas costuras no tutorial 3 para entregá-las ao programador.
Tutorial 2 Use o Adobe Xd para criar um calendário com pequenos efeitos de a??o em camadas
Efeito final
A origem deste tutorial é que alguns alunos perguntaram no grupo WeChat se há alguma maneira rápida de fazer na imagem abaixo. Ent?o, pensei na fun??o de transforma??o 3D do Adobe Xd. Ele foi animado.
▲ Esta imagem vem de uma captura de tela de amigos do grupo WeChat. N?o sei qual grande deus fez isso. Isso é apenas para fazer tutoriais gratuitos, n?o comercial, se você acidentalmente infringir seus direitos ou se você n?o estiver feliz, eu usei suas fotos, você pode me enviar para excluir.
Passo 1Desenhe uma vis?o frontal do calendário dentro do Adobe Xd, eu simplifico aqui, desenhando apenas 4 retangulos arredondados. E pegue um grupo dentro.
Passo 2Selecione este grupo e clique no bot?o Convert 3D à direita.
Arraste o ícone do calendário com uma sensa??o de perspectiva.
Passo 3Selecione a camada de bot?o verde e ajuste o eixo z para 250. Dessa forma, o bot?o é suspenso.
Passo 4Selecione o retangulo branco, ajuste seu eixo z para 150. Desta forma, o retangulo branco também foi suspenso.
Passo 5Selecione a penúltima camada, ajuste-a com um eixo z de 80.
Desta forma, faremos o efeito final desse efeito de movimento. Em seguida, só precisamos exportar várias imagens para concluir todo o trabalho.
Passo 6Selecione este grupo, altere o nome do grupo para "Grupo 20" e Ctrl E exporte a imagem PNG. Essa é a imagem do nosso 20 ° quadro. Para ser preciso, é a imagem do nosso último quadro, porque provavelmente n?o haverá tantos quadros 20.
Passo 7Altere o eixo z do retangulo da terceira camada para 0 (originalmente era 80) e mude o nome do grupo para "Grupo 19". Depois de selecionar o grupo novamente, Ctrl + E exporta a imagem do 19 ° quadro.
Passo 8Mude o eixo z do retangulo branco para 75 (originalmente 150) e mude o nome do grupo para "grupo 18". Depois de selecionar o grupo novamente, Ctrl + E exporta a imagem do 18 ° quadro.
Passo 9Altere o eixo z do retangulo branco para 0 (originalmente era 75) e mude o nome do grupo para "grupo 17". Depois de selecionar o grupo novamente, Ctrl + E exporta a imagem do quadro 17.
Passo 10Selecione a camada do bot?o verde, altere diretamente o eixo z para 0 e, em seguida, altere o nome do grupo para "Grupo 16". Depois de selecionar o grupo novamente, Ctrl + E exporta a imagem do 16 ° quadro.
Até agora, o eixo Z tem um total de 5 fotos. Essa é toda a anima??o do eixo Z. Em seguida, fazemos uma imagem animada do angulo de rota??o novamente. Depois de selecionar todo o grupo, você encontrará a transforma??o tridimensional onde a rota??o do eixo x foi ajustada manualmente para 12 °, e a rota??o do eixo y foi ajustada para-43 ° por nós
Passo 11Gire o eixo y para-33 ° e, em seguida, mude o nome do grupo para "grupo 15". Depois de selecionar o grupo novamente, Ctrl + E exporta a imagem do 15 ° quadro.
Passo 12Gire o eixo y para-23 ° e, em seguida, mude o nome do grupo para "grupo 14". Depois de selecionar o grupo novamente, Ctrl + E exporta a imagem do 14 ° quadro.
Passo 13Gire o eixo y para-13 ° e, em seguida, mude o nome do grupo para "grupo 13". Depois de selecionar o grupo novamente, Ctrl + E exporta a imagem do quadro 13.
Passo 14Gire o eixo y para-0 ° e, em seguida, mude o nome do grupo para "grupo 12". Depois de selecionar o grupo novamente, Ctrl + E exporta a imagem do 12 ° quadro.
Todos nós fizemos a anima??o da rota??o do eixo y. Em seguida, fizemos a anima??o da rota??o do eixo x. O método é basicamente o mesmo.
Passo 15Gire o eixo x para 6 ° e, em seguida, altere o nome do grupo para "Grupo 11". Depois de selecionar o grupo novamente, Ctrl + E exporta a imagem do 11 ° quadro.
Passo 16Gire o eixo x para 0 ° e, em seguida, altere o nome do grupo para "Grupo 10". Depois de selecionar o grupo novamente, Ctrl + E exporta a imagem do quadro 10.
Dessa forma, todo o nosso calendário está chegando. Todas as imagens de quadros necessários para a anima??o já foram tiradas. Olhando para o monte de fotos que acabei de salvar, existem apenas 11 fotos do grupo 10-grupo 20. Ou seja, na verdade temos apenas 11 quadros.
Haha, talvez você n?o pense nisso, o processo de produ??o do nosso efeito é t?o simples e rude. No processo de cria??o, devemos pensar com ousadia e tentar com bravura.Os irm?os se lembraram: enquanto ela for corajosa, também podemos deixá-la tirar licen?a maternidade!
O tutorial de a??o do Xd termina aqui, faremos algumas costuras no tutorial 3 para entregá-los ao programador.
O tutorial 3 usa o código para realizar o efeito de anima??o da entrada e saída do mouse.
Em seguida, emendamos os dois efeitos de a??o que fizemos antes em uma imagem longa a ser entregue. Você precisa cortar o espa?o em branco extra na imagem e depois costurar em uma longa imagem vertical. Para detalhes, veja a imagem abaixo:
As etapas acima exigem que você use um software como o PS para fazê-lo manualmente e lembre-se da largura, altura e número total de fotos após o corte. Com essas 3 informa??es-chave, o programador pode escrever o código para fazer todo o trabalho.
Em seguida, usarei o plug-in "PS Efication Code Assistant" que desenvolvi para concluir todo o trabalho, e o plug-in produzirá automaticamente imagens de crescimento.
Endere?o de download do plugin:
Https://www.pslkzs.com/animate/index.php
As etapas seguintes s?o geradas com um plug-in.Se você n?o usar o plugin, n?o importa, você pode costurar as imagens manualmente. A costura manual n?o é difícil, é apenas um pouco problemático.A costura de imagens de crescimento é a base para a opera??o PS (ou outro software de design). N?o vou escrever artigos para explicar aqui.
Passo 1Abra o PS, crie um novo documento em branco com uma resolu??o de 1920*1080 de 72dpi e abra o plug-in "PS Effication Code Assistant".
Passo 2Clique no primeiro bot?o do plug-in para importar. Selecione a pasta onde você armazenou os quadros de sequência de exporta??o C4D antes (deve haver apenas imagens png na pasta, n?o mais nada), para que todas as imagens sejam "inseridas" no PS.
▲ Você pode ver no painel de camadas no canto inferior direito, existem 17 fotos de 0 a 16.
Passo 3Clique no segundo bot?o do plugin para classificar automaticamente. Depois de clicar, a ordem das camadas está pronta para você.
Passo 4Clique no terceiro bot?o do plug-in para minimizar o corte. Desta forma, o espa?o em branco da imagem será automaticamente cortado para você.
Embora o tamanho extra tenha sido cortado, a largura atual do ícone ainda é superior a 400 pixels. Precisamos apenas de um pequeno ícone e reduzi-lo como um todo.
Passo 5Imagem> Tamanho da imagem, mude a largura para 100 para que o ícone inteiro fique menor.
▲ Lembre-se de marcar o bot?o de escala reduzida. Desta forma, a largura e a altura s?o reduzidas como um todo.
Passo 6Clique no bot?o Plugin 4 e ele irá gerar um arquivo de a??o. Contém um html e um gráfico longo emendado.
Haverá uma pasta gerada na área de trabalho com um arquivo html e uma imagem png emendada. Se você abrir este arquivo html, poderá ver o código gerado.
▲ O assistente de código de efeito de movimento é uma ferramenta para gerar efeitos de a??o cíclica, mas desta vez n?o precisamos desse efeito de a??o que está sendo reproduzido o tempo todo. Nós só precisamos que isso gere um bom gráfico longo.
Este é o gráfico longo que ele gera, é o que precisamos. Muito perfeito.
▲ O plug-in também é muito íntimo, dando à imagem resultante um nome significativo. O nome da imagem é: w100h1343steps17.png onde w representa a largura, h representa a altura de todo o gráfico longo e steps representa quantos quadros existem. Ou seja: a largura de uma única imagem pequena é 100px, a altura é 1347/17 = 79 e há um total de 17 quadros. Essas informa??es cruciais devem ser usadas para programa??o.
Aqui, o trabalho do designer da interface do usuário está completo. O resto é feito por programadores front-end. Se você quer aprender código ou se os programadores de sua casa n?o sabem como implementá-lo. Você pode assistir a este vídeo que me gravou dentroEscrever código linha por linhaO processo de realiza??o.
Endere?o do tutorial em vídeo:
鄂公网安备 42010202002647号