Fireworks CS6. Autor (A) Aline Alves Salles Código A

Fireworks CS6
Autor(a): Aline Alves Salles

Código: 141015A
Julho/2013
Copyright© 1996/2013, NEWEDUCATION Sistema de Ensino para Educação Profissional. Todos os direitos
reservados desta publicação foram reservados na forma da lei à NEWEDUCATION Sistema de Ensino para
Educação Profissional.Proibida qualquer reprodução parcial ou total, seja mecânica, eletrônica,
fotocópias, gravação ou outros meios, sem prévia autorização por escrito da NEWEDUCATION Sistema de
Ensino para Educação Profissional.
www.neweducation.com.br
Apresentação
Adobe Fireworks CS6 é um software de design de interface que faz parte de um pacote de aplicativos
conhecido como Adobe Web Design Premium.
A versão CS6 foi lançada pelo atual fabricante e oferece novos recursos de integração com ferramentas
conceituadas como o Photoshop e o Illustrator.
Consiste num ambiente interativo de criação de botões, banners, textos, tratamento de fotografias,
animações e até mesmo interfaces completas e sofisticadas para a Web.
Por ter sido criado exclusivamente para a web, o Fireworks oferece as ferramentas necessárias para
criar e manter seus gráficos em um ambiente produtivo e totalmente personalizado pela linguagem
JavaScript.
Objetivos
Apresentar os fundamentos básicos do software, sua história, aplicações no mercado de
trabalho, além de referências bibliográficas de sites para consulta e apresentar o novo
ambiente de trabalho da linha CS6.
Ensinar os elementos da interface: formas e textos que constituirão os títulos, logotipos,

slogans e banners.
Ensinar a manipulação de imagens, bem como a sua importação e tratamento.
Criar animações, troca de imagens (rollover) e menu Pop-up.
Utilizar ferramentas para a otimização de imagens e exportação.
Mostrar a integração Fireworks CS6 e Dreamweaver CS6.
Criar a interface completa de um Web Site de layout "líquido", além de seus elementos como
menus, banner e publicidade.
Unidade I - Conceitos Básicos do Fireworks CS6
Aula 01 - Introdução ao design de interfaces
Definição de Interface
Definição de design de interface
Design de interface para web sites
Conhecimentos básicos de design
Procedimentos gerais na criação de uma interface
Introdução ao Fireworks CS6
O que é Fireworks
Configuração sugerida para Windows
Novidades da versão CS6
Fireworks X Photoshop
Solução Integrada (Vetor X Bitmap)
Boas-Vindas
Área de Trabalho
Abrir documentos existentes
Visualizando o arquivo
Criando um documento no Fireworks
Alterando as configurações do documento
Painel Histórico (histórico)
Salvando o projeto
Atividades
Aula 01 - Introdução ao Design de Interfaces
Definição de Interface
Antes de explicar o que é o design de interfaces e quais são os aspectos envolvidos neste processo,
serão explicados alguns termos. Primeiramente, o que é uma interface? A palavra interface é uma
palavra de origem inglesa e que se refere a tudo que se encontra entre duas pessoas, dois processos,
dois dispositivos, etc., que precisam se comunicar. Ou seja, a interface é o que se encontra no meio.
Veja alguns exemplos:
Quando duas pessoas que falam línguas diferentes precisam se comunicar, elas precisam de um
intérprete para poder se comunicar, neste caso o intérprete é a interface;
A parte da frente do aparelho de som, do micro-ondas, da TV, o painel do carro, todos são
exemplos de interface, pois permitem que as pessoas se comuniquem com a máquina.
Se vendesse um carro, um aparelho de som ou de TV, da mesma forma que o cientista ou engenheiro os
inventou as pessoas não técnicas não saberiam como operar estes equipamentos. Na verdade este é o
trabalho do design industrial, mas está muito próximo do design de interface.
O design da interface é parte crucial na venda de um produto para o consumidor

Definição de Design de Interface
O design de interface é uma área do design e está comumente relacionada ao processo de criação de
telas de jogos, aplicação multimídia, softwares e recentemente páginas web.
Dando uma definição geral de design de interface, diz-se que o design de interface consiste no
processo de criar e desenhar uma forma mais fácil e intuitiva de operar um aparelho, dispositivo,
computador, etc. Esta foi, por exemplo, a grande revolução trazida pelo sistema operacional Windows,
que possibilitou uma forma mais fácil e intuitiva dos usuários se comunicarem com o computador, do
que com o sistema operacional MS-DOS.
É importante observar que por trás deste processo existe um estudo, ou seja, não se trata apenas da
criação de algumas imagens, botões, fundos, etc., que se coloca posteriormente dentro do código
HTML.
Design de Interface para Web Sites
Quando se fala de design de interface para web sites, não existe uma fórmula que sirva para todos os
casos. Tudo depende do objetivo da interface que está relacionado com os objetivos do web site. O
objetivo deste tipo de design não é apenas criar um botão, mas sim saber qual o melhor formato, cor,
estilo de design e localização para este botão dentro da página.
Para que se tenha esta informação, antes de tudo existem alguns processos que são necessários, como
por exemplo, a arquitetura da informação do site. A arquitetura da informação diz qual informação é a
mais importante em nossa página e web site. A partir daí deve-se fazer as perguntas:
Quem é o usuário? Qual a sua idade, o seu nível sociocultural, etc.
Qual a melhor forma de apresentar esta informação para o usuário?
Que forma, cor, tipografia, localização será melhor e mais intuitiva para o usuário?
Portanto, o design de interface é a maquiagem da informação. Para ajudar a esclarecer este conceito:
"O design não deve ser uma mera decoração, ele precisa comunicar. O leitor nunca deve ter que passar
por florestas de botões para obter uma simples notícia"
Roger Black
Designer e diretor de arte responsável pelas mudanças no jornal The New York Times e nas revistas
Rolling Stone, Newsweek e New York Magazine.
Buscadores possuem uma interface mais simples e intuitiva

Nos tópicos a seguir definem-se os conceitos e conhecimentos necessários para uma boa criação de
interface e apresenta-se um guia com todos os procedimentos envolvidos neste processo, objetivando
uma forma mais didática de abordar o assunto.
Conhecimentos Básicos de Design
Existem alguns conhecimentos de design que são básicos não apenas para o design de interface, mas
para criação em todo o tipo de mídia. Esses conhecimentos envolvem quatro áreas básicas: tipografia,
cor, forma e composição.
Tipografia
Tipografia é coleção de caracteres tipográficos utilizados num projeto gráfico e representa um papel
de suma importância no design. É através do uso adequado da tipografia que conseguimos legibilidade,
harmonia, beleza e estilo. É necessário conhecer as famílias de tipo, suas diferenças básicas e a melhor
aplicação para cada tipo de tipografia.
Os tipos podem ser:
Sem Serifa - esse tipo de fonte não possui serifas nos finais dos traços das fontes. Elas são
mais usadas em trabalhos de caráter técnico, comercial ou corporativo, pois a ausência das
serifas dá um ar de seriedade e clareza à fonte. Fontes sem serifa são muito utilizadas em
páginas Web. Exemplo:
Antigo - devido ao seu aprimoramento secular como tipo usado na escrita, as fontes no estilo
antigo foram o melhor grupo de fontes para grandes extensões de texto impresso. Exemplo:
Moderno - essas fontes não são usadas para extensões de texto corrido. Elas se aplicam
melhor a títulos. Exemplo:
Serifa Grossa - as fontes com serifa nascem a partir da necessidade de se ter textos que
podem ser vistos à distância, é usada para a mídia impressa para exposição em posters,
outdoors, etc. Exemplo:
Manuscrito - os tipos manuscritos simulam algum tipo de escrita à mão. Essas fontes são
usadas em situações específicas. No entanto, elas podem resultar em excelentes resultados, se
usadas com grande destaque. Exemplo:
Decorativo - são fontes que geralmente "abusam" dos efeitos estilizados, de desenhos, sendo
mais informais e divertidas. Exemplo:
Cor
Em relação à cor é necessário conhecer os modelos de cores disponíveis (RGB, CMYK, etc.) e quando
utilizá-los; saber quais são as cores primárias, secundárias e cores complementares; diferenças de
aplicação de cores frias e cores quentes; quais são as melhores combinações de cores (harmonia de
cores) e psicodinâmica das cores.
Círculo de cores
Modelos de Cores:
Modelo RGB - Uma larga porcentagem do espectro visível pode ser representada misturando-
se três componentes básicos de luz colorida em várias proporções. Estes componentes são
conhecidos como cores primárias: vermelho (red), verde (green) e azul (blue) RGB. Seu
monitor cria cores emitindo luz através dos fósforos: vermelho, verde e azul. Duas dessas
cores, quando misturadas, produzem as cores secundárias: ciano, magenta e amarelo. Esse é o
modelo utilizado na criação de gráficos para a web.
Modelo CMYK - O modelo CMYK é usado no processo de impressão quatro cores. Neste
processo, a cor é reproduzida combinando-se as quatro tintas: ciano (cyano), magenta
(magenta), amarelo (yellow) e preto (black) - CMYK.
Em HTML, valores de cor RGB são dados em Hexadecimal - um sistema com base em 16 números. No
hexadecimal, ao invés de números sendo executados de 0 a 9 e depois repetidos, existe uma série
inicial de valores de 16 números:
0,1,2,3,4,5,6,7,8,9, A, B, C, D, F
As letras solitárias representam valores que normalmente podem tomar dois dígitos no sistema
decimal: A igual a 10, B igual a 11, C igual a 12, e assim por diante. Quando você quer contar além dos
dígitos hex, você coloca 1 diante dos números e contínua, exatamente como faz nos decimais quando
quer ir além de um dígito.
Valores RGB são expressos em hex com um conjunto de três números de dois dígitos, com cada um dos
três valores correspondente a 256 níveis de vermelho, verde e azul, respectivamente. Por exemplo,
branco em valores RGB é representado por 255,255,255. O equivalente em hex é #FFFFFF.
A cor não apenas pode atrair o olhar e traduzir emoções, mas ela também tem importante apelo
comercial. Na Web, como com qualquer meio de massa, a cor também é um elemento fundamental na
interface.
Forma
Quando falamos de forma, basicamente estamos falando de desenho. Desenho não é somente um traço
feito com algum material como grafite, caneta ou carvão, mas são também os contornos dos objetos,
imagens e pinturas. Por exemplo, quando pintamos uma parede ou uma tela unicamente com tinta,
sem traços, estamos trabalhando com formas, ou seja, desenhando.
Composição
Este é um conceito que envolve todos os anteriores, pois quando se pensa em composição, pode se
referir em como compor várias fontes, cores, formas, ou todos esses elementos ao mesmo tempo. De
nada adianta escolher fontes adequadas, cores bonitas e harmônicas e belas formas, se não souber
compor esses elementos. Neste aspecto o trabalho do designer é parecido com o de um maestro, e o
design é como uma orquestra. Tem que ter harmonia. Um design pode usar cores fortes e cores leves,
ou cores fortes e elementos contrastantes. De qualquer forma precisa haver uma relação entre os
elementos de cada um, de acordo com sua linguagem e objetivo.
Procedimentos Gerais na Criação de uma Interface
Depois de apresentados os aspectos básicos de design, apresentam-se os aspectos específicos do design
de interface para web. Antes de começar o trabalho em um programa de imagem, existem alguns
procedimentos que devem ser feitos.
Análise do tipo de site
Uma das primeiras preocupações na criação do design de uma interface é saber para qual tipo de site
deverá ser criado.
O site pode ser de comércio eletrônico, entretenimento, notícias, institucional, etc. A partir desta
informação é que se pode saber qual interface atenderá melhor ao tipo de conteúdo do site, e qual o
peso que poderá ser dado à interface.
Por exemplo, em um site de entretenimento pode-se investir muito mais numa interface animada,
cheia de efeitos, do que numa interface para um site de notícias, onde o rápido carregamento da
informação é mais importante que muitas imagens.
Uma interface para o público infantil tem uma interface carregada de cores e gráficos
Análise e arquitetura das informações
Uma das grandes diferenças do design de interface é que ele deve ser "utilitário", ou seja, não deve
apenas ser design bonito, mas também deve ser prático. Pois neste caso, o design serve à informação,
ao conteúdo do site. É ele que poderá facilitar ou complicar para que o internauta/cliente encontre o
que deseja. Como o nome já diz, é a "interface" o intermediário entre o conteúdo e o
internauta/cliente. Por isso, é importante que primeiro se faça uma análise detalhada da informação
que deve conter no site, pois somente a partir desta análise é que será possível saber quais serão as
seções do site, e qual o design que melhor atenderá uma navegação mais intuitiva para se chegar à
informação desejada.
Escolha do estilo de design
Este é outro aspecto importante, pois uma coisa é saber que se precisa de um botão aqui, de um
banner ali, etc. e outra é saber qual o estilo que conduzirá o desenho desses elementos. Um estilo de
design pode ser clássico, infantil, moderno, mais orgânico ou mais quadrado, mais "clean", ou com
muitos elementos e cores, etc., enfim podem-se usar os mais diversos estilos. Entretanto o estilo
escolhido tem que atender a uma série de requisitos, como ser mais adequado ao tipo de informação,
facilitar a navegação, atender às necessidades de marketing, usar cores adequadas ao tipo de
informação ou à identidade visual da empresa.
O site do novo Fiat Palio tem uma interface com um estilo audacioso, apelando para as emoções e
cores vivas
Rascunho do design
Um recurso muito utilizado por desenhistas é o rascunho do trabalho.

Antes de começar a montar a interface no programa de imagem é útil fazer um rascunho no papel para
ajudar a visualizar a interface e acelerar o processo de escolha de formas e estilo. Obviamente, isto
não é uma regra, é uma dica.
Produção das mídias
Outra etapa importante é a produção das mídias que serão usadas na interface do web site, assim
como imagens, fotos, ilustrações, ícones, animações ou mesmo sons.
É necessário saber se as imagens e fotos serão obtidas de clip-arts ou deverão ser produzidas por um
fotógrafo. Depois de obtida a imagem, também será necessário tratá-la e adaptá-la aos requisitos da
mídia digital, como resolução, dimensões, etc.
Assim também é o caso de ícones e ilustrações que poderão vir de clip-arts, ou produzidas
especialmente por um ilustrador para este web site.
Integração dos elementos na interface
Finalmente chega-se a etapa de integração de todos os elementos separados em uma interface, usando
um software de imagens. Neste momento existem elementos que virão de fora, como logotipo, fotos,
etc., e elementos que serão produzidos no próprio programa de imagem, como botões, fundo, textos,
detalhes de design, banners, etc.
Todos esses elementos deverão ser integrados numa interface harmônica, clara e intuitiva.
Teste da interface
Depois de criada a interface, exportadas as imagens e encaixadas dentro da página HTML, não pense
que o processo chegou ao fim. Uma etapa muito importante, e que muitos se esquecem, é o teste da
usabilidade da interface. Este teste consiste em pedir para algumas pessoas navegarem no site usando
a nova interface para ver se ela realmente é intuitiva e fácil de usar. Neste momento podem-se
perceber algumas dificuldades de navegação, e corrigi-las antes de publicar na Internet.
Introdução ao Fireworks CS6
O que é Fireworks CS6?
O Adobe Fireworks é um software de interface gráfica, projetado para a World Wide Web. O ambiente
do software é integrado, pois combina ferramentas vetoriais e bitmaps, possibilitando ainda a
aplicação de animação aos objetos. É, portanto uma solução completa para a criação gráfica de Web
Sites. Através do Fireworks desenvolvemos desde imagens simples e animações isoladas até interfaces
complexas com botões, menus, pontos ativos, comportamentos de rollover, etc. Os arquivos
desenvolvidos no Fireworks têm o formato PNG (Portable Network Graphics). Este formato é
recomendado pelo W3C como padrão para a Web porque não apresenta perdas. Além desse formato, o
arquivo do Fireworks pode ser exportado para GIF, JPEG e para programas como o Adobe Illustrator,
Adobe Freehand e Adobe Flash.
Configuração Sugerida para Windows
Intel (r) Pentium (r) 4 ou AMD Athlon (r) 64
Microsoft (r) Windows (r) XP com Service Pack 3 ou Windows 7 com Service Pack 1. Adobe (r)
Creative Suite (r) 5.5 e CS6 aplicações também suporta o Windows 8. Consulte o FAQ CS6 para
mais informações sobre o suporte ao Windows 8. *
1 GB de RAM (2 GB recomendado)
1 GB de espaço disponível no disco rígido para a instalação; espaço livre adicional necessário
durante a instalação (não é possível instalar em dispositivos de armazenamento flash
removíveis)
1280x1024 monitor com placa de vídeo de 16 bits
Unidade de DVD-ROM
Novidades da Versão CS6

A versão Adobe Fireworks CS6 traz recursos utilizados já em versões anteriores de forma mais estável
como:
Aprimoramento na exportação de CSS e Sprites CSS;
Renomeação de elementos no painel de Camadas;
Novo painel de cores de preenchimento e cores de contorno;
Precisão em gradientes através de valores específicos de cor e ângulo;
Novas texturas e preenchimentos padrão;
Transparência com valores exclusivos para contorno e preenchimento;
Novos itens de Biblioteca;
Cor de contorno para textos;
Copiar cores com o conta gotas;
Os estilos são salvos na pasta escolhidas, mas também permanecem na pasta de estilos do
documento atual.
Fireworks x PhotoShop
Quando o Fireworks foi lançado era visível a resistência dos web designers em migrar para o software,
já que a maioria deles eram usuários de Adobe PhotoShop e estavam acostumados com sua forma de
trabalho, não voltada especificamente para a Web, e sim para o conjunto compreendido por artes-
finais, tratamento de imagem e confecção de objetos isolados para interfaces da web. Já o Fireworks
foi exclusivamente projetado para a Web, portanto a sua filosofia de trabalho é outra, compreendida
principalmente por recursos de páginas de internet, como: menus, símbolos, comportamentos, botões,
banners, etc. Através do Fireworks é possível criar interativamente todas as etapas para a criação de
um web site, inclusive gerar o código HTML e JavaScript.
Vários profissionais da Web estão optando por utilizar o Fireworks no desenvolvimento de interfaces
gráficas para confecção de sites, pois ele representa uma solução integrada, não sendo, portanto,
necessária à utilização de vários programas para a realização do mesmo objetivo.
É possível a elaboração de um Web Site profissional utilizando apenas o Fireworks e um editor HTML,
como o Adobe Dreamweaver, Microsoft FrontPage, etc., para a montagem e organização das páginas.
Não se deve, portanto comparar estes softwares, pois cada um tem o seu público, de acordo com o
objetivo que se espera do software. E, se o objetivo é a criação de um projeto gráfico com recursos
sofisticados para um site, a ferramenta ideal é o Fireworks.
Além de tudo isso, hoje em dia o Fireworks, o Flash, o Dreamweaver e o Photoshop fazem parte da
mesma empresa, onde a integração entre esses programas é bem ampla.
Solução Integrada (Vetorial x Bitmap)
O Fireworks CS6 trabalha tanto com arquivos vetoriais ou imagens em pixels no mesmo ambiente.
Vetorial
Os arquivos vetoriais possuem tamanhos reduzidos, pois contêm apenas dados que são reconstituídos
através de equações matemáticas presentes no software, permitindo redimensionamento, edição,
aplicação de efeitos, etc., a qualquer momento e sem perda de qualidade.
Utilize as ferramentas vetoriais para criar botões, logotipos e desenhos em geral para a sua interface.
Bitmap
Apesar de o arquivo bitmap ocupar mais espaço do que o vetorial e perder a qualidade quando
redimensionado, uma das vantagens é que se podem aplicar determinados efeitos apenas numa parte
do objeto, já no arquivo vetorial isso não é possível.
Utilize os efeitos presentes no Fireworks para fazer o tratamento das imagens que irão compor o site.
Boas-vindas
Ao iniciar o Fireworks, a tela de boas-vindas será exibida. Esta tela possui uma série de funções que
podem ser acionadas rapidamente, possibilitando abrir os últimos arquivos, criar novos documentos e
fazer um passeio pelas novidades do programa:
Tela de boas-vindas do Fireworks CS6
Área de Trabalho
Ao carregar o Fireworks CS6 apresentam-se na tela vários elementos que compõem a área de trabalho.
São eles: barra de título, barra de status, barra de menus, barra de ferramentas, caixa de ferramentas
e vários painéis.
Área de trabalho do Fireworks CS6

