Este é meu primeiro tutorial e nele quero explicar como você pode gerar protótipos interativos diretamente do Fireworks em formato de PDF. Esse tipo de protótipo pode ser bastante útil para aprovação de layouts com clientes ou para facilitar a comunicação e entendimento entre a equipe de desenvolvimento e design.

Passo 1

O processo todo é bem simples, apenas precisamos focar na preparação do arquivo para a exportação. Para isso vou utilizar um exemplo dewireframe para um website institucional. O arquivo PNG. que estou utilizando pode ser encontrado aqui.

Image selected for Reader Tutorial: Fireworks - Interactive Prototypes in PDF

O arquivo precisa estar organizado em páginas, os links que serão criados funcionam de página para página.

Image selected for Reader Tutorial: Fireworks - Interactive Prototypes in PDF

Passo 2

Vamos começar a criar os Shapes(Hotspots), que são as marcas das áreas de cliques presentes em cada página.Vamos iniciar pela Home, que será também a página inicial do PDF.

Passo 3

Selecione a ferramenta (Rectangle Hotspot tool) na barra de ferramentas Web.

Image selected for Reader Tutorial: Fireworks - Interactive Prototypes in PDF

Passo 4

Crie os Shapes em todas as áreas que deseja criar os links:

Image selected for Reader Tutorial: Fireworks - Interactive Prototypes in PDF

Dimensione os Shapes de hotspots quando necessário:

Image selected for Reader Tutorial: Fireworks - Interactive Prototypes in PDF

Passo 5

Depois de criarmos os Shapes, vamos configurar as propriedades de cada um deles.

Image selected for Reader Tutorial: Fireworks - Interactive Prototypes in PDF

Um detalhe importante: Verifique em cada um dos Shapes se ele é um Rectangle(retângulo) ou um Polygon(polígono). Precisamos que todos estejam configurados como Retângulos, caso contrário, o link não funcionará. Geralmente quando redimensionamos os shapes eles retornam para o estado de polígono.Por isso é preciso ficar atento.

Passo 6

Agora vamos configurar os links para as páginas que os shapes serão direcionados.

Image selected for Reader Tutorial: Fireworks - Interactive Prototypes in PDF

Nesse caso abaixo, temos o shape notícias selecionado, então vamos selecionar a página Notícia.htm que será para onde o link direcionará.

No próximo campo, abaixo da opção de links, podemos descrever um texto alternativo para a imagem, mas não é necessário.

E assim seguimos criando os links em todos os Shapes dá página Inicial.

Image selected for Reader Tutorial: Fireworks - Interactive Prototypes in PDF

Passo 7

Passamos para a próxima página. Na página Produtos vamos copiar e colar os mesmos shapes do menu e de marca. Esses funcionam igual.

Image selected for Reader Tutorial: Fireworks - Interactive Prototypes in PDF

Depois vamos criar um shape para a ampliação da imagem do produto.Direcionamos o link para a página Produtos_ampliação.htm.

Image selected for Reader Tutorial: Fireworks - Interactive Prototypes in PDF

Na página Produtos_ampliação temos a janela de ampliação da imagem e o botão Fechar, onde vamos aplicar novo shape para voltar para a página anterior Produtos.

Image selected for Reader Tutorial: Fireworks - Interactive Prototypes in PDF

Image selected for Reader Tutorial: Fireworks - Interactive Prototypes in PDF

E essa é lógica, vamos linkando as páginas e criando as relações.

Passo 8

Agora vamos para a exportação: No menu File(Arquivo) temos a opção Exportar. Selecionamos as opções como no exemplo abaixo, selecionamos a pasta de destino.

Image selected for Reader Tutorial: Fireworks - Interactive Prototypes in PDF

Agora é só testar todos os links do PDF e utilizar à vontade. Você pode conferir o PDF que criei clicando aqui.

Espero que tenham gostado!

Sobre o autor

Meu nome é Marcon Zanin, tenho 26 anos e sou um designer de interface de Chapecó/SC. Se quiser saber mais sobre o meu trabalho visite meu portfolio (www.hidrocolor.net) ou me acompanhe via twitter (twitter.com/marconz)!

About the author of this post

Would like to write a guest post for us?

If you would be interested in writing some guest articles or even become a regular contributor, send us an email to abduzeedo[at]abduzeedo.com requesting a contributor account.