Transição de ícone animado no After Effects | Margarita Ivanchikova | Skillshare

Velocidade de reprodução


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Transição de ícone animado no After Effects

teacher avatar Margarita Ivanchikova, Icon and Motion Designer

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

6 aulas (21 min)
    • 1. Preview

      1:57
    • 2. Como preparar ícones no Adobe Illustrator

      5:37
    • 3. Animação no After Effects

      5:16
    • 4. Facilidade de Easy Mask e exportar

      6:09
    • 5. Como salvar um GIF

      1:31
    • 6. Considerações finais

      0:34
  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

1.963

Estudantes

--

Projetos

Sobre este curso

901c185c

Anime ícones para qualquer interface em alguns minutos! Movimento em design E dar vida é muito simples. Vou mostrar uma maneira fácil de animar imagens I’ll

No final, você vai ter:

Precisa mais animações? Faça o download de ícones animados de uma pessoa

Dúvidas sobre o tamanho do de de icone? Confira o artigo sobre o tamanho e o formato certo.

Conheça seu professor

Teacher Profile Image

Margarita Ivanchikova

Icon and Motion Designer

Professor

I love creating animations, vector graphics, clean geometric shapes, and cute characters.

View my profile on Dribbble

Get printed artwork at Society6

 

Visualizar o perfil completo

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%
Arquivo de avaliações

Em outubro de 2018, atualizamos nosso sistema de avaliações para melhorar a forma como coletamos feedback. Abaixo estão as avaliações escritas antes dessa atualização.

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui cursos curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

Transcrições