Barra de menus
Apresenta o nome do programa. Quando possui um arquivo carregado, exibe também o nome do
documento e a sua porcentagem de ampliação atual.
Barra de Ferramentas
Contêm atalhos dos principais recursos do programa.

1 2 3 4 5 6 7 8 9 10 11
1. Novo: inicia um novo documento.

2. Salvar: grava o arquivo atual.
3. Abrir: carrega um arquivo já existente.
4. Importar: obtenção de arquivos externos.
5. Exportar: converte arquivos .png para outros formatos.
6. Imprimir: saída impressa do gráfico.
7. Voltar: retorna ao estado anterior à última ação.
8. Refazer: refaz a última ação desfeita.
9. Recortar: move para área de transferência o objeto selecionado.
10. Copiar: copia para área de transferência o objeto selecionado.
11. Colar: coloca o objeto da área de transferência no documento.
1 2 3 4 5 6 7 8 9 10 11 12 13 14
1. Agrupar: transforma vários objetos selecionados num único.

2. Desagrupar: retorna os objetos ao seu estado individual.
3. Junção: transforma dois ou mais objetos em apenas um, uniformizando as cores.
4. Dividir: separa os objetos que foram unidos
5. Trazer para frente: coloca o objeto selecionado na frente de todos os demais.
6. Enviar para trás: leva uma vez para trás.
7. Recuar: envia uma vez para trás.
8. Avançar: envia o objeto selecionado para trás de todos os demais.
9. Último alinhamento usado: repete o último alinhamento.
10. Alinhamento: posiciona os objetos selecionados na horizontal ou vertical em relação a eles
mesmos.
11. Girar 90º anti-horário: rotaciona o objeto em 90º à esquerda.
12. Girar 90º horário: rotaciona o objeto em 90º à direita.
13. Virar Horizontalmente: espelha o objeto na horizontal.
14. Virar Verticalmente: espelha o objeto na vertical.
Caixa de ferramentas
Contém uma diversidade de ferramentas essenciais ao uso do Fireworks. Algumas ferramentas possuem
subopções, que podem ser encontradas pressionando por alguns segundos o mouse sobre o botão
desejado.
Para exibir/ocultar as barras ou caixa de ferramentas, acesse o menu Janela e em seguida a opção
Ferramentas. É possível, pressionando a tecla TAB, ocultar temporariamente todas as barras do
programa.
Caixa de ferramentas
Painéis apresentam-se ao lado direito da tela, facilitando a execução de tarefas rotineiras.
Para exibir/ocultar os painéis:

acesse o menu Janela e o respectivo painel;
clique em Ocultar Painéis ou tecle <F4>;
clique na barra de título do painel para minimizar ou maximizar.

Exemplo de Painel
Inspetor de propriedades
O Painel Propriedades exibe opções que se alteram de acordo com a ferramenta ou objeto selecionado.
Menus
Uma boa parte dos menus possui ferramentas correspondentes na barra de ferramentas padrão. São
apresentados os principais:
Menu Abrir
Possui opções comuns em muitos programas como Novo, Abrir, Salvar e Fechar (fechar) um
arquivo. Permite:
digitalizar uma imagem;
alterar as configurações de página;
imprimir um documento;
exportar os arquivos para a Web;
exibir arquivos recentes;
finalizar o Fireworks.
Menu Editar
Comuns no Menu Editar são as ações Recortar, Copiar e Colar (colar). Permitem:
desfazer e refazer uma ação;
selecionar todos os objetos, duplicar objetos selecionados ou cancelar seleção;
abrir a biblioteca;
preferências: Geral, Edição e Área de trabalho;
modificar Atalhos do Teclado;
copiar em máscara.
Menu Exibir
Permite:
controlar o zoom;
simular gama de cores Macintosh;
ativar e desativar réguas e grades;
ocultar bordas e painéis.
Menu Selecionar
Permite:
selecionar toda uma área bitmap;
expandir a área selecionada;
selecionar inverso;
expandir e contrair seleção.
Menu Modificar
Permite:
alterar configurações de tela;
permite criar e editar símbolos;
criar um menu Pop-up;
redimensionar objetos;
alinhar objetos selecionados.
Menu Texto
Permite:
definir a fonte;
definir o tamanho da fonte;
anexar traçado;
configurar verificação ortográfica.
Menu Comandos
Permite:
gerenciar scripts;
gerenciar extensões;
gravar scripts;
definir o layout dos painéis.
Menu Filtros
Permite:
aplicar filtros.
Menu Janela
Possui:
barra de ferramentas, ferramentas (comuns);
todos os painéis;
conjuntos de painéis e salvamento do layout de painel;
fechamento de todos os painéis;
organização das janelas: em cascata ou lado a lado;
acesso ao Sitespring - ferramenta de gerenciamento de projetos da Adobe.
Menu Ajuda
Possui as opções:
arquivos muito completos de ajuda no uso do Fireworks;
novidades do Fireworks;
centro de Suporte Fireworks: Suporte On-Line.
Abrir Documentos Existentes

O Fireworks permite a abertura de vários formatos de arquivos, dentre eles gif, jpg, bmp, arquivos do
PhotoShop (.psd), Adobe Ilustrator, Adobe Free Hand, etc., além de importar de scanner ou câmera
digital.
Para abrir um arquivo:
acesse o menu Arquivo / Abrir ou clique no botão Abrir da barra de ferramentas principal. É
possível também abrir um arquivo clicando no botão Abrir... na tela de boas-vindas do
Fireworks:
na caixa de diálogo que será apresentada, selecione o formato desejado em Arquivos do Tipo,
no caso arquivos do fireworks (*.png);
em seguida, clique no arquivo aula1.jpg, que se encontra na pasta: exemplos.
Observe que existe uma caixa de verificação Abrir As "Untitled",esta opção permite que você proteja
o arquivo original abrindo-o como um documento novo. Também que nesta mesma janela é possível
verificar a largura e altura em pixels, tamanho do documento e uma prévia visualização antes mesmo
de abri-lo.
clique no botão Abrir/Abrir.
Caixa de Diálogo Abrir Arquivo
Visualizando o Arquivo
Ao carregar um arquivo observe as quatro guias na parte superior da janela de documento:
Original,
Visualizar,
2 pág./folha,
4 pág./folha.
Na guia Original é desenvolvido todo o projeto e nas demais é possível visualizar as diversas
possibilidades de exportação, que serão detalhadas posteriormente.
Réguas
As réguas são importantes na confecção precisa dos objetos que compõem o projeto, pois monitoram a
posição do cursor através de duas linhas que aparecem nas réguas à medida que você movimenta o
mouse, na união entre as réguas horizontal e vertical, temos o controle do ponto zero. Você pode
mudar a origem de medida das réguas para ajudá-lo a posicionar os itens da página. As réguas possuem
a unidade padrão de medida em pixels.
Para exibir/ocultar as réguas:
Clique em Exibir / Régua.
Para mudar o ponto zero:

Clique na união entre as réguas e arraste até o local desejado.
Para retornar o ponto zero para o local padrão:

Dê duplo clique no controle do ponto zero.
Guias de réguas
As guias de réguas são importantes no alinhamento dos objetos e na construção dos mesmos. Você
pode criá-las facilmente e fazer com que os objetos do documento possam ser aderidos
automaticamente a ela quando posicionados próximos. Além disso, ao término desta etapa, poderá
bloqueá-las para que os objetos não sejam movidos indevidamente.
Para criar as guias de régua:
Clique num ponto qualquer da régua horizontal ou vertical e arraste.
Para reposicionar as guias:

Clique sobre ela e arraste ou dê duplo clique nela e digite a posição exata.
Para alinhar os objetos à guia:

Clique em Exibir/Guias/EncaixarnasGuias.
Para bloquear as guias:

Clique em Exibir/Guias/BloquearGuias.
Para apagar as guias:

Clique em Exibir/Guias/LimparGuias.
Você pode alterar a cor das guias acessando a opção Editar/Preferênciasda categoria Guiase
Grades.
Grade
A grade também desempenha um papel importante no alinhamento dos objetos, pois divide a tela em
áreas. Da mesma forma que as guias, nós também temos a opção de estar alinhando os objetos à
grade. Mas, primeiramente temos que configurar o seu tamanho, cor e exibi-la.
Para configurar a grade:
Clique em Exibir/Grade/EditarGrade
Modos de exibição
O Fireworks permite que se trabalhe no modo Full Display (tela inteira) que é o modo padrão, e no
modo rascunho. O modo de rascunho mostra apenas o contorno dos objetos, o que é extremamente útil
quando se deseja otimizar a velocidade de redesenho na tela.
Para exibir o documento no modo rascunho:
Clique em Exibir / Full Display. O atalho para alternar entre o modo normal/rascunho é
<Ctrl>+K.
Outro aspecto muito interessante do Fireworks é a visualização Gamma, que permite visualizar o
gráfico na plataforma Windows ou Macintosh.
Para exibir o documento na visualização da plataforma Macintosh:
Ative a opção Exibir /Gamma 1,8.
Zoom (Ampliação)
Para melhor visualização de determinados pontos do projeto, você pode utilizar os comandos de
ampliação:
abra o arquivo aula1.jpg;
clique em Exibir / Mais Zoom para ampliar gradativamente;
clique em Exibir / Menos Zoom para reduzir gradativamente;
ou Exibir / Ampliação para que você mesmo possa escolher a porcentagem de visualização;
você pode ainda ampliar o objeto selecionado em Exibir / Ajustar a Seleção ou através do
botão Zoom da barra de ferramentas.
Para visualizar todo o projeto:

Clique em Exibir / AjustarTudo.
Na caixa de ferramentas existem três botões que também controlam a visualização. São eles:
Ferramenta Mão e Zoom Nível de Zoom

Pratique:
clique no botão Zoom e experimente clicar duas ou três vezes num determinado ponto do seu
projeto. Observe que a ampliação se deu a partir deste ponto;
em seguida, clique no botão Mão e arraste o projeto para visualizar os demais pontos que não
estão aparecendo na tela;
clique novamente no botão Zoom e faça um arraste abrangendo toda a área que deseja
aumentar. Perceba que esta área será ampliada para o tamanho da janela de documento.
Para reduzir a visualização, pressione a tecla <Alt> e clique no documento com a ferramenta Zoom.
Alguns atalhos são muito importantes quando se trabalha com Zoom no Fireworks.
Os principais são: Ctrl + 1 (100%), Ctrl + 0 (Ajuste), Ctrl + + (Aumentar) e Ctrl + - (Diminuir).
Criando um Documento no Fireworks
Para começar a criar um projeto:
clique em Arquivo / Novo ou no botão Novo da barra de ferramentas principal;
especifique a largura, a altura e a resolução do documento que podem ser em pixels,

polegadas ou centímetros. A cor da tela também pode ser alterada pelo usuário em: Branco,
Transparente ou Personalizado;
clique no botão OK.
Caixa de Diálogo Novo Documento

Alterando as Configurações do Novo Documento
Uma vez criado um novo documento, você pode a qualquer momento modificar suas configurações de
tamanho e cor.
Para alterar as configurações de Tamanho:
Clique em Modificar/TeladeDesenho/ Tamanho da tela de Pintura.
Altere as Opções, onde:

na primeira caixa de texto, você altera o tamanho da tela na largura, que pode ser dada em
pixels, centímetros ou polegadas, conforme caixa de cortina ao lado;
na segunda caixa de texto, você altera o tamanho da tela na altura, que também pode ser
dado em pixels, centímetros ou polegadas, conforme caixa de cortina ao lado;
na opção Âncora, pode-se escolher a direção para onde a tela expandirá ou reduzirá, a partir
do centro, a partir do canto esquerdo superior, etc.;
nesta caixa de diálogo é mostrado também o tamanho atual, na largura e altura;
clique em OK.
Caixa de Diálogo Tamanho da Tela de desenho
Para alterar as configurações de Cor:
clique em Modificar / Teladedesenho / Corda Tela deDesenho.
Escolha uma das opções:

Branco: deixa branco o fundo do projeto.
Transparente: não coloca nenhuma cor de fundo.
Custom: onde você pode escolher uma cor de fundo qualquer;
clique em OK.
Para alterar as configurações de Tamanho da imagem:

clique em Modificar/ Teladedesenho / TamanhodaImagem;
em dimensões altere a largura e altura, que pode ser dada em pixels, centímetros ou
polegadas;
deixe a opção Restringir Proporções assinalada para que a altura altere proporcionalmente a
largura;
clique em OK.
Caixa de Diálogo Tamanho da imagem

Painel Histórico
O painel Histórico permite desfazer as alterações em seu documento, pois guarda registros dos
comandos efetuados. Funciona de maneira parecida com o comando desfazer.
Para exibir o painel Histórico:
Clique em Janela/Histórico.
Para desfazer uma ou mais ações:

Clique na seta deslizante situada à esquerda do painel e mova-a para cima até a etapa
desejada.
Painel Histórico
Para desfazer apenas a última etapa, você pode usar pelo teclado a tecla de atalho < Ctrl>+ Z.
Salvando o Projeto
Clique em Arquivo / Salvar ou botão Salvar da Barra de Ferramentas Principal.
Aparecerá a caixa de diálogo a seguir. Nela você poderá gravar o seu projeto no formato do fireworks,
ou seja, PNG (Portable Network Graphics).
Nessa versão do Fireworks é possível salvar em outros formatos de imagem, como JPG, GIF, etc.
Caixa de diálogo Salvar Como
Atividades
1. Defina Design de Interface.
2. Relacione as colunas:
Tipografia ( ) Refere-se ao desenho, incluindo os contornos dos objetos, imagens e pinturas.
Cor ( ) Tipos de letras e suas aplicações nas mídias.
Forma ( ) Trata-se da harmonia entre todos os elementos da interface.
Composição ( ) Inclui o conhecimento dos modelos RGB e CMYK e suas aplicações.
3. Qual o tipo de fonte é mais adequado para textos longos na web?
4. Escreva os procedimentos gerais para a criação de uma interface para a web:
5. O que é o Fireworks CS6? Qual a versão abordada neste material e qual o formato dos arquivos
nativos do programa?
6. Cite as novidades da versão CS6 do Fireworks.
7. Inicie um novo projeto com as dimensões 760 pixels de largura por 420 pixels de altura, resolução de
72 pixel/polegada e cor de fundo #595441.
8. No arquivo criado adicione guias verticais nas posições 10, 140 e 760 pixels e horizontais nas
posições 5, 100, 130, 135, 380 e 415. Estas guias servirão para posicionar os objetos que serão
acrescentados ao projeto final.
9. Salve o projeto dentro da pasta curso com o nome travel.png

Unidade II - Elementos da Interface
Aula 02 - Criação dos Elementos da Interface
Ferramentas de Desenho
Ferramentas Retângulo/Elipse/Polígono/Linha/Outras
Aula 03 - Outros Elementos da Interface

Ferramenta Caneta
Ferramentas Traçado Vetorial e Redesenhar traçado
Seleção de Objetos
Manipulação de Textos
Atividades
Aula 04 - Preenchendo e Traçando os Elementos da Interface

Cores
Preenchimento e Traçado dos Objetos
Efeitos de Preenchimento
Efeitos de Traçado
Aula 05 - Manipulação de Objetos

Manipulação de Objetos
Atividades
Aula 06 - Camadas
Os Objetos e as Camadas
Distribuindo em Camadas
Agrupar
Aula 02 - Criação dos Elementos da Interface
Ferramentas de Desenho
Para começar o seu projeto, você pode utilizar as ferramentas básicas de desenho vetorial. Existe uma
ferramenta ideal para cada objeto a ser criado.
Para criar um objeto geométrico, você pode optar pelas ferramentas:
Ferramentas de imagens vetoriais

Para criar um segmento de reta ou curva com precisão use a ferramenta Caneta (Caneta) e
para desenhar de forma livre, sem preocupar-se como e onde colocar os pontos, utilize a
ferramenta Caminho vetorial (brush).
Opções de desenho Caneta (caneta)

E, por fim, para desenhar um segmento de linha reta, utilize a ferramenta Linha (atalho N).
Ferramentas Retângulo/Elipse/Polígono/Linha/Outras
Apesar de serem de fácil manuseio, estas ferramentas produzem um resultado de impacto quando
personalizadas e bem distribuídas na forma de botões e banners numa página da Web.
Retângulo
Para criar um retângulo:
clique na ferramenta Retângulo da caixa de ferramentas;
posicione o cursor na área de documento, clique e arraste até o tamanho desejado.
Para criar um retângulo com cantos arredondados:

clique na ferramenta da caixa de ferramentas Vetor/Retângulo;
no submenu da ferramenta Retângulo escolha a opção Arredondado;
posicione o cursor na área de documento, clique e arraste até o tamanho desejado;
arraste o ponto amarelo para definir o nível de arredondamento.

Retângulo e retângulo com cantos arredondados
Elipse
Para criar uma elipse:

clique na ferramenta Elipse no submenu da Ferramenta Retângulo da caixa de ferramentas;
Várias Elipses
Polígono
Para criar um polígono:

agora escolha a ferramenta Polígono no submenu da ferramenta Retângulo;
no painel Propriedades escolha a forma (polígono ou estrela), quantidade de lados e ângulo

(da estrela);
Polígonos e estrelas
Linhas
Para criar uma linha:

