Técnicas de fatiamento

Data de publicação: 19/09/2005

Fala aí, galera! Durante todas essas colunas, nós aprendemos as técnicas do processo de criação visual através do Fireworks. Agora, iremos entrar em uma nova categoria do nosso menu de ferramentas. A categoria Web.

Este menu é tão pequeno, porém possui as duas ferramentas mais importantes para a criação web pelo Fireworks, que são a Slice Tool e a Hotsopt Tool. Bem, vamos abrir no Fireworks o seguinte layout que criei para a aula de hoje:
Clique aqui para baixar o layout para treinar

Clique na imagem para aumentar

Bem, agora iremos utilizar a ferramenta Slice Tool (K) para fatiar todo o documento.

As camadas verdes são as fatias, e as linhas vermelhas são chamadas de guias. As guias servem para situar o posicionamento das imagens. Observem que à esquerda as fatias estão todas da mesma largura. Eu poderia reduzir ou aumentar o tamanho, basta arrastar a linha de guia para ambos os lados que poderemos então determinar as suas dimensões. Isso vale para altura também.

O mouse não apareceu devido ao fato da screen não ter sido tirada em algum programa específico para isso. Mas podemos notar que ao arrastar a linha vertical obtemos a manipulação de todas as outras que eram interligadas à mesma. Outro detalhe das guias são as opções, como por exemplo, Snap to Guide, que facilita a criação das fatias sem precisar arrastá-las até em cima da linha para ficarem justas às outras. Ela tem uma espécie de atração quando se aproxima da linha, como se fosse um imã. Isso facilita e muito nos trabalhos web.

Com o comando da tecla F6 do teclado, podemos observar o painel de otimização (Optimize). Podemos obter a otimização por meio de valores padrões, que estão na barra de propriedades, como o JPEG Better Quality dentre outros. Logo abaixo segue a imagem da caixa Optimize.

Observem que na caixa configurei as slices como GIF Adaptative, com 256 cores e um Dither de 100%. Essas configurações tornam o layout mais leve, porém, em alguns casos, pode ser útil o uso de JPEG ou PNG.

O uso da ferramenta Hotspot
A ferramenta Hotspot é comum de ser visto associado à Slice Tool. Isso acontece devido ao fato das duas obterem um resultado muito útil na exportação de um layout de documento PNG para o HTML. Tanto a Slice como a Hotspot têm em comum as opção de criar elementos de suas ferramentas de maneira customizada. Podemos criar figuras geométricas como caminhos para links, criar fatias poligonais e muitas outras opções. Exemplo:

Agora temos um atalho de link em forma circular. Vamos desenhá-la arrastando-a sobre a logomarca do site.

Pode-se perceber que ao arrastarmos não podemos obter a forma elíptica ou oval, já que é um circulo exato. Bem, vamos aumentá-la para que o link também abranja o local onde está escrito projeto. Então precisamos utilizar a ferramenta Scale Tool (Q).

No menu propriedades, informamos ao Fireworks as coordenadas do hiperlink...

Link: Endereço para o qual o link será destinado
Alt: Mensagem que surge ao permanecer com o mouse sobre o link
Target: Destino da página (o comando "_blank" carrega a página em nova janela).

Depois, basta nós adicionarmos mais links no documento.

Agora basta exportar as fatias e o documento.Com o comando Ctrl+Shift+R. Lembre-se de que é recomendável nomear todas as fatias. Pode ser um processo meio demorado mas será de grande importância futuramente.

Neste modo de configuração, eu salvo as fatias como imagens (todas GIF, como configurei) e ainda é criado um documento HTML. Lembre-se de que o modo em que o Fireworks trabalha com layouts é ruim, pois não podemos por determinados contéudos que estrapolem o tamanho das células, pois o layout ficará "cortado". Portanto, recomendo para usuários experientes com HTML de interface (tabelas ou tableless) trabalharem apenas salvando as imagens. Bom galera por hoje é só isso... abraços e até a próxima! valeuu =)

Sugestões: contato@comunidadeweb.com.br

Confira todas as matérias de Andre Grilo Criando um layout para Natal Vetores e auto shapes Eye Cand Criando um gif animado Criando um layout - Final Criando layout. Parte I Botão animado Técnicas de fatiamento Vetorizando fotografias Trabalhando com perspectiva Efeito especial em foto Criando um layout

Andre Grilo

É estudante e natural de Natal - RN. Atualmente trabalha com mídia impressa e digial há 1 ano e utiliza como ferramenta principal o Macromedia Fireworks MX 2004. Faz vários trabalhos como freelancer e também trabalha com Propaganda e Design para Web.

Clique aqui e confira todos os colunistas desta área. Danilo Bezerra Fernando Bertholdo Wilson Silva

Faça parte você também!

Quero colaborar com o site