Folha de referências do Adobe Illustrator CC para LuckyTemplates

Muitas das mudanças mais dramáticas na forma como o Illustrator está sendo usado estão ocorrendo no campo da tradução de imagens vetoriais para a web, e o formato SVG subestimado é o elo principal nesse processo. Os arquivos SVG mantêm os valiosos recursos de escalabilidade da arte vetorial e têm suporte quase universal em sites e ambientes de desenvolvimento da web. Ao preparar arte vetorial para a web, é importante evitar os efeitos padrão do Illustrator e, em vez disso, usar filtros SVG.

O Illustrator vem com um conjunto decente, mas minimalista de filtros SVG, mas aqui estão algumas dicas sobre como encontrar e adicionar filtros SVG, bem como recursos para criar seus próprios filtros SVG. Para aqueles que trabalham com desenvolvedores de aplicativos e da web, torne suas vidas mais fáceis e produtivas verificando a folha de dicas para distribuição de código SVG.

Como aplicar filtros SVG no Illustrator

Quando você cria arquivos SVG para telas no Illustrator e deseja aplicar efeitos (como sombras), deve aplicá-los como filtros SVG. Dessa forma, seus arquivos SVG retêm escalabilidade infinita sem distorção.

As etapas a seguir orientam você na aplicação de um filtro SVG a gráficos no Illustrator:

Selecione o (s) objeto (s) aos quais você está aplicando o filtro.

Escolha Efeito → Filtros SVG.

Selecione um filtro na lista que aparece.
A maioria dos filtros possui nomes descritivos. Por exemplo, aqueles com sombra no nome são sombras projetadas, aqueles com gaussiano no nome são desfocagens gaussianas. O fluxo de trabalho é um pouco estranho e tortuoso, mas você precisa primeiro selecionar um filtro para acessar todas as opções disponíveis para aplicá-lo.

Para alterar o filtro selecionado:

• Mantenha selecionado o objeto ao qual o filtro foi aplicado e abra o painel Aparência escolhendo Janela → Aparência.
• No painel Aparência, clique no filtro SVG que aparece na seção Preenchimento do painel. O painel Aplicar filtro SVG é aberto.
• No painel Aplicar filtro SVG, altere o filtro aplicado.
• Para ver a aparência do filtro, marque a caixa de seleção Visualizar, conforme mostrado na figura.
  

Depois de definir um filtro, clique em OK no painel Aplicar filtro SVG.

Como adicionar filtros SVG ao Illustrator

O conjunto de filtros SVG do Illustrator é minimalista, mas você pode aprimorá-lo projetando seus próprios filtros ou baixando conjuntos predefinidos de filtros SVG de fontes online. Projetar filtros envolve codificação, mas é possível se você estiver familiarizado com HTML. Eu recomendo o tutorial em w3Schools para a criação de filtros SVG. Ou você pode comprar conjuntos de filtros online e até mesmo encontrar alguns conjuntos legais de filtros SVG gratuitos em Creatingo .

Depois de comprar ou criar seus próprios filtros SVG, veja como você os instala no Illustrator:

Escolha Efeito → Filtros SVG → Importar filtro SVG.

Na caixa de diálogo que é aberta, navegue e clique duas vezes no arquivo de filtros SVG que você criou ou baixou gratuitamente.
O arquivo que você está procurando deve ser um arquivo SVG (vários filtros são agrupados em um único arquivo SVG).
Seus novos filtros agora estão disponíveis no submenu Filtros SVG.

Escolha Efeito → Filtros SVG para aplicar seus novos filtros aos objetos selecionados.

Como entregar o código SVG do Illustrator para um desenvolvedor

Freqüentemente, os gráficos SVG que você cria no Illustrator são entregues a designers de jogos, animadores, infográficos ou outra saída, onde os desenvolvedores trabalharão com o código por trás do gráfico SVG. Como ilustrador, você não precisa saber como criar esse código, mas pode precisar saber como obtê-lo e entregá-lo a um desenvolvedor. Veja como.

O caminho para exportar seus gráficos SVG como código passa pelas funções Salvar do Illustrator. O menu Salvar tem opções (não fáceis de encontrar) que exportam seu arquivo como código SVG. Provavelmente, você desejará estar em comunicação em tempo real com o desenvolvedor da tela à medida que gera esse código, porque várias opções são determinadas pela forma como esse código será usado:

Escolha Arquivo → Salvar (ou Salvar como se estiver salvando um arquivo novamente).

Na caixa de diálogo que é aberta, selecione SVG no menu Formatar.
Ignore a opção de arquivo SVGZ, que é para um arquivo compactado que não é exibido em navegadores.

Clique em Salvar para abrir a caixa de diálogo Opções de SVG.

Sempre escolha SVG 1.1 na lista suspensa Perfis SVG. Outras versões estão obsoletas.

Se você incorporou ou vinculou imagens em seu arquivo SVG, escolha Incorporar no menu suspenso Locais da imagem. No entanto, consulte primeiro seu desenvolvedor da web sobre essa escolha.

Selecione Preservar recursos de edição do Illustrator para tornar o arquivo editável no Illustrator.
Essa escolha aumenta o tamanho do arquivo, mas permite trabalhar com um único arquivo SVG que pode ser editado, atualizado e compartilhado com desenvolvedores da web.

Se o botão Mais opções for exibido, clique nele para acessar as opções avançadas. e faça suas seleções.
Essencialmente, as diferentes opções geram CSS com seu arquivo que define propriedades das seguintes maneiras. Consulte seu colega de equipe de desenvolvedor da web sobre como definir essas propriedades CSS:

• Os atributos de apresentação incorpora estilos no código SVG. Esta opção é a mais simples e padrão. Use-o se não estiver colaborando com um desenvolvedor de aplicativos ou web.
• As duas opções de Atributos de estilo contam com CSS para gerenciar o estilo onde possível.
• Style Elements gera seletores de estilo de classe para estilização.
• A opção Incluir estilos não usados gera um código que provavelmente aumenta o tamanho do arquivo SVG sem adicionar valor funcional.

Desmarque as cinco caixas de seleção na parte inferior da caixa de diálogo Opções de SVG, a menos que seu parceiro desenvolvedor solicite que você as selecione.
Essas opções são para aplicativos altamente especializados.

Para gerar o código SVG com base nas seleções feitas na caixa de diálogo Opção de SVG, clique no botão Código SVG .
O código SVG gerado é exibido no editor de texto do sistema operacional. Você pode salvar esse código como um arquivo de texto usando o editor de texto do seu sistema operacional e entregar o arquivo a um desenvolvedor.

Depois de gerar o código, clique em OK para salvar seu arquivo.
Você pode reabrir e editar este arquivo no Illustrator.