clique na ferramenta Linha;
Várias linhas
Outras formas
O Adobe Fireworks CS6 apresenta ainda outras formas, todas dinâmicas e com o funcionamento
parecido com o Retângulo Arredondado. Essas formas podem ser utilizadas na criação de elementos da
interface, como botões, gráficos e organogramas.
As possibilidades de criação de elementos no Fireworks CS6 foram ampliadas com as novas formas
Aula 03 - Outros Elementos da Interface
Ferramenta Caneta
Uma das ferramentas de desenho vetorial mais importante é a ferramenta Caneta. Ela propicia grande
liberdade na criação de linhas retas e curvas. Você pode utilizar curvas e retas no mesmo desenho, o
que possibilita a obtenção de uma grande variedade de figuras.
Essa ferramenta é utilizada para a criação de todo tipo de layout, desde um design retangular até com
formas orgânicas e livres.
Para criar um segmento de linhas retas:
clique na ferramenta Caneta;
posicione o cursor no ponto desejado, dê um clique, movimente o cursor até o próximo ponto e
clique novamente;
para finalizar o segmento de um objeto fechado, dê um clique no ponto inicial do mesmo

quando um círculo aparecer ao lado do ponteiro. Ou dê duplo clique em qualquer posição, caso
você queira um segmento aberto.
Para criar um segmento de linhas curvas:

mantenha pressionado o botão do mouse em um ponto e, em seguida, arraste;
repita esta operação para criar o objeto.
Para finalizar o segmento, utilize os procedimentos já citados.
Objetos criados com ferramenta Caneta

Veja o exemplo de um layout criado com a ferramenta Caneta:
Ferramentas Traçado Vetorial e Redesenhar traçado

Para desenhar com a ferramenta Vetor:
na caixa de ferramentas selecione a ferramenta Vetor no submenu da ferramenta Caneta;
clique na respectiva ferramenta e desenhe.
Você pode usar a tecla <Shift> juntamente com a ferramenta Lápis ou Pincel, para desenhar
segmentos retos e interligados.
Traçado com a Ferramenta Traçado vetorial (pincel)

Para redesenhar o traçado:
escolha a ferramenta Redesenhar Caminho no submenu da ferramenta Caneta;
clique e arraste sobre um traçado já existente, mudando o seu trajeto e perceba que ele será
redesenhado.
Seleção de Objetos
Para editar os objetos criados é necessário selecioná-los. Para tanto, use as ferramentas descritas a
seguir:
Ferramentas de ponteiro
Ferramenta Ponteiro
Ferramenta utilizada para selecionar um ou mais objetos inteiros. Quando selecionado, um traçado
aparece em volta do objeto, podendo este ser movido ou editado. A barra de propriedades mostrará as
características do objeto selecionado, mudando de forma dinâmica do tipo de objeto.
Para selecionar um objeto:
clique na ferramenta Ponteiro;
em seguida, clique no objeto.
Para selecionar dois ou mais objetos:

clique na ferramenta Ponteiro;
em seguida, clique no objeto;
pressione a tecla <Shift> e clique nos demais objetos. Ou,
arraste com a ferramenta Ponteiro, enquadrando os objetos dentro de uma seleção

retangular.
Ferramenta Selecionar Atrás
Esta ferramenta torna fácil a manipulação de objetos empilhados, pois permite selecioná-los
facilmente da posição que ocupe.
clique na ferramenta Selecionar Atrás, que se encontra no submenu da ferramenta
Ponteiro;
clique repetidas vezes em um traçado até selecionar o objeto desejado.
Ferramenta Subseleção
Esta ferramenta é utilizada para editar os objetos, pois permite selecionar as suas partes isoladas, ou
seja, os pontos. Ao selecionar um objeto com esta ferramenta, tem-se acesso aos pontos e as alças de
edição dos objetos. Ao clicar e arrastar sobre os pontos pode-se reposicioná-los. E, nas alças, no caso
de segmentos curvos, pode-se alterar o ângulo da curva.
Com a ferramenta Subseleção também é possível selecionar objetos agrupados, isolando um objeto
sem a necessidade de desfazer o grupo. Faça:
clique na ferramenta Subseleção e clique num objeto da tela;
clique e arraste sobre um ponto para mudar a sua posição;
clique e arraste na alça para mudar o ângulo de curva.
Objeto selecionado com a Ferramenta Subseleção

Edição de pontos utilizando a ferramenta Subseleção a ferramenta Caneta
Para criar um ponto:

selecione o objeto;
clique no traçado do objeto. Observe que um novo ponto aparece.
Para excluir um ponto:

clique na ferramenta Subseleção;
clique no ponto e tecle <Delete>.
Para Dimensionar um ponto de um segmento reto para curvo:

clique no ponto e arraste;
clique na alça do ponto para alterar o ângulo da curva do segmento.
Para Dimensionar um ponto de um segmento curvo para reto:

clique no ponto para selecioná-lo;
clique novamente no ponto para convertê-lo.
Para separar segmentos:

clique na ferramenta Faca;
clique sobre os pontos a serem cortados;
clique novamente na ferramenta Subseleção e mova o seguimento desejado.
Objeto antes e depois de ser cortado com a ferramenta Knife (faca)

Para editar os pontos de um retângulo, você terá que inicialmente desagrupá-lo. Isso é feito mediante
uma janela de confirmação que aparece automaticamente quando se clica num dos pontos do
retângulo com a ferramenta Subseleção.
Manipulação de Textos
No Fireworks, os textos são tratados como imagens, permitindo a aplicação de vários efeitos, úteis na
construção de elementos de interface.
Como os textos são tratados como imagens gráficas, eles levam mais tempo para carregar nos
visualizadores do que textos comuns em HTML. Porém, isso garante que eles permaneçam da forma
como foram criados no software que irá carregá-lo.
Deve-se lembrar, entretanto, que numa página HTML o texto principal não deve ser utilizado com
imagem e sim como texto simples.
Para criar textos:
clique na ferramenta Texto;
clique na área do documento;
digite o texto.
No inspetor de Propriedades acesse às seguintes formatações:

Painel Propriedades quando selecionado um texto
Fonte - permite escolher o tipo de letra a ser usado.
Tamanho e cor da fonte - permite escolher o tamanho e a cor da letra.
Negrito, Itálico e Sublinhado - permite a aplicação desses estilos ao texto selecionado.
Kerning ou Tacking - permite a escolha da porcentagem de ajuste entre letras do texto.
Entrelinhamento - permite a escolha do espaço entre as linhas do texto, também em porcentagem.
Alinhamentos - o primeiro botão de alinhamento coloca o texto na horizontal ou vertical, seguindo
tem-se alinhamentos: à esquerda, centralizado, à direita e justificado.
Existe mais um botão que apresenta a letra "A", este é o botão alinhamento alongado, que ajusta as
palavras do texto no espaço determinado, através de alongamento das mesmas.
Escala horizontal - alonga ou comprime as letras na largura, através de porcentagem dada.
Opções de Suavização - níveis de Suavização de Serrilhado da Fonte.
Aplicar contorno em textos:
clique na ferramenta Texto;
clique na área do documento;
digite o texto.
com a ferramenta Ponteiro, clique em cima do texto
escolha a cor de contorno conforme no local indicado na imagem abaixo
Converter Textos em Traçados

Existem alguns efeitos que exigem que o texto seja convertido em traçados. Porém, após converter o
texto você não poderá mais editá-lo no Editor de Textos. A partir deste momento você tratará o texto
somente como objeto de traçado. Assim:
selecione o texto;
clique no menu Texto /ConverteremCaminhos.
Utilize as ferramentas de seleção já citadas, Caneta e Subseleção, para dar novas formas às letras.
Texto antes e depois da Conversão para Traçados

Atividades
1. Abra o arquivo 1.png criado e reproduza o layout a seguir, baseando-se nas guias do documento.
As cores para os elementos são:

A - #494127
B - #B9B09D
C - #FFFFFF
D - #F6E3C1
E - #4A8797
F - #69BFDE
2. Produção dos Textos. Digite o texto:
"Travel Turismo". Fonte Jokerman, tamanhos 50 e 30, centralizado e cor preta.
"Você em qualquer lugar do Brasil". Fonte Franklin Gothic Medium Cond, tamanho 20 e cor
branca.
"bonito porto seguro recife natal ubatuba florianópolis rio de janeiro manaus curitiba porto
alegre são paulo campos do jordão". Fonte Franklin Gothic Medium Cond, tamanho 18, alinhado
à direita e cor preta
3. Salve as alterações feitas no arquivo 1.png.

Aula 04 - Preenchendo e Traçando os Elementos da
Interface
Cores
O Fireworks oferece várias opções quando se trata de escolher cores para um gráfico. Você pode fazer
uso dos exemplos, texturas ou até mesmo criar cores através de modelos, como o RGB, CMY, tons de
cinza, HSB e Hexadecimal.
Uma das maneiras mais comuns de definir cores para imagens gráficas da Web é utilizar o sistema de
cor RGB (Red, Green e Blue - vermelho, verde e azul). Este sistema consiste no conjunto de cores
luminosas específicas para a tela de computador ou TV.
Já o modelo CMY trata-se de uma conveniência ao CMYK (modelo utilizado para impressão), pois
facilita aos profissionais já acostumados com a padronagem gráfica.
A forma mais clássica de modelo de cor é o HSB, onde o seu conjunto de cores sofre alterações de tom,
saturação e brilho.
Se você quiser reduzir o tamanho do arquivo, você pode adaptar o seu gráfico para as cores seguras da
Web ou tons de cinza. No modelo tons de cinza, as cores do gráfico sofrem variação do branco ao
preto. Já nas 216 cores seguras da Web, o número de cores torna-se restrito, porém não há variação
de cores nos diferentes browsers ou plataformas.
Para os profissionais acostumados com as definições de cor em HTML, o Fireworks também traz o
modelo hexadecimal, que trata as cores do modelo RGB identificando-as por letras e números.
Preenchimento e Traçado dos Objetos
São vários os recursos de preenchimento e traçado que podem ser aplicados aos objetos. O Fireworks
CS6 preenche tanto figuras fechadas quanto abertas. Existem alguns botões básicos para este
procedimento:
Caixa de Ferramentas
Para alterar o preenchimento de um objeto:
selecione o objeto;
clique na seta da ferramenta Cor de Preenchimento. O Fireworks apresentará uma caixa onde
deverá ser escolhida uma cor. Ou,
clique na ferramenta Lata de Tinta e clique nos objetos que você deseja alterar o
preenchimento.
Para alterar o traçado de um objeto:

selecione o objeto;
clique na seta da ferramenta Cor do Traçado. O Fireworks apresentará uma caixa onde deverá
ser escolhida uma cor.
A ferramenta Conta-gotas serve para selecionar cores do painel ou de qualquer objeto do documento.
É possível, a qualquer momento, inverter as cores atualmente selecionadas para preenchimento e
traçado. E, até mesmo, retornar as cores padrão configuradas no Fireworks.
Opções de cores das Ferramentas Preenchimento e Traçado

Estilos
Outra forma de alterar as cores de preenchimento e traçado é através do painel Estilos. Ele funciona
como uma espécie de paleta de cores, porém com cores e efeitos que dentre eles estão: Estilos
Diagonais, Chromo, Tons de Pastéis, Madeiras, Diagonal, Papel entre outros.
Para escolher um grupo de exemplos:
clique em Janela / Estilos caso o referido painel não esteja sendo visualizado na tela;
clique na seta de controle deste painel e escolha um dos itens listados acima para carregar as
opções de cada estilo.
Painel Estilos
Misturador de Cores
O painel Mixer é utilizado para criar uma cor personalizada a partir de um modelo de cor. Utilize este
painel para usar uma cor que não se encontra no painel exemplos.
Para criar uma cor personalizada:
clique em Janela/ Misturador de Cores para exibir o painel, se ele ainda não estiver
aparecendo na tela;
escolha um dos modelos de cores disponíveis;
adicione ou subtraia valores para criar sua própria cor ou utilize a captura de cor na
visualização a seguir.
Painel Mixer
Efeitos de Preenchimento
Além das cores sólidas o Fireworks permite o preenchimento dos objetos com gradientes, que
gradualmente mesclam uma cor com outras. É possível também, utilizar-se de padrões, pontilhamento
Web e alterar a intensidade dos preenchimentos através de texturas.
Para escolher as cores de preenchimento:
selecione o objeto que deseja alterar a cor e no inspetor de Propriedades escolha a opção
desejada; ou,
na caixa de Ferramentas, em cor de preenchimento, clique em Opções de Contorno.

Opções de escolha de cores do inspetor de propriedades
Sólido (a)
As cores sólidas são o preenchimento básico de um objeto.
Normalmente elementos de interface com cores sólidas (como botões, textos e fundos) são melhores
exportados em imagens do tipo GIF.
Bordas
Os objetos desenhados no Fireworks possuem três opções de borda.

Na opção Borda do painel Propriedades você pode optar por: Intenso, Suavização ou Difusão. Esses
efeitos afetarão diretamente o preenchimento do objeto. Você pode perceber esse efeito
principalmente próximo à borda.
A opção Suavização cria meios-tons na borda dos objetos para evitar um contraste muito forte com o
fundo. Já a opção Enevoar permite o controle da porcentagem de névoa do objeto, criando um efeito
interessante.
Opções de preenchimento sólido Borda nos modos, Intenso, Suavização e Difusão

O efeito de borda Enevoada é muito utilizado em elementos de interface.
Opacidade de Objetos, Preenchimento e Contorno
Nesta nova versão o Fireworks CS6 conta com três formas de opacidade para objetos vetoriais que são:
objetos (preenchimento e contorno);
preenchimento;
contorno.
Os modos de transparência podem ser alterados facilmente pelo Painel de Propriedades do objeto
selecionado, como mostra os exemplos abaixo:
Opacidade em Objetos (preenchimento e contorno):
selecione o objeto;
no painel propriedades do objeto selecionado;
clique e arraste o controle deslizante de Opacidade controlando a transparência desejada

ou digite um valor na caixa de texto.
Opacidade para o objeto

Opacidade Aplicada ao Preenchimento ou Traçado:
selecione o objeto;
no painel propriedades clique no seletor de cores do Preenchimento ou no seletor de cores

do Traçado;
clique e arraste o controle deslizante de Opacidade controlando a transparência desejada ou

digite um valor na caixa de texto.
Caixa seletora de cores de Preenchimento
Padrões
O Fireworks oferece inicialmente em torno de sessenta padrões, porém você pode adicionar outros
padrões, selecionando uma imagem na opção última da lista da lista de padrões.
Os padrões são muito utilizados na criação de fundos de páginas e texturas em geral.
Preenchimentos padrões
Gradiente
Na criação de interfaces com visual rico (como as de web 2.0) o elemento mais importante é o
Gradiente. Utilizado de maneira coerente esse efeito de preenchimento é quem cria os brilhos,
reflexos e efeitos visuais encontrados em milhares de web sites.
O Fireworks CS6 possui 12 opções de preenchimento gradiente, cada uma útil em um tipo de situação.
Todos os tipos de Gradientes do Fireworks CS6

Para criar seu próprio Gradiente:
desenhe e selecione um objeto;
escolha o tipo de Gradiente no painel Propriedades. Exemplo: Linear ou Radial;
clique no botão Cor de Preenchimento.
A seguinte tela será exibida:
na caixa de edição de Gradiente, dê um clique nos quadrinhos e selecione as novas cores;
clique na ferramenta de seleção e, através das alças, modifique o gradiente do objeto.

Aparecerão pontos sobre o objeto. Através desses pontos é possível alterar os ângulos e posição
do Gradiente. Cada tipo de gradiente possui uma forma de trabalho.
Para remover uma cor do Gradiente, basta arrastar para fora da caixa de Gradientes. A partir dessa
nova versão também é possível alterar o ângulo dos padrões e gradiente. Nesta nova versão é possível
definir um valor em graus para o gradiente.
Alterando a aparência do Gradiente

Existem infinitas possibilidades de trabalho com Gradientes, bastando combinar estilos e cores. Veja o
exemplo a seguir (conhecido como efeito Aqua):
Para esse efeito, muito comum na web, foram utilizados vários círculos. No círculo superior está
aplicado um Gradiente linear
O Gradiente transparente utilizado para a criação de brilhos e reflexos é configurado com 2 cores.
Branco e branco transparente (0%)
Textura
O Fireworks permite a aplicação de texturas em qualquer tipo de preenchimento. Existem dezenas de

texturas, que podem ter sua opacidade controlada.
Para aplicar uma textura:
selecione um objeto;
clique na opção Textura do inspetor de Propriedades e escolha uma delas;
escolha também a porcentagem de intensidade da textura.
Opções de textura
Para remover uma textura, basta colocar sua opacidade em 0%.
As texturas usadas de maneira discreta são um excelente elemento de interface.
Efeitos de Traçado
No Fireworks o traçado dos objetos também pode ser personalizado através de efeitos, e não somente
cores ou espessuras como nos programas vetoriais comuns.
Para aplicar um traçado:
selecione o objeto;
no inspetor de Propriedades, escolha as opções de traçado desejadas.

Opções de traçado Exemplos de traçados
Aula 05 - Manipulação de Objetos
Manipulação de Objetos
O Fireworks permite total liberdade para sua imaginação e criatividade, pois com suas ferramentas é
possível mover e Dimensionar qualquer objeto, seja ele forma, traçado ou texto.
Mover e duplicar
Para mover um objeto:
clique em uma das ferramentas de seleção;
clique no objeto e arraste-o ou use as setas direcionais do teclado.
Para duplicar um objeto:

clique numa das ferramentas de seleção.
clique no objeto e arraste-o com a tecla <ALT> pressionada. Ou,
clique em Editar/Duplicar.
Dimensionar (Redimensionar, Dimensionar, Inclinar, Distorcer e Espelhar)
Para algumas das operações de manipulação de objetos, usamos as ferramentas a seguir:
Opções para Dimensionar

Para redimensionar um objeto:
clique numa das ferramentas de seleção e clique no objeto;
clique na ferramenta Dimensionar;
clique numa das alças que surgirão ao redor do objeto e arraste. Ou,
clique em Modificar/Dimensionar/Escala.
Para redimensionar ou mover precisamente um objeto, utilize o painel Propriedades.
Opções de redimensionar e posição do objeto

Para Dimensionar um Objeto:
clique numa das ferramentas Dimensionar (Q);
clique na linha que enquadra o objeto e gire. Ou,
clique em Modificar/Dimensionar/Rotacionar (180º ou 90º sentido horário ou anti-horário).

Objeto sendo girado
Para Inclinar um Objeto:
clique em uma das ferramentas de seleção e clique no objeto;
clique na ferramenta Inclinar;
clique em Modificar/Dimensionar/ Inclinar.
Para Distorcer um Objeto:

clique na ferramenta Distorcer;
clique em Modificar/Dimensionar/Distorcer.
Exemplos de Objetos Inclinado e Distorcido

Para Espelhar um Objeto:
clique numa das ferramentas de seleção;
clique em Modificar/Dimensionar/Flip (horizontal ou vertical).
Você também pode obter precisão na manipulação de objetos utilizando a Dimensão numérica do menu
Modificar/Dimensionar. Através dela é possível alterar a escala tanto em porcentagem quanto em
pixels, e ainda, especificar seu ângulo de rotação.
É possível alterar o eixo de giro do objeto, clicando no pequeno círculo que aparece no centro do
mesmo e arrastando-o para outra posição. Perceba que após essa operação o objeto será girado em
relação a essa nova posição do eixo.
Mudando a Forma do Objeto
São apresentadas agora algumas ferramentas práticas de alteração dos objetos. Sua vantagem é que
não precisa se preocupar com os pontos de edição dos objetos, pois a Dimensão é feita de forma
totalmente livre.
Opções de Forma Livre

