Desenvolvimento de protótipos de sites e interfaces de software usando páginas do Fireworks

Um único arquivo PNG do Fireworks pode conter várias páginas, fornecendo uma maneira perfeita de desenvolver protótipos da Web e de interfaces de aplicativo. Cada página contém configurações exclusivas para o tamanho e a cor da tela de desenho, a resolução da imagem e as guias. Essas opções são definidas para cada página ou globalmente em todas as páginas de um documento. Além da camada da Web, cada página também contém um conjunto exclusivo de camadas. Entretanto, para elementos comuns, você pode usar uma página-mestre ou compartilhar camadas entre páginas. (Consulte Compartilhar camadas.)

Observação:

Se você não criar páginas, todos os elementos do documento irão residir em uma única página.

Visualize as páginas no painel Páginas, onde os objetos em cada página são exibidos em uma miniatura ao lado do nome da página. A página ativa é realçada no painel e mostrada no menu pop-up de páginas acima do documento ativo.

Para obter informações sobre exportação de páginas, consulte Exportar da área de trabalho

Vídeo

Crie protótipos de alta fidelidade com o Fireworks ou Photoshop (00:01:17)

Obtenha uma visão geral de como você pode usar o Fireworks ou o Photoshop para criar protótipos de alta fidelidade.

Por Jim Babbage

Adicionar, excluir e navegar em páginas

Usando o painel Páginas, você pode adicionar novas páginas, excluir páginas indesejadas e duplicar páginas existentes. Durante a adição, exclusão ou movimentação de páginas, o Fireworks atualiza automaticamente o número à esquerda dos títulos de página. Esses números automáticos o ajudam a navegar rapidamente a páginas específicas em designs amplos de várias páginas.

Adicionar uma página

Uma página em branco é inserida no final da lista de páginas e se torna a página ativa.

  1. Siga um destes procedimentos:

    • No painel Páginas, clique no botão Página nova/duplicada .

    • Clique com o botão direito no painel e escolha Nova página no menu pop-up.

    • Selecione Editar > Inserir > Página.

  1. Siga um destes procedimentos:

    • No painel Páginas, selecione uma página.

    • No teclado, use as teclas Page Up e Page Down.

    • Escolha a página no menu pop-up de páginas localizado na parte superior da janela do documento ou no canto inferior direito do painel Páginas.

    Observação:

    Um asterisco ao lado do nome da página no menu pop-up de páginas indica a página-mestre.

Duplicar uma página

Duplicar adiciona uma nova página contendo os mesmos objetos e hierarquia de camadas que a página atualmente selecionada. Objetos duplicados mantêm a opacidade e o modo de mesclagem dos objetos originais. Você pode alterar os objetos duplicados sem afetar os originais.

  1. Siga um destes procedimentos:

    • Arraste uma página até o botão Página nova/duplicada.

    • Clique com o botão direito na página e selecione Duplicar página no menu pop-up.

Mover uma ou mais páginas

No painel Páginas, mova páginas para aproximar designs relacionados e dinamizar o processo de layout.

  1. (Opcional) Se você estiver movendo várias páginas, siga um destes procedimentos:

    • Clique nelas com a tecla Shift pressionada para selecionar um grupo adjacente.

    • Clique nelas com a tecla Ctrl (Windows), ou Command (Mac OS), pressionada para selecionar um grupo não adjacente.

  2. Arraste páginas selecionadas para cima ou para baixo no painel. Acima e abaixo de outras páginas, são exibidas bordas escurecidas nas quais você pode soltar o mouse para mover as páginas selecionadas.

Excluir uma página

A página acima da excluída se torna a página ativa.

  1. Siga um destes procedimentos:

    • No painel Páginas, arraste a página até o ícone de lixeira .

    • Clique com o botão direito na página e escolha Excluir página no menu pop-up.

Editar a tela de desenho de uma página

Cada página tem uma tela de desenho exclusiva, com atributos independentes de tamanho da tela de desenho, cor e resolução de imagem.

  1. Selecione uma página no painel Páginas ou no menu pop-up de páginas localizado na parte superior da janela do documento.

  2. Selecione Modificar > Tela de desenho > Tamanho da imagem, Modificar > Tela de desenho > Cor da tela de desenho ou Modificar > Tela de desenho > Tamanho da tela de desenho.

  3. Faça as alterações. Essas alterações também podem ser feitas com o uso do painel Propriedades quando a tela de desenho de uma página for selecionada.

  4. Para aplicar as alterações somente à página selecionada, deixe marcada a opção Somente página atual. Para aplicar as alterações a todas as páginas, desmarque a opção.

Usar uma página-mestre

Para usar um conjunto de elementos em todas as suas páginas, use uma página-mestre. Quando você converte uma página comum em página-mestre, ela passa para o topo da lista no painel Páginas. Quando uma página-mestre é criada, uma Camada de página-mestre é adicionada à parte inferior da hierarquia de camadas para cada página.

Criar uma página-mestre

  1. No painel Páginas, clique com o botão direito em uma página existente e escolha Definir como página-mestre no menu pop-up.

Qualquer camada compartilhada entre páginas se torna uma camada comum (não compartilhada). Entretanto, as camadas compartilhadas entre quadros permanecem. Para exibir quadros da página-mestre em uma página vinculada, consulte Exibir objetos em um estado.

Após a criação de uma página-mestre, todas as páginas recém-criadas herdam automaticamente as configurações dessa página-mestre. As páginas existentes apenas herdarão essas configurações se você as vincular à página-mestre. Se, mais tarde, você alterar a página-mestre, todas as páginas vinculadas serão automaticamente atualizadas.

