Twitter Facebook Google+ Vimeo YouTube Pinterest Dribbble

Integração Illustrator / Edge


Semana passada eu tive o prazer de participar do DesignPhoto Conference, em Teresina, onde falei pela primeira vez sobre essa nova ferramenta da Adobe, o Adobe Edge, e como ele pode trabalhar junto com o Illustrator.

O Edge é um programa que a Adobe fez pra facilitar a criação de animações em HTML5, JavaScript e CSS3. Imagino que eles estejam admitindo a morte do Flash na web, e estão se preocupando com essas tecnologias que estão se tornando padrão nos browsers modernos. Mas isso não significa que quem já usa o Flash, ou quem ainda está aprendendo, tenha que parar tudo e olhar pro Edge. O Flash ainda é um software incrível de animação e dá saída pra vídeo, que pode ainda ser usado na web ou em outros meios.

Como a coisa ainda está muito no início (hoje o Edge só está disponível no Adobe Labs, pra teste), eu imagino que no futuro essa integração vai ser mais simples. No caso o que eu faço pra enviar uma arte pra ser animada no Edge é usar um script pra salvar cada camada do Illustrator como um arquivo SVG (Scalable Vector Graphic), que é o formato vetorial aceito pelo HTML5. Daí eu uso as ferramentas ainda rudimentares do Edge pra criar uma animaçãozinha básica.

Fiz esse vídeo porque senti um grande potencial no Edge, e acho que a Adobe deve continuar a investir seus esforços nessas tecnologias, pra não deixar a peteca cair como eles andaram fazendo com a insistência do Flash. O programa ainda é bem cru, mas não custa nada já conhecer o funcionamento, as limitações desse tipo de saída e o fluxo que isso pede, pra podermos explorar animação pra web de forma mais leve e seguindo os padrões de hoje em dia.

Baixe o meu script Save Layers as SVG aqui.

  • Muito Massa esse EDGE, muito show ….
    farraco vc tem alguma video aula de photochop para web??

    Joao Paulo Neves. Teresina-pi

    • Falae xará
      Ainda não fiz nada de Photoshop pra web não .. Até porque eu uso o Illustrator pra web ! 
      Mas é uma boa .. Talvez mostrar como fazer css sprites no PS e codificar um rollover simples ..

    • Joaquim Tiburcio

      photoChop foi tenso

  • Wellington wip

    Valew, ótima aula João Faraco. Ei amigo uma pergunta:
    Como é o procedimento para criar script, e fazer as junções dos mesmos?
    Gostei muito dessa aula.
    Que Deus vos abençoe com saúde…

    • Basta abrir o script em um editor de texto e editar. A maioria é em JavaScript.

      • Wellington wip

        Valew

  • Thi Hsa

    Olá João, 

    Seus vídeos são incríveis, muito obrigado pelas dicas. Eu preciso fazer um trabalho em HTML5 e descobri essa nova ferramenta da adobe por você e melhor que isso, aprendi usar com seu vídeo.

    Continue assim nos ajudando com seu talento!

    Abraços!

  • Dayanadcf

    Olá joao!

    Gostei muito do video, você conhece o novo pré-lançamento da adobe
    Adobe MUSE – Criar e publicar sites HTML sem escrever código?

  • Chuck Nbc

    ótima apresentação da ferramenta, to aguardando a Adobe lançar o MUSE, não tenho conhecimento em WEB, porem amo o illustrator, está nos seus planos JF um vídeo tutorial do illustrator voltado unicamente pra desenvolver para web?

  • Erfz Email

    ae joão , acho que esse script ta dando erro aqui… ele exporta mas não está em “pedaços” …

  • Erfz Email

    ae joão , acho que esse script ta dando erro aqui… ele exporta mas não está em “pedaços” …

    • Você separou os pedaços em layers, conforme eu fiz no vídeo ?

  • Interessante integração…  testarei logo mais para entender o Edge. Valew pelo tutorial =)