Ferramenta Forma Livre
Esta ferramenta permite alterar o traçado de um objeto fechado ou aberto. Ela oferece duas funções
empurrar e puxar. No modo empurrar, a ferramenta permite que as bordas de um objeto sejam
afundadas para modificar a sua forma. No modo puxar, a ferramenta permite que estique um
prolongamento das bordas de um objeto para modificar a sua forma.
Para utilizar a ferramenta Forma Livre no modo empurrar:
selecione o objeto desejado com a ferramenta de seleção;
clique na ferramenta Forma Livre;
configure o tamanho da ferramenta no painel Propriedades;
posicione o mouse numa das bordas e observe que um "s" aparece junto ao cursor;
clique e empurre.
Para utilizar a ferramenta Forma Livre no modo puxar:

clique na ferramenta Forma Livre;
configure o tamanho da ferramenta no painel Propriedades;
posicione o mouse sobre o objeto ou fora dele e observe que um "o" aparece junto ao cursor;
clique e puxe.
Ferramenta Mudar Forma da Área
Esta ferramenta possui, além dos recursos já citados, a possibilidade de se alterar a força da pressão.
Para utilizar a ferramenta Mudar Forma da Área:
clique na ferramenta Mudar Forma da Área;
configure o tamanho da ferramenta e pressão no painel Propriedades;
posicione o mouse no objeto e observe que um "o" aparece junto ao cursor;
clique e puxe ou empurre (arraste o cursor).
Exemplos das ferramentas Forma Livre e Mudar Forma da Área

Quando estiver usando o botão forma livre ou mudar a forma da área, utilize as teclas 1 e 2 ou
setinha para a direita e esquerda, com o botão do Mouse pressionado para aumentar ou diminuir o
tamanho da ferramenta.
Ferramenta de Alteração de Caminhos
Alguns traçados do Fireworks podem ter sua pressão modificada por mesas digitalizadoras (Tablets).
As ferramentas Alteração de Caminho - Aditiva e Alteração de Caminho - Subtrativa servem para
ajustar essa pressão, afinando e engrossando os traçados sensíveis à pressão.
Para utilizar a ferramenta Mudar Forma da Área:
selecione o caminho desejado com a ferramenta de seleção;
clique na ferramenta Alteração de Caminho - Subtrativa para afinar o traçado;
clique na ferramenta Alteração de Caminho - Aditiva para engrossar o traçado.

Exemplo de traçado afetado pela ferramenta Editar Traçado
Organizar
O Fireworks trabalha com o conceito de objetos empilhados, ou seja, o primeiro objeto desenhado fica
atrás de todos, e os restantes, um na frente do outro.
Às vezes é necessário alterar essa ordem. Para isto:
clique no objeto a ser reposicionado;
clique em Modificar/Organizar;
escolha a ordem que deseja. Ou,
clique num dos botões de organização da barra de ferramentas Modificar.
Barra de ferramenta Modificar
1. Trazer para Frente - traz o objeto selecionado para frente de todos os outros.
2. Avançar - posiciona uma etapa à frente na pilha.
3. Recuar - posiciona uma etapa atrás na pilha.
4. Enviar para Trás - envia o objeto selecionado para trás de todos os outros.
Diferentes arranjos de objetos

Os atalhos de teclado para mudar a ordem dos objetos são úteis e simples:
1. <Ctrl>+<Shift> + Seta para Cima - traz o objeto selecionado para frente de todos os outros.
2. <Ctrl>+Seta para Cima - posiciona uma etapa à frente na pilha.
3. <Ctrl>+Seta para Baixo - posiciona uma etapa atrás na pilha.
4. <Ctrl>+<Shift> + Seta para Baixo - envia o objeto selecionado para trás de todos os outros.
Alinhar
Quando se trata de criar interface para a Web é imprescindível utilizar recursos avançados de
alinhamento, pois não há nada pior do que visitar um site cujos botões e afins se encontram
desproporcionais e desalinhados em relação ao contexto.
Para alinhar os objetos:
selecione-os com a tecla <Shift> ou clique no menu Selecionar/Selecionar Tudo para alinhar
todos os objetos;
clique em Modificar/Align;
escolha a posição de Alinhamento desejada. Ou,
clique num dos botões de alinhamento da barra de ferramentas Modificar. Se não estiver
visualizando esta ferramenta, clique no menu Janela/Ferramentas/Modificar.
Opções de Alinhamento
Alinhamento Vertical: à esquerda, ao centro e à direita em relação aos objetos selecionados.
Alinhamento Horizontal: pelo topo, centralizado e à base em relação aos objetos

selecionados.
Distribuir larguras e alturas entre os objetos selecionados.
Objetos desalinhados e objetos alinhados

Junção e Dividir
Este recurso permite Dimensionar dois ou mais objetos em um único da mesma cor, baseada no objeto
que estiver atrás de toda a pilha e, na intersecção dos objetos o Fireworks preenche com a cor branca.
Você pode voltar a separá-los usando a opção dividir.
Para unir os objetos:
selecione-os;
clique em Modificar/ CombinarCaminhos/ Junção. Ou,
clique no botão Junção na barra de ferramentas Modificar.
Para dividir os objetos unidos:

selecione-os;
clique em Modificar/ CombinarCaminhos / Dividir. Ou,
clique no botão Dividir na barra de ferramentas Modificar.
Botões Unir e Dividir Objetos Unidos

Combinando os Objetos
Você também dispõe de algumas opções de combinação de objetos, que tornam ainda mais vastas as
possibilidades de manipulação de elementos.
União
Este recurso permite fazer a fusão de dois ou mais objetos, uniformizando as cores, baseado no objeto
que estiver atrás de toda a pilha.
Para fazer a União dos objetos:
selecione-os;
clique em Modificar/ CombinarCaminhos/ União.
Interseção
Esta opção considera só a parte sobreposta de todos os objetos empilhados, descartando as partes que
sobram.
Para fazer a Interseção dos objetos:
selecione-os;
clique em Modificar/ CombinarCaminhos/ Interseção.
Subtrair / Perfurar
Este comando perfura o objeto que está embaixo, no formato do que está em cima.
Para Perfurar os objetos:
selecione-os;
clique em Modificar/ CombinarCaminhos / Perfuração.
Cortar
Este comando exibe somente a parte sobreposta pelo objeto do topo da pilha, causando um efeito
parecido com uma máscara.
Para Cortar os objetos:
selecione-os.
clique em Modificar/ CombinarCaminhos / Cortar.
Objetos modificados
Alterar Traçado
Você também pode alterar a forma de um demarcador, reduzindo os seus pontos de edição, aplicando
efeitos de expansão no traçado, ou ainda deslocando o traçado para fora ou dentro do objeto.
Para simplificar o traçado:
selecione o traçado;
clique em Modificar/ AlterarCaminho / Simplificar;
clique em OK.
Caixa de diálogo Simplificar

Quanto maior a quantidade, menor o número de pontos de edição do traçado e, portanto, mais
simplificado ficará o objeto.
Para expandir o traçado:
clique em Modificar/ AlterarCaminho / ExpandirContorno:

Largura - espessura de expansão do traçado;
Cantos - tipos de cantos do traçado: meia esquadria, redondo ou chanfrado;
Limite de Mitre - limite de curvatura do traçado;
Extremidades da Linha - tipos de pontas do traçado;
clique em OK.
Para Interiorizar o traçado:

clique em Modificar/ AlterarCaminho / Contrair / ExpandirCaminho.
Anexar Texto a um Traçado
Para obter textos de formas mais variadas utilize o recurso de anexar o texto a um traçado. Dessa
forma, o texto se ajusta ao caminho do traçado e ainda permanece editável.
Para anexar texto a um traçado:
digite um texto;
desenhe um traçado com a forma desejada;
selecione-os e clique em Texto/Anexaraocaminho.
Texto Anexado ao traçado (aplicado uma cor sólida e uma sombra)

Para separar o texto do traçado:
clique em Texto/Destacar do Caminho. Dessa forma, o texto retorna à posição original e o
traçado retoma suas propriedades, podendo ser editado novamente.
Atividades
1. Abra o arquivo travel.png e aplique o efeito visto anteriormente de texto em traçado, conforme a
figura a seguir:
2. Utilizando a ferramenta faca, corte o retângulo branco de ponta a ponta, na altura da linha guia de
380 pixels.
3. Salve as alterações feitas no arquivo travel.png.
Aula 06 - Camadas
Os Objetos e as Camadas
As camadas permitem uma forma de manipulação mais precisa de objetos. É possível bloquear,
reordenar, ocultar e mover os objetos de maneira parecida com o Adobe Photoshop. No Fireworks,
entretanto, camada é o mesmo que Grupo de Camadas no Photoshop.
Essa forma de trabalho é bastante útil, principalmente em Layouts mais complexos, permitindo o
bloqueio e ocultação de certos itens da interface (como o conteúdo).
Distribuindo em Camadas
Distribuindo os objetos em camadas poderá manipulá-los individualmente e ocultar ou bloquear
objetos de determinadas camadas.
Para exibir o painel Camadas:
clique em Janela / Camadas.
Painel Camadas
Inicialmente, o painel Camadas apresenta duas camadas principais: Camada da Web e Camada 1.
A Web Camada conterá os links, pontos ativos e fatias que serão abordados posteriormente e a
Camada 1 possuirá todas as subcamadas para os objetos que forem criados nessa camada.
Este painel apresenta também um controle de opacidade, responsável pela aplicação de transparência
aos objetos da Camada selecionada.
Para aplicar transparência aos objetos:
desenhe um objeto qualquer e você verá que automaticamente será criada uma subcamada
para ele na Camada 1;
selecione a subcamada;
modifique a opacidade da camada através da seta deslizante. Quanto menor o valor, mais
transparente será o objeto.
Para criar camadas:

clique em Editar / Inserir / Camada. Ou,
clique na opção Nova Camada que se encontra no menu de opções do painel.
Para excluir camadas:

clique nela e arraste até o botão Delete Seleção (lixeira), que se encontra na parte inferior
do painel Camadas.
Para renomear camadas:

dê duplo clique na camada a ser renomeada;
digite o novo nome;
clique em OK.
A opção compartilhar entre molduras cria um vínculo entre a camada e as molduras. Quando você
atualizar qualquer objeto nessa camada, ele será atualizado em todas as molduras.
Para mover o objeto para outra camada:
Clique no objeto.
Aparecerá um pequeno quadrado na frente do nome da camada.

Clique nele e arraste até a camada desejada.
Para bloquear a edição de objetos em camadas:

Clique no quadro cinza que se apresenta antes do nome da camada.
Aparecerá um cadeado indicando o bloqueio da camada.

Para desbloqueá-la, repita a operação.
Para ocultar/exibir objetos da camada:

clique no olho que aparece na frente do botão de bloqueio da camada;
para reexibi-la, repita a operação.
Você também pode acionar os recursos citados, através das opções do painel camadas, acessados a
partir da seta de controle, que se encontra na parte superior do respectivo painel.
Agrupar
Este recurso permite agrupar objetos para que se possa atribuir propriedades ao grupo de objetos, tais
como redimensionamento, rotação, etc. Porém, mantém as propriedades individuais de cada objeto
que permanecem acessíveis se selecionados com a ferramenta Subseleção, tais como: cores,
movimentação, espessuras, etc.
Para agrupar os objetos:
selecione-os;
clique em Modificar /Agrupar (<Ctrl><G>).Ou,
clique no respectivo botão na barra de ferramentas Modificar.
Perceba que os objetos foram agrupados e que o painel Camadas agora possui uma camada para o
grupo, denominada Agrupar: x objetos, onde x representa a quantidade de objetos agrupados.
Os objetos agrupados podem ter sua camada renomeada, facilitando a organização do trabalho
Para desagrupar, selecione o grupo, clique em Modificar / Desagrupar,automaticamente as camadas
individuais retornarão.
Unidade III - Importação e Tratamento de Imagens
Bitmaps
Aula 07 - Importação
Importando Arquivos
Arquivos Bitmaps
Arquivos Vetoriais
Importações de Textos
Aula 08 - Tratamento de imagens Bitmaps

Trabalhando com Pixel
Seleção
Aula 09 - Efeitos
Efeitos ao Vivo
Nitidez
Desfocar
Ajustar Cor
Bisel e Entalhe
Sombra e Brilho
Outro
Aplicando Filtros
Photoshop Live Effects
Atividades
Aula 10 - Retoque de imagem

Ferramentas para Retocar Imagens
Aula 11 - Máscaras
Máscara
Mascaramento de um Objeto através do Painel Camadas
Atividades
Aula 12 - Atividades
Mala-Direta
Aula 07 - Importação
Importando Arquivos
Facilitando a integração entre diversos aplicativos, o Fireworks é capaz de importar uma série de
arquivos diferentes do seu formato padrão.
Basicamente os arquivos importados são do tipo: bitmap, vetoriais e textos. Felizmente o Fireworks
pode importar os três tipos de arquivos, facilitando assim o desenvolvimento de um projeto.
Arquivos Bitmaps
Você pode reconhecer um arquivo bitmap pela sua extensão, que pode ser: TIF, GIF, JPEG, PNG, BMP
ou PICT. Este arquivo pode conter uma foto, figura ou ainda textos, sendo que qualquer que seja seu
conteúdo é constituído por pixels, ou seja, a imagem é dividida em linhas e colunas, onde cada quadro
formado representa um pixel.
Quanto maior a quantidade de pixels, maior a qualidade da imagem. Juntamente com uma qualidade
maior também existe um aumento do peso (kb) da imagem.
Para importar um arquivo Bitmap:
crie um arquivo novo;
clique em Arquivo / Importar (<Ctrl>+R);
na caixa de diálogo Importar, escolha o local de origem e o arquivo desejado;
clique em Abrir;
clique em qualquer posição do seu documento (ou determine o tamanho que deseja importar a
imagem).
Caixa de Diálogo Importar

Também é possível simplesmente abrir um arquivo bitmap no Fireworks. Esta operação faz com que o
software crie um novo documento, com a extensão .PNG, mas apresentando o tamanho e a resolução
da imagem original.
clique em Arquivo / Abrir;
na caixa de diálogo Abrir, escolha o local de origem e o arquivo desejado. Se quiser, abra o
arquivo cores.jpg presente na pasta exemplos;
clique em Abrir.
Arquivos Vetoriais
Arquivos de trabalho artístico ou em outras palavras, arquivos vetoriais, também podem ser importados
e posteriormente editados no Fireworks, sejam feitos no Adobe Illustrator, Macromedia FreeHand ou
CorelDraw. Esse tipo de arquivo é constituído de "vetores", ou seja, de números e equações
matemáticas que descrevem e resultam na imagem.
Um dos principais recursos novos do Fireworks CS6 é a sua integração com o Adobe Illustrator. Os
arquivos criados nesse aplicativo da Adobe são facilmente abertos ou importados no Fireworks.
clique em Arquivo / Abrir.
na caixa de diálogo Abrir, escolha o arquivo illustrator.ai presente na pasta exemplos;
clique em Abrir.
O arquivo do Illustrator é totalmente convertido para o Fireworks, podendo ser editado e modificado
como um documento nativo.
Importação de Textos
Além da importação de imagem, o Fireworks ainda permite a utilização de textos no seu projeto,
desde que eles estejam no formato ASCII ou RTF.
Para importar um texto:
clique em Arquivo / Importar;
na caixa de diálogo Importar, escolha o local de origem e o arquivo desejado. Se quiser,

importe o arquivo texto.rtf presente na pasta exemplos;
clique em Abrir;
clique em qualquer posição do seu documento.
Para Editar o texto ou área de texto:

o texto aparecerá envolto num quadro, clique nas alças e arraste para redimensionar a área
desejada;
para editar o texto, dê duplo clique nele;
edite, formate e clique em OK.
Texto importado para o Fireworks CS6

Aula 08 - Tratamento de Imagens Bitmaps
Trabalhando com Pixel
O pixel é a menor unidade de informação presente numa imagem bitmap. Um pixel pode ser de
milhões de cores diferentes e um conjunto de pixels forma a imagem que vemos na tela.
De maneira geral, quanto maior a quantidade de pixels presentes numa imagem, melhor a sua
qualidade.
No trabalho voltado para a web existe uma grande preocupação com o tamanho da imagem. As
imagens devem ser sempre utilizadas no seu tamanho ideal, planejado no início do trabalho de
prototipagem do web site. Imagens maiores são sinônimos de lentidão na web e devem ser evitadas.
Para editar um objeto bitmap:
importe a imagem cores.jpg presente na pasta exemplos;
escolha a ferramenta bitmap desejada e clique na imagem.
Para retornar ao modo de objetos:

clique no botão Sair do modo bitmap, situado na barra de status ou simplesmente selecione
qualquer ferramenta vetorial.
Botão Sair do modo Bitmap

Seleção
As imagens bitmaps não são compostas por objetos, portanto não é tão simples selecionar partes da
imagem para edição. Para que seja possível realizar edições parciais numa imagem existem diversas
ferramentas de seleção.
Não existe uma ferramenta de seleção melhor do que a outra, e sim uma ferramenta para cada
situação.
Ferramentas de seleção do Fireworks

Moldura da Caixa de Seleção
A primeira ferramenta de seleção é utilizada para a marcação retangular ou elíptica de imagens
bitmap.
Para selecionar com a ferramenta Marca de Seleção:
clique na ferramenta Marca de Seleção;
no painel Propriedades defina o estilo em Estilo (Style) e o tipo de borda em Borda (Edge):
Opções da ferramenta Marca de Seleção (Marquee)
Estilo:
Normal: modo padrão de seleção;
Proporção Fixa:permite escolher a escala da seleção;
Tamanho Fixo:ao clicar na imagem, a seleção apresenta o tamanho predeterminado.
Bordas:
Intenso:borda padrão;
Suavização: cria meios-tons para a borda do futuro recorte;
Difusão:embaça a área numa porcentagem selecionada quando recortada.
clique e arraste sobre a figura;
posicione o cursor no centro da seleção e arraste para ver o resultado dos diferentes tipos de
borda.
Para mover uma área selecionada, clique na ferramenta Ponteiro e em seguida mova a seleção. Para
copiar uma área selecionada, clique na ferramenta Pointer, segure a tecla <Alt> e mova a seleção.
A ferramenta Marca de seleção pode ser utilizada para apagar parte de uma foto
Varinha Mágica
A varinha mágica é extremamente útil, principalmente para apagar fundos de imagens.