As limitações a seguir aplicam-se à herança de objetos e comportamentos de páginas-mestre com outras páginas:

  • As páginas herdam apenas o estado atual de todos os objetos em uma página-mestre. Para herdar todos os estados de todos os objetos, em cada página, adicione um número idêntico ou superior de estados ao objeto com o maior número de estados. Todos os objetos nessa página herdam todos os estados da página-mestre.

  • As alterações feitas no tamanho da tela de desenho ou no tamanho da imagem em uma página afetam todas as páginas que não estão vinculadas à página-mestre. Para limitar as alterações apenas à página atual, selecione Somente página atual.

  • Somente as páginas vinculadas herdam as alterações na cor da tela de desenho da página-mestre.

  1. Siga um destes procedimentos:

    • No painel Páginas, clique com o botão direito em uma página e escolha Vincular à página-mestre no menu pop-up.

    • Clique na coluna à esquerda da miniatura de página no painel Páginas. Um ícone de vínculo mostra que a página está vinculada à página-mestre.

      Note:  Quando você alterar uma configuração em uma página vinculada à página-mestre, a nova configuração prevalecerá, mas quebrará o vínculo com a página-mestre.

Mostrar ou ocultar a camada de página-mestre

Uma alteração na visibilidade é refletida em todas as páginas.

  1. No painel Camadas, clique no ícone de olho à esquerda da camada da página-mestre.

Remover camadas de páginas-mestre

  1. Clique com o botão direito no painel Camadas e selecione Remover camada de página-mestre no menu pop-up.

Para adicionar novamente a camada de página-mestre à página, clique com o botão direito no painel Camadas e selecione Adicionar camada de página-mestre no menu pop-up.

Transformar uma página-mestre em uma página normal

  1. Clique com o botão direito no painel Páginas e escolha Redefinir página-mestre no menu pop-up.

Exportar páginas selecionadas

É possível exportar várias páginas de uma vez só. Somente as páginas selecionadas são exportadas. Ao exportar páginas, as configurações de otimização especificadas para páginas individuais são usadas para exportar os arquivos.

  1. No painel Páginas, selecione as páginas que deseja exportar.

  2. Clique com o botão direito e selecione Exportar página(s) selecionada(s).

  3. Na caixa de diálogo Exportar, selecione uma das opções do menu Exportar:

    Camadas para arquivos

    Exporta camadas nas páginas selecionadas como arquivos individuais.

    Estados para arquivos

    Exporta estados nas páginas selecionadas como arquivos individuais.

    Páginas para arquivos

    Exporta as páginas selecionadas como arquivos individuais.

Personalizar nomes de arquivos ao exportar páginas

  1. No painel Páginas, selecione as páginas que deseja exportar.

  2. Clique com o botão direito e selecione Exportar página(s) selecionada(s).

  3. Na caixa de diálogo Exportar, clique em Opções. O botão Opções será ativado com base na opção selecionada no menu Exportar.

  4. Na caixa de diálogo Opções de exportação, selecione Adicionar prefixo ou Adicionar sufixo e selecione uma opção do menu. É possível nomear os arquivos usando qualquer uma das seguintes opções:

    doc.nome

    O nome do arquivo de origem é adicionado como prefixo ou sufixo. Por exemplo, se estiver exportando uma página com o nome Index do arquivo de origem sites.png usando a opção Adicionar prefixo, um arquivo com o nome Sites_Index.gif será gerado.

    Numérica (1, 2, 3...ou 01, 02, 03...)

    Os arquivos são gerados em uma sequência com os números adicionados ao prefixo ou sufixo. Todos os arquivos de página exportados são numerados na ordem em que aparecem no painel de páginas. Quando você for exportar muitas páginas, use uma sequência de dois dígitos.

  5. Use as opções do menu Tipo de arquivo para otimizar as configurações do arquivo exportado.

Exportar fatias nas páginas selecionadas

As fatias do arquivo de origem são ignorados quando um arquivo é exportado. Para exportar as fatias, use as configurações a seguir na caixa de diálogo Exportar.

  1. No menu Exportar, selecione HTML e imagens, ou Somente imagens.

  2. No menu HTML, selecione Exportar arquivo HTML.

  3. No menu Fatias, selecione Exportar fatias.

  4. Selecione uma das seguintes opções:

    Somente fatias selecionadas

    As áreas marcadas como fatias serão exportadas.

    Incluir áreas sem fatias

    As áreas não marcadas como fatias também serão exportadas.

Visualizar várias páginas

Visualize todas as páginas, exceto a página mestre, quando for importar ou abrir arquivos. A página selecionada durante a visualização é colocada em foco quando o arquivo é aberto.

Ao inserir uma página que contém objetos da camada mestre, a página mestre é convertida em uma camada comum e é importada.

Ativar visualização de várias páginas

Visualize todas as páginas de um arquivo ao importá-lo ou abri-lo. A opção de visualização de várias páginas é habilitada por padrão na caixa de diálogo Preferências.

Para habilitar a visualização de várias páginas para arquivos criados em versões anteriores, abra-os na versão atual e salve-os.

  1. Na caixa de diálogo Preferências, selecione Geral.

  2. Selecione Salvar por miniaturas de páginas para habilitar a visualização de várias páginas. Se essa opção for desabilitada, os nomes das páginas serão armazenados, mas as miniaturas não serão geradas para esses arquivos.

Visualizar páginas antes de abrir ou importar

  • No Windows, a visualização é exibida na caixa de diálogo Importar ou abrir ao importar ou abrir um arquivo.

  • No Mac, clique em Visualizar na caixa de diálogo Abrir ou importar. Opcionalmente, você pode clicar duas vezes na caixa de diálogo Importar para entrar no modo Visualizar.

    Quando for importar arquivos, selecione Inserir após a página atual para adicionar as páginas importadas após a página atualmente selecionada no documento.

Logotipo da Adobe

Fazer logon em sua conta