Tutorial: Criando Skins no Illustrator

Olá galera,

Vou começar a falar aqui no blog um pouco sobre design e criação, aplicação de skins e um pouco de skins programáticas.

Primeiramente, criei um tutorial para quem está começando no assunto com um passo-a-passo de como fazer sua primeira skin no Adobe Illustrator CS3.

Além do Flex 3, você vai precisar instalar no Illustrator o Flex Skin Design Extension for Illustrator, que pode ser encontrado no endereço:
http://www.adobe.com/cfusion/entitlement/index.cfm?e=flex_skins

Após baixar o zip, abra o diretório de instalação do Illustrator coloque o conteúdo da pasta Scripts na pasta /Presets/Scripts e o da pasta Templates na /Cool Extras/Templates.

Antes de criamos nosso skin vamos entender como funciona o sistema de skin do flex, abrindo o template padrão da Adobe para o skin de Button.

Abra o Illustrator e vá em File>Scripts>Flex Skin>Create Flex Skin:

escolha Specific Components e selecione Button:

Este arquivo é a nossa base para desenvolvermos o skin botão. Nele podemos ver que o botão tem 4 estados: Up, Over, Down e Disabled. E se você abrir a janela de símbolos do Illustrator verá que cada um dos 4 objetos é um símbolo.

O Flex sabe como cada símbolo se refere a um determinado skin através de seu nome seguindo essa notação:

Componente_nomeDoEstilo_tipoDeSkin

Então caso eu queira criar o upSkin para o estilo myButton do componente Button você deve renomear seu símbolo para: Button_myButton_upSkin.

Caso você queira aplicar o skin como padrão para todos botões basta deixá-lo como Button_upSkin, sem o nome do estilo.

Agora que sabemos como funciona o sistema de skins vamos criar nosso próprio botão.

Algumas considerações ao criar um skin no Illustrator:

• Não tente fugir muito do tamanho padrão do skin, no caso do botão ele tem 64 x 22 px.
• Algumas funcionalidades avançadas do illustrator não funcionam, dentre as que testei:
  • Mesh Tool
  • Blend
  • Drop Shadow
  • Efeitos de transparência, como screen e multiply

Para resolver essas deficiências, podemos simular esses efeitos como eu fiz com a sombra do botão ao invés de usar o filter de drop shadow:

Agora vamos criar os símbolos para podermos exportar.

Selecione o botão para o upSkin (botão deselecionado) na janela de símbolos clique em New Symbol:

No nome, usando a notação que falei coloque o nome como Button_upSkin

Deixe selecionado também o checkbox para Enable Guides for 9-slice scaling.

Agora dê um duplo-clique no simbolo criado e você verá 4 guides pretas pontilhadas. Elas são as guias para o 9-slice scaling, também conhecido como scalenine. Ajustando elas você controlará o comportamento o skin quando ele for esticado as áreas destacadas (ver imagem abaixo) permanecerão sempre com o mesmo tamanho. Assim quando você por exemplo usa bordas arredondadas e quer que elas sempre mantenham o mesmo raio você deve deixá-las nessas regiões fora dos guides.

Faça o mesmo para os outros estados do botão (overArrowSkin, downArrowSkin e disabledArrowSkin) e vá em File>Scripts>Flex Skin>Export Flex Skin para salvar o skin já em swf, no diretório desejado (No meu caso na pasta _assets do meu projeto).

A nossa missão dentro do Illustrator acabou. Agora vamos para o Flex Builder.

Clique com o botão direito em cima do seu projeto e clique em Import>Flex Builder>Artwork

Selecione o arquivo que vc exportou do illustrator, escolha a folha de estilos onde o CSS será gerado e pronto! Se tudo ocorrer bem os botões do seu projeto estarão mostrando corretamente seu skin!

CSS gerado:

Clique aqui para baixar os arquivos do projeto.

Espero que tenham gostado e estou aberto a sugestões de tutoriais relacionados a skins! Obrigado!