Essa ferramenta seleciona pixels baseada em tonalidade, podendo facilmente marcar todo o fundo de
um bitmap.
Para selecionar pixels de mesma tonalidade:
escolha a ferramenta Varinha Mágica;
clique na tonalidade desejada na imagem;
se desejar mais pixels selecionados, tecle <Shift> e clique nos demais.
Caso a quantidade de pixels selecionada não seja satisfatória, altere a tolerância no painel
Propriedades.
Imagem importada com um fundo branco, que não se adapta ao design O fundo agora foi apagado da
imagem
Para retirar a seleção pressione <Ctrl> + <D>, <Esc>, ou escolha Selecionar / tirar Seleção. No menu
Selecionar você também encontrará outras opções de seleção, tais como: Selecionar tudo e Selecionar
Similar.
Propriedades e Propriedades Poligonal
A ferramenta de Propriedades faz seleções com os mais diversos formatos, dando total liberdade na
hora de marcar uma imagem bitmap.
Para seleções "orgânicas" é recomendado usar Propriedades "padrão" e para seleções precisas use
Propriedades poligonal.
Para usar a opção Selecionar:
clique na ferramenta Lasso;
configure a borda no painel Propriedades;
clique e arraste contornando o objeto a ser selecionado.
Você pode expandir ou contrair esta seleção através do menu Selecionar. Através dessa opção é
possível também configurar uma borda de seleção, a suavização e selecionar o inverso.
O Lasso, usado com paciência, pode selecionar todo tipo de objeto

Aula 09 - Efeitos
Efeitos ao vivo
O Fireworks possui um vasto conjunto de efeitos disponíveis para enriquecer o seu trabalho. Uma de
suas grandes vantagens é que eles permanecem editáveis, permitindo alteração ou exclusão a qualquer
momento, pois são redesenhados cada vez que são manipulados. É por esse motivo que são chamados
deefeitos ao vivo.
Além disso, na versão CS6 o Fireworks possui os efeitos do Photoshop. São os Photoshop Live Effects.
Os efeitos podem ser aplicados em qualquer objeto, porém alguns funcionam melhor em fotos.
Nitidez
Este efeito ajusta o foco, aumentando o contraste da fotografia. Ele é composto por 3 efeitos: Nitidez,
Mais Nitidez e Tirar Nitidez da Máscara.
Para aplicar o efeito Nitidez:
selecione a imagem;
clique no botão Filtros do Painel Propriedades;
clique em Filtro / Nitidez.
O efeito Mais Nitidez aumenta em três vezes o contraste do aguçar normal. Porém, o efeito Tirar
Nitidez da Máscara é um dos mais utilizados, poispermite o ajuste do contraste das bordas da imagem
através de valores a serem atribuídos na caixa de diálogo Tirar Nitidez da Máscara. Em fotografias
esse efeito é muito utilizado, para deixar uma imagem mais nítida.
Antes e depois de aplicar o efeito Tirar Nitidez da Máscara

Desfocar
Um dos efeitos para embaçar mais utilizado é Desfoque Gaussiano. Além do Desfoque Gaussianopossui
mais cinco opções que são os desfocar e o desfocar mais que já possuem uma porcentagem de
desfoque predeterminada, não permitindo a sua personalização, já os filtros desfocar com zoom,
desfoque de movimento e desfoque radial permitem sua personalização.
Para aplicar Desfoque Gaussiano:
selecione a imagem;
clique em Desfocar / DesfoqueGaussiano;
altere a seta deslizante na caixa a seguir e perceba que quanto maior o raio de desfoque, mais
embaçada se torna a figura.
Efeito Desfoque Gaussiano na Imagem

Ajustar Cor
Em muitos casos uma imagem não está com suas cores, sombras e brilhos ideais para o uso na web. O
recurso Ajustar Cor aplica efeitos de contraste ou brilho dos pixels em uma imagem. Isso afeta os
realces, sombras e meios-tons de uma foto. Ele é composto por sete (7) efeitos: Brilho/Contraste,
Inverter, Matiz/Saturação, Curvas, Níveis Automáticos, Níveis e Preenchimento de Cor
Brilho/Contraste:
Utilize este efeito para ajustar cores na imagem, aumentando ou diminuindo a luminosidade e o
contraste das cores (tons de cinza) da imagem.
Para aplicar Brilho/Contraste:

selecione a imagem;
clique em Ajustar Cor/ Brilho/Contraste.
Antes e depois de aplicar o efeito Brilho/Contraste

Inverter
Este efeito faz a inversão das cores da imagem. Podemos chamá-lo de efeito negativo.
Para aplicar o Inverter:
selecione a imagem;
clique em Ajustar Cor/ Inverter.
Antes e depois de aplicar o efeito Inverter

Matiz/Saturação
Esse efeito é utilizado para modificar a cor de uma imagem. Também pode colorir toda a imagem,
aplicando uma tonalidade qualquer.
Para aplicar o Matiz/Saturação:
selecione a imagem;
clique em Matiz/Saturação.
Antes e depois de aplicar o efeito Matiz/Saturação (hue/Saturation)

Curvas e Níveis
Esses dois ajustes são as principais formas de clarear/escurecer uma imagem. Ao contrário do Brilho e
Contraste, estes ajustes podem trabalhar cada canal de cores da imagem de maneira individual, além
de modificar separadamente a sombra, o brilho e o meio tom.
Cada um utiliza um tipo de gráfico para isso. Em curvas o gráfico é uma curva de tom e em Níveis um
histograma.
Também existe os Níveis Automáticos, que pode ajustar uma imagem automaticamente.
O ajuste de curvas é muito poderoso e pode modificar completamente uma imagem. Nos níveis o
ajuste é feito diretamente no histograma da imagem.
Bisel e Entalhe
O Bisel é um efeito que simula uma aparência tridimensional ao objeto a ser aplicado também
conhecido como chanfro. No caso de uma figura, sua aplicação prática resulta numa moldura interna
ou externa. Ele é composto por quatro (4) efeitos: Bisel externo, Bisel interno, Entalhe elevado,
Entalhe inserido.Esse efeito é muito utilizado em textos e objetos vetoriais, para dar uma aparência
de botão.
Para aplicar Bisel ou Entalhe em um texto:
selecione o texto;
clique em Bisel Externo ou Bisel interno.
Exemplo de Bisel Interno em texto e em objeto

Sombra e Brilho
Você pode acrescentar um efeito de bordas, utilizando sombreamento ou brilho. Ele é composto por
cinco (5) efeitos: Brilho, Brilho interno, Sombra, Sombra interna e Sombra sólida.
Para utilizar a Sombra, Sombra interna ou Sombra sólida:

selecione a imagem;
clique no botão Filtro do Painel Propriedades;
clique em Sombra e Brilho / Sombra, Sombrainterna ou Sombrasólida.
Para aplicar Brilho ou Brilho Interno:

selecione a imagem;
clique no botão Filtro do Painel Propriedades;
clique em Sombrae Brilho / Brilho ou BrilhoInterno.

Efeitos Brilho e Sombra
Outro
Converter em Alfa
Este efeito converte a imagem para uma escala de tons de cinza, tornando-a transparente semelhante
a uma chapa de raio X. Essa transparência é chamada de Alfa.
Para aplicar Alfa:
selecione a imagem;
clique em Outros / ConverteremAlfa.
Imagem com o efeito Alfa

Localizar Bordas
Altera as cores dos pixels, contornando a imagem com linhas, dando a impressão de um desenho de
traçados.
Para aplicar o Localizar Bordas:
selecione a imagem;
clique no botão Adicionar Efeitos do Painel Propriedades;
clique em Outro / LocalizarBordas.
Antes, depois de aplicar o efeito Localizar Bordas

Aplicando Filtros
Os Filtros, quando aplicados em uma imagem, não permitem voltar mais tarde para editá-los ou
removê-los, como acontece com os efeitos já citados. No entanto, eles permitem que se aplique
apenas em uma parte do objeto e ainda requerem menor processamento do computador, pois a
imagem não é redesenhada quando se abre ou manipula o documento.
Para aplicar um Filtro:
selecione a imagem ou parte da imagem que deseja aplicar o efeito;
clique no menu Filtros/Desfocar/Desfoque Gaussiano (ou outro que desejar).
Exemplo de efeito Desfoque Gaussiano aplicado em parte da imagem

Photoshop Live Effects
No Fireworks CS6 existe ainda outros efeitos encontrados no Adicionar Efeitos do Painel Propriedades.
Esses efeitos são praticamente os mesmos do Adobe Photoshop. Para acioná-los:
selecione a imagem;
clique em Photoshop Live Effects.
Escolha o efeito desejado. No exemplo foi aplicado a Sombra e o Traçado.
Opções de efeitos do Photoshop Live Effects

Atividades
1. Abra o arquivo travel.png e aplique efeitos de sombra e sombra interna, como os exibidos na
imagem a seguir:

Aula 10 - Retoque de Imagem
Ferramentas para Retocar Imagens
O Fireworks CS6 incorpora uma ampla gama de ferramentas que ajudam a retocar as imagens. Há
várias opções: alterar o tamanho, reduzir, pintar, traçar, clarear ou aguçar seu foco, ou ainda copiar e
"carimbar" uma parte dela em outra área.
Ferramentas de Retoque
Borracha
A borracha é utilizada para apagar pixels. Normalmente em menor escala e de maneira mais detalhada
do que utilizando as ferramentas de seleção.
Para apagar pixels:
clique na ferramenta Borracha;
configure suas preferências no Painel Propriedades:
Opções da Ferramenta Borracha (Eraser)

Borda: mova a seta deslizante para aplicar suavidade à borracha, deixando a imagem enevoada;
Tamanho: defina o tamanho da borracha;
Forma: redonda ou quadrada;
Opacidade da Borracha: defina níveis de transparência.
clique e arraste sobre o local da figura a ser apagado.
Exemplo da utilização da Ferramenta Borracha

Carimbo
O carimbo é uma das ferramentas mais importantes do retoque de imagens. Sua utilização é comum na
remoção de objetos indesejados numa fotografia.
Para clonar pixels:
clique na ferramenta Carimbo;
configure suas preferências no Painel Propriedades:
Opções da Ferramenta Carimbo: determina o tamanho do carimbo

Borda: determina a suavidade do traço (100% é acentuado; 0% é suave).
Origem alinhada: afeta a operação de amostragem. Quando a opção Origem alinhada está
selecionada, o ponteiro de amostragem move-se vertical e horizontalmente alinhado com o segundo.
Quando ela não está selecionada, a área de amostragem fica fixa, independentemente do local para
onde o usuário for e clicar no segundo ponteiro.
Usar documento inteiro: faz uma amostragem de todos os objetos em todas as camadas. Quando esta
opção não está selecionada, a ferramenta Carimbo faz a amostragem apenas do objeto ativo.
Opacidade: determina quanto do fundo pode ser visto através do traço.
segure a tecla <Alt> e clique no alvo a ser clonado;
clique e arraste sobre o local de destino e você verá o alvo sendo reproduzido.
Exemplo da utilização da Ferramenta Carimbo

Substituir Cor
Essa nova ferramenta serve para trocar a cor de parte de uma imagem.
Para substituir a cor de parte da imagem:
escolha a ferramenta Replace Color;
Defina as opções da ferramenta no Painel Propriedades:

Tamanho: especifica o tamanho da ponta do pincel;
De: define se a cor trocada é da imagem ou das amostras;
Forma: especifica o formato da ponta do pincel;
Tolerância: define a tolerância da ferramenta;
Intensidade: define a força da ferramenta;
Colorir: permite trocar a cor de toda a imagem e não somente da caixa "from".
escolha uma cor na caixa De (cor original) e a nova cor na caixa Para;
arraste o pincel sobre a imagem.
Opções da Ferramenta Substituir Cor
Exemplo de mudança de cor na imagem

Remover Olhos Vermelhos
Em muitas fotografias as pupilas do assunto fotografado ficam com uma coloração estranha. Com essa
nova ferramenta é muito simples corrigir esse problema.
Para corrigir os olhos vermelhos em uma imagem:
escolha a ferramenta Remover olhos vermelhos;

Tolerância - determina a tolerância de vermelho que será removido da imagem. Zero (0) apenas o
vermelho será removido e 100 remove qualquer matiz que contenha vermelho.
Intensidade - configura o tom de cinza utilizado na remoção do vermelho.
Arraste o pincel sobre as pupilas, criando uma seleção. Faça preferencialmente em um olho de
cada vez.
Exemplo de correção dos olhos vermelhos

Pincel
A ferramenta Brush pinta um traço de pincel com a cor da caixa Cor do traço. Você pode utilizar para
fazer pequenos retoques.
Para pintar um objeto com a ferramenta Pincel:
escolha a ferramenta Pincel;
defina os atributos de traço no Painel Propriedades;
arraste para pintar.
Para corrigir um objeto com a ferramenta Pincel:

escolha a ferramenta Pincel;

segure a tecla <ALT> e clique no alvo a ser copiado Dessa maneira a cor do alvo será utilizada;
clique no local de destino.
Lápis
Use a ferramenta Lápis (Pencil) para desenhar linhas retas ou de forma livre de um pixel. Ele também
pode editar pixels individuais.
Para desenhar um objeto com a ferramenta Lápis:
escolha a ferramenta Lápis;

Suavização de borda: suaviza as bordas das linhas desenhadas.
Borracha automática: usa a cor do preenchimento quando a ferramenta Lápis é clicada na cor do
traço.
Preservar Transparência: restringe a ferramenta Lápis a desenhar apenas em pixels existentes, e
não nas áreas transparentes de um gráfico.
Arraste para desenhar. Mantenha pressionada a tecla <Shift> e arraste para restringir o traçado
a uma linha diagonal, horizontal ou vertical.
Para corrigir um objeto com a ferramenta Lápis:

escolha a ferramenta Lápis.
segure a tecla <ALT> e clique no alvo a ser copiado;
clique no local de destino.
Ferramenta Desfocar
As ferramentas Desfocar afetam o foco dos pixels.

Para desfocar uma imagem:
escolha a Ferramenta Desfocar;
Defina as opções de pincel no Painel Propriedades:

Tamanho: define o tamanho da ponta do pincel.
Borda: especifica a suavidade da ponta do pincel.
Forma: define uma forma quadrada ou redonda para a ponta do pincel.
Intensidade: define a quantidade de embaçamento ou aguçamento.
Arrastar a ferramenta sobre os pixels a serem aguçados ou embaçados.
Opções da Ferramenta Desfocar
Opções da Ferramenta Nitidez
Exemplo de Desfocar
Clarear e Escurecer
A ferramenta Subexposição ou Superexposição clareia ou escurece partes de uma imagem.

Para clarear ou escurecer partes de uma imagem:
escolha a ferramenta Subexposição para clarear partes de uma imagem, ou a ferramenta
Superexposição para escurecê-las.
Defina as opções de pincel no Painel Propriedades:
Tamanho: define o tamanho da ponta do pincel.

Defina a exposição em Exposição no Painel Propriedades.
A exposição varia de 0% a 100%. Para um efeito mais brando, especifique um valor percentual mais
baixo; para um efeito mais forte, especifique um valor mais alto.
Defina o Intervalo no Painel Propriedades:
Sombras: altera principalmente as partes escuras da imagem.

Tons Médios: altera principalmente as partes claras da imagem.
Realces: altera principalmente a faixa intermediária por canal na imagem.
Arraste sobre a parte da imagem a ser clareada ou escurecida.
Opções da Ferramenta Superexposição
Opções da Ferramenta Subexposição
Exemplo de Dodge e Burn
Borrar
Para manchar as cores de uma imagem:

escolha a ferramenta Borrar;
Tamanho: especifica o tamanho da ponta do pincel.

Pressão: define a intensidade do traço.
Cor suja: mancha com uma cor especificada no início de cada traço. Se esta opção não estiver
selecionada, a ferramenta usará a cor sob o ponteiro ferramenta.
Usar documento inteiro: mancha com os dados das cores de todos os objetos em todas as camadas.
Se esta opção não estiver selecionada, a ferramenta Borrar usará a cor apenas do objeto ativo.
Arraste a ferramenta sobre os pixels a serem manchados.
Opções da Ferramenta Borrar
Exemplo de Manchar
Aula 11 - Máscaras
Máscara
As máscaras são utilizadas para mesclar uma imagem com um objeto. Quando se utiliza esse recurso,
somente a parte do objeto na imagem fica visível, criando um efeito de recorte. O Fireworks tem dois
tipos de máscaras: Vetoriais e Bitmap.
Máscara Vetor
Para criar uma máscara vetorial:
abra um novo documento. Sugestão: 400x300px;
importe uma imagem. Se quiser, importe a imagem cores.jpg presente na pasta exemplos;
desenhe um objeto ou texto sobre ela.
Objetos que serão mascarados

selecione a imagem e clique em Editar/Recortar (Ctrl+X);
selecione o objeto que deseja mascarar;
clique em Editar/Colar Atributos (Ctrl+Shift+V).
Exemplo de Máscara Vetorial

Máscara Bitmap
Para criar uma máscara bitmap:

abra um novo documento, sugestão: 400x300px;
importe uma imagem. Se quiser, importe a imagem rosa.jpg presente na pasta exemplos;
desenhe um objeto ou texto sobre ela;
preencha este objeto com um dégradé com cores claras e escuras;
selecione a imagem e clique em Editar/Recortar (Ctrl+X);
selecione o objeto e clique em Modificar/Máscara/Colar como Máscara (Ctrl+Alt+V);
confira no Painel Propriedades, se a opção Escala de cinza estáassinalada, desta forma

visualizará o efeito de transparência causado pelo dégradé do objeto.
Exemplo de Máscara Bitmap
Mascaramento de um Objeto através do Painel Camadas
A maneira mais rápida de se adicionar uma máscara de bitmap transparente vazia é através do painel
Camadas. O painel Camadas adiciona uma máscara branca a um objeto, que o usuário pode
personalizar desenhando nela com as ferramentas de bitmap.
Para criar uma máscara de bitmap com o uso do painel Camadas:
abra o arquivo menina.jpg presente na pasta exemplos;
selecione a ferramenta Varinha Mágica e clique na parte branca da imagem;
clique no menu Selecionar / SelecionarInverso.
Imagem Selecionada
na parte inferior do painel Camadas, clique no botão Adicionar Máscara;
Imagem com efeito da máscara (com um fundo dégradé aplicado)

Acrescentar e Diminuir a Máscara
Para Acrescentar:
clique na máscara a ser alterada;
na barra caixa de ferramentas, escolha a ferramenta Pincel;
defina a cor preta para o pincel;
defina as opções de ferramenta desejadas no Painel Propriedades;
com a máscara ainda selecionada, desenhe na máscara. Nas áreas desenhadas, o objeto com
máscara que está embaixo fica oculto.
Para Diminuir:
clique na máscara a ser alterada;
na barra Caixa de Ferramentas, escolher na ferramenta Pincel;
defina a cor branca para o pincel;
defina as opções de ferramenta desejadas no Painel Propriedades;
com a máscara ainda selecionada, desenhe na máscara. Nas áreas desenhadas, o objeto com
máscara que está embaixo fica oculto.
Desativar e Excluir a Máscara
Para desativar:
selecione a camada que contém a máscara;
clique na seta de opções do menu;
clique em Desativar Máscara.
Para Excluir:
selecione a camada que contém a máscara;
clique na seta de opções do Menu;
clique em Excluir Máscara.
O Fireworks fará uma pergunta: Aplicar máscara ao bitmap antes de remover?