1. Preview: Eu quero dizer que vem minha masculinidade, Eu consinto e animações esta lição que irá mostrar-lhe uma maneira fácil de fazer dar animações espaço. Eu posso marcar qualquer outra vitória, que é que eu posso jogar um importante papel comunicativo, e eles quase não têm barreiras linguísticas. Além disso, o melhora pode capacidade, fora do dispositivo e interfaces de aplicativo. Além disso, Aikens pode economizar muito espaço na tela, especialmente em design mais bio. Motion é um dedo do pé muito poderoso aplicado, quase qualquer coisa, incluindo interfaces de usuário. Juntamente com as melhores qualidades dos ícones, Motion ajuda a criar uma experiência positiva perfeita a partir de micro direções agradáveis e fáceis. Um dos meus exemplos favoritos é Blaine Pause Button no site do YouTube que você provavelmente nunca notou, mas usou milhares de vezes. Este pequeno detalhe mostra mudança de função fora do mesmo suporte lugar em perigo rosto, e também parece limpo e claro ao remover o forno fora do momento da mudança. As animações GIF podem ser facilmente feitas em adobe depois de rápido. Você também precisará do Adobe Illustrator para preparar um ícone para a animação, e a última coisa que você precisará é de um duplo para a loja. Ele irá ajudá-lo a salvar um arquivo de dar adequado. Se você não tinha esses programas em seu computador, isso não é um problema. Você pode baixá-los por 30 dias. Teste gratuito. Você pode encontrar os links na descrição do projeto um resultado za. Você terá um descanso arised transição animação entre os dois ícones. Não se esqueça de enviar suas informações para a seção do projeto e compartilhar seu trabalho incrível , então vamos mergulhar nele. 2. Como preparar ícones no Adobe Illustrator: Para qualquer um fez um ícone, você precisará obter um para estes. Você pode verificar a seção do projeto lá. Posso ver anexado ou se você quiser qualquer outra coisa que você pode ir? Posso dizer isso calmo? Existem muitas imagens vetoriais livres em diferentes estilos. E para esta lição, usaremos o mais alto. Eu gosto que vai ser a caixa de correio. Certifique-se de escolher o vencedor para executar SVG e em ordem para ter caminhos totalmente credíveis que precisamos para animação. Desmarque esta caixa de seleção SVG simplificada, em seguida, não ame o ícone e certifique-se de baixar o 2º 1 Este será o estado final da animação. Você pode encontrar os mesmos dois ícones na seção do projeto assim que você tiver os dois I pode atordoar carregado. Abra os dois. Administrador, certifique-se de que você tem ambos os estados de Aiken o inicial e o final nesta etapa. É melhor já imaginar qual será sua animação, o que vamos mover e o que acontecerá em nossa animação. A bandeira que está em baixo no primeiro estado estará girando em torno do centro fora deste pequeno círculo preto e a parte invisível dessas coisas aparecerá. Então, a fim de preparar o Aiken para a animação, teremos toe recriar essas partes invisíveis, e teremos toe fazendo o mesmo arquivo. Ambos os estados fora da bandeira, copiar um dos ícones e baseá-lo no arquivo com outro. Você seleciona a bandeira porque nós a manteremos. E lá d selecionar o caminho do corpo da caixa de correio e excluir todo o resto, porque não vamos precisar dos sopros duplos. Vou mudar a cor do seu corpo final só para ver a diferença . Então esta pequena parte será visível no primeiro estado de animação e invisível no final. O que precisamos fazer aqui é fazer uma mesquita que se mova com a bandeira. Ele girará em torno deste centro do círculo, e aparecerá ao longo do caminho da bandeira. Então nós apenas escolhemos um retângulo e criamos o mesmo tamanho nós esta parte invisível. Ok, então a máscara também está pronta, então estamos quase prontos para animador Rikers. Só precisamos criar um fundo que não seja visível na inovação final que só precisávamos. Mantenha o tamanho. Neste ponto, é melhor do pé já. Decida o tamanho de sua animação futura, porque será difícil escalar a animação em adobe após efeitos e não ter problemas com Uncle Points. E também é impossível escalar uma animação GIF para não perder a desigualdade. Então pense no tamanho da sua futura informação aqui neste momento. E se você tiver algum trabalho, basta verificar nosso artigo sobre como escolher o tamanho certo e quatro meses para o ícone. E lá você pode ver o que é melhor para diferentes sistemas e diretrizes. Nesta lição, estamos fazendo o tamanho padrão fora do ícone para IOS. Tem 50 pixels quadrados. Então agora vamos fazer uma das partes mais importantes. Vamos agrupar as coisas certas para que elas fiquem na mesma camada depois. Então eu vou agrupar para partes de uma bandeira e duas partes fora da outra apenas que eles não estão separados. Mais tarde, deixo a mesquita em paz. Deixo este círculo sozinho e deixo que concedido para que todo o resto que não são máscara, bandeiras círculo e fundo são agrupados. E o importante está aqui para liberar duas camadas para que tudo o que está agrupado apareça uma camada separada. Aqui você está colocá-lo fora da camada um. Exclua o ar até e renomeie as camadas para que elas tenham os nomes certos. Então, estamos todos prontos. O que precisamos fazer agora é salvar este arquivo não como svg Juan, mas como Adobe Illustrator um para que possamos importá-lo em um adobe após efeitos. 3. Animação no After Effects: quando você abrir após efeitos, clique em nova composição e defina o tempo aqui. Isso afetará todas as futuras composições que animamos. Eu considero, ou você pode ajustar o tempo mais tarde durante o seu trabalho. Para estes, clique com o botão direito do mouse na composição na janela do projeto e escolha as configurações de composição. E aqui você pode definir o tempo e o tamanho da composição a qualquer momento do seu trabalho. Normalmente, eu disse 14 quadros para transições animadas de Aiken como a que vamos fazer. Ele tornará uma animação visível, mas ainda assim rápida para que as animações não interrompam o usuário, e eles não fariam muito ruído visual. Quando não for necessário, deixarei essa composição agora. Em seguida, para a próxima etapa, vá para importar arquivo e, em seguida, escolha o arquivo do Adobe Illustrator que acabou de criar e na importação, escolhendo tamanhos de camada retidos de composição. Clique no botão do tribunal, em seguida, duplo cle vem a composição que foi criada automaticamente aqui. Escolha as camadas que eram importantes diretamente do fora do arquivo ilustrador, clique com o botão direito sobre eles e escolha grandes jogadores forma de Victor Files e excluir os arquivos do Illustrator, e você terá todos os banhos de ervas editar que vamos necessidade para a animação. Vamos animar esta pequena escória para girar em torno do centro deste pequeno círculo negro e nos tornar esta grande bandeira que está para cima. Amplie você até a linha do tempo, escolha o primeiro trem e, em seguida, escolha a camada sinalizada para baixo , clique na seta ao lado do nome da camada e abra as características de transformação. Vamos mudar a rotação primeiro, mas antes de mudá-la, você deve ter em mente que esta camada girará em torno do ponto de ancoragem. Não é o centro da rotação que queria ser assim atinge um ponto de ancoragem para e arrastar este ponto de âncora direto pelo lugar onde queríamos estar. Em seguida, clicamos no relógio ao lado da característica de rotação, para corrigir a posição fora da bandeira em como é agora. Então vamos para a 11ª primavera. Então você pode arrastar, comer para sentar valor, para você pode apenas digitá-lo em assim como você pode ver durante o tempo a bandeira está se movendo, mas podemos ver que é um pouco menor do que eles grande bandeira que nós queríamos se tornar, comer para sentar valor, para você pode apenas digitá-lo em assim como você pode ver durante o tempo a bandeira está se movendo, mas podemos ver que é um pouco menor do que eles grande bandeira que nós queríamos se tornar, voltar para a terceira franja e clique na próxima posição do relógio e voltar para a 11ª primavera e escolher o dedo do pé de seleção. Nós movemos nossa bandeira segurando turno direito para o lugar onde queria dedo do pé no final da animação. Então vamos ver o que está acontecendo. Está se movendo para o lugar onde o bico viado fica parado. Agora vamos tornar o grande faltado invisível para ver o que está acontecendo. Você pode ver que esta lacuna legal aqui tem que ser corrigida, e é isso que vamos fazer agora. Vamos ao conteúdo. Vamos ver o que cresceu rio ainda água. Então o caminho que queremos corrigir sua ferramenta de grupo. Abrimos isso e vamos ao banho característica. Então vamos para o terceiro quadro chave para corrigi-lo no estado inicial, e vamos para o 11º quadro chave para mudá-lo até o fim, retomar o mental e re clique com shift para selecionar alguns pontos e selecionar o bom e, em seguida, arrastar segurando shift este ponto um pouco para baixo. Portanto, não há Deus senão mais. Agora podemos ver que é quase perfeito. A única coisa que não é nada. Eu podia ouvir o seu estudo. Este caminho está indo um pouco fora dos limites do círculo negro, mas não é. O problema irá corrigi-lo um pouco mais tarde. Olhos não um pouco na linha do tempo apenas para ver tudo no total, e eu aquecê-lo, mas no meu teclado para ver apenas os quadros de teclas ou sinalizar para baixo contornos. 4. Facilidade de Easy Mask e exportar: Vou tornar o movimento um pouco mais lento no início, mais rápido no meio e mais lento no final para que pareça um pouco mais natural para isso. Eu simplesmente seleciono os quadros-chave e pressione Shift F nove e todos os quadros-chave são convertidos para manter amigos com estes, pode não ser tão perceptível agora. Eles podem corrigi-lo, indo ao editor gráfico e exigente e o nariz e fazendo o gráfico de velocidade parecer que você poderia fazer. É ainda mais lento no começo, no final. Ok, agora, desta vez para consertar essas células de porco meio transparentes e você apenas encontrar o ponto em que é o mais visível. E então você vai para este material característico, e então você escolhe novamente o ponto, e com ele, o lugar onde você quer que ele esteja. Então você apenas rever a animação e ok, você pode ver que nada é sábio. Está bem? Você não é super. Agora está perfeito. Então a bandeira está pronta, e agora eu estou indo para animar thes retângulo azul para que ele vai se mover junto com a bandeira e esconder e aqueles seção fora de meus livros parte corpo e eu vou colocá-lo sobre a caixa de correio Slayer. E aqui vamos fazer aproximadamente a mesma coisa que fizemos com o Flag. Vamos mover o ponto de ancoragem primeiro para que ele fique na agulha fora do círculo preto, e agora você pode ver que é uma posição fora do estado final. Então vamos para o 11º quadro e corrigir a característica de irritação aqui mesmo. Em seguida, eles vão para o terceiro quadro e ou arrastam ou digitando 90 graus aqui para que possamos ver que ele está se movendo um pouco. Não como o Flag. Então vamos fazer com a mesma facilidade. E agora podemos verificar se segue a bandeira. Ainda não, porque não editamos. editor de gráficos dele. Então vamos fazer isso e fazer o enxerto Luke aproximadamente igual ao da bandeira. Então vamos checar você. Precisamos fazer isso um pouco mais rápido, em algum lugar mais. Talvez um pouco de chão suficiente. Isso está tudo bem. Ele segue a bandeira na palavra lugares deve. Agora podemos ver um pouco de um problema com a máscara quando ela sobrepõe um pouco de batida partes do corpo da caixa de correio , não um lugar onde deveria estar. Então o que podemos fazer aqui usado para ir para o caminho do conteúdo e podemos selecioná-los dedo e selecionar dois pontos que queremos dedo e movê-los um pouco mais para baixo para que ele não solte o corpo da caixa de correio onde ele atira. Ok, agora é hora de tornar esta mesquita invisível e é super fácil. Você acabou de selecionar meus livros delinear Caçadora. E neste cone, você clica e sapatos no menu? Encontrarei os contornos da máscara do veredicto. Certifique-se de que este nome é o mesmo nome que a camada de máscara. Você pode ver que o retângulo azul é visível agora e a parte que ele esconde é Olsen. Vamos ver o que temos aqui. Isso é muito bom. E estamos aqui em baixo. Se você estiver satisfeito com este resultado, você pode salvar este projeto e, em seguida, você ir para o especialista após o fornecedor morto. E aqui bem, puramente em levá-lo onde você pode escolher as preferências para o especialista. E como você se lembra, queremos que a animação seja com fundo transparente. Então nós escolhemos o leilão sem perdas com Alfa e em orderto fundo desaparecer. Vamos apagar o fundo lá. Aqui você pode escolher a pasta e o nome da animação. Digamos Preto ou vale e Glick Render Button. Então, a primeira parte da animação que está indo para um lado está pronta. Agora selecione todas as camadas, todos os contornos, clique com o botão direito sobre elas e clique em recompor e o nome aqui não importa. E aqui, você direito, clique no jogador na seção da linha do tempo, em seguida, escolha tempo e tempo, camada inversa e salvar. O projeto começou com outro nome e agora ir toe exportação para Render Queue disse que as mesmas preferências sem perdas com alfa e escolher a pasta. Mas o nome agora será preto para trás Clique em Render de volta e agora você terá que arquivos de vídeo . Se você é animação, temos fundo transparente. 5. Como salvar um GIF: Agora nós estamos indo para ir para o tempo antes do show, a fim de re salvar nossas animações no antigo arquivo U Goto, Importar quadros de vídeo duas camadas e escolher que seguro como informações de encaminhamento. Você abre isso, OK? E você tem um arquivo. Temos um fundo transparente. Agora você vai para a exportação de arquivos segura para a Web. E aqui por favor lembre-se das opções de loop de Tau Chou uma vez porque nós não queríamos que o dedo do pé de animação jogasse uma e outra vez só uma vez Aqui no cofre, você pode escolher a pasta para a animação GIF e dar-lhe o nome ea exportação é Pronto. Agora você faz a mesma coisa com a segunda animação, você vai novamente seguro e escolher novamente opções de loop uma vez que você dar-lhe lyngen e salvá-lo. Então estamos praticamente prontos para ter ambas as nações defendendo. Vamos abri-los em algum navegador e aqui você pode ver é lugar meses e paradas. Ele é aberto exatamente do mesmo tamanho que você criou. Ele tem um fundo transparente e agora estamos feitos 6. Considerações finais: se você está procurando uma idéia para uma transição Aiken animada que é diferente da caixa de correio que eu mostrei, você pode conferir a página com as outras animações que eu fiz lá fora fora do mesmo tipo que a desta classe. Se você deseja saber uma maneira fácil de fazer qualquer um deles, por favor me avise. Espero que goste da lição. E se tiver alguma dúvida, não hesite em contactar-me. Espero ver seu projeto em breve. E boa sorte, Teoh, Por