Gráficos vetoriais SVG: ilustrar e animar com código

Um curso de user195228 surname195228 , Web designer

Web designer. Barcelona, Espanha.
Ingressou em Abril de 2015

Aprenda a trabalhar com ilustrações vetoriais em seus sites de internet, da linha à animação interativa

98% avaliações positivas (266)
8,780 alunos
Áudio: Espanhol
Espanhol · Inglês · Português

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.

Ler mais ↓

O que você aprenderá neste curso online?

32 aulas & 28 downloads

Etiquetas e atributos básicos
5 minutos, 16 segundos
Estilos no SVG
4 minutos, 57 segundos
Rótulo do traçado (caminho)
4 minutos, 45 segundos
O atributo viewbox
4 minutos, 6 segundos
Tags de texto
6 minutos, 55 segundos
  • 98% avaliações positivas (266)
  • 8,780 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

8,780 Alunos
266 Avaliações
98% Avaliações positivas

user195228 surname195228

Professor Plus
Web designer

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
    Plus

    Se 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.

Se você é um membro Plus, você receberá seu certificado personalizado imediatamente após concluir qualquer curso que tenha comprado. Todos os seus certificados estarão disponíveis na seção Certificados do seu perfil. Você poderá descarregar os certificados em PDF e compartilhar o link online. Saber mais sobre os certificados.
Gráficos vetoriais SVG: ilustrar e animar com código. Curso de Web, e App Design por user195228 surname195228

Gráficos vetoriais SVG: ilustrar e animar com código

Um curso de user195228 surname195228
Web designer. Barcelona, Espanha.
Ingressou em Abril de 2015
  • 98% avaliações positivas (266)
  • 8,780 alunos