Descartar: anula o efeito da máscara.
Cancelar: cancela o processo de exclusão da máscara.
Aplicar: exclui a máscara, mas aplica o efeito na imagem.
Mesclando imagens com a máscara
Crie uma imagem com o tamanho de 400 x 300 pixels;
clique no menu Arquivo / Importar e importe o arquivo rosa.jpg. Esta imagem deverá cobrir
toda a tela;
clique no menu Arquivo / Importar e importe o arquivo igreja.jpg. Posicione esta imagem
de modo que cubra toda a imagem da rosa;
clique no menu Janela / Camadas. Selecione no painel Camada bitmap correspondente à

figura igreja.jpg;
clique no botão Adicionar Máscara ;
selecione a ferramenta Gradiente . Trace o dégradé na imagem partindo do lado

esquerdo indo até o lado superior direito. Dessa maneira a imagem será mesclada, pois o
parte escura do dégradé serve como um bloqueio para a camada;
soltando o botão do mouse no lado direito, o efeito estará concluído.

O efeito de máscara de mesclagem aplicado
Atividades
1. Abra o arquivo travel.png e importe as imagens topo.jpg e baixo.jpg, posicionando-as como a
figura a seguir:
2. Utilizando o recurso de máscara vetorial, mascare as imagens importadas conforme a figura a seguir:

Mala-Direta
Além de elementos de interface, o Fireworks pode ser utilizado para a criação de malas-diretas que
são enviadas por email. Uma vez pronta a "arte", basta exportar e anexar nos emails que quiser enviar.
Lembre-se apenas que a prática de spam não é bem-visto e pode colocar o seu web site na lista negra
dos provedores, impossibilitando o recebimento de qualquer correspondência vinda do seu endereço
eletrônico.
1. Crie um novo arquivo de tamanho 500 x 600 pixels, fundo branco e 72 de resolução.
2. Importe as imagens imagem_maladireta, notebook e praia e, utilizando os conhecimentos
adquiridos anteriormente, monte uma mala-direta como o exemplo a seguir.
3. Salve o arquivo com o nome mala_direta.png.
Unidade IV - Animação e Interatividade
Aula 13 - Animação
A Importância da Animação em um Site
Animações Básicas
Animações com Símbolos
Atividades
Aula 14 - Ponto de Acesso e Fatiamento

Ponto de Acesso
Fatia
Atividades
Aula 15 - Botões
Navegação Interativa
Menu Pop-up
Atividades
Aula 16 - Rollovers
Comportamento de Rollovers
Aula 13 - Animação
A Importância da Animação em um Web Site
A animação é amplamente utilizada em web sites para chamar a atenção do internauta para algum
produto, notícia ou região da página.
O Fireworks CS6 possui recursos para a criação de objetos animados, como banners, ícones, logos e
gráficos. Vale lembrar que não são animações interativas e tão sofisticadas como as produzidas no
Flash.
As animações criadas no Fireworks são exportadas em Gif Animado e, pelas próprias características
desse formato, deve-se tomar o cuidado de não utilizar muitas cores para não sobrecarregar o peso do
arquivo.
Animações Básicas
A animação consiste numa sequência de quadros exibidos de forma contínua na tela. Portanto, para
criar uma animação básica basta criar os quadros e rodar a animação.
Cada quadro no Fireworks recebe o nome de Estado. Portanto, para criar qualquer tipo de animação é
fundamental entender como trabalhar com Estados. Você pode criar uma animação simples,
desenhando todos os objetos no mesmo Estado e depois distribuí-los para os respectivos Estados
(método 1) ou desenhá-los diretamente em seus estados (método2).
Painel Estados
Para criar uma animação básica (método 1):
inicie um novo projeto nas dimensões 300 x 300 pixels;
selecione o painel Estados.
Perceba que inicialmente só existe um Estado. (Estado 1):

desenhe três objetos quaisquer na tela;
Exemplo de objetos
selecione-os e clique no botão Distribuir para estados do painel Estados;
perceba que você conta agora com três frames. Se preferir, altere o nome dos frames dando
duplo clique neles;
Painel Estados
dê duplo clique na duração dos frames (inicialmente 7) e aumente este valor. Esta duração está
representada em centésimos de segundos, portanto, a cada 100 você tem 1 segundo. (Lembre-
se: quanto maior a duração maior o tempo de exibição do frame);
agora basta rodar a animação, clicando no botão play na janela de documento. (3).
Controles de frames
Para criar uma animação básica (método 2):

selecione o painel Estados.
Perceba que inicialmente só existe um Estado. (Estado 1)

adicione dois novos frames através do botão Novo / Duplicado ou através do menu de
controle do painel;
desenhe cada um dos objetos num frame diferente;
altere o nome dos frames dando um duplo clique sobre eles;
dê duplo clique na duração dos frames e aumente este valor;
agora basta rodar a animação, clicando no botão play na janela de documento.
Painel de Estados já configurado

Animações com Símbolos
A animação com símbolos consiste na conversão do objeto ou texto que será posteriormente animado.
Qualquer objeto pode ser convertido em símbolo: uma imagem importada, uma forma vetorial, textos,
etc.
No Fireworks CS6 é possível converter um objeto em gráfico ou animação. Ambas as opções
disponibilizam o símbolo na biblioteca para que ele se torne uma fonte de instâncias (cópias) e
mantém um vínculo entre todas as instâncias, ou seja, qualquer alteração numa das cópias, afetará em
todas.
Quando se converte um objeto para símbolo do tipo animação, imediatamente é possível configurar
todas as suas propriedades, tais como: nº de estados, deslocamento, direção, dimensionamento,
opacidade e rotação.
A animação com símbolos é executada da mesma forma que a animação básica. A diferença está nas
vantagens em se trabalhar com símbolos, pois estes ocupam menos espaço na interface e existe um
vínculo entre os símbolos e todas as suas instâncias.
Para converter o objeto em símbolo:
desenhe uma estrela com 7 pontas no lado esquerdo da tela;
selecione o objeto;
clique em Modificar/Símbolo/Converterem símbolo ou pressione a tecla <F8>;
escolha a opção Animar e OK;
defina as propriedades da animação:
Neste exemplo escolha 10 frames, mover para 250, direção para 0, opacidade de 0 para 100 e rotação
360 CCW (anti-horário).
Caixa de Diálogo Animar

clique em Janela / Biblioteca de documentos e veja os símbolos que foram adicionados;
os símbolos criados podem ser gerenciados através do painel Biblioteca de documentos. Para
acessá-lo, basta clicar no menu Janela / Biblioteca de documentos.
Painel Biblioteca de documentos

Para modificar a animação:
selecione o símbolo de animação e você verá os pontos do caminho de movimento do objeto;
clique nos pontos e arraste para novas posições e deslocamento. O ponto verde corresponde ao
primeiro frame e o vermelho ao último. Ou,
clique e altere as configurações no Painel Propriedades.

Opções da animação - Painel Propriedades
Para editar um símbolo:

dê duplo clique no símbolo no painel Biblioteca e clique em Editar ou opção Editar Símbolo
do menu de opções do painel Biblioteca;
faça as alterações necessárias e feche a janela. Experimente modificar a cor de preenchimento

do objeto.
Você poderá ver que todas as instâncias deste símbolo serão alteradas.
Criando Banners
Umas das formas de anunciar um produto, web site ou serviço na web é através de banners. Esses
anúncios virtuais são padronizados de acordo com o portal que anuncia. O tamanho padrão de um "full
banner" é 468x60px e normalmente com até 16Kb.
Para que sejam respeitados esses limites é necessário um cuidado com a quantidade de cores e
imagens presentes no banner:
crie um novo documento nas dimensões 468 pixels de largura por 60 pixels de altura;
importe o Arquivo banner1.png;
clique no estado 1 e digite o texto: "Aproveite as suas férias" (verdana, tamanho 20,
branca);
aplique uma um filtro de sombra no texto;
duplique o estado 1 e altere o texto para "Mas dirija com cuidado!";
duplique novamente o frame e altere o texto para "Valorize a vida.";
altere todas as durações para 150 (1,5 segundos);
teste a animação com o Play.
Exemplo de Banner
Banner Animado
crie uma imagem com as dimensões em 468 pixels de largura por 60 pixels de altura e cor de
fundo #D1C6A4;
clique no menu Arquivo / Importar . Importe o Desfoque Gaussiano banner2.png e

posicione-o no centro da imagem:
clique no menu Modificar / Animação / Animar Seleção. Configure a animação com os
seguintes valores:
Caixa Animar
clique no botão OK. O Fireworks emitirá o aviso de adição de novos frames. Basta clicar no
botão OK para confirmar;
configure o último frame para que sua duração seja 500 (5 segundos);
para visualizar a animação, basta clicar no botão Play.

Atividades
1. Crie um novo documento com as dimensões de um "full banner".
2. Importe a imagem imagem_banner.png e defina seu formato como Gif animado websnap 128.
3. Adicione o texto "Porto Alegre", formatando-o com a fonte Jokerman, tamanho 40.
4. Crie outros frames, conforme a imagem a seguir.
5. Programe a duração de cada frame em 150 e salve o Arquivo como banner.png

Aula 14 - Ponto de Acesso e Fatiamento
Ponto de Acesso
Para criar mais interatividade nas interfaces utiliza-se o conceito de ponto acesso. Um ponto de
acesso é uma área de um gráfico da Web que é vinculada a um URL. Através dele pode-se mapear uma
imagem em várias áreas, cada área da imagem é denominada ponto de acesso.
Essa funcionalidade permite que se criem barras de navegação muito rapidamente.
Para criar um menu de navegação com Ponto de Acesso:

abra o arquivo ponto_ativo.png;
selecione a ferramenta Ponto de Acesso Retangular;
desenhe sobre cada item do menu um Ponto de Acesso.
Através do painel Propriedades especifique:

Link: endereço relativo ou absoluto do vínculo;
Texto alternativo <Alt>: rótulo disponível ao posicionar o mouse sobre o objeto;
Target: escolha se você quer que o alvo seja carregado na própria página (_self) ou numa página em
branco (_blank), dentre outras opções.
Para testar o Ponto de Acesso:
clique em Arquivo/Visualizar no navegador ou pressione <F12>.
Fatia
As fatias têm como finalidade cortar uma imagem em diversas partes, cada uma salva como um arquivo
separado.
Existem várias razões para que uma imagem seja fatiada, entre elas: criar um link em uma parte da
imagem (como num Ponto de Acesso), otimizar cada imagem como um tipo de Arquivo diferente (jpg
ou gif), diagramar uma imagem para a construção de uma página de web e utilizar parte de uma
imagem em cada parte do web site (parte flash, parte xhtml - por exemplo).
Apesar da existência da ferramenta de fatia poligonal, as imagens serão exportadas retangularmente.

Para fatiar uma imagem:
abra o arquivo fatias1.png;
selecione a ferramenta Fatia;
desenhe 3 fatias sobre a imagem: no topo, no meio e na parte de baixo;

defina os nomes das fatias como: "topo", "meio" e "baixo" na opção da Slice no Painel
Propriedades (Properties).
Para nomear uma fatia:

Digite o nome na caixa fatia do Painel Propriedades.
Para simplesmente cortar o objeto em fatias, basta não associar um Link no painel Slice. Assim é
possível otimizar cada fatia da mesma imagem com opções diferentes. O fatiamento desmembra uma
imagem em partes. Cada parte é exportada como um Arquivo separado, assim, cada Arquivo deve ter
um nome diferente. O Fireworks, como padrão, nomeia as fatias automaticamente. Porém, é
recomendada a nomeação das fatias individualmente para que a atualização da interface seja mais
intuitiva.
Exportando as fatias dessa maneira é possível montar um layout "elástico" no Dreamweaver. O
conteúdo é posicionado no meio, cuja imagem é colocada como fundo de uma tabela ou div.
Atividades
1. Abra o documento travel.png e faça 4 fatias, conforme o exemplo a seguir:
2. Renomeie cada fatia conforme os nomes exibidos anteriormente.

Aula 15 - Botões
Navegação Interativa
Uma das funções mais comuns e interessantes do Fireworks é a criação de conjuntos de navegação
interativos. O principal item desse tipo de sistema é o botão, que muda de aparência de acordo com o
posicionamento do mouse do usuário.
Cada botão possui estados de interatividade, como trocar a cor quando clicado - por exemplo.
Para criar Botões
crie um novo projeto com 130 pixels de largura e 200 pixels da altura;
crie um objeto (elipse, retângulo, texto, imagem, etc.) com aproximadamente 25 pixels de
altura;
para enriquecer o design do botão, aplique um Estilo (Janela/Estilos).
adicione o texto "Empresa", alinhamento centralizado e no meio do objeto anterior.
O botão com o efeito aplicado e o texto centralizado

Apesar do objeto anterior já possuir o formato de um botão, ele ainda não pode ser considerado um
botão. Para tanto, terá que convertê-lo num símbolo de botão para que possam ser configurados os
seus estados e vínculo.
A conversão de um objeto em símbolo do tipo gráfico ou botão permite que este fique disponível na
biblioteca para uso posterior de várias instâncias, formando o que se pode chamar de barra de
navegação.
Para converter em botão:
selecione o objeto e o texto e clique em Modificar/Símbolo/Converter em símbolo ou tecle
<F8>;
dê um nome, selecione a opção Botão e OK.
O botão terá sua área da cor verde, pois foi inserida automaticamente uma fatia.
O botão convertido fica com uma fatia do tamanho da sua área

Para Configurar os Estados do Botão
A barra de navegação fica mais interessante com interatividade. Para isso são configurados vários
estados para o botão, dependendo da ação do internauta:
habilite o painel estados com um clique em Janela / Estados;
dê duplo clique no botão;
no painel estados que aparecerá, configure os comportamentos.
Painel estados ativado

Liberado: estado normal do botão;
Sobre: aparência assumida ao posicionar o ponteiro do mouse em cima do botão;
Pressionado: aparência do botão após o clique;
SobreEnquantoPressionado: quando você volta a posicionar o mouse sobre um botão que já

foi clicado.
Quando o Painel Estados está ativado, somente o estado Liberado possui o botão:
clique no estado Sobre, a janela encontra-se em branco;
no painel propriedades clique no botão , para criar uma cópia do

botão nesse estado;
faça as alterações necessárias. Experimente aplicar os efeitos predefinidos para cada estado;
repita o procedimento para os demais estados.
Para Criar uma Barra de Navegação
Para criar uma barra de navegação, basta inserir várias instâncias do mesmo botão no seu documento e
configurar propriedades individuais.
Para criar a barra de navegação:
duplique várias vezes o botão feito anteriormente;
selecione a instância que deseja alterar;
na caixa Texto do Painel Propriedades altere o texto do botão.
Os textos foram alterados, mas os botões possuem o mesmo comportamento

Para testar a barra de navegação clique no botão Preview e desative a visualização das fatias (atalho
"2").
A barra de navegação está pronta para ser exportada
Em muitos casos ficam "sobrando" algumas fatias na barra de navegação. Para descartar essa sobra
utiliza-se o comando Modificar/Tela de Desenho/Aparar Tela de Desenho (Ctrl+ALT+T).
Menus Pop-up
O menu pop-up é utilizado em web sites cuja navegação é muito dividida. Dessa maneira é possível
mostrar mais opções em menos área.
É importante lembrar que esse tipo de menu não atende as características de acessibilidade, pois não
pode ser utilizado sem o auxílio do mouse.
Para criar o menu, basta definir uma entrada e personalizar o menu na janela do editor de menu Pop-
up. Qualquer objeto pode ser uma entrada, desde que você insira uma fatia ou ponto de acesso sobre
ele.
Para criar o menu pop-up:
abra o arquivo ponto_ativo.png, criado anteriormente;
selecione o ponto de acesso Empresa e clique em Modificar/ Menu Pop-up / AdicionarMenu

Pop-up ou clique no alvo no centro da fatia e escolha AdicionarMenu Pop-up;
Na caixa de diálogo Definir o menu pop-up, você terá as seguintes opções:
Texto Link Destino
Quem Somos quemsomos.htm _self
Missão missao.htm _self
Visão visao.htm _self
Histórico historico.htm _self
Digite o texto, link, selecione o Destino e clique no botão + para cada opção do menu.
Siga a tabela:
Text - título que aparecerá no menu;

Link - endereço absoluto ou relativo de uma página HTML;
Destino - local de carregamento da página.
Utilize as opções Recuar Menu para direita e esquerda para criar menus endentados.
Editor de Menu pop-up - Conteúdo
Sempre existe uma linha extra na base da lista de entradas no Editor de menu pop-up. Ela está lá para
você adicionar novas entradas com facilidade, sem ter que clicar no botão Adicionar Menu:
clique no botão Next;
na Aparência você definirá a aparência do menu. Cada opção do menu é tratada no Fireworks
como uma célula, portanto, a primeira opção a escolher é se as células serão baseadas em
HTML ou em Imagem. Se você escolher HTML, terá as opções para configurar as cores de
célula e texto, fonte, tamanho e estilos, tanto para o estado liberado como para o estado
sobre. Já as células baseadas em imagem, permitem também a escolha do estilo do menu;
Editor de Menu pop-up - Aparência

clique no botão Avançar.
A guia Avançado permite a alteração de várias propriedades de célula e borda. É possível aumentar a
largura da célula, fazendo com que o menu pop-up fique mais largo, além do tempo que o menu leva
para fechar.
Editor de Menu pop-up - Avançado

clique no botão Avançar.
A guia Posição permite especificar a posição da tela em que o menu pop-up aparecerá. Coordenadas
de 0,0 significam que o canto esquerdo superior do menu pop-up será alinhado com o canto esquerdo
superior da fatia que o aciona. Existem quatro (4) posições predefinidas à escolha.
clique em Concluído para finalizar o menu.
Será exibido somente o contorno do menu. Através deste contorno, você pode posicioná-lo em
qualquer lugar.
clique em <F12> para visualizar o menu.
Editor de Menu pop-up - Posição

Para acrescentar uma opção e/ou alterar alguma propriedade do menu, clique duas vezes no contorno
do menu, próximo à fatia.
O menu pop-up visto no navegador

Atividades
1. Crie um novo documento de 120x240 pixels e cor de fundo #F6E3C1.
2. Monte um conjunto de navegação como o exemplo a seguir:
Para isso utilize as ferramentas de texto e desenho, além dos recursos de filtros vistos anteriormente,
como os de Sombra Interna e Sombra. A cor utilizada para os botões do exemplo é #DCCBAD.
3. Crie os estados de Liberado, Sobre e Pressionado para os botões.
4. Modifique a cor do traçado para #0066CC no Sobre e a cor do botão para #B2E0F9 no Pressionado.
5. Salve o Arquivo como menu_travel.png.

