Gráficos vetoriais SVG: ilustrar e animar com código
Um curso de Javier Usobiaga Ferrer , Web designer
Aprenda a trabalhar com ilustrações vetoriais em seus sites de internet, da linha à animação interativa

Aprenda a trabalhar com ilustrações vetoriais em seus sites de internet, da linha à animação interativa
Javier Usobiaga - Web Designer e co-fundador da Marta Armada do estudo Swwweet - vai ensiná-lo a tirar o máximo proveito do formato SVG (Scalable Vector Graphics), um tipo de arquivo vetorial para uso em navegadores que surge como alternativa ao JPG, PNG e GIF e que se caracteriza por ser escalável, interativo e responsivo. Você descobrirá seus efeitos, filtros e animações e poderá criar ilustrações e peças animadas com código HTML, CSS e JavasScript.
Javier também ensina no Domestika o curso Introdução ao Desenvolvimento Responsivo da Web]. com HTML e CSS " , onde você pode aprender os fundamentos do Frontend Web Development, conhecimento que virá muito bem como uma base para aproveitar ao máximo este curso de gráficos vetoriais SVG.
O que você aprenderá neste curso online?
32 aulas & 28 downloads
- 98% avaliações positivas (270)
- 9,063 alunos
- 32 aulas (2h 2m)
- 28 recursos adicionais (6 arquivos)
- Online e no seu ritmo
- Disponível no aplicativo
- Áudio: Espanhol
- Espanhol · Inglês · Português
- Nível: Iniciante
- Acesso ilimitado para sempre
Qual é o projeto deste curso?
Você fará uma ilustração com elementos vetoriais animados. O assunto é gratuito e você pode fazer um projeto tão simples ou complexo quanto quiser, colocando em prática as ferramentas que você viu durante o curso.

Projetos de alunos do curso
Para quem é este curso online?
Para programadores, designers, ilustradores e qualquer um que tenha interesse em design e curiosidade ao desenvolver novos projetos com HTML e CSS.
Requisitos e materiais
Conhecimento prévio básico de HTML e CSS é necessário.
Com relação aos materiais e ferramentas necessários para concluir o curso, você deve ter um computador, um editor de código e um editor de gráficos vetoriais (como Illustrator, Sketch, Inkscape ou similar).

Avaliações

Javier Usobiaga Ferrer
Um curso de Javier Usobiaga Ferrer
Javier Usobiaga é Web Designer há 10 anos e co-fundador do estúdio Marta Armada Swwweet, especializado no design de webs responsivas desde a concepção inicial até o desenvolvimento de front-end.
Ele também gosta muito de sua faceta como professor de Web Design em renomados workshops e escolas como Elisava, IDEP.
A Usobiaga entende a web como um todo, não só o quão bonita ela pode ser na tela do computador, mas também sua usabilidade em diferentes dispositivos e circunstâncias.
Em suas palavras "Eu acho que tão importante quanto a estética é a rapidez com que carrega ou o quão bem ele responde, e eu acho que na nossa indústria frequentemente esquecemos disso."
Conteúdo
-
U1
Introdução
-
Apresentação
-
Influências
-
-
U2
SVG Basic
-
Etiquetas e atributos básicos
-
Estilos no SVG
-
Rótulos de linha, polilinha e polígono
-
Rótulo do traçado (caminho)
-
O atributo viewbox
-
Tags de texto
-
-
U3
Ferramentas e otimização
-
Editores de vetores e exportação
-
Organização do SVG
-
Otimização SVG
-
-
U4
Incorporando SVG à web
-
Formas de carregar um SVG na web
-
Sistemas de ícones
-
SVG responsivo
-
Acessibilidade no SVG
-
Suporte nos navegadores
-
-
U5
Efeitos no SVG
-
Transformações
-
Gradientes
-
Padrões
-
Máscaras e traçados de recorte
-
Filtros
-
-
U6
Animação no SVG
-
Tipos de animação no SVG
-
Animação com CSS
-
Animação de sequência
-
Animação desenhada
-
Animação interativa
-
-
U7
Interação e animação avançada
-
Animação com JavaScript
-
Bibliotecas JavaScript para animação
-
Caixa de seleção animada
-
Mutação (morphing) em SVG
-
Animação ao longo de um acidente vascular cerebral
-
Inspiração
-
-
PF
Projeto final
-
Gráficos vetoriais SVG: ilustrar e animar com código
-
O que esperar de um curso da Domestika
-
Aprenda no seu ritmo
Aproveite para aprender desde casa, sem um horário fixo e no seu ritmo. É você quem define sua disponibilidade.
-
Aprenda com os melhores profissionais
Aprenda métodos e técnicas fundamentais com os melhores profissionais do setor criativo.
-
Conheça os maiores especialistas
Cada professor compartilha seus conhecimentos com entusiasmo e explicações claras, oferecendo uma perspectiva profissional em cada aula.
-
Certificados
PlusSe você for um membro Plus, obtenha um certificado personalizado assinado pelo professor de cada curso que concluir. Compartilhe-o em seu portfólio, mídia social ou onde quiser.
-
Sente-se na primeira fila
Com vídeos da melhor qualidade, você não perderá nenhum detalhe! Graças ao acesso ilimitado, você pode assistir às aulas todas as vezes que precisar para aperfeiçoar sua técnica.
-
Compartilhe conhecimentos e ideias
Pergunte, peça opiniões e ofereça soluções. Compartilhe sua experiência de aprendizagem com outros alunos da comunidade tão criativos como você.
-
Conecte-se a uma comunidade criativa global
Esta comunidade acolhe milhões de pessoas do mundo todo, curiosas e apaixonadas por descobrir e expressar sua criatividade.
-
Assista a cursos produzidos de maneira profissional
A Domestika seleciona cuidadosamente seus professores e produz cada curso internamente para garantir uma experiência de aprendizagem online excelente.
Perguntas frequentes
Os cursos da Domestika são aulas online que lhe permitem aprender uma série de ferramentas e habilidades para realizar um projeto concreto. Cada etapa do projeto combina vídeos e textos, além de instruções complementares. Os cursos também oferecem a oportunidade de compartilhar seus próprios projetos com outros usuários e com o professor, criando assim uma comunidade em torno do curso.
Os cursos são 100% online, portanto, assim que são publicados, os cursos começam e terminam quando você quiser. Você determina o ritmo da aula. É possível voltar para ver o que lhe interessa, pular o que você já sabe, fazer perguntas, resolver dúvidas, compartilhar seus projetos e muito mais.
Os cursos são divididos em diferentes unidades, cada uma inclui aulas, textos explicativos, tarefas e práticas para completar seu projeto passo a passo, recursos e documentos complementares. Você também terá acesso a um fórum exclusivo no qual poderá interagir com todos os alunos do curso e o professor, bem como compartilhar seus trabalhos e o projeto que realizar, criando uma comunidade em torno do curso.
Você pode resgatar um curso que recebeu de presente acessando página de resgate e inserindo o código de presente.
prdpkmark
excellent course for beginners.
Ver tradução
Ocultar tradução
camilo0024
excelente curso lo recomiento explica muy bien y se entiende todo
Ver tradução
Ocultar tradução
phoenixbrazil
Excelente curso!! Ótima didática do Instrutor!!! Parabéns!!! Recomendo a todos!!
chaparro_fran
(y)
Ver tradução
Ocultar tradução
claudio.lozano
PlusEs una buena introducción a SVG. Ayuda a tener una visión general y sobre la organización y uso de herramientas.
Ver tradução
Ocultar tradução