Aula 16 - Rollover
Comportamentos de Rollovers
No Fireworks CS6 o comportamento rollover você encontra com o nome de Alternar Imagem.
A palavra rollover também é conhecida no meio digital como mouseover, que significa mover o
cursor por cima de uma área e desencadear uma ação nesta área (rollover simples) ou em outra
qualquer (rollover desmembrado). Será utilizado a partir de agora as denominações de fatias disparo
(que desencadeiam o rollover) e fatias alvo (fatia alterada).
As fatias e pontos de acesso são fundamentais na construção de comportamentos, como por exemplo,
num comportamento de troca de imagem.
Para criar um Rollover Simples de Troca de Imagem
O rollover simples é parecido com um botão, porém não é um item da biblioteca e não pode ser
instanciado. Normalmente é utilizado na criação de pequenos banners interativos e não para conjuntos
de navegação.
importe a imagem rally.jpg e posicione-a conforme a imagem:
insira uma fatia sobre a imagem e, através do Painel Propriedades, atribua o nome Imagens
à fatia.
Será utilizado o painel frames para criar os quadros a serem alterados no rollover. Cada quadro
representará uma nova imagem. Para criar um novo estado:
ative o painel estados;
renomeie o estado1 para Rally;
clique no botão EstadoNovo / Duplicado localizado na parte inferior direita do painel

Estados;
renomeie o frame para Carro;
importe a imagem carro.jpg no frame Carro e posicione-o conforme a imagem:
selecione a fatia e perceba que existe um objeto (alvo) no centro da fatia. Clique com o botão
direito do mouse sobre esta fatia e escolha Adicionar Comportamento de Adicionar Imagem;
clique na guia Visualizar para testar o rollover ou tecle <F12>.
Para criar um Rollover Desmembrado
O rollover desmembrado é utilizado para indicar (antes de o usuário clicar) qual o assunto de
determinado botão. No exemplo será utilizado um mapa interativo:
importe a imagem mapa_brasil.png e posicione-a do lado direito da tela;
crie pontos de acesso poligonais em 3 estados de sua preferência:

Crie uma fatia retangular conforme a figura. Modifique o nome da fatia para Textos:
Utilize o painel estados para criar os quadros a serem alterados no rollover. Cada quadro representará
uma nova imagem. Para criar um novo frame:
clique em Janela/Estados;
clique no botão EstadoNovo / Duplicado localizado na parte inferior direita do painel

Estados.
selecione o frame São Paulo e escreva o texto "São Paulo - Capital São Paulo" dentro da área
da fatia;
selecione o frame Bahia e escreva o texto "Bahia - Capital Salvador" dentro da área da fatia;
selecione o frame Acre e escreva o texto "Acre - Capital Rio Branco" dentro da área da fatia;
Exemplo da aplicação do texto no frame São Paulo
selecione o estado 1 (Mapa) e veja que existem três pontos ativos e uma fatia. Selecione o
ponto de acesso São Paulo e arraste o objeto (alvo) do centro de seu ponto de acesso para a
fatia dos textos;
escolha o frame São Paulo (2)e clique em OK;
clique nos demais pontos ativos, sempre arrastando do seu alvo para a fatia dos textos. Para
cada estado, basta escolher o nome correto na tela Swap
O seu projeto deverá ficar semelhante ao da figura a seguir:
Rollover desmembrado entre fatias

salve o Arquivo com o nome Rollover.png;
clique na guia Visualizar e teste o rollover.
Personalizando o Comportamento
O rollover criado no exemplo anterior possui como padrão o comportamento Troca de imagem que
responde ao evento MouseOver. Ou seja, ao mover o mouse sobre a fatia de disparo é desencadeada
uma ação de troca de imagem. É possível alterar o evento associado ao comportamento ou até mesmo
a fatia alvo.
Para alterar o evento do rollover:
abra o arquivo Rollover.png, caso ele ainda não esteja na tela;
selecione o ponto de acesso de disparo (São Paulo);
clique em Janela/Comportamentos.
Painel Comportamentos
clique na seta para baixo do campo Eventos e escolha onClick;
agora selecione os pontos de acesso Bahia e Acre e repita o procedimento anterior,

modificando o evento para onClick;
clique na guia Visualizar da janela de documento e teste os comportamentos.
Perceba que a ação só é desencadeada ao clicar no disparo.

Para modificar as propriedades do comportamento:
dê duplo clique no comportamento no painel, aparecerá a caixa de diálogo a seguir:
Caixa de Diálogo Alternar Imagem

desative a opção Restaurar imagem se ocorrer onMouseOut;
Através desta caixa de diálogo é possível alterar o alvo escolhendo outro frame ou ainda selecionando
uma imagem externa caso seja necessário.
clique em OK;
repita a mesma operação para os outros pontos de acesso;
clique na guia Visualizar da janela de documento e teste os comportamentos.
Para Excluir um Comportamento

selecione a fatia ou ponto de acesso envolvida no comportamento;
clique na linha azul que liga as fatias (no caso de comportamento de troca de imagens);
clique em OK na caixa de diálogo que aparecerá. Ou,
clique no comportamento no painel Comportamentos e clique no botão Remover Ação.

Unidade V - Finalização e Publicação
Aula 17 - Otimização de imagem
O que é Otimizar
Tipos de Fatia
Otimizando GIFS
Otimizando JPEG
Atividades
Aula 18 - Automação
Estilos
Processamento em Lote
Aula 19 - Exportação e Integração

Fundamentos da Exportação
Exportando em Diversos Formatos
Integrando Arquivos do Fireworks no Dreamweaver
Inserindo a Barra de Navegação
Aula 20 - Exportação CSS e Sprites

Exportação da Interface
Integração com o Dreamweaver

Aula 17 - Otimização de Imagem
O que é otimizar?
Otimizar gráficos consiste em encontrar um equilíbrio entre qualidade e tamanho da imagem. Para
atingir esse equilíbrio são escolhidos os formatos mais pertinentes para cada imagem e, dentro do
formato, a compactação, quantidade de cores, etc.
Para esta operação use o painel Otimizar, que permite a modificação do arquivo enquanto verifica a
sua qualidade e tamanho na própria área de trabalho do Fireworks.
A otimização pode ser aplicada na imagem toda ou em fatias de uma interface.
A imagem a seguir pode ser fatiada para uma melhor otimização:
A imagem pode ser fatiada para melhorar a sua relação qualidade/tamanho

Você deve usar o formato JPG quando se tratar de fotografias ou imagens com dégradé, pois ele
suporta maior número de cores.
O formato GIF é mais indicado para figuras pequenas e de cores sólidas como logotipos, textos e
gráficos e está limitado a 256 cores. Apesar da sua limitação de cores em relação ao formato JPG, o
formato gif tem um diferencial que é a utilização de transparência na imagem.
Quando se tratar de uma animação, o formato deverá ser obrigatoriamente Gif animado, para que se
consiga visualizar a animação no navegador. Inclusive todos os banners pertencentes à interface
precisam estar compreendidos por uma fatia otimizada em gif animado.
Para inserir Fatias na Interface
abra o arquivo beatles.png presente na pasta exemplos;
desenhe fatias sobre o título, os textos, a foto e o banner;
clique no Painel Propriedades e defina o tipo de fatia e nome para cada uma delas.
Cada parte da imagem será exportada com um formato diferente

Evite fazer fatias em branco. Sempre que possível marque até as bordas da página e faça o mínimo de
fatias. Cada imagem necessita de um HTML para ser inserida, quanto mais imagens, mais HTML.
Tipos de Fatia
Tipo de Imagem: os objetos compreendidos pela fatia serão tratados como imagem na interface,
portanto não sofrerão alteração devido à plataforma ou navegador.
Tipo HTML: os objetos compreendidos pela fatia serão tratados como um texto HTML, portanto
sofrerão variações de acordo com a plataforma e navegador do usuário. Porém, como se trata de texto
HTML, o carregamento no navegador é mais rápido e o tamanho da interface menor.
Este tipo de fatia é recomendado para os textos na interface que sofrem constantes variações e que
não necessitam de uma formatação sofisticada.
Quando se tratar de uma fatia de texto, o conteúdo em HTML deverá ser inserido diretamente no
Painel Propriedades: se você preferir, pode deixar para inserir os textos da interface diretamente
num editor HTML, como o Dreamweaver.
Nome da fatia: é recomendada a nomeação da fatia para que a atualização da interface seja mais
intuitiva.
Para otimizar uma fatia ou imagem
selecione a imagem ou a fatia a ser otimizada;
clique no menu Janela / Otimizar (F6);
clique na seta para baixo em Configuração do painel Otimizar e veja as opções padrões de
otimização. Você pode escolher uma delas ou definir sua própria configuração através dos
controles a seguir.
Formato de arquivo: escolha o formato a exportar.

As opções a seguir são do formato Gif Animado e são as mesmas para um GIF padrão:
Fosco: cor dos resíduos ao redor do objeto/imagem;
Pontilhamento: técnica para mistura de cores do formato gif. Aumenta a quantidade de cores na
imagem, juntamente com o seu tamanho em Kb;
Perda: controle de compressão (perda de qualidade) da imagem GIF.
Painel Otimizar
Paleta de cores: as seguintes paletas estão disponíveis para o formato GIF:
Paleta Função
Adaptivo paleta personalizada derivada das cores reais do documento.
Web Adaptivo paleta adaptativa em que as cores que estão próximas às cores Websafe
são convertidas na cor Websafe mais próxima.
Web 216 paleta das 216 cores comuns aos computadores Windows e Macintosh.
Produz resultados razoavelmente consistentes em vários navegadores da
Web em qualquer plataforma, quando visualizadas em monitores de 8
bits.
Exato contêm as cores exatas usadas na imagem até 256 cores.
Windows/Macintosh cada uma contém 256 cores definidas pelos padrões da plataforma
Windows ou Macintosh, respectivamente.
Escala de Cinza paleta de 256 (ou menos) tons de cinza. A escolha dessa paleta
converterá a imagem exportada para tons de cinza.
Preto e Branco paleta de duas cores consistindo apenas de preto e branco.
Uniforme paleta matemática baseada em valores RGB de pixel.
Personalizado paleta que foi modificada ou carregada de uma paleta externa ou um

arquivo GIF.
Escolha o formato, qualidade e ajuste as cores da imagem, restringindo-a a um conjunto específico de
cores da paleta. Em seguida, remova as cores não usadas da paleta de cores. Quanto menor o número
de cores na paleta, menor o número de cores na imagem, resultando em um tamanho menor de
arquivo. A redução do número de cores também pode diminuir a qualidade da imagem, por isso
experimente várias paletas de cores para encontrar o melhor equilíbrio entre qualidade e tamanho.
Ao alterar a otimização da imagem, você não tem uma visualização instantânea do resultado se você
estiver na visualização original. Para comparar a imagem original com a otimizada, utilize as guias a
seguir que se encontram no topo da janela de documento:
Visualizar: permite visualizar o resultado da otimização;

2 - pág./folha: permite comparar a imagem otimizada com a original;
4 - pág./folha: permite comparar a imagem original com mais três versões de otimizações diferentes.
Otimizando GIFS
Quando se trabalha com GIF pode-se utilizar técnicas para diminuir o tamanho do arquivo.
Uma delas é reduzir o número de cores, com base na frequência que estas aparecem na tela. Porém,
temos que atentar para o fato de que quanto menos cores você usar pior será a qualidade da imagem.
Para combater isso, você pode fazer uso do pontilhamento. Outra forma de reduzir o tamanho do
arquivo é alterar a perda, comprimindo a imagem e eliminando os detalhes da perda. O ponto negativo
desse recurso é que ele causa distorção na imagem. Quando se trata de GIF também é possível
controlar as cores através da opção: paleta indexada do painel Otimizar.
Para que a área em torno da imagem seja transparente use o formato GIF e selecione transparência
no painel Otimização.
Exemplos de Otimização
Para facilitar seu trabalho salve as configurações de otimizações comumente utilizadas, através da
seta de controle do painel Otimizar, na opção Salvar Configurações. E, através da opção otimizar
para o tamanho faça com que o Fireworks configure a otimização para se encaixar a sua necessidade.
Pratique:
abra o arquivo web2.png;
observe a otimização presente e modifique-a para que perceba as diferenças de tamanho e

aparência.
Otimizando JPEG
Para reduzir tamanhos para gráficos JPEG, diminua a qualidade e aumente a suavização.
Abra a figura gato.jpg;
teste as otimizações a seguir:

Exemplos de otimização JPG
Atividades
1. Abra o arquivo travel.png. Selecione a fatia topo e otimize-a para o formato JPG Melhor
Qualidade. Faça o mesmo com a fatia baixo.
2. Otimize a fatia fundo para GIF WebSnap 128. Faça o mesmo para a fatia meio.
3. Salve as alterações feitas em travel.png.
Aula 18 - Automação
Estilos
O painel Estilos consiste numa biblioteca de formatos predefinidos que têm como função facilitar a
formatação de objetos, texto e imagens importadas. A amplitude de sua funcionalidade se solidifica à
medida que também é possível criar estilos compostos por propriedades de texto, objeto e efeitos.
No Fireworks CS6 os estilos foram modificados e ficaram bem mais modernos (e úteis).
Para criar um Estilo
desenhe um objeto ou digite um texto, a partir do qual se baseará o estilo a ser criado;
formate-o com o conjunto de propriedades que deseja guardar no estilo.
Por exemplo:
Exemplo de objeto para criação de um estilo

Nesse exemplo foi desenhado um retângulo arredondado e aplicados os filtros em propriedades:
Propriedades de sombra interna nas duas primeiras janelas e sombra na terceira
Propriedades de preenchimento e contorno

clique no menu Janela / Estilos;
clique no botão Novo Estilo do painel Estilos;
na caixa de Diálogo de Novo Estilo atribua um nome e ative (ou desative) as propriedades
que você deseja atribuir ao estilo;
clique em OK.
Caixa de Diálogo Novo Estilo

A partir deste momento, este novo estilo passa a fazer parte do painel.
Para aplicar o Estilo:
experimente desenhar outro objeto;
selecione-o e clique no estilo.

Para aplicar somente algumas propriedades que compõem um estilo:
selecione o objeto;
dê duplo clique no estilo na paleta e desative as propriedade que você não deseja aplicar no
momento e clique em OK.
É importante lembrar que uma vez criado o estilo, ele permanece disponível a todos os novos arquivos
do Fireworks. A qualquer momento é possível retornar às configurações padrões de estilo clicando em
Reset Styles, que se encontra no menu da seta para direita da paleta Estilos. Fazendo isso,
eliminam-se todos os estilos criados pelos usuários.
Vários objetos com o novo estilo aplicado

A opção Exportar Estilos permite salvar os estilos selecionados em um arquivo.stl, possibilitando a
utilização dos mesmos em uma outra máquina.
Para exportar um estilo:
abra o painel de estilos clicando no menu Janela / Estilos;
selecione um estilo no painel;
escolha a opção Exportar Estilos no menu de opções do painel Estilos;
digite um nome e um local para o documento que conterá o estilo salvo e clique no botão
Salvar.
Para importar um estilo:
abra o painel de estilos clicando no menu Janela / Estilos;
escolha a opção Importar Estilos no menu de opções do painel Estilos;
escolha um documento de estilos para importar e clique no botão Abrir;
todos os estilos do documento de estilos são importados e inseridos diretamente após o estilo
selecionado no painel Estilos.
Processo em Lote
O Fireworks conta com o recurso de processamento em lote que é utilizado para converter
automaticamente um grupo de arquivos gráficos para outro formato, definir opções de otimização,
renomear, escalar, exportar vários arquivos, entre outros.
Para processar arquivos em lote
clique em Arquivo / Processo em Lote;
em Examinar, escolha a pasta bonecos;
na caixa de Em lote, clique no botão Adicionar tudo.

Caixa de Diálogo Em Lote (Etapa 1)
clique em Avançar;
Na etapa 2, defina as Opções do Lote, ou seja, as ações a serem processadas:

Exportar: permite a exportação de vários arquivos nas configurações a serem especificadas;
Dimensionar: aplica escala (redimensionamento em escala ou pixels) aos arquivos;
Localizar e Substituir: localiza texto, fonte, URL, etc., e substitui por novas informações;
Renomear : permite adicionar um prefixo ou sufixo ao nome do arquivo;
Comandos: lista de comandos JavaScript do Fireworks.
Nesse exemplo serão escolhidos:
Adicione as ações que serão executadas no lote, defina a ordem e a configuração de cada
ação;
clique em Dimensionar e em Renomear;
em Dimensionar, escolha a opção Dimensionar para ajustar à área, em Largura máxima

digite 200 e em Alturamáxima digite 200;
clique em Renomear, escolha a opção Adicionar sufixo, digite _pequeno;
clique em Avançar;
em Saída em lote escolha o local de armazenamento dos novos arquivos (no caso de
exportação);
em Backups, escolha entre substituir backups existentes ou incrementais;
clique no botão Salvar script caso queira salvar as configurações do processo para utilização
futura;
clique no botão Em lote para concluir.

Caixa de Diálogo Processo em Lote (Etapa 3)
Dessa maneira, as imagens serão diminuídas e renomeadas (boneco001_pequeno.jpg, por exemplo)
sem afetar os arquivos originais (que estão na pasta Original Files).
Aula 19 - Exportação e Integração
Fundamentos da Exportação
Normalmente em um projeto de web site, a interface (botões, navegação, fundos, etc.) é montada
separadamente do conteúdo (textos, tabelas e fotos). Para haver essa integração entre interface e
conteúdo existe a necessidade da exportação dos diversos elementos criados pelo Fireworks para o
aplicativo de edição de HTML.
Os elementos da interface podem ser exportados basicamente de duas maneiras. Somente as imagens
(quando a montagem total da página é feita em outro aplicativo - como o Dreamweaver) ou
juntamente com o HTML (quando existe alguma interatividade montada no Fireworks - como uma barra
de navegação).
Exportando em Diversos Formatos
É importante que neste momento você se recorde das técnicas de otimização, pois quando se exporta
uma imagem, embutem-se as configurações de formato, cor e resolução.
As imagens do Fireworks podem ser exportadas para diversos formatos, dentre eles: gif, jpeg, swf, psd,
png, etc. Cabe ao web designer exportar a imagem para o formato apropriado, que varia de acordo
com a sua finalidade.
Para exportar uma imagem:
abra o arquivo banner2.png;
clique em Janela / Otimizar para exibir o painel de Otimização;
verifique se o formato definido é Gif animado;
clique em Arquivo / Exportar ou no botão Exportar da barra de ferramentas Principal;
na janela a seguir, crie uma subpasta chamada exportação dentro da sua pasta do curso;
dentro da pasta criada exporte o arquivo, clicando no botão Salvar;
Assistente de Exportação - Etapas 1

Um recurso interessante do Fireworks é o Assistente de Exportação, pois através dele é possível
configurar passo a passo às opções de exportação, inclusive obtendo dicas de uso do melhor formato de
acordo com a aplicação desejada.
Ainda com o arquivo banner2 em tela clique em Arquivo / Assistente de Exportação.
Aparecerá o Assistente de Exportação (Etapa 1). Nesta primeira etapa você pode especificar um
tamanho em Kb caso queira reduzir o tamanho do arquivo para um valor específico.
clique em Continuar;
Assistente de Exportação (Etapa 1)

na etapa 2 (esta etapa só está disponível quando o arquivo possui mais de um frame), escolha o
destino dos frames. Neste exemplo, escolha a opção Arquivo de uma única imagem, para
exportar somente o 1º frame;
Etapas 2 e 3
na etapa 3, escolha o destino do arquivo a ser exportado. Suponha que a nossa intenção é
utilizar o arquivo num aplicativo de Editoração Eletrônica. Clique então em Um aplicativo de
editoração eletrônico e depois clique em Continuar;

o Fireworks exibirá o resultado da análise com o devido formato a ser utilizado. Clique em
Sair;

logo em seguida, aparecerá a janela Visualizar Exportação.
Perceba que, através dessa janela é possível configurar todas as opções já vistas no item de
Otimização, inclusive dividir a tela em partes para comparar as configurações.
Na guia Arquivo é possível estabelecer o tamanho do arquivo a ser exportado em pixels ou
porcentagem, bem como definir a área a ser exportada. E a guia Animação possui as configurações de
tempo e frame, essenciais para o funcionamento da animação assim que a interface for exportada.
Clique no botão escolha o último Frame e clique em Exportar;
exporte o arquivo para a pasta Exportação criada anteriormente;
clique em Salvar.
Para Exportar uma Interface
Uma interface criada no Fireworks pode ser exportada para diversos editores HTML, tais como:
Dreamweaver, FrontPage, GoLive, etc. No momento da exportação você deve especificar para qual
editor HTML você deseja exportar a interface:
abra o arquivo beatles.png;
clique em Arquivo/Exportar;
configure o local, o nome base do arquivo HTML e imagens;
ative a opção Colocar imagens em subpasta para que as imagens fiquem armazenadas numa
subpasta do arquivo HTML.
Observe que quando você exporta uma interface que possui comportamentos de rollovers, botões,
animações ou pontos ativos, automaticamente aparece selecionada a opção Salvar como tipo:HTML e
Imagens e Exportar Fatias, o que permite o funcionamento adequado da interface. Qualquer
alteração pode acarretar no mau funcionamento dos mesmos. Caso se trate de uma imagem simples
(ou uma interface sem interatividade), a opção será Somente Imagens como padrão.
Para configurar o HTM:
clique no botão Opções;
na guia Geral selecione o editor desejado, no caso Dreamweaver;
na guia Específico do documento,defina as opções para gerar os nomes das fatias

automaticamente e o seu texto alternativo;
clique no botão OK;
clique em Salvar.
Para Exportar apenas uma Área da Interface
Para exportar apenas uma área da interface, como por exemplo, uma figura, um botão pertencente à
barra de menus, tarefa essencial na atualização de sites, você pode utilizar a ferramenta área de
exportação.
Ferramenta Export area

clique na ferramenta Exportar Área, que se encontra no submenu da ferramenta Cortar;
selecione a área desejada;
dê duplo clique na área;
configure a imagem a ser exportada;
clique no botão Exportar;
especifique um nome, local e clique em Salvar.
Integrando Arquivos do Fireworks no Dreamweaver

Se você utilizar o Adobe Dreamweaver juntamente com o Fireworks, você pode aproveitar vários
recursos exclusivos que integram os dois aplicativos, uma vez que ambos são desenvolvidos pela mesma
empresa e possuem muitos recursos compatíveis.
O Dreamweaver facilita a colagem ou inserção do código HTML criado no Fireworks CS6 com a
utilização de um comando exclusivo para a inclusão desse tipo de arquivo. Após esse procedimento, a
imagem e seu HTML associado (e o JavaScript, se houver) serão adicionados ao documento do
Dreamweaver nos locais apropriados. A imagem aparecerá na janela do documento.
Para integrar o código HTML do Fireworks no Dreamweaver:
Exporte, através do Fireworks, a interface Fatias.png. Nesse caso, serão exportadas apenas as
imagens e colocadas em uma subpasta do projeto de web configurado no Dreamweaver. Serão
exportadas 3 imagens: topo, meio e baixo;
abra o Dreamweaver CS6;
com um projeto de web site configurado, crie uma nova página HTML em branco;
insira uma nova tabela (Inserir/Tabela) com 3 linhas, 1 coluna e 770 pixels de largura;
na primeira linha, insira a imagem topo.jpg (Inserir/Imagem). O texto descritivo da imagem

pode ser "Loja de informática";
na segunda linha, insira a imagem meio.jpg como Background da célula. Dessa forma, a
imagem será ladrilhada independente da quantidade de conteúdo existente na página. Esse
tipo de layout é conhecido como líquido.
na terceira linha, insira a imagem baixo.jpg (Inserir/Imagem). O texto descritivo da imagem

pode ser "Baixo";
na segunda linha, insira o texto loja-de_informatica.txt encontrado na pasta Exemplos. Esse

texto pode ser inserido através dos comandos copiar e colar;
formate alguns títulos e subtítulos através do inspetor Propriedades;
note como a imagem se repete conforme o texto cresce. Essa característica é incrivelmente
útil na montagem de layouts modernos;
aplique a folha de estilos CSS informatica.css através do comando Texto/Css Styles/Anexar

folha de estilos;
teste a sua funcionalidade com o atalho F12.

Além do layout ser "líquido", o tempo de carregamento da página é curto
Inserindo a Barra de Navegação
Para criar o conjunto de navegação desse layout pode-se usar o arquivo menu_pop_up.png, criado
anteriormente.
no Fireworks exporte o arquivo para a pasta do projeto do web site;
nas opções da exportação (Opções/Geral) desmarque Usar CSS para menus pop-up;
no Dreamweaver insira o arquivo html exportado através da opção Inserir/Objetos de

Imagem/ HTML do Fireworks. Insira no início da página, pressionando a tecla <Enter> antes do
título;
teste a sua funcionalidade com o atalho F12. É possível que o navegador bloqueie a execução
do javascript responsável pelo menu pop-up. Se esse for o caso, basta desbloquear no próprio
browser.
Exportação da Interface
1. Crie uma pasta chamada travel_exportado e exporte o arquivo travel.png. Exporte apenas as
imagens para uma subpasta "imagens", como visto do exemplo da Loja de Informática.
2. Abra o arquivo menu_travel.png e exporte-o para a pasta criada anteriormente. Coloque as
imagens na subpasta "imagens".
3. Abra o arquivo banner_travel.png e exporte-o para a pasta "imagens" criada anteriormente.
Integração com o Dreamweaver
4. Abra o Dreamweaver e defina o site.
5. Crie um novo arquivo chamado travel.htm e nele insira uma tabela com 1 coluna, 3 linhas e 760
pixels de largura.
6. Insira as imagens do topo, baixo e meio, montando assim um layout elástico.
7. Na segunda linha da tabela insira uma nova tabela com 2 colunas, 1 linha, 100% de largura e CellPad
5 pixels.
8. Na célula da esquerda, insira o menu exportado.
9. Na célula da direita, insira o banner exportado e algum texto qualquer (você pode utilizar o site
www.lipsum.com, para gerar um texto de marcação de lugar em latim).
10. Aplique a folha de estilo travel.css.
11. Salve novamente o arquivo e teste o seu funcionamento no navegador.
Apêndice I - Atividades Complementares
Criação dos Elementos da Interface
Preenchendo e traçando os elementos da Interface
Tratamento de imagens Bitmap
Animação
Ponto Ativo
Botões Interativos
Introdução ao Design de Interfaces
Criação dos Elementos da Interface
Um dos principais usos do Fireworks na web é a criação de logos para empresas e produtos.
Veja alguns exemplos feitos 100% no Fireworks e tente criar o mais parecido possível:
Preenchendo e Traçando os Elementos da Interface
Os efeitos de preenchimento aumentam os detalhes do trabalho realizado no Fireworks, com isso
transformando o seu design em algo rico e bem acabado.
Aplique os efeitos de preenchimento visto em aula nos logos criados anteriormente, deixando-os mais
modernos e elegantes.
Tratamento de Imagens Bitmap
Existem vários formatos de imagem Bitmap que podem ser importados para o seu layout do Fireworks.
Essas imagens, geralmente JPGs ou PNGs podem ser tratadas, recortadas e utilizadas para a criação de
diversas "artes" para a web.
Uma das principais utilizações do Fireworks, nesse caso, é o recorte de imagens. Como prática, utilize
as ferramentas de seleção vistas em aulas passadas para recortar o fundo das imagens a seguir (observe
as imagens antes e depois).
Mala-direta
Como já visto em outra oportunidade, o Fireworks pode ser utilizado para a construção de malas-
diretas, que podem ser enviadas por e-mail.
Tente fazer uma nova mala-direta, seguindo este exemplo:
Animações
O Fireworks é uma excelente ferramenta para a construção de Banners animados. Esse formato de
anúncio é o mais utilizado na web e o seu tamanho é bastante variado.
Como exercício monte um novo banner, com as dimensões de 150 pixels de largura e 300px de altura.
Geralmente esse tipo de banner é colocado do lado direito de um web site. Veja cada etapa desse
banner:
Ponto Ativo
O ponto ativo (hot spot), ou mapa de imagem é utilizado como uma forma rápida de criar links em uma
imagem.
Utilize essa ferramenta para marcar links em cada um dos Beatles, como na imagem:
Botões
O principal diferencial do Fireworks para outros programas de edição de imagem (como o Photoshop) é
os botões interativos. Baseado nos conhecimentos vistos anteriormente crie uma barra de botões
horizontal.
Esses botões devem ser interativos, com os três estágios configurados.
Siga o exemplo abaixo (em um arquivo de 960x40px):
Glossário
A
ACRÔNIMO - Os acrônimos são abreviações. Tornaram-se palavras amplamente usadas na Internet,
principalmente nos grupos e listas de discussão em inglês. São palavras derivadas das letras iniciais de
uma frase ou diálogo. Por exemplo, IMHO é tradicionalmente usado para "In My Humble Opinion" - "Em
Minha Humilde Opinião", ASP, que é usada para "As Soon As Possible" - "O mais rápido possível".
AD (ADVERTISEMENT) - Anúncio, Banner de publicidade.
AD CAMPAIGNS - Qualquer esforço para aumentar o número de visitantes do seu site. Geralmente,
mas nem sempre, associada com a inserção de Banners em outro site, em que os visitantes possam
clicar e serem dirigidos para o seu site. Como toda Campanha Publicitária é caracterizada por uma
data de início e outra de fim e por um custo, para a duração total da campanha.
AD CLICKS - Um click (feito pelo visitante) em qualquer publicidade (banner) que o leve de um site
para outro (através de um hiperlink).
AD VIEWS - Qualquer página web que contenha uma mensagem publicitária (banner), vista por um
visitante. Desde que o visitante a veja, ele pode clicar nela. Podem existir mais do que uma Mensagem
Publicitária em uma página, isto é um ad view se refere ao ato de ver as publicidades existentes em
uma página.
B
BACKBONE - Espinha dorsal. Estrutura de nível mais alto em uma rede composta por várias sub-redes.
O backbone é composto por linhas de conexão de alta velocidade, que se conectam as linhas de menor
velocidade.
BUSINESS TO BUSINESS - B2B - É o nome que se dá a transações comerciais entre empresas, mediadas
pela Internet.
BUSINESS TO CONSUMER - B2C - Venda ao consumidor, através da Internet.
D
DOWNLOAD - Ato de transferir uma cópia de um arquivo em um computador remoto para outro
computador através da rede, Internet. O arquivo recebido geralmente é gravado em disco no
computador local.
F
FAQ (Frequently Asked Questions) - Questões Perguntadas Frequentemente. É um texto que pretende
responder, dentro de uma determinada matéria, a questões colocadas frequentemente pelos usuários.
Fireworks - é um editor de imagens desenvolvido pela Macromedia, posteriormente adquirido pela
Adobe. Suas funcionalidades focam a publicação gráfica na Internet, por isso inclui suporte a GIF
animado, PNG e imagens fatiadas, além de possuir ótima compressão de imagens. A partir da versão
MX, ganhou integração com outros produtos da mesma linha, Dreamweaver, Flash e Freehand.
H
HIPERLINK / HIPERMÍDIA - São as palavras e/ou figuras que aparecem em destaque nas páginas na web
que levam a outros lugares na rede. Pode também fazer tocar um som, carregar um arquivo e assim
por diante. Nesses casos normalmente referenciados como links de hipermídia.
HIPERTEXTO - As páginas que aparecem na janela dos Browsers são resultado de código em
hipertexto. Essas páginas podem conter texto em diferentes tamanhos e estilos, figuras e, o que as
define como hipertexto, a capacidade de levar, de forma não linear a outro lugar no sistema, através
de um conjunto de hiperlinks.
HIT - Quando alguém vê uma página web, um "hit" é registrado pelo sistema onde a página está
armazenada.
HOMEPAGE - É como é chamada a página de abertura de um serviço ou de uma página pessoal. Da
homepage, você pode acessar outras páginas através dos hiperlinks.
J
JPEG - Abreviatura de Joint Photographic Experts Group, específico para fotografias tem uma das
maiores taxas de compressão de dados; entretanto essa alta taxa é obtida através de um algoritmo que
gera perdas, isto é, a imagem compactada por tal método possui perda de informação, porém é usada
para fotografias, que aceitam bem essas perdas, que os especialistas consideram extremamente
aceitável, principalmente considerando as altas taxas de compressão (que chegam facilmente a mais
de 13:1).
JPG - Uma das variantes do JPEG é um dos dois únicos formatos de imagens suportados pela linguagem
HTML (o outro formato é o GIF).
O
On-line (em linha) - A expressão on-line é usada para denotar conectado.
P
PNG (Portable Network Graphics, também conhecido como PNG's Not GIF1) - é um formato de dados
utilizado para imagens, que surgiu em 1996 como substituto para o formato GIF, devido ao fato de
este último incluir algoritmos patenteados.
Esse formato livre é recomendado pela W3C, suporta canal alfa, tem uma maior gama de
profundidade de cores, alta compressão (regulável), além de outras características.
Além disso, o formato PNG permite comprimir as imagens sem perda de qualidade e retirar o fundo de
imagens com o uso do canal alfa. O canal alfa, diferentemente da transparência do GIF, é capaz de
definir o nível de opacidade de cada pixel, adequando-se a qualquer fundo de um site ou
apresentação, sem serrilhamento, algo que não se consegue com os outros formatos populares. Por isso
é um formato válido para imagens que precisam manter 100% da qualidade para reuso. Pode ser usado
na maioria dos programas de edição de imagens como o Adobe Fireworks (proprietário) e o GIMP
(livre).
U
UPLOAD - Ato de carregar uma cópia de um programa, de uma página WEB, ou de todo um site, para
um servidor (que pode ser uma máquina da Internet), desde o micro (disco rígido) do usuário. É a
operação inversa à denominada DOWNLOAD.
W
WEBMASTER - Pessoa responsável pela operação de um site ou um grupo de sites. Também é utilizado
para designar o responsável pela operação de um Servidor Web.
WWW (World Wide Web - Rede de Alcance Mundial) - É a parte multimídia da Internet, capaz de
apresentar imagens, textos, animações e sons.
Bibliografia
Livros
Alves, William Pereira. Crie, Anime e Publique seu Site Utilizando Fireworks Cs3 , Flash Cs3 e
Dreamweaver Cs3 para Windows. Editora Érica
Alves, William Pereira. Crie, Anime e Publique Seu Site Utilizando Fireworks CS5, Flash CS5 e
Dreamweaver CS5. Editora Érica
Links
http://www.lsc.ufsc.br/%7Eedla/design/design.htm
http://help.adobe.com/pt_BR/indesign/cs/using/WS714a382cdf7d304e9f688c1003dbfac89-
7ffca.html
http://www.criarweb.com/artigos/formas-photoshop.html
http://www.rdgtutoriais.com/2008/06/como-selecionar-e-recortar-fotos-com-o_08.html
http://ufpa.br/dicas/htm/htm-link.htm
http://www.infowester.com/imagens.php

Fireworks CS6. Autor (A) Aline Alves Salles Código A

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Fireworks CS6. Autor (A) Aline Alves Salles Código A

Enviado por

Direitos autorais:

Formatos disponíveis

Fireworks CS6

Autor(a): Aline Alves Salles

Ensinar os elementos da interface: formas e textos que constituirão os títulos, logotipos,

Ensinar a manipulação de imagens, bem como a sua importação e tratamento.

Criar animações, troca de imagens (rollover) e menu Pop-up.

Utilizar ferramentas para a otimização de imagens e exportação.

Mostrar a integração Fireworks CS6 e Dreamweaver CS6.

Definição de design de interface

Design de interface para web sites

Conhecimentos básicos de design

Procedimentos gerais na criação de uma interface

Introdução ao Fireworks CS6

Configuração sugerida para Windows

Novidades da versão CS6

Solução Integrada (Vetor X Bitmap)

Abrir documentos existentes

Criando um documento no Fireworks

Alterando as configurações do documento

Painel Histórico (histórico)

O design da interface é parte crucial na venda de um produto para o consumidor

Qual a melhor forma de apresentar esta informação para o usuário?

Buscadores possuem uma interface mais simples e intuitiva

Um recurso muito utilizado por desenhistas é o rascunho do trabalho.

Novidades da Versão CS6

Renomeação de elementos no painel de Camadas;

Novo painel de cores de preenchimento e cores de contorno;

Precisão em gradientes através de valores específicos de cor e ângulo;

Novas texturas e preenchimentos padrão;

Transparência com valores exclusivos para contorno e preenchimento;

Novos itens de Biblioteca;

Cor de contorno para textos;

Copiar cores com o conta gotas;

Área de trabalho do Fireworks CS6

Contêm atalhos dos principais recursos do programa.

1. Novo: inicia um novo documento.

1. Agrupar: transforma vários objetos selecionados num único.

Para exibir/ocultar os painéis:

clique em Ocultar Painéis ou tecle <F4>;

clique na barra de título do painel para minimizar ou maximizar.

alterar as configurações de página;

exportar os arquivos para a Web;

exibir arquivos recentes;

selecionar todos os objetos, duplicar objetos selecionados ou cancelar seleção;

modificar Atalhos do Teclado;

simular gama de cores Macintosh;

ativar e desativar réguas e grades;

ocultar bordas e painéis.

expandir a área selecionada;

expandir e contrair seleção.

permite criar e editar símbolos;

criar um menu Pop-up;

alinhar objetos selecionados.

definir o tamanho da fonte;

configurar verificação ortográfica.

definir o layout dos painéis.

conjuntos de painéis e salvamento do layout de painel;

fechamento de todos os painéis;

organização das janelas: em cascata ou lado a lado;

acesso ao Sitespring - ferramenta de gerenciamento de projetos da Adobe.

centro de Suporte Fireworks: Suporte On-Line.

Abrir Documentos Existentes

em seguida, clique no arquivo aula1.jpg, que se encontra na pasta: exemplos.

Para mudar o ponto zero: