Nome:

Turma:

Fireworks
 Índice
Aula 01 - Introdução ao Fireworks 8.... 5
Configurações de Máquina........................ 5
Iniciando o Fireworks 8............................ 5
Start Page (Página Inicial)........................ 5
Criando novas Imagens............................ 6
Salvando Imagens................................... 7
Abrindo Imagens..................................... 7
Exportando Imagens................................ 7
Os arquivos na Internet............................ 8
Interface do Fireworks 8........................... 8
Document window................................... 8
Tools...................................................... 9
Tools - Ferramentas............................... 10
Text (Texto).......................................... 18
Zoom . ................................................ 19
Hand (Mão).......................................... 19
Undo (Desfazendo)/Rendo (Refazendo).... 19
Copy (Copiar)/Paste (Colar).................... 19
Duplicate (Duplicar)............................... 19
Clone (Clonar)...................................... 19
Visualizando no Navegador..................... 20
Aula 02 – Desenhando, Alinhando e Com- Eye Candy 4000 LE................................ 41
binando Objetos................................. 21
Alien Skin Splat LE................................ 42
Pen (Caneta) ....................................... 21
Aula 05 – Blend Modes e Operações com
Subselection (Selecionador Secundário).... 21 Camadas............................................ 44
Desagrupando objetos........................... 22
Freeform (Forma Livre).......................... 23
Reshape Area (Mudar Forma da Área)...... 23
Knife (Faca).......................................... 24
Vector Path (Traçado Vetorial)................. 24
Redraw Patrh (Redesenhar Traçado)......... 24
O Painel Layers (Camadas)..................... 25
Align (Alinhando Objetos)....................... 26
Agrupando/Desagrupando Objetos........... 26
Combine Path (Combinando Traçados)...... 26
Join (Unir)/Split (Dividir)........................ 26
Union (União)....................................... 27
Intersect (Intersecção)........................... 27
Punch (Perfurar).................................... 27
Crop (Cortar)........................................ 28
Anexando Texto ao Traçado..................... 28
Convertendo Textos para Traçados........... 29
Aula 03 – Cores e Efeitos.................... 31
O Uso e Efeito das Cores na Internet........ 31
Finalidade das cores na Internet:............. 31
Eyedropper........................................... 32
Paint Bucket (Balde de Tinta).................. 32
Gradient (Gradiente).............................. 33
Styles (Estilos)...................................... 34
Swatches (Amostra de Cores)................. 35
Mixer (Misturador de Cores).................... 35
Symbol (Símbolos)................................ 35
Aula 04 – Live Filters (Filtros ao vivo).37
Aplicando Filtros.................................... 37
Adjust Color (Ajustar cor)....................... 37
Bevel and Emboss (Chanfo e Relevo)....... 38
Blur (Embaçamento).............................. 39
Noise (Ruídos)...................................... 40
Other................................................... 40
Shadow and Glow.................................. 40
Sharpen............................................... 41
Mascarando Imagens............................. 52
Máscara de Grupo.................................. 56
Criando Máscaras de bitmap................... 56
Usando Reveal Selection e Hide Selection para
criar uma máscara:............................... 58
Edição de Máscara................................. 59
Movendo uma máscara e um objeto com más-
cara..................................................... 59
Aula 06 – Trabalhando com Bitmap.... 62
Importando uma Imagem....................... 62
Marquee Tool e Oval Marquee Tool........... 62
Lasso Tool e Polygon Lasso Tool............... 63
Magic Wand Tool.................................... 64
Brush tool............................................ 65
Stroke Category.................................... 66
Texture................................................ 66
 Fireworks

Pencil tool............................................ 67 Aula 13 – Commands e Extension..... 104

Erase tool............................................. 67 Commands..........................................104
Blur tool e Sharpen tool.......................... 68 Manage Extensions...............................107
Dodge tool e Burn tool........................... 68 Aula 14 – Trabalho Final................... 109
Smudge tool......................................... 69
Rubber Stamp tool................................. 69
Replace Color tool.................................. 70
Red Eye Removal Tool............................ 70
Image Editing....................................... 70
Aula 07 – Criando Animação............... 72
Trabalho com símbolos de animação........ 72
Criação de símbolos de animação............ 72
Interpolação ........................................ 74
Animação Quadro a Quadro.................... 75
Trabalho com molduras ......................... 75
Compartilhamento de Layers (camadas) atra-
vés de Frames (molduras)...................... 76
Trabalho com animações existentes......... 77
Animação de Arquivos............................ 77
Aula 08 – Fatias, Rollover e Pontos Ati-
vos..................................................... 79
Criação e edição de fatias....................... 79
Img Slice – Criando Slice(Fatias)............. 79
Rollover............................................... 81
HotSpot (Pontos Ativos)......................... 83
Aula 09 - Otimização e Exportação..... 86
Painel Optimize (Otimizar)...................... 86
Visualização e comparação de configurações
de otimização....................................... 88
Image Preview...................................... 89
Export Area.......................................... 91
Aula 10 – Trabalho Layout.................. 92
Aula 11 – Botões, Barra de Navegação e
Menu Pop-Up ..................................... 93
Button (Botões).................................... 93
Set Nav Bar Image (Barra de Navegação de
Imagem).............................................. 94
Set Text of Status Bar............................ 95
Criando um Menu Pop-up....................... 95
Aula 12 – Processo em Lote............... 99
Processo em lote – Size.......................... 99
 Fireworks

Aula 01 - Introdução ao Fireworks 8

O Fireworks 8 é um programa de tratamento de imagens voltado para a Web, que permite criar
sites em pouco tempo, pois também salva arquivos em HTML. Além disso, permite trabalhar
com imagens e desenhos e otimiza-los para uso na Internet.
O Fireworks 8 torna possível o trabalho com imagens vetorias e bitmap, convertendo-as de um
tipo para o outro de forma automática. Também permite a criação de barras de navegação,
menus, rollovers, mapa de imagens, animações e outros recursos sem que o designer necessite
ter conhecimento sobre códigos de programação ou mesmo linguagem HTML.

O formato padrão do arquivo do Fireworks é .PNG, mas o programa pode importar e

exportar os seus gráficos em qualquer formato de imagem.

Configurações de Máquina
O Fireworks 8 consome muitos recursos de sua máquina e para que este programa funcione
corretamente a configuração mínima do seu computador deve ser:
Processador: Intel Pentium® III 800 MHz ou equivalente.
Sistema Operacional: Microsoft® Windows® 2000 ou Windows XP.
Memória RAM: 256 MB RAM (recomendado 1 GB para rodar simultaneamente com Fireworks
8 e Flash 8).
Disco Rígido: 880 MB livres no disco somente para a instalação do programa.
Video: resolução 1024 x 768 pixels com 16 bit de cor ou superior (recomendado uso de 32
bit de cor).

Iniciando o Fireworks 8
Para executar o Macromedia Fireworks 8 basta ir ao Menu Iniciar > Programas > Macromedia
> Macromedia Fireworks 8.

Start Page (Página Inicial)

A página inicial (Start Page) é exibida quando carregamos o programa. Através dela é possí-
vel abrir e criar documentos, além de acessar o site de extensões para o Fireworks 8. Porém,
todos esses comandos estão disponíveis na barra de menus.

5
 Fireworks

Página Inicial
Caso não queira que a página inicial seja exibida todas as vezes que o programa for aberto,
marque a opção Don’t show again que está presente na parte inferior esquerda da janela. Uma
caixa de alerta é aberta, clique em OK para fechá-la.
Para criar um novo arquivo, clique em Fireworks File, para abrir um arquivo já existente, clique
em Open; e para entrar no site de extensões, clique em Fireworks Exchange.
A qualquer momento você pode optar por exibir essa página inicial novamente. Basta acessar
o menu Edit > Preferences. Na aba General, no item Launch Options, selecione a opção Show
start page.

Criando novas Imagens

Caso tenha escolhido a opção Fireworks File na Start Page aparecerá à janela New Document.
Também podemos iniciar um novo arquivo no Fireworks pelo menu File > New, ou através das
teclas de atalho Ctrl+N.

New Document - Novo Documento

Ao criar um novo arquivo, a janela New Document é aberta. Ela contém propriedades a serem
configuradas, como:
Width: Define a largura do documento. Pode ser definida em pixels, inches(polegadas) e cen-
timeters (centímetros).

6
 Fireworks

Height: Determina a altura do documento. Também pode ser definida em pixels, inches ou
centimeters.
Resolution: Define a resolução do documento. O padrão é pixels/inch.
Canvas color: Define a cor do document windows (área de trabalho). O padrão é White (bran-
co), porém, pode-se usar o Transparent (Transparente) ou uma cor Custom (Customizada).

Salvando Imagens
Como citado anteriormente, o fireworks salva imagens no formato .PNG e para salva-las basta
ir ao Menu File > Salve As e definir o nome e o local onde o arquivo será gravado.

Save As - Salvar Como

Abrindo Imagens
Para abrir um arquivo .PNG, basta ir ao Menu File> Open e escolher o arquivo desejado.

Open - Abrir

Exportando Imagens
Já sabemos que os arquivos do Fireworks têm o formato .PNG, mas podemos salvar estas
imagens em outros formatos, para que sejam melhor visualizadas na internet. Para salvar as
imagens com outros formatos utilizamos o comando Visualizar Exportação do Menu Arquivo
7
 Fireworks

e na caixa de diálogo que aparece, definimos o formato em que o arquivo deve ser gravado.
Feito isto clicamos no botão exportar e definimos o nome e o local onde o arquivo deve ser
gravado.

Os arquivos na Internet
Quando criamos arquivos para serem utilizados em páginas da Web, temos sempre que ter
um padrão para o nome dos mesmos. Ao salvá-los, siga as seguintes regras:
Espaços: nunca coloque espaços no nome do arquivo, no lugar dos espaços utilize o traço
baixo (_).
Minúsculas: prefira sempre todas as letras do nome do arquivo minúsculas.
Caracteres especiais: nunca coloque acentos ou caracteres especiais no nome dos seus ar-
quivos.
Padrões: padronize o nome das imagens pra que o trabalho fique mais fácil, por exemplo, caso
você irá salvar um botão, salve-o com o nome “bot_contato”.

Interface do Fireworks 8
No Windows, a área de trabalho integrada do Fireworks 8 apresenta todas as janelas e painéis
reunidos em uma única janela maior do aplicativo.

Interface Fireworks 8

Document window
A Document window (janela do documento), também chamada de canvas ou Área de trabalho,
contém algumas áreas e ferramentas disponíveis.
No alto da janela é exibido o nome do arquivo e a sua extensão. Ao aparecer Untitled-1.png,
por exemplo, significa que o arquivo não contém nome definido, ou seja, nunca foi salvo. Ao
aparecer um sinal * após o nome do arquivo, significa que ele sofreu uma modificação e ainda

8
 Fireworks

não foi salvo. Todas as vezes que efetuarmos uma alteração no arquivo, o sinal será exibido
até que o arquivo seja salvo.
Depois do nome do arquivo, ainda na parte superior da janela, há uma barra com alguns
comandos:
Original: Exibe a área original. Nesse modo é possível trabalhar no canvas.
Preview: Exibe uma visualização prévia na Área de Trabalho. Esse modo não é editável. Para
voltar a trabalhar com o arquivo, é necessário colocar no modo Original.
2-Up: Mostra a Área de Trabalho dividida em duas partes, sendo exibido simultaneamente o
mesmo elemento em duas janelas. É utilizado na otimização da imagem.
4-Up: Mostra a Área de Trabalho dividida em quatro partes, sendo exibido simultaneamente
o mesmo elemento em quatro janelas. É utilizado na otimização da imagem.

Img Ferramentas da Document windows

Quick Export: Permite exportar o arquivo para outros formatos, inclusive carregar outros
programas da Macromedia se estiverem instalados no sistema. Também é possível carregar o
arquivo em um navegador para visualizá-lo (Preview in Browser).

Quick Export
Na parte inferior da janela existem alguns outros comandos. Essa barra é dividida em três
áreas. A primeira contém comandos para o controle da execução de animação.
A segunda parte exibe o tamanho do canvas, ou seja, a área do arquivo. E a terceira, presente
no canto direito, apresenta o comando Set magnification, onde se pode alterar o tamanho do
canvas para melhor visualização.

Tools
A barra de ferramentas contém vários recursos para se trabalhar com imagens. Ela é dividida
em seis seções: Select, Bitmap, Vector, Web, Colors e View.
Select – A seção Select é a primeira seção presente na barra de ferramentas. É através dela
que utilizamos as ferramentas de seleção, redimensionamento, rotação e distorção.

Select tool - Ferramentas de Seleção

Bitmap – A seção Bitmap contém ferramentas para manipulação de bitmaps. Um bitmap é
uma imagem formada por pontos, ou pixels. Uma figura, uma foto digitalizada são exemplos
de bitmaps.

9
 Fireworks

Bitmap tools - Ferramentas de Bitmap

Vector – A seção Vector contém ferramentas para manipulação de vetores. Um gráfico vetorial
é uma imagem representada por linhas e curvas, os chamados vetores. Essas linhas e curvas,
quando conectadas, formam os Paths (traçados). Um desenho criado com as ferramentas do
Fireworks é um vetor.

Vector tools - Ferramentas de Vetor

Web – A seção Web contém ferramentas para manipulação de elementos relacionados com
documentos para Internet.

Web tool - Ferramentas Web

Color – A seção Colors contém ferramentas para manipulação de cores.

Color tools - Ferramentas de Cores

View – A seção View contém ferramentas para visualização da Canvas (Área de Trabalho)

View tools - Ferramenta de Visualização

Tools - Ferramentas

Pointer (Ferramenta Seleção)

A ferramenta Pointer permite fazer a seleção de elementos. Além disso, essa ferramenta serve
para arrastar elementos na área de trabalho. Mantenha por alguns segundos o botão do mouse
clicado nesse ícone para aparecer Á segunda opção de ferramenta, a Select Behind Tool.

Select Behind (Ferramenta Selecionar Atrás)

A ferramenta Select Behind tool é semelhante a Pointer tool, porém permite fazer a seleção
de obejtos que estão atrás de um elemento. É útil para elementos sobrepostos.

10
 Fireworks

Line (Ferramenta Linha)

A ferramenta Line tool tem a finalidade de desenhar uma linha reta. Para utilizá-la, clique no
ponto inicial, mantenha o botão esquerdo do mouse pressionado e arraste-o para formar a
reta.
A reta selecionada na Área de trabalho fica com uma linha na cor azul clara e com as extremida-
des em forma de quadrado. Isso é apenas para demonstrar que aquela linha está selecionada.
O traçado correto é exibido quando a linha não estiver selecionada pelo ponteiro do mouse.

Propriedade da Line (Linha)

Ao selecionar uma linha, o Inspector de Propriedades passa a exibir as seguinte opções:

Propriedades da Line

Path: define um nome para o elemento

W e H: determina a altura e largura do traçado.
X e Y: define a posição nos eixos X e Y do traçado.
Stroke color: define a cor da linha
Tip size: determina o tamanho da linha
Stroke category: define a característica da linha. São dezenas de opções distintas.
Opacity: determina o grau de transparência de cor pintada. Valores próximos a 100 geram
cores opacas e quanto mais próximos a 0, as cores ficam transparentes.
Blend Mode: são efeitos de mescalgem que podem ser aplicados. Também exitem vários Blend
Modes disponíveis.
Edge: define a propriedade da linha. Valores próximos a 100 geram traçado mais suavizado e
valores próximos e 0 geram traçados mais marcantes.
Texture: introduz uma textura para a linha. São dezenas de texturas disponíveis. Quanto maior
o valor, em Amount of texture mais texturas a linha terá.

Rectangle (Retângulo)

A ferramenta Rectangle tool desenha um retângulo. Para desenhar, selecione a ferramenta e

clique com o botão esquerdo do mouse na Área de trabalho. Mantenha o botão pressionado
e arraste o mouse até formar o retângulo no tamanho desejado. Em seguida, solte o botão
do mouse.

Propriedades do Rectangle (Retângulo)

Ao selecionar uma retangulo, o Inspector de Propriedades passa a exibir, além das opções já
explicadas nas propriedades da Linhas, as seguinte opções:

11
 Fireworks

Propriedades do Rectangle
Fill color: Define a cor de preenchimento. Essa opção geralmente fica com o Transparent but-
ton img transparente button selecionado, pois uma linha ou várias linhas sem fechamento
não contêm preenchimento. Assim, essa opção só será utilizada caso haja a construção de
um desenho fechado.
Fill category: Determina a categoria do preenchimento. São vários tipos. Ela estará ativa se
houver cor selecionada em Fill Color.
Edge of fills: Define propriedades do preenchimento. São três opções:
Hard: Opção padrão.
Anti-alias: Suaviza o serrilhado do preenchimento.
Feather: Expande o preenchimento deixando-o mais suavizado. Valores próximos a 100 geram
um preenchimento mais suavizado, inclusive além dos limites do desenho.
Amount of feather: Se a opção feather estiver selecionada em Edge of fills, deve-se definer a
quantidade de Feather. Quanto maior o valor, mais expandido fica o preenchimento.
Transparent: Define a transparência da textura de preenchimento.
Filters: são filtros que podem ser aplicados.
Rectangle Roundness: Arredonda as pontas do retângulo. Valores próximos a 100 arredonda
mais os cantos do retângulo.

Elipse (Elipse)

A ferramenta Elipse desenha uma elipse ou círculo. Para desenhar, selecione a ferramenta e
clique com o botão esquerdo do mouse na Área de trabalho. Mantenha o botão pressionado
e arraste o mouse até formar a elipse no tamanho desejado. Em seguida, solte o botão do
mouse.

Propriedades da Elipse (Elipse)

O Inspector de Propriedades da Elipse e muito parecido com a do retângulo porém não tem a
opção rectangle roundness (Arredondamento dos cantos).

Propriedades da Elipse

Polygon (Polígono)

A ferramenta Polygon desenha um polígono. Para desenhar, selecione a ferramenta e clique

com o botão esquerdo do mouse na Área de Trabalho. Mantenha o botão pressionado e arraste
o mouse até formar o polígono no tamanho desejado. Em seguida, solte o botão.

12
 Fireworks

Propriedades do Polygon (Polígono)

Ao selecionar um polígono, o Inspector de Propriedades passa a exibir, além das opções já

explicadas nas propriedades do retângulo, as seguinte opções:

Propriedades do polígono
nº Shape: define a forma. São duas opções: Star para criar uma estrela e Polygon para criar
um polígono qualquer.
nº Sides: define a quantidade de lados que o polígono irá ter. Por exemplo, um polígono de
três lados forma um triângulo.
nº Angle: define o ângulo entre os lados ao construir uma estrela. Valores grandes produzem
estrelas mais abertas.

Arrow (Seta)

A ferramenta Arrow (Seta) desenha um seta. Para desenhar, selecione a ferramenta e clique
com o botão esquerdo do mouse na Área de trabalho. Mantenha o botão pressionado e arraste
o mouse até formar o objeto no tamanho desejado. Em seguida, solte o botão do mouse.

Ao selecionar o elemento desenhado na Área de Trabalho, observe que o elemento passa a

exibir dois tipos de pontos de seleção, azuis e amarelo. Os pontos azuis redimensionam o ele-
mento. Cada ponto amarelo identifica uma propriedade. Coloque o ponteiro do mouse sobre
cada ponto amarelo para identificá-los.
Existem pontos para alterar a altura (Height), a espessura (Thickness), tamanho da seta (Arrow
Size), largura (Width), o tamanho da ponta (Arrow Tip) e o arredondamento (Roundness).
Clique no ponto amarelo, mantenha o botão do mouse pressionado e arraste para cima, para
baixo ou para os lados para alterar a propriedade desejada. Em determinados pontos, basta
clicar sobre eles para efetuar a mudança.

Beveled Rectangle (Retângulo Recortado)

A ferramenta Beveled Rectangle (Retângulo Recortado) cria um retângulo com cantos recor-
tados.

13
 Fireworks

Chamfer Rectangle (Retângulo Chanfrado)

A ferramenta Chanfer Rectangle (Retângulo chanfrado) cria um retângulo onde os cantos ficam
dentro do retângulo.

Para a Beveled Rectangle e a Chamfler Rectangle, são cinco pontos amarelos, porém alguns
possuem a mesma função. Existem pontos para mudar o tipo do canto, basta clicar sobre o
ponto amarelo (Click to swtich corners), pontos para alterá-lo (Alt/Opt for individual corners)
e para redimensioná-lo (Resize). Para alterar o tipo de canto, basta clicar no ponto amarelo
para mudar.

Connector Line (Linha de Conexão)

A ferramenta Connector Line desenha uma linha de conexão.

Quando selecionado o Connector Line apresenta pontos para alterar a altura e largura (1 e 2),
a rotação (click to rotate) e o arredondamento das conexões (Alt/Opt for individual corners).
Clique no ponto amarelo, mantenha o botão do mouse pressionado e arraste para cima, para
baixo ou para os lados para alterar a propriedade desejada. Em alguns pontos basta clicar
sobre eles para efetuar a mudança.

Doughnut (Rosca)

A ferramenta Doughnut desenha uma forma de rosquinha.

Na Doughnut existem três pontos: para criar ou modificar o raio interno (Inner radius), para
apagar o raio interno (Click to reset) e para criar segmentos (Alt/Opt-drag to segment). Clique
no ponto amarelo, mantenha o botão do mouse pressionado e arraste para cima, para baixo
ou para os lados para alterar a propriedade desejada. Em alguns pontos basta clicar sobre
eles para efetuar a mudança.

14
 Fireworks

L-Shape (Forma de L)

A ferramenta L-Shape desenha uma forma de L.

Na L-Shape, existem quatro pontos: para alterar a altura (Height), a espessura (Tchickness),
a largura (Width) e o arredondamento (Roundness). Clique no ponto amarelo, mantenha o
botão do mouse pressionado e arraste para cima, para baixo ou para os lados para alterar a
propriedade desejada. Em alguns pontos basta clicar sobre eles para efetuar a mudança.

Pie (Torta)

A ferramenta Pie desenha um elemento em forma arredondada.

Na Pie, existem um ponto para apagar o segmento intermo (Click to reset) e dois pontos para
criar ou arrastar segmentos (Alt/Opt-drag to segment). Clique no ponto amarelo, mantenha o
botão do mouse pressionado e arraste para cima, para baixo ou para os lados para alterar a
propriedade desejada. Em alguns pontos basta clicar sobre eles para efetuar a mudança.

Rounded Rectangle (Retângulo Arredondado)

A ferramenta Rounded Rectangle cria uma retângulo com cantos arredondados.

Na Rounded Rectangle, são cinco pontos amarelos, porém alguns possuem a mesma função.
Existem pontos pra mudar o tipo do canto, basta clicar sobre o ponto amarelo (Click to swtich
corners), pontos para alterá-lo (Alt/Opt for individual corners) e para redimensioná-lo (Resize).
Para alterar o tipo de canto, basta clicar no ponto amarelo para mudar.

15
 Fireworks

Smart Polygon (Tipos de Polígonos)

A ferramenta Smart Polygon desenha vários tipos de polígonos.

Na Smart Polygon, existem pontos para alterar a quantidade de lados (Sides), o tamanho e
a rotação (Sacle/Rotate), os setores (Sections) e o interios do polígono (Inner Polygon). Com
isso, um novo polígono pode ser criado. Clique no ponto amarelo, mantenha o botão do mou-
se pressionado e arraste para cima, para baixo ou para os lados para alterar a propriedade
desejada.

Spiral (Espiral)

A ferramenta Spiral desenha um elemento em forma de espiral.

Na Spiral, exitem dois pontos: para alterar a espiral (Spirals) e para deixar a espiral aberta
ou fechada (Open/Close Spiral). Clique no ponto amarelo, manteha o botão do mouse pres-
sionadao e arraste para cima, para baixo ou para os lados alterar a propriedade Spirals. Para
alterar a abertura e fechamento clique em Open/Close Spiral.

Star (Estrela)

A ferramenta Star desenha um elemento em forma de estrela.

Na Star existem cinco pontos: dois pontos para alterar o raio (Radius 1 e Radius 2), dois pon-
tos para alterar a borda ( Roundness 1 e Roundness 2) e um ponto para alterar a quantidade
de pontas que a estrela irá conter (Points). Clique no ponto amarelo, mantenha o botão do

16
 Fireworks

mouse pressionado e arraste para cima, para baixo ou para os lados para alterar a propriedade
desejada.

Scale (Dimensionar)

A Ferramenta Scale tool, perrmite a alteração do tamanho do objeto e sua rotação.

É possível alterar o tamanho em termos de largura ou altura arrastando as caixinhas nas

extremidades do objeto. Para redimensionar de forma uniforme, clique e arraste um quadra-
drinho dos cantos.
Para rotacionar o elemento, posicione o ponteiro do mouse em um dos cantos e quando o ícone
do mouse passar a ser uma seta em forma de curva, clique e mantenha o botão do mouse
pressionado. Em seguida, é só arrastar para rotacionar o elemento.

Skew (Inclinar)

A Ferramenta Skew inclina e/ou aplica um efeito de perspectiva nos objetos selecionados,
veja:
Para inclinar objetos, basta clicar sobre as alças que aparecem no centro das linhas e arrasta-
las.
Para aplicar um efeito do perpectiva no objeto basta clicar nas alças do canto e arrasta-las.

Distort (Distorcer)

A Ferramenta Distort crier distorções no objeto. Para aplicar o efeito clique e arraste as alças
transformando livremente o objeto.

17
 Fireworks

Text (Texto)

A Ferramenta Text possibilita a criação de pequenos e grandes textos dentro da tela do

Fireworks. Com ela, podemos criar textos de duas formas, apenas clicando sobre a tela e es-
crevendo o texto desejado, ou clicando e arrastando o mouse para que a largura desta caixa
de texto seja fixa. Ele estará delimitado por um retângulo de cor azul. Esse retângulo aparece
apenas na edição do arquivo para facilitar a identificação do texto na Área de Trabalho.

Propriedades da Text

Ao selecionar um texto na tela, são exibidas no painel de propriedades todas as opções de

formatação.

Fonte – Font define a fonte e ser utilizada, é só exibir a lista e escolher a fonte desejada.
Tamanho – Size define o tamanho da fonte, é só escolher um valor na lista ou digitar um novo
valor.
Espaçamento do Texto – Kerning ou Range Kerning define o espaçamento entre as letras do
texto.
Auto Kerning – mantém o espaçamento automático. É interessante usá-la, pois algumas fontes
têm espaçamentos diferentes entre algumas letras. Por exemplo, a letra V pode ocupar um
espaço maior que a letra I.
Espaçamento entre Linhas – Leading define o espaço em porcentagem ou pixels entre uma
linha e outra ao usar Enter.
Recuo da Primeira Linha – Paragraph ident define a indentação do parágrafo, ou seja, desloca
a margem do texto da primeira linha para a direita.
Espaçamento antes do Parágrafo – Spacing preceding paragraph determina o valor do espaço
entre uma linha e outra antes do parágrafo onde o valor for definido. Quanto maior o valor,
mais espaço será criado.
Escala do Texto – Horizontal scale define a escala horiontal. O valor é definido em porcenta-
gem.
Espaçamento após do Parágrafo – Space after paragraph limita o espaço entre uma linha e outra
após o parágrafo onde o valor for definido. Quanto maior o valor, mais espaço será criado.
Alinhamentos – Alignment os 4 titpos de alinhamentos padrão, Esquerda, Direita, Centralizado
e Justificado, e Stretch Alignment alinhamentojustificado onde as letras são redimensionadas.
O padrão do programa é alinhar à esquerda.
Orientações – Set text orientation as orientações disponíveis são:
Horizontal left to right: Escreve o texto na horizontal, no sentido da esquerda para a direita.
Horizontal right to left: Escreve o texto na horizontal, no sentido da direita para a esquerda.
Vertical left to right: Escreve o texto na vertical, no sentido da esquerda para a direita.
Vertical right to left: Escreve o texto na vertical, no sentido da direita para a esquerda.
Recursos do Texto – Anti-aliasing level: Especifica um método de renderização da fonte. As

18
 Fireworks

opções são:
No Anti-alias: Desabilita a suavização em textos.
Crisp Anti-alias: Cria uma transição entre o texto e o fundo.
Strong Anti-alias: Cria uma transição entre o texto e o fundo, preservando as formas dos
caracteres de texto.
Contorno – define a cor da borda do texto selecionado.
Opacidade – define a opacidade do texto. Isso significa que é possível inserir textos mais
opacos ou transparentes.

Zoom

A Ferramenta Zoom é utilizada para aumentar o reduzir o grau de ampliação do zoom.

Para aumentar o zoom, basta clicar sobre a tela e para reduzir o zoom basta clicar sobre a tela
segurando a tecla Alt. Também podemos aumentar ou reduzir o zoom pelas teclas de atalho
Ctrl + (aumenta) e Ctrl – (diminui).

Hand (Mão)

A Ferramenta Hand sibstitui as barras de rolagem quando trabalhamos com zoom. Para
utilizar esta ferramentas, basta seleciona-la na caixa de ferramentas e clicar e arrastar o mouse
sobre a tela, posicionando assim a área desejada no centro do monitor.

Undo (Desfazendo)/Rendo (Refazendo)

Como em todos os outros programas, podemos encontrar no menu Edit as opções Undo (des-
fazer) e Rendo (refazer). Para desfazer uma ação basta acionar a opção Undo (desfazer) e
para refazer uma ação desfeita, basta escolher a opção Rendo (refazer).

Copy (Copiar)/Paste (Colar)

Ao selecionar um objeto e ativar o comando Copy (Copiar - Ctrl+C) no menu Edit, uma cópia
deste objeto será enviada para a área de transferência do Windows e este poderá ser colado
em qualquer outro local. Para colocar a cópia no local destinado, basta usar o comando Paste
(Colar – Ctrl+V) no menu Edit.

Duplicate (Duplicar)
Com este comando podemos copiar objetos de uma forma muito mais rápida. Para isso, basta
selecionar o objeto e ativar o comando Duplicate (Duplicar – Ctrl+Alt+D) no menu Edit.

Clone (Clonar)
Este comando é bem parecido com o comando Duplicate, mas com a diferença de que, depois
de escolher no menu Edit a opção Clone (Clonar – Ctrl+Shift+D) na hora da duplicação, os
objetos ficam exatamente na mesma posição.

19
 Fireworks

Visualizando no Navegador
Após terminar a imagem ou objeto Web, temos que testar como fica visto pelo Navegador,
através do menu File (Arquivo)> Preview in Browser (Visualizar no Navegador) opção Preview
in iexplore.exe.

Exercício Aula 01

20
 Fireworks

Aula 02 – Desenhando, Alinhando e

Combinando Objetos
Até agora utilizamos as formas prontas do fireworks para desenhar objetos. Nesta aula, iremos
desenhar os nossos próprios objetos. Entederemos o modo como o Fireworks organiza os seus
objetos, os procedimentos necessários para ordenar, transformar e alinha os objetos dentro
da tela de desenho, bem como combinar traçados.

Pen (Caneta)

A Ferramenta Caneta desenha seguimentos de linha, curvas ou retas, dependendo de

como são desenhados.
Para desenhar seguimentos de linha reta, siga os seguintes passos:
1 – Selecione a ferramenta Pen (caneta) na caixa de ferramentas.
2 – Clique sobre a tela para definir o primeiro nó da forma.
3 – Vá clicando em vários pontos da tela para que os seguimentos sejam criados.
4 – Clique novamente no primeiro nó para fechar a forma.

Pen tool - objeto de linhas retas

Para desenhar seguimentos de linha curva, siga os seguintes passos:

1 – Selecione a ferramenta Pen (caneta) na caixa de ferramentas.
2 – Clique sobre a tela para definir o primeiro nó da forma.
3 – Clique em outro ponto da tela para definir outro nó, mas desta vez não solte o botão do
mouse e arraste o mouse para controlar a curva a ser criada.
4 – Repita o passo 3 (três) enquanto desejado e clique no primeiro nó da forma para fechá-
la.

Pen tool - objeto de linhas curvas

Subselection (Selecionador Secundário)

A Ferramenta Selecionador Secundário é utilizada para controlar os nós de um objeto.

Após criar uma forma com a ferramenta Pen (caneta), por exemplo, podemos selecionar a
ferramenta Subselection (selecionador secundário) na caixa de ferramentas e utilizá-la para
posicionar os nós do objeto.

21
 Fireworks

Adicionando nós a uma forma

Na maioria das vezes, quando terminamos os nossos objetos, necessitamos de mais um nó

para o controle da linha. Para adicionar um nó em qualquer forma, utilizamos à ferramenta
Pen (caneta). Siga os seguintes passos:
1 – Selecione a forma desejada.
2 – Selecione a ferramenta Pen (caneta) na caixa de ferramentas.
3 – Clique sobre a linha da forma selecionada para que um novo nó seja criado.
4 – Selecione a ferramenta Subselection para controlar este nó normalmente.

Removendo os nós de uma forma

Para remover um nó existente na forma, basta selecionar o nó desejado com a ferramenta

Subselection (selecionador secundário) e pressionar a tecla DELETE do teclado.

Convertendo um nó em curva

Quando em uma forma existe um seguimento de linha reta e desejarmos que este se torne uma
curva, utilizamos à ferramenta Subselection (selecionador secundário) da seguinte forma:
1 – Selecione o objeto.
2 – Selecione a ferramenta Subselection (selecionador secundário) na caixa de ferramentas.
3 – Selecione o nós que desejamento transformar em curva
4 – Segure a tecla ALT do teclado e arraste o nó. Feito isto irá aparecer um controle de alças
para que o ajuste da curva se torne mais fácil.
Se somente tiver sido criado uma alça repita o passo 4 para que a outra alça também seja
criada.

Nó transformado em curva

Ainda há possibilidade de converter um nó em curva utilizando a ferramenta Pen (caneta) da

seguinte forma:
1 – Selecione o objeto
2 – Selecione a ferramenta Pen (caneta).
3 – Posicione o mouse sobre o nó que deseja transformar em curva.
4 – Segure a tecla Alt e clique com o mouse sobre o nó. Porém antes de arrastar o mouse solte
a tecla Alt. Ai sim arraste o mouse. Isso fará aparecer alça nos dois lados do nó transformando
em curva as linhas ligadas á este nó.
Se arrastar o nó com o Alt selecionado somente um dos lados do nó receberá alça.

Desagrupando objetos
Vimos anteriormente que o comando agrupar do menu modificar faz com que um grupo de

22
 Fireworks

objetos sejam tratados como se fossem um único objeto e que o comando desagrupar desfaz
este comando. Além disso, o comando desagrupar é muito útil para modificar formas criadas
com as ferramentas retângulo ou retângulo arredondo. Siga os seguintes passos para melhor
entendimento:
1 – Desenhe um retângulo com a ferramenta Retângulo do fireworks.
2 – Selecione a ferramenta Subselection (selecionador secundário) na caixa de ferramentas.
3 – Clique sobre um dos nós do retângulo e perceba que uma caixa de diálogo irá aparecer.
Esta caixa diz que o retângulo somente pode ser deformado se este for desagrupado antes.
4 – Cancele a caixa de diálogo.
5 – Selecione o objeto e vá ao Menu Modify (Modificar) > Ungroup (Desagrupar).
6 – Selecione a ferramenta Subselection (selecionador secundário) na caixa de ferramentas.
7 – Tente modificar a forma do objeto e perceba que a caixa de diálogo não mais aparecerá.

Freeform (Forma Livre)

A Ferramenta Forma Livre é utilizada para alterar a forma dos objetos de um jeito rápido e
simples. Para utilizar esta ferramenta, siga os seguintes passos:
1 – Selecione o objeto desejado.
2 – Escolha a ferramenta Forma Livre na caixa de ferramentas.
3 – Defina o tamanho da deformação no Painel Propriedades.
4 – Clique sobre a borda do objeto e arraste para deformá-lo.

Reshape Area (Mudar Forma da Área)

É possível usar a ferramenta Mudar forma da área para puxar a área de todos os traçados
selecionados para dentro do círculo externo do ponteiro de mudança de forma da área.
O círculo interno do ponteiro é o limite da ferramenta em sua intensidade total. A área entre
os círculos interno e externo muda a forma dos traçados abaixo da intensidade total. O círculo
externo do ponteiro determina o movimento gravitacional do ponteiro. Você pode definir a
sua intensidade.
Para distorcer traçados selecionados, siga os seguintes passos:
1 - Selecione a ferramenta Mudar forma da área.
2 – No painel propriedades defina o tamanho do ponteiro e a força.
3 - Arraste os traçados para redesenhá-los.

Forma de área

23
 Fireworks

Knife (Faca)

A Ferramenta Faca é utilizada para cortar os objetos criados no Fireworks. Para utilizar
esta ferramenta, siga os seguintes passos:
1 – Selecione o objeto a ser cortado.
2 – Selecione a ferramenta Faca na caixa de ferramentas.
3 – “Desenhe” o corte do objeto.

Objeto cortado com a ferramenta Knife

Vector Path (Traçado Vetorial)

A Ferramenta Traçado Vetorial cria linhas vetoriais. Para utilizar esta ferramenta, basta
selecionála na caixa de ferramentas e desenhar sobre a tela.

Traçado Vetorial

Redraw Patrh (Redesenhar Traçado)

A Ferramenta Redesenhar Traçado é utilizada para estender ou redesenhar um segui-

mento selecionada, mantendo as características de traço. Para utilizar esta ferramenta, siga
os seguintes
passos:
1 – Selecione o traço desejado.
2 – Escolha a Ferramenta Redesenhar Traçado na caixa de ferramentas.
3 – Clique sobre o traço selecionado e arraste para estende-lo ou redesenha-lo.

Redesenhando Traçado Vetorial

24
 Fireworks

O Painel Layers (Camadas)

Os layers (camadas) são planos transparentes onde você pode criar e posicionar objetos,
permitindo assim que você divida o seu trabalho artístico ao construir imagens complexas ou
compostas.
O Painel Layers (Camadas), menu Windows (Janela) > Layers (Camadas) é responsável por
exibir e gerenciar as camadas existentes no arquivo aberto. Ao desenhar objetos no fireworks,
seja ele vetorial ou bitmap, o painel camadas se encarrega de empilhá-los dentro de uma
camada, veja:

Painel Layers (camadas)

Operações com Layers (Camadas)

Renomeando Camadas
Para modificar o nome de uma camada, basta dar um clique duplo sobre a camada desejada
e digitar o novo nome.

Show/Hide Layers (mostrar e ocultar camadas)

Ao lado do nome de cada uma das camadas e também ao lado do nome dos objetos existentes
dentro das camadas, existe o ícone de um olho. Ao clicar sobre este ícone, o olho irá desapa-
recer e o conteúdo da camada não mais será exibido na Tela, ao clicar neste local novamente,
ambos reaparecem.

Ordenando Layers (Camadas)

Percebemos facilmente que os objetos são empilhados dentro de uma Layer (camada) no
fireworks.
Podemos ordenar estes objetos apenas clicando sobre eles e arrastando para o local desejado
dentro da camada, ou seja, para cima ou para baixo.

25
 Fireworks

Align (Alinhando Objetos)

Existem varias formas de alinhar objetos dentro do Fireworks, a forma mais utilizada e tam-
bém mais fácil é pelo Painel Align (Alinhar) que pode ser exibido através do Menu Windows
(Janela ) > Align (Alinhar).
Neste painel encontramos algumas opções, veja:

To Canvas: faz com que o ponto de referência seja o centro da

tela.
Align (Alinhar): torna possível o alinhamento dos objetos.
Distribute (Distribuir): posiciona os objetos uns em relação aos outros.
Match Size (Coincidir Tamanho): faz com que os objetos tenham os mesmos
tamanhos.
Space (Espaçamento): ajusta o espaçamento entre os objetos.

Agrupando/Desagrupando Objetos
Ao terminar a criação de um desenho qualquer dentro do Fireworks, podemos notar que o
mesmo não é formado por um único objeto e sim por vários. Para fazer com que o fireworks
trate todos estes objetos como um só, basta selecioná-los e ir ao Menu Modify (Modificar) >
Group (Agrupar). Desta forma fazemos com que os objetos façam parte de um grupo e que
somente se separem quando o comando Desagrupar do Menu Modificar é acionado.

Combine Path (Combinando Traçados)

No Menu Modify (Modificar) > Combine Path (Combinar Traçados) encontramos opções que
interagem dois um mais objetos para formar outros completamente diferentes e para utilizar
estes comandos siga os seguintes passos:
1 – Com a Ferramenta Ponteiro selecione os objetos que participarão do efeito.
2 – Utilize o comando...

Join (Unir)/Split (Dividir)

O comando Unir do Menu Modify (Modificar) > Combine Path (Combinar Traçados) faz com
que dois ou mais objetos se tornem um só e que a área de intersecção entre eles se torne
vazada, veja:

26
 Fireworks

Unindo objetos - Antes e Depois

Para separar estes objetos novamente, selecione-os e ative o comando Split (Dividir) do Menu
Modify (Modificar) > Combine Path (Combinar Traçados).

Dididindo objetos - Antes e Depois

Union (União)
Ao selecionar dois ou mais objetos e ativar o comando Union (União) do Menu Modify (Modifi-
car) > Combine Path (Combinar Traçados), fazemos com que estes objetos se tornem um só,
como se estivessem soldados.

União de objetos - Antes e Depois

Intersect (Intersecção)
O comando Intersect (Intersecção) faz com que somente a área de intersecção (área onde os
objetos se sobrepõem) continue na tela, excluindo todo o resto.

Intersecção de objetos - Antes e Depois

Punch (Perfurar)
Punch (Perfurar) objetos é o mesmo que apará-los, ou seja, podemos colocar um objeto sobre
o outro na tela do fireworks e fazer com que o objeto de cima corte o(s) objeto(s) de baixo
selecionando-os e ativando o comando Perfurar do Menu Modify (Modificar) > Combine Path
(Combinar Traçados).

27
 Fireworks

Perfurar objetos - Antes e Depois

Crop (Cortar)
É possível crop (cortar) um traçado usando a forma de um outro traçado. O traçado da frente
ou o mais superior define a forma da área cortada.

Cortar objetos - Antes e Depois

Anexando Texto ao Traçado

Para liberar o texto das restrições de blocos de texto retangulares, é possível desenhar um
traçado e anexar texto a ele. O texto flui ao longo da forma do traçado e ainda pode ser edi-
tado.
Um traçado ao qual é anexado um texto perde temporariamente seus atributos de traço, pre-
enchimento e filtro. Qualquer atributo de traço, preenchimento e filtro aplicado subseqüen-
temente é aplicado ao texto, e não ao traçado. Posteriormente, se o texto for separado do
traçado, esse traçado recuperará seus atributos de traço, preenchimento e filtro.
Se o texto anexado a um traçado aberto exceder o comprimento do traçado, o texto restante
retornará e reproduzirá a forma do traçado.

Para incluir texto em um traçado:

1. Manter pressionada a tecla Shift e selecionar um bloco de texto e um traçado.

2. Selecionar Text (Texto) > Attach to Path (Anexar ao traçado).

Para separar o texto de um traçado selecionado:

Selecionar Text (Texto) > Detach from Path (Separar a partir do traçado).

28
 Fireworks

Para editar o texto anexado a um traçado:

Clicar duas vezes no objeto de texto em um traçado com a ferramenta Pointer (Ponteiro) ou
Subselection (Selecionar secundário). Selecionar a ferramenta Text (Texto) e o texto a ser
editado.

Para editar a forma do traçado:

1. Com a ferramenta Subselection (Selecionar secundário), selecionar o objeto de texto em

um traçado. Agora, os pontos do traçado estão selecionados como secundários e prontos para
a edição.
2. Arrastar os pontos para mudar a forma do traçado.

Para inverter a direção de texto em um traçado selecionado:

Selecionar Text (Texto) > Reverse Direction (Inverter direção).

Para mover o ponto inicial do texto anexado a um traçado:

1. Selecionar o objeto de texto em um traçado.

2. No Property inspector (Inspetor de propriedades), digitar um valor na caixa de texto Text
Offset (Deslocamento do texto). Em seguida, pressionar Enter.

Convertendo Textos para Traçados

É possível converter um texto em traçados e depois editar as formas das letras como se fossem
objetos vetoriais. Todas as ferramentas de edição vetorial ficam disponíveis após a conversão
de um texto em traçados. No entanto, não é possível editar esse objeto como um texto.

Para converter o texto selecionado em traçados:

Selecionar Text (Texto) > Convert to Paths (Converter em traçados).

O texto convertido em traçados mantém todos os seus atributos visuais, mas só é possível
editá-lo como traçados. É possível editar o texto convertido como um grupo ou editar os ca-
racteres convertidos de modo individual.

Para editar traçados de caracteres de texto convertido individualmente:

Selecionar o texto convertido com a ferramenta Subselection (Selecionar secundário).

Selecionar o texto convertido e escolher Modify (Modificar) > Ungroup (Desagrupar).
Para editar os traçados de caracteres de texto convertido individualmente, usar as ferramentas
de edição vetorial.

29
 Fireworks

Exercício Aula 02

30
 Fireworks

Aula 03 – Cores e Efeitos

O Macromedia Fireworks 8 oferece uma ampla variedade de painéis, ferramentas e opções
para organizar e selecionar cores, e aplicá-las a imagens bitmap e a objetos vetoriais.

O Uso e Efeito das Cores na Internet

Em primeiro lugar, é importante que se reflita qual o objetivo, uso e aplicações das cores num
website. Muitas vezes as cores não são valorizadas o quanto deveriam, isso porque elas já se
tornaram parte do cotidiano.
É muito difícil achar o perfeito equilíbrio no balanço entre as cores na internet. Porém existem
algumas combinações predeterminadas que podem ser usadas sem medo, que variam depen-
dendo da sua área de trabalho.
Um bom exemplo que pode ser observado muito comumente é o uso de azul e branco em sites
relacionados com medicina e saúde. Cores básicas como branco e marfim são ótimas cores
para serem usadas como plano de fundo em um site. Já o preto, que também é considerado
uma cor básica deve ser muito bem balanceado com a cor ou cores usadas na mesma página.
A combinação entre o preto e branco sugere sofisticação e organização, já a combinação entre
preto e o pink é mais atraente ao público jovem e maioria das vezes feminino.
Seguindo a regra: -Cores fortes como o pink, laranja vibrante, amarelo e o verde-limão não
são cores que devem ser usadas como plano de fundo, elas sempre vão dar a idéia de falta
de sofisticação, amadorismo e alem disso elas são muito cansativas aos olhos.
-A cor azul nos tons mais escuros tem um charme de encantamento, e é muitas vezes asso-
ciado com a noite, o misticismo e também com o espaço.
-Vermelho escuro é uma cor clássica e geralmente fica bem se usada juntamente com pre-
to.
-O laranja quando usado nos tons mais escuros juntamente com o branco é uma boa combi-
nação para ser usado em site relacionados com comida ou alimentos.
- O verde é uma cor ligada à serenidade e a vegetação, mesmo o verde limão se bem usado
pode ser uma cor interessante para um plano de fundo em um site estilo moderno.
- Cores ligadas ao marrom e tons da terra são cores muito boas para serem usadas se seu
site for ligado a projetos ligados a natureza e ecologia.
- Tente não usar mais do que três ou quatro cores, mantenha em mente que às vezes mais é
menos, muitas cores usadas simultaneamente torna o site muito cansativo para os olhos.

Finalidade das cores na Internet:

Entre as várias finalidades da cor na internet. As mais comuns são:
1. Chamar a atenção;
2. Dar mais realismo aos objetos em cenas;
3. Estimular a ação;
4. Atender as exigências, estéticas e emocionais do usuário;
5. Formar atmosfera adequada.
6. Embelezar o site, tornando-o mais atrativo;
7. Diferenciar nossos sites dos demais;
Porém temos que tomar cuidado, pois existem cores seguras e não-seguras para trabalho na
Web. Dependendo das configurações de cada monitor a cor pode ser mostrada de um jeito

31
 Fireworks

na tela, pode ser que um azul exibido no seu monitor se torne um verde no monitor de outro
usuário e, para que isto não aconteça podemos ativar a opção Snap to Web Safe no menu da
opção Fill Color no Inspetor de Propriedades.

Snap to Web Safe

A barra de ferramentas Colors apresenta ferramentas voltadas para aplicação de cores. Contém
várias ferramentas que serão descritas a seguir.

Eyedropper

A ferramenta Eyedropper permite capturar uma cor (tanto o Stroke-Contorno quanto o Fill-
Preenchimento) de outro elemento. Ela ainda pode capturar as características de uma linha,
como a cor, espessura e formato.
Para usar, basta selecionar a ferramenta e clicar sobre o elemento que quer capturar a cor ou
as características da linha. Em seguida use o balde (Paint Bucket tool) para pintar ou desenhe
uma nova linha ou objeto.

Propriedades da Eyedropper
Ao selecionar a ferramenta, o Inspetor de Propriedades é aberto. Nele, pode-se configurar:
Average: Define o tamanho da área a ser capturada.
1 Pixel: Seleciona a cor de um pixel da imagem.
3x3 Average: Determina a cor intermediária de uma área de 3x3 pixels da imagem.
5x5 Average: Seleciona a cor intermediária de uma área de 5x5 pixels da imagem.
A Eyedropper tool não apenas captura cores, com ela é possível incluir uma cor de outro ele-
mento em um objeto selecionado. Para isso:
1- selecione o objeto que receberá a cor.
2- selecione a ferramenta Eyedropper e clique sobre a cor que deseja capturar.

Paint Bucket (Balde de Tinta)

A ferramenta Paint Bucket pinta o interior de elementos. Para usar, selecione a ferramenta,
escolha uma cor e clique sobre o objeto a receber o preenchimento.

Propriedades do Paint Bucket

32
 Fireworks

Ao selecionar a ferramenta, o Inspetor de Propriedades é aberto. Nele, pode-se configurar:

Fill Color: Define a cor de preenchimento.
Fill Category: Especifica a categoria do preenchimento (são vários tipos). Ela estará ativa se
houver uma cor selecionada em Fill Color.
Edge: Define propriedades do preenchimento. São três opções:
- Hard: Opção padrão.
- Anti-alias: Suaviza o serrilhado do preenchimento.
- Feather: Expande o preenchimento deixando-o mais suavizado. Valores próximos a 100 ge-
ram um preenchimento mais suavizado, inclusive além dos limites do desenho.
Texture: Define a textura do preenchimento.
Amount of texture: Define o valor da textura de preenchimento. Quanto maior o valor, mais
forte é a textura aplicada.
Transparent: Define a transparência da textura de preenchimento.
Tolerance: Determine o valor de tolerância para a pintura.
Opacity: Estabelece o grau de transparência da cor pintada. Valores próximos a 100 geram
cores opacas e quanto mais próximos a 0, as cores ficam transparentes.
Blend Mode: São efeitos de mesclagem que podem ser aplicados. Também existem vários
Blend Modes disponíveis.
Preserve transparency: Ao ativar essa opção, o balde não pinta em áreas transparentes.

Gradient (Gradiente)

A Ferramenta Gradient é utilizada para preencher uma área com um gradiente. Mantenha
por alguns segundos o botão do mouse clicado sobre o ícone da Paint Bucket tool até aparecer
a opção Gradient tool.

Propriedades do Gradiente
O Inspetor de Propriedades dessa ferramenta é o mesmo da Paint Bucket tool, porém as op-
ções presentes em Fill Category abrangem apenas gradientes.

Tipos de Gradiente
Para utilizar, selecione a ferramenta, escolha o gradiente desejado, configure o Inspetor de
Propriedades e, em seguida, clique na área selecionada para aplicar o gradiente.

Exemplos de Gradiente

33
 Fireworks

Após aplicado o gradiente aparecerá a linha de configuração do gradiente. Usando a ferramenta

Pointer (ponteiro) ou a ferramenta Gradient (gradiente) podemos mover as pontas da linha de
configuração do gradiente produzindo assim uma alteração no gradiente aplicado.

Editando um preenchimento dégradee

Para editar o preenchimento dégradé atual, clicar em qualquer caixa Fill Color (Cor de
preenchimento) e usar a janela pop-up Edit Gradient (Editar dégradé).

Editando dégradee

Para adicionar um novo exemplo de opacidade ou cor ao dégradé:

1 - Para adicionar um exemplo de cor, clicar na área abaixo da inclinação da cor dégradé.
2 - Para adicionar um exemplo de opacidade, clicar na área acima da inclinação da cor dé-
gradé.

Para remover um exemplo de opacidade ou cor do dégradé:

1-Arrastar o exemplo para longe da janela pop-up Edit Gradient (Editar dégradé).
Para definir ou alterar a cor de um exemplo de cor:
1. Clicar no exemplo de cor.
2. Selecionar uma cor na janela pop-up.

Styles (Estilos)
O painel Styles contém um conjunto de estilos predefinidos do Fireworks à sua escolha. Além
disso, se o usuário tiver criado uma combinação de atributos de traços, preenchimentos,
filtros e texto e desejar reutilizá-los, poderá salvar os atributos como um estilo. Em vez de
reconstruir atributos, basta salvá-los no painel Styles e, depois, aplicar essa combinação de
atributos a outros objetos.

Para aplicar um estilo a um objeto ou bloco de texto selecionado:

1. Selecionar Window (Janela) > Styles (Estilos) para abrir o painel Styles.
2. Clicar em um estilo do painel Styles.

34
 Fireworks

Exemplos de Styles

Swatches (Amostra de Cores)

O painel Exemplos de Cores menu Windows > Swatches (Amostra de Cores) é um painel adap-
tado para a internet, já que este somente exibe cores seguras para este tipo de trabalho. Para
aplicar uma destas cores em um objeto, basta selecioná-lo e clicar sobre a cor desejada.

Amostra de Cores

Mixer (Misturador de Cores)

O painel Misturador de Cores menu Windows > (Mixer) permite a escolha de uma cor não
existente no painel amostras de cores. Para utilizar este painel, siga os seguintes passos:
1 – Selecione o objeto que deve receber a cor.
2 – Defina se esta cor será aplicada ao preenchimento ou ao contorno do objeto.
3 – Clique sobre a cor desejada na parte inferior do painel.

Misturador de Cores

Symbol (Símbolos)
Os símbolos são elementos utilizados para a criação de gráficos, botões ou animações. Podem

35
 Fireworks

ser reutilizáveis, ou seja, um mesmo símbolo pode ser usado várias vezes em um mesmo
arquivo.
Todos os símbolos criados ficam presentes no painel Library (Biblioteca).
O painel Library (Biblioteca) está localizado dentro do painel Assets (Recursos). Pode ser acio-
nado através do menu Windows (Janela) > Library (Biblioteca). Trata-se de um pincel dividido
em duas áreas. Na área inferior ficam todos os elementos presentes na Library. Ao selecionar
um elemento, ele é visualizado na área superior. O nome do elemento, o tipo de símbolo e a
data de criação são exibidos na área inferior.
A criação de um novo símbolo pode ser feita de quatro maneiras, após selecionar um elemento
no canvas:
No painel Library, clicando no ícone New Symbol;
No menu Modify> Symbol> convert to Symbol;
No menu contextual acionado através do botão direito do mouse sobre o elemento selecionado
na Área de trabalho. Nas opções que se abrirem, clique em Convert to Symbol;
Através da tecla de atalho F8.
Em quaisquer dessas maneiras, a janela Symbol Properties será aberta.

Criando um Symbol
Name: Define o nome do símbolo. Se não quiser digitar um nome, o programa denomina-o
de Symbol 1, Symbol 2 e assim por diante, conforme a ordem de criação.
Type: Define o tipo de símbolo. Existem três tipos:
Graphic: Cria um símbolo gráfico. Geralmente é usado para efeitos e também dentro de ani-
mações.
Animation: Cria uma animação.
Button: Cria botões.

Exercício Aula 03

36
 Fireworks

Aula 04 – Live Filters (Filtros ao vivo)

Os Live Filters (Filtros ao vivo) do Macromedia Fireworks 8 são melhorias que podem ser apli-
cadas a objetos vetoriais, imagens bitmap e textos. Os Live Filters incluem chanfros e relevo,
sombras sólidas, outras sombras e brilhos, correção de cor, e embaçamento e aguçamento.
Alguns filtros agora incluídos nos Live Filters do Fireworks— como Auto Levels (Níveis automá-
ticos), Gaussian Blur (Desfoque Gaussiano) e Unsharp Mask (Desfocar máscara) — só estavam
disponíveis como plug-ins ou filtros irreversíveis.

Aplicando Filtros
É possível aplicar Live Filters a objetos selecionados diretamente no Property inspector (Ins-
petor de propriedades). Se preferir, ele pode usar esses filtros no modo tradicional por meio
do menu Filters (Filtros).

Tipos de Filtros
Para aplicar um filtro, selecione o elemento e, em seguida, no inspetor de propriedades, clique
no ícone +. As opções de filtros disponíveis serão exibidas. O Fireworks atualiza automatica-
mente os Live Filters quando o usuário edita qualquer objeto em que tenham sido aplicados.
Img da Lista de Filters

Ativando, Desativando e Excluindo Filtros

No Property inspector, é possível ativar, desativar ou excluir os Live Filters.

Para remover um filtro basta clicar no ícone -. Quando um filtro é removido, o objeto ou a
imagem volta a ter a aparência anterior.

Adjust Color (Ajustar cor)

Permite o ajuste de cores de um elemento. Contém sete filtros: Auto Levels (Níveis automáti-
cos), Brightness/Contrast (Brilho e Contraste), Color Fill (Preenchr com cor), Curves (Curvas),
Hue Saturation (Matiz/ Saturação), Invert (Inverter), Levels (Niveis).

Auto Levels (Níveis automáticos)

Esse filtro ajusta automaticamente as cores. É útil de se aplicar em imagens para evitar que
fiquem com excessos.

37
 Fireworks

Brightness/Contrast (Brilho e Contraste)

Esse filtro ajusta o brilho e contraste. A janela Brightness/Contrast (Brilho e Contraste) é aber-
ta. Use o controle deslizante para regular ou digite um valor na caixa. Com a opção preview
marcada, o elemento será alterado conforme você mudar os valores.
Após ajustar o brilho e o contraste, clique em OK.

Color Fill (Preenchr com cor)

Esse filtro aplica uma cor em toda a imagem. Ao aplicar o filtro, aparece no inspetor de pro-
priedades uma janelinha de configuração. Pode-se usar conjuntamente algum Blend Mode (que
apreenderemos no próximo capitulo), escolher a cor e configurar o grau de transparência da
cor.

Curves (Curvas)

Esse filtro possibilita o ajuste de tonalidade de cores. Porém, ele permite uma melhor combi-
nação, pois pode controlar separadamente os ajustes de cores RGB (Red, Green e Blue).
Ao aplicar o filtro, é aberta a janela de configurações chamada Curves. Nela, deve-se escolher
o canal em Channel. Pode-se configurar cada cor separadamente. Basta selecionar em Channel
a cor desejada e, em seguida, ajustar a curva com o ponteiro do mouse.
Existem três botões com um conta-gota. Cadas um deles faz um ajuste: Select shadow color
(cor de sombra), Select midtone color (cores de tons médios) e Select highlight color (cores
claras). Para usar, selecione o ícone desejado e, em seguida, clique na área da imagem.

Hue/Saturation (Matiz/ Saturação)

Esse filtro permite ajustar a tonalidade, intensidade e iluminação das cores.

Use o controle deslizante para regular cada um dos ajustes.
Colorize coloca um valor de Hue e Saturation, fazendo com que o elemento fique em uma
determinada tonalidade.

Invert (Inverter)

Esse filtro inverte os valores de RGB, gerando o efeito de negativo.

Level (Niveis)

Esse filtro ajusta cores escuras, tons médios claros.

É semelhante ao filtro Curves, porém, o controle da tonalidade é feito através do arraste do
controle de tons Img triangulo. São três controles, um para tons claros, um intermediário (para
tons médios) e outro para tons escuros.
Esse filtro também permite configurar cada tom do RGB (Red, Green ou Blue) separadamen-
te.

Bevel and Emboss (Chanfo e Relevo)

Permite a inserção de chanfros e relevos em elementos. Contém quatro filtros: Inner Bevel
(chanfro interno), Inset Emboss (relevo interno), Outer Bevel (chanfro externo), Raised Em-
boss (alto relevo).

38
 Fireworks

Inner Bevel (Chanfro Interno)

Esse filtro cria um chanfro interno. Ao aplicá-lo é aberta a janela de configuração. A primeira
caixa de seleção é chamada d Bevel edge shape e determina a forma da borda do chanfro.
Em seguida, deve-se definir a largura da borda do chanfro (Width). As demais configurações
são: contraste (Contrast), suavidade (Softness) e ângulo (Angle). Na parte inferior da janela,
seleciona-se o tipo de botão (Button Preset) que pode ser criado. Portanto, esse filtro é inte-
ressante de se usar na construção de molduras e botões.

Inset Emboss (Relevo Interno)

Esse filtro cria um relevo interno. Nele, as configurações que devem ser feitas são: largura da
borda do relevo (Width), contraste (Contrast), suavidade (Softness) e ângulo (Angle).

Outer Bevel (Chanfro Externo)

Esse filtro cria um chanfro externo. As configurações são as mesmas do Inner Bevel. A única
diferença é a possibilidade de se escolher uma cor para a borda.

Raised Emboss (Alto Relevo)

Este filtro cria um efeito de alto relevo. As configurações são as mesmas vistas no filtro Inset
Emboss

Blur (Embaçamento)
Cria um efeito de embaçamento. Contém seis filtros: Blur (embaçamento automático), Blur
More (embaçamento automático maior), Gaussian Blur (embaçamento Glaussiano), Motion
Blur (embaçamento em movimento), Radial Blur (embaçamento radial), Zoom Blur (embaça-
mento em Zoom).

Blur (embaçamento automático)

Esse filtro cria um efeito de embaçamento automático.

Blur More (embaçamento automático maior)

Esse filtro cria um efeito de embaçamento automático, porém um pouco mais forte que o filtro
Blur.

Gaussian Blur (embaçamento Glaussiano)

Esse filtro cria em efeito de embaçamento. Ao ser aplicado, deve-se configurar o valor de Blur
Radius, utilizando o controle deslizante. Após definir o valor, clique em OK.

Motion Blur (embaçamento em movimento)

Esse filtro cria um efeito de embaçamento, dando a impressão de movimento. Ao aplicar,

configure o ângulo e a distância. Em seguida, clique em OK.

39
 Fireworks

Radial Blur (embaçamento radial)

Esse filtro cria um efeito de embaçamento em formato radial.

Zoom Blur (embaçamento em Zoom)

Esse filtro cria um efeito de embaçamento, dando a impressão de aumento do elemento.

Ao aplicar, configure a Amount (quantidade) e a qualidade do Blur (qualidade). Em seguida,
clique em OK. Com a opção preview marcada, o elemento será alterado conforme você mudar
os valores.

Noise (Ruídos)
Insere ruídos ao elemento. Contém apenas um filtro que é abordado a seguir.

Add Noise

Esse filtro adiciona noise (ruídos) ao elemento. Ao aplicá-lo, selecione a quantidade de noise
(ruídos) a ser inserida na imagem. Marcando a opção Color, o noise (ruídos) adquire cor, ficando
um pouco mais suave em relação ao elemento. Com a opção preview marcada, o elemento
será alterado conforme você mudar os valores.

Other
Insere outros filtros. Contém dois filtros disponíveis: Convert to Alpha (Converte em Alpha) e
Find Edges (Transições de cores).

Convert to Alpha

Esse filtro converte o elemento em alfa para gerar transparência.

Find Edges

Esse filtro identifica as transições de cores (bordas) em um elemento, dando um aspecto de

rascunho.

Shadow and Glow

Insere filtros relativos à sombreamento e brilhos ao redor de um elemento. Contém cinco
filtros disponíveis: Drop Shadow (Sombreamento), Glow (Brilho), Inner Glow (Brilho dentro),
Inner Shadow (Sombra dentro), Solid Shadow (Sombra angulada).

Drop Shadow

Esse filtro insere um sombreado em um elemento. Ao aplicá-lo, deve-se configurar a Distance

(Distância) da sombra em relação ao elemento, a cor da sombra, a (Opacity) Opacidade, a
Softness (Suavidade) e o Angle (Ângulo). Marcando a caixa Knock out, o filtro preenche todo
o elemento com branco para dar contraste com a sombra.

40
 Fireworks

Glow

Esse filtro insere um brilho ao redor de um elemento. Ao aplica-lo, deve-se configurar o ta-
manho do brilho (Width), a cor, a opacidade (Opacitu), a suavidade (Softness) e o offset. O
offset seria a distância do brilho em relação ao elemento. Quanto mais baixo o valor de offset,
mais perto do elemento o brilho estará.

Inner Glow

Esse filtro insere um brilho dentro de um elemento. A configuração é a mesma feita para a
ferramenta Glow.

Inner Shadow

Esse filtro insere uma sombra dentro de um elemento. A configuração é a mesma feita para
a ferramenta Drop Shadow.

Solid Shadow

Esse filtro cria uma sombra angulada em um elemento. Ao aplicar o filtro, configura-se o ângulo
e a distância. Ao marcar a caixa solid color, é possível definir uma cor para a sombra. Caso
contrário o filtro usará detalhes do próprio elemento.

Sharpen
Torna o elemento mais aguçado. Contém três filtros: Sharpen (Aguçar automaticamente),
Sharpen More (Aguçar automaticamente maior), Unsharpen Mask (Mascara de Intensidade).

Sharpen (Aguçar automaticamente)

Esse filtro torna o elemento mais aguçado de forma automática, sem a necessidade de con-
figurações.

Sharpen More (Aguçar automaticamente maior)

Esse filtro torna o elemento mais aguçado de forma automática, sem a necessidade de confi-
gurações. É mais forte que o filtro Sharpen.

Unsharpen Mask (Mascara de Intensidade)

Esse filtro torna o elemento mais nítido. Pode-se configurar algumas propriedades, como a
intensidade (Sharpen Amount), o raio de ação (Pixel Radius) e o limiar de ação (Threshold).
Basta usar o contro-le deslizante de cada propriedade para usar o filtro em um elemento. Após
concluir, clique em OK.

Eye Candy 4000 LE

São três filtros disponíveis. Se o desenvolvedor quiser adquirir todos os filtros dessa coleção,
poderá optar por comprá-los.

41
 Fireworks

Bevel Boss

Esse filtro cria chanfros e relevos no elemento. Ao aplica-lo, a tela de configurações é aberta.
Ela possui três abas. Na aba Basic, configuram-se as propriedades básicas do chanfro, como
posição, tamanho, entre outros. Na aba Lightning configura-se a luminosidade do efeito e na
aba Bevel Profile pode-se definir um bevel já pré-configurado e pronto para uso.
No menu Settings da janela de configurações estão presentes mais alguns bevels que podem
ser utilizados. As interações são muitas.

Marble

Esse filtro cria uma textura marmorizada nos elementos. A janela de configurações é aberta,
onde se define tamanho, espessura, cor, entre outros. No menu Settings também há outras
opções de marbles para serem utilizadas.

Motion Trail

Esse filtro cria um rastro indicando movimento. A janela de configurações é aberta e nela se
define a direção, tamanho, opacidade, entre outros. No menu Settings também existem alguns
rastros disponíveis para uso.

Alien Skin Splat LE

Contém apenas um filtro disponível. Se o desenvolvedor quiser adquirir todos os filtros dessa
coleção, poderá optar por compra-los.

Edges

Esse filtro cria bordas e molduras nos elementos. Ao usar, a janela de configurações é aberta,
onde se pode configurar o tamanho da margem, direção, entre outros. Atenção: a propriedade
Edge Mode contém vários tipos de bordas e molduras a serem aplicadas.No menu Settings
também existem outras opções.

Exercício Aula 04

42
 Fireworks

Continuação do Exercício Aula 04

43
 Fireworks

Aula 05 – Blend Modes e Operações com

Camadas
Os Blend Modes (modos de mescalgem) são os chamados modos de mesclagem e são aplicados
no Inspector de Propriedades do elemento selecionado através da ferramenta Pointer tool.
O Blend Mode está localizado acima dos filtros. É a caixa de seleção com a inscrição Normal.

São utilizados para criar efeitos com elementos sobrepostos. Assim, eles determinam como
será a mesclagem entre esses elementos que podem estar na mesma camada ou em camadas
(layers) distintas.
São dezenas de Blend Modes disponíveis a serem aplicados e a versão 8 do Firerworks incor-
porou novos modos de mescalgem.
Nos exemplos que se seguem teremos um retângulo (vetor) de cor laranja sobre a imagem.
A aplicação dos Blend Modes serão no retângulo.

Normal

Esse Blend Mode não produz mesclagem entre os elementos.

Average

Produz uma mesclagem média.

44
 Fireworks

Darken

Esse Blend Mode produz uma mesclagem de cor um pouco mais escura entre os elementos.

Multiply

Gera uma mesclagem ao multiplicar a cor produzindo um tom um pouco mais escuro entre
os elementos.

Color Burn

Produz uma mesclagem aumentando o contraste.

Inverse Color Burn

Esse Blend Mode é semelhante ao Color Burn, porém as cores são trocadas (invertida).

45
 Fireworks

Soft Burn

É semelhante ao Color Burn, porém a saturação e o contraste são menores.

Lighten

Detecta a cor mais clara e a usa para mesclagem.

Screen

Produz uma mesclagem com tons mais claros.

Color Dodge

Aumenta o brilho e diminui o contraste.

Inverse Color Dodge

Esse Blend Mode é muito semelhante ao Color Dodge, porém as cores são trocadas.

46
 Fireworks

Soft Dodge

É a combinação de Color Dodge e Inverse Color Burn.

Overlay

Preserva os brilhos e as sombras da cor de base.

Soft Light

Escurece ou clareia a imagem dependendo da cor base.

Fuzzy Light

É semelhante ao Soft Light, porém com brilho diferente.

Hard Light

Esse Blend Mode é semelhante ao Soft Light, porém, com brilho mais intenso.

47
 Fireworks

Difference

Inverte as cores.

Exclusion

Inverte as cores acrescentado contraste menor.

Negation

Esse Blend mode é semelhante ao Exclusion, porém, com maior luminosidade e cores vibran-
tes.

Hue

Cria uma mesclagem de acordo com a iluminação e saturação da cor base.

Saturation

Cria uma cor de acordo com a iluminação e ma matriz da cor base.

48
 Fireworks

Color

Altera as cores de acordo com a iluminação, a saturação e a matriz da cor base.

Luminosity

Esse Blend Mode é semelhante ao Color, porém, altera os tons de cinza.

Red

Funciona como uma máscara de cor vermelha.

Green

Funciona como uma máscara de cor verde.

49
 Fireworks

Blue

Esse Blend Mode funciona como uma máscara de cor azul.

Reflect

Semelhante ao Color Dodge, porém com bem menos brilho.

Glow

É uma variação do Reflect, produzindo um resultado um pouco parecido com o Hard Light.

Freeze

Também é outra variação do Reflect.

Heat

Esse Blend Mode é outra variação de Reflect, porém com as cores trocadas.

50
 Fireworks

Addictive

Procura a cor em cada canal e adiciona a cor da base na mesclagem.

Substractive

Procura a cor em cada canal e subtrai a cor da base na mesclagem.

Subtract

Inverte as cores e mescla com a base.

Interpolation

Esse Blend Mode combina o tipo Multiply e Screen.

Stamp

É semelhante ao tipo Average, porém, o resultado tem mais contraste e mais saturação.

51
 Fireworks

XOR

Esse Blend Mode é resultado de uma combinação da cor da base e da mesclagem, usando a
operaçã Usando a operação binária XOR. Nesse exemplo, temos um retângulo (vetor) de cor
laranja escurra em cima de uma figura:

Invert

Inverte a cor base.

Tint

Adiciona cor cinza á cor base.

Erase

Esse Blend Mode apaga todas as cores.

Mascarando Imagens
Como o nome sugere, as máscaras ocultam ou mostram partes de um objeto ou imagem.
Diversas técnicas de mascaramento podem ser usadas para se obter vários tipos de efeitos
criativos com objetos.

52
 Fireworks

Sobre máscaras

O usuário pode criar um objeto de máscara a partir de um objeto vetorial (uma máscara ve-
torial) ou de um objeto bitmap (uma máscara de bitmap). Pode também usar vários objetos
ou objetos agrupados para criar uma máscara.

Criando Máscara Vetorial

O objeto de máscara vetorial corta ou apara os objetos subjacentes segundo a forma do seu
traçado.
1 - Selecionar o objeto que se deseja usar como máscara. Manter pressionada a tecla Shift e
clicar para selecionar vários objetos.
2 - Posicionar a seleção de modo que sobreponha-se ao objeto ou grupo de objetos a ser
mascarado. O objeto ou objetos a serem usados como máscara podem ficar na frente ou atrás
dos objetos ou grupo a serem mascarados.

3 - Selecionar Edit (Editar) > Cut (Recortar) para recortar os objetos a serem usados como
máscara.
4 - Selecionar o objeto ou grupo a ser mascarado. Se o usuário mascarar vários objetos, eles
deverão ser agrupados.

5 - Para colar a máscara, seguir um dos seguintes procedimentos:

ou selecionar Edit (Editar) > Paste as Mask (Colar como máscara).
ou selecionar Modify (Modificar) > Mask (Máscara) > Paste as Mask.

A criação de uma máscara vetorial é indicada por uma miniatura de máscara com um ícone
de caneta, exibida no painel Layers.

53
 Fireworks

Inspetor de Propriedades de Mascara Vetorial

Para aplicar uma máscara vetorial com o uso de seu contorno de traçado:
■ No Property inspector (Inspetor de propriedades), selecionar Path Outline (Contorno do
traçado) quando uma máscara vetorial estiver selecionada.
Para mostrar o preenchimento e o traço da máscara vetorial:
■ No Property inspector (Inspetor de propriedades), selecionar Show Fill and Stroke
(Mostrar preenchimento e traço) quando uma máscara vetorial aplicada com o uso de seu
contorno de traçado estiver selecionada.
Para aplicar uma máscara vetorial ou de bitmap com o uso da aparência dos tons de cinza:
■ No Property inspector (Inspetor de propriedades), selecionar Grayscale Appearance (Apa-
rência da escala de cinza) quando uma máscara estiver selecionada.
Para converter uma máscara vetorial em uma máscara de bitmap:
1. No painel Layers, selecionar a miniatura do objeto de máscara.
2. Selecionar Modify (Modificar) > Flatten Selection (Nivelar seleção).

Mascaramento De Objetos Com O Comando Paste Inside

O comando Paste Inside (Colar em) cria uma máscara vetorial ou de bitmap, dependendo do
tipo de objeto de máscara utilizado. O comando Paste Inside (Colar em) cria uma máscara
preenchendo um traçado fechado ou objeto bitmap com outros objetos: gráficos vetoriais,
texto ou imagens bitmap. Às vezes, o próprio traçado é chamado de traçado de corte e os itens
que ele contém são chamados de conteúdo ou itens de colagem. O conteúdo que ultrapassar
o traçado de corte ficará oculto.
No Fireworks, o comando Paste Inside (Colar em) produz um efeito semelhante ao comando
Paste as Mask (Colar como máscara), com algumas diferenças:
■ Com Paste Inside (Colar em), o objeto recortado e colado é aquele a ser mascarado.
Comparar isso com o comando Paste as Mask (Colar como máscara), em que o objeto recor-
tado e colado é o objeto de máscara.
■ Com máscaras vetoriais, Paste Inside (Colar em) mostra o preenchimento e o traço do
próprio objeto de máscara. Por padrão, o comando Paste as Mask (Colar como máscara) não
torna visíveis o preenchimento e o traço do objeto de máscara vetorial. No entanto, é possível
ativar ou desativar o preenchimento e o traço de uma máscara vetorial com o uso do Property
inspector (Inspetor de propriedades).

54
 Fireworks

1. Selecionar o objeto ou objetos a serem usados como conteúdo da colagem.

2. Posicionar o objeto ou objetos de modo que sobreponham-se ao objeto dentro do qual será
colado o conteúdo.

3. Selecionar Edit (Editar) > Cut (Recortar) para mover os objetos para a Área de transferên-
cia.
4. Selecionar o objeto no qual se deseja colar o conteúdo. Esse objeto será usado como más-
cara ou traçado de corte.

5. Selecionar Edit (Editar) > Paste Inside (Colar em).

Os objetos colados parecem estar dentro do objeto de máscara ou cortados por ele.

Uso de texto como máscara

As máscaras de texto são um tipo de máscara vetorial. Elas são aplicadas da mesma maneira
que as máscaras que utilizam objetos existentes: basta usar o texto como objeto de máscara.
A maneira usual de aplicar uma máscara de texto é usar seu contorno de traçado, mas também
é possível aplicá-la usando sua aparência em tons de cinza.

55
 Fireworks

Máscara de Grupo
É possível agrupar dois ou mais objetos existentes para criar uma máscara. O objeto do topo
torna-se o objeto de máscara.
Há a opção de agrupar objetos como máscaras vetoriais ou de bitmap. A ordem de empilha-
mento determina o tipo de máscara aplicada. Se o objeto do topo for um objeto vetorial, o
resultado será uma máscara vetorial. Se o objeto do topo for um objeto bitmap, o resultado
será uma máscara de bitmap.
Para agrupar objetos a fim de formar uma máscara:
1. Manter pressionada a tecla Shift e clicar em dois ou mais objetos sobrepostos.

2. Selecionar Modify (Modificar) > Mask (Máscara) > Group as Mask (Agrupar como
máscara).

Criando Máscaras de bitmap

As máscaras de bitmap do Fireworks são semelhantes às máscaras de camada, pois os pixels
de um objeto de máscara afetam a visibilidade dos objetos que estão embaixo. Entretanto, as
máscaras de bitmap do Fireworks são muito mais versáteis: a forma de aplicar pode ser facil-
mente alterada, seja usando a aparência dos tons de cinza ou sua própria transparência.

Mascaramento com Reveal e Hide

O submenu Modify (Modificar) > Mask (Máscara) oferece várias opções de aplicação de más-
caras de bitmap vazias a objetos:
Reveal All (Revelar tudo) aplica uma máscara transparente vazia a um objeto, revelando todo
o objeto. Para obter o mesmo efeito, clicar no botão Add Mask (Adicionar máscara) no painel
Layers.
Hide All (Ocultar tudo) aplica uma máscara opaca vazia a um objeto, o que oculta todo o ob-
jeto.
Reveal Selection (Revelar seleção) só pode ser usada com seleções de pixels. Ela aplica uma
máscara de pixels transparentes com o uso da seleção de pixels atual. Os outros pixels do
objeto bitmap ficam ocultos. Para obter o mesmo efeito, é possível criar uma seleção de pixels
e, em seguida, clicar no botão Add Mask (Adicionar máscara).
56
 Fireworks

Hide Selection (Ocultar seleção) só pode ser usada com seleções de pixels. Ela aplica uma
máscara de pixels opacos com o uso da seleção de pixels atual. Os outros pixels do objeto
bitmap são mostrados. Para obter o mesmo efeito, é possível criar uma seleção de pixels e,
em seguida, pressionar a tecla Alt (Windows) ou Option (Macintosh) e clicar no botão Add
Mask (Adicionar máscara).

Usando Reveal All (Revelar tudo) e Hide All (Ocultar tudo) para criar uma
máscara:

1. Selecionar o objeto que se deseja mascarar.

2. Para criar a máscara, seguir um dos seguintes procedimentos:
■ Selecionar Modify (Modificar) > Mask (Máscara) > Reveal All (Revelar tudo) para mostrar
o objeto.
■ Selecionar Modify > Mask > Hide All (Ocultar tudo) para ocultar o objeto.
3. No painel Tools (Ferramentas), selecionar uma ferramenta de pintura de bitmap, como Brush
(Pincel), Pencil (Lápis) ou Paint Bucket (Lata de tinta) ou Gradient (Gradiente).
4. Definir as opções de ferramenta desejadas no Property inspector (Inspetor de proprieda-
des).
Se uma máscara Hide All (Ocultar tudo) estiver aplicada, selecionar uma cor diferente do
preto.
5. Desenhar na máscara vazia. Nas áreas desenhadas, o objeto com máscara que está embaixo
fica oculto ou é mostrado, dependendo do tipo de máscara aplicada.

Propriedades da Máscara de Bitmap

Para aplicar uma máscara de bitmap com o uso de seu canal alfa:

■ No Property inspector (Inspetor de propriedades), selecionar Alpha Channel (Canal alfa)

quando uma máscara de bitmap estiver selecionada.

57
 Fireworks

Para aplicar uma máscara vetorial ou de bitmap com o uso da aparência dos

tons de cinza:
■ No Property inspector (Inspetor de propriedades), selecionar Grayscale Appearance (Apa-
rência da escala de cinza) quando uma máscara estiver selecionada.

Usando Reveal Selection e Hide Selection para criar uma

máscara:
1. Selecionar a ferramenta Magic Wand (Varinha mágica) ou uma ferramenta de moldura ou
laço no painel Tools (Ferramentas).
2. Selecionar pixels em um bitmap.

3. Para criar a máscara, seguir um dos seguintes procedimentos:

■ Selecionar Modify (Modificar) > Mask (Máscara) > Reveal Selection (Revelar seleção) para
mostrar a área definida pela seleção de pixels.
■ Selecionar Modify > Mask > Hide Selection (Ocultar seleção) para ocultar a área definida
pela seleção de pixels.

58
 Fireworks

Edição de Máscara
Seleção de máscara e objeto com máscara com o uso de miniaturas de máscara
Com as miniaturas do painel Layers, é fácil identificar e selecionar máscaras e objetos com
máscara. As miniaturas permitem selecionar e editar com facilidade apenas a máscara ou os
objetos com máscara, sem afetar os outros objetos.
Quando a miniatura da máscara for selecionada, o ícone da máscara aparecerá ao lado dela
no painel Layers e suas propriedades serão exibidas no Property inspector (Inspetor de pro-
priedades), onde poderão ser alteradas, se desejado.

Para selecionar uma máscara:

■ Clicar na miniatura da máscara no painel Layers.

Quando uma miniatura de máscara está selecionada, o painel Layers exibe um realce amarelo
ao seu redor.

Para selecionar objetos com máscara:

■ No painel Layers, clicar na miniatura do objeto com máscara.

Quando a miniatura de um objeto com máscara está selecionada, o painel Layers exibe um
realce azul ao seu redor.

Movendo uma máscara e um objeto com máscara

É possível reposicionar máscaras e objetos com máscara. Tanto uns quanto outros podem ser
movidos em conjunto ou de forma independente.

Para mover uma máscara e respectivos objetos com máscara ao mesmo tempo:

1. Selecionar a máscara na tela com a ferramenta Pointer (Ponteiro).

2. Arrastar a máscara para a nova posição, sem arrastar a alça de movimentação, a não ser
que o objeto com máscara deva ser movido separadamente da máscara.

59
 Fireworks

Para mover máscaras e objetos com máscara de forma independente por meio
de desvinculação:

1. Clicar no ícone de vínculo na máscara no painel Layers.

Isso desvincula as máscaras dos objetos com máscara para que possam se mover de forma
independente.

2. Selecionar a miniatura do objeto a ser movido: a máscara ou os objetos com máscara.

3. Arrastar o objeto ou objetos na tela com a ferramenta Pointer (Ponteiro).
4. Clicar entre as miniaturas de máscara no painel Layers. Esse procedimento volta a vincu-
lar
os objetos com máscara à máscara.

Para mover uma máscara de forma independente com o uso de sua alça de
movimentação:

1. Selecionar a máscara na tela com a ferramenta Pointer (Ponteiro).

2. Selecionar a ferramenta Subselection (Selecionar secundário) e arrastar a alça de movi-
mentação da máscara para uma nova posição.

Para mover objetos com máscara de forma independente da máscara com o uso
da alça de movimentação:

1. Selecionar a máscara na tela com a ferramenta Pointer (Ponteiro).

2. Arrastar a alça de movimentação para a nova posição.
Os objetos são movidos sem afetar a posição da máscara.

60
 Fireworks

Exercício Aula 05

61
 Fireworks

Aula 06 – Trabalhando com Bitmap

A barra de ferramentas Bitmap apresenta ferramentas para a manipulação de bitmaps. Antes
de trabalhar com as ferramentas, vamos abordar como importar um bitmap no Fireworks.

Importando uma Imagem

Para importar uma imagem no Fireworks, utilize o menu File (Arquivo)> Import (Importar).
A janela Import (Importar) é aberta. Selecione a imagem desejada e clique no botão Abrir
(Open).
A imagem importada ainda não é inserida na Área de Trabalho, é necessário clicar no ponto
exato onde se deseja fazer a importação. Repare que o ponteiro do mouse muda. Após clicar
na Área de Trabalho, a imagem é importado.
Vale lembrar que podemos altear o posicionamento da imagem utilizando a ferramenta Pointer
(Ponteiro).

Marquee Tool e Oval Marquee Tool

Ferramentas Marquee tool e Oval Marquee tool

A Marquee tool permite a seleção de uma área quadrada ou retangular de um bitmap. A Oval
Marquee tool permite a seleção de uma área oval de um bitmap. Para alternar entre uma ou
outra ferramenta, mantenha o botão esquerdo do mouse pressionado sobre o ícone da barra
de ferramenta para abrir as opções. Em seguida, selecione a ferramenta desejada.
Outra maneira de alternar entre as duas ferramentas é usar a tecla de atalho M. Se a Marquee
tool estiver selecionada, tecle M para mudar a Oval Marquee tool e vice-versa.
Para usar, é só clicar no ponto exato do bitmap na Área de Trabalho, manter o botão do mouse
pressionado e arrastar o ponteiro formando o retângulo ou a oval.
As duas ferramentas são utilizadas para selecionar uma área onde podem ser aplicadas cores
e efeitos diferenciados.

Propriedades Marque tool e Oval Marquee tool

Style: Define o estilo da ferramenta. São três opções:
Normal - Estilo normal da ferramenta, onde o tamanho é definido pelo próprio usuário conforme
o posicionamento e o arraste do ponteiro do mouse.
Fixed Ratio - Estilo com tamanho proporcional fixo. São definidos os valores de proporção dos
eixos horizontal e vertical.
Fixed Size - Estilo com tamanho fixo. Os valores desejados são digitados nos eixos horizontal
e vertical. Para aplicar essa ferramenta, basta clicar uma vez na Área de Trabalho. Como se
trata de um tamanho fixo, não há necessidade de manter o botão do mouse pressionado e
arrastar o ponteiro.

62
 Fireworks

Edge: Define propriedades da borde. Sato três opções

Hard – Opção padrão.
Anti-alias – Suaviza o serrilhado da borda.
Feather – Arredonda os cantos da borda. Ao usar essa opção, é necessário definir o valor do
arredondamento.
Horizontal e Vertical: Essa opção fica ativa se o estilo selecionado for Fixed Ratio ou Fixed Size.
Nesse caso são definidos os valores desejados para a ferramenta de seleção.
Live marquee: Permite que seleção possa ser modificada com as novas configurações do Ins-
petor de propriedades. Basta efetuar alguma troca de propriedade e, em seguida, clicar nessa
caixa. Se a caixa já estiver ativa, desative e ative novamente.
W e H: Define os valores de largura e altura.
X e Y: Determina os valores de posicionamento da seleção no eixos X e Y.

Exemplo de Marquee tool e Oval Marquee tool

Lasso Tool e Polygon Lasso Tool

A Lasso tool Img Lasso tool e Polygon Lasso tool Img Polygon Lasso tool permitem selecionar
uma área usando o laço. Ambas as ferramentas estão compartilhando o mesmo lugar na bar-
ra. Assim, para usar uma ou outra ferramenta, clique no ícone e mantenha o botão do mouse
pressionado por algum tempo até aparecer as opções ou utilize a tecla de atalho L.

Ferramenta Lasso tool e Polygon Lasso tool

Para usar o Lasso tool, clique na posição inicial da área que quer marcar e, mantendo o botão
esquerdo do mouse pressionado, trace toda a área.
Para usar a Polygon Lasso tool, deve-se clicar nas extremidades que se quer. O laço unirá

63
 Fireworks

automaticamente esses pontos, selecionando toda a área desenhada no polígono.

Propriedades da Lasso tool e Polygon Lasso tool

Edge: Define propriedades da borda. São três opções:
Hard – Opção padrão.
Anti-alias – Suaviza o serrilhado da borda.
Feather – Arredonda os cantos da borda. Ao usar essa opção, é necessário definir o valor do
arredondamento.

Exemplo da Lasso tool e Polygon Lasso tool

Magic Wand Tool

A Magic Wand tool é usada para selecionar trechos específicos dos elementos baseados
na cor.
Para usar, basta clicar uma vez sobre a área da imagem a ser selecionada. A ferramenta irá
selecionar automaticamente o trecho, de acordo com as características da imagem. É útil para
selecionar uma área onde as ferramentas de seleção como a Lasso tool, entre outras, não são
tão eficazes.

Propriedades da Magic Wand tool

Tolerance: Define quanto de área será selecionada pela ferramenta. Quanto maior o número
definido, maior a área selecionada.

64
 Fireworks

Edge: Define propriedades da borda. São três opções:

Hard – Opção padrão.
Anti-alias – Suaviza o serrilhado da borda.
Feather – Arredonda os cantos da borda. Ao usar opção, é necessário definir o valor do arre-
dondamento.
Live marquee: Permite que a seleção possa ser modificada com as configurações do Inspetor
de propriedades. Basta efetuar alguma troca de propriedade e, em seguida, clicar nessa caixa.
Se a caixa já estiver ativa, desative e ative novamente.

Exemplo da Magi Wand tool

Brush tool

A Brush tool é usada para preencher (colorir) áreas. É só clicar sobre a área a ser colorida,
manter o botão esquerdo do mouse pressionado e arrastar a ferramenta. Após colorir, solte
o botão do mouse. Para traçar retas horizontais ou verticais, aperte a tecla Shift enquanto
estiver efetuando o traçado.
A ferramenta é totalmente customizável, possuindo algumas propriedades a serem configu-
radas no Inspetor de Propriedades.

Propriedades da Brush tool

Img inspetor de propriedades Brush tool
Color: Determina a cor do pincel.
Tip Size: Define o tamanho do pincel.
Stroke category: Define a característica do pincel. São dezenas de opções distintas.
Opacity: Determina o grau de transparência da cor pintada. Valores próximos a 100 geram
cores opacas e, quanto mais próximos a 0, a cores ficam transparentes.
Blode Mode: São efeitos que pode ser aplicados. Também existem vários Blend Modes dispo-
níveis.
Edge: Define a propriedade da borda. Valores próximos a 100 geram pincel com traçado mais
suavizado e valores próximos a 0 geram traçados mais marcantes.
Preserve transparency: Ao ativar essa opção, o pincel não preenche áreas transparentes.
65
 Fireworks

Texture: Define uma textura para o pincel. São dezenas de texturas disponíveis. Quanto maior
o valor, em Amount of texture, mais texturas o pincel terá.

Stroke Category
Essa propriedade da Brush tool se refere ao tipo de pincel. São ao todo 12 categorias distin-
tas. Cada uma delas tem um tipo diferenciado de traçado do pincel. Além disso, é possível
customizar o tipo de traçado clicando na opção Stroke Options.

Lista de Textura
Ao clicar em Stroke Options, é aberta uma janela de configurações.

Stroke Options
Na primeira caixa de seleção, é exibida a Stroke Category.
Na segunda caixa exibe o tipo de traçado dependendo da categoria selecionada.
Tip exibe o tipo de ponta do pincel.
Tipe size configura a espessura do pincel.
Texture defina uma textura para o traçado. São mais de 50 texturas disponíveis.
E Amount of texture determina a quantidade de textura a ser usada no traçado.

Texture
Essa propriedade de Brush tool se refere ao tipo de textura do pincel. São dezenas de texturas
disponíveis. Além disso, em Amount of texture, é possível configurar a porcentagem da textura
a ser aplicada. Valores próximos de 0 fazem com que o traçado não possua textura. Valores
próximos a 100% deixam o traçado totalmente com textura.

66
 Fireworks

Lista de Textura

Pencil tool

É a ferramenta Pencil (Lápis), utilizada para desenhar na área de trabalho. Para utiliza-la,
selecione-a, clique com o botão esquerdo do mouse sobre a Área de trabalho, mantenha o
botão pressionado e trace o desenho. Para traçar retas horizontais ou verticais, aperte a tecla
Shift enquanto estiver efetuando o traçado.

Propriedades do Pencil
Color: Define uma cor para o lápis.
Anti-aliased: Deixa o traçado mais suave, sem serrilhados.
Auto erase: Substitui a cor de stroke color pela cor de fill color definida na barra de ferramen-
tas de cores.
Preserve transparency: Ao ativar essa opção, o lápis não pinta áreas transparentes.
Opacity: Define a porcentagem de opacidade do traçado. Valores próximos a 0 deixam o tra-
çado mais transparente.
Blend Mode: Aplicam efeitos de mesclagem.

Erase tool

A ferramenta Erase apaga um conteúdo desenhado na área de trabalho. Para utilizar, se-
lecione a ferramente, clique com o botão esquerdo do mouse, mantenha o botão pressionado
e arraste o ponteiro para apagar a área desejada.

Propriedades da Erase
Size: Define o tamanho da borracha
Shape: Define o formato da borracha. Pode-se escolher entre formato quadrado e o redon-
do.
Edge: Estabelece propriedades da borda da borracha. Valores próximos a 100 geram um borda
suavizada.
Eraser opacity: Determina a opacidade da borracha.

67
 Fireworks

Blur tool e Sharpen tool

A ferramenta Blur tool, permite aplicar o efeito blur (desfoque) no bitmap.

A ferramenta Sharpen tool, permite aplicar o efeito sharpen (realce).
Ambas as ferramentas possuem as mesmas propriedades, que podem ser configuradas no
inspetor de propriedades.

Propriedades do Blur toool e Sharpen tool

Size: Estabelece o tamanho da ferramenta.
Shape: Determina o formato da ferramenta. Pode-se escolher entre o formato quadrado e o
redondo.
Edge: Define propriedades da borda da ferramenta. Valores próximos a 100 geram uma borda
suavizada.
Intensity: Define a intensidade da ferramenta.

Dodge tool e Burn tool

A Ferramenta Dodge tool Img dodge tool permite aplicar o efeito dodge (clareamento).
A Ferramenta Burn tool Img burn tool permite aplicar o efeito burn (escurecimento).
Ambas as ferramentas possuem as mesmas propriedades, que podem ser configuradas no
inspetor de propriedades.

Propriedade da Dodge tool e Burn tool

Size: Estabelece o tamanho da ferramenta.
Shape: Determina o formato da ferramenta. Pode-se escolher entre o formato quadrado e o
redondo.
Edge: Define propriedades da borda da ferramenta. Valores próximos a 100 geram uma borda
suavizada.
Range: Define a área de atuação da ferramenta. São três opções:

68
 Fireworks

Shadows – Atua sobre áreas escuras.

Midtones – Age sobre tons médios.
Highlights – Produz efeitos sobre áreas claras.
Exposure: Define o valor de exposição.

Smudge tool

A Ferramenta Smudge tool permiti aplicar o efeito smudge (borrado).

Propriedade da Smudge
Size: Estabelece o tamanho da ferramenta.
Shape: Determina o formato da ferramenta. Pode-se escolher entre o formato quadrado e o
redondo.
Edge: Define propriedades da borda da ferramenta. Valores próximos a 100 geram uma borda
suavizada.
Pressure: define o valor de pressão da ferramenta. Quanto maior o valor de pressão, maior a
tonalidade da cor definida em Smudge color.
Smudge color: Estabelece uma cor para mesclar com o bitmap gerando o efeito de borrado.
Se não quiser usar cor, deixe desmarcada essa opção.
Use entire document: Define se o efeito será usado no documento inteiro.

Rubber Stamp tool

A Ferramenta Rubber Stamp tool, permite clonar um parte da imagem e reproduzir durante
a pintura. Útil para manipulação de imagens.
Para usá-la, clique no ponto de imagem que quer clonar. Em seguida, é só utilizar esse recurso
na própria imagem ou em área vazia.

Propriedade do Rubber Stamp

Size: Estabelece o tamanho da ferramenta.
Edge: Define propriedades da borda da ferramenta. Valores próximos a 100 geram uma borda
suavizada.
Source aligned: Mantém a fonte (imagem) alinhada com o ponteiro do mouse.
Use entire document: Define se o efeito será usado no documento inteiro.
Opacity: Estabelece a porcentagem de opacidade do traçado. Valores próximos a 0 deixam o
traçado mais transparente.
Blend Mode: aplica efeitos de mesclagem.

69
 Fireworks

Replace Color tool

A Ferramenta Replace Color tool, permite trocar a cor de uma área de bitmap.

Propriedade do Replac Color

Size: Estabelece o tamanho da ferramenta.
Shape: Determina o formato da ferramenta. Pode-se escolher entre o formato quadrado e o
redondo.
From: Define como será a troca de cor. Há duas opções.
Image - altera a tonalidade da imagem pela cor definida em To.
Swatch – altera especificamente um cor pela definida em To.
To: Define a nova cor ou tom que a imagem terá.
Tolerance: Estabelece o valor de tolerância para a troca de cores.
Strength: Define a força da nova cor. Valores baixos produzem cores mais fracas; valores
altos, mais fortes.
Colorize: Deixa a cor original intacta. Para efetuar mudanças de cor, deixe essa opção des-
marcada.

Red Eye Removal Tool

A ferramenta Red Eye Removal permite remover o efeito dos olhos vermelhos em fotografias.
É possível utilizar em qualquer tom de avermelhado de qualquer imagem, não necessariamente
apenas nos olhos em fotografias.
Para utilizar essa ferramenta, basta selecionar a área que tenha o tom em vermelho que,
automaticamente, ocorre a remoção da cor.

Propriedades da Red Eye Removal

Tolerance: Define o valor de tolerância para a retirada do tom vermelho.
Strength: Determina a força da nova cor. Valores baixos produzem cores mais fracas; valores
altos, maiso fortes.

Image Editing
O painel Image Editing ativado através do menu Windows. é utilizado para editar imagens.
Apresenta várias ferramentas dentro do painel. Essas ferramentas estão separadas em cate-
gorias:

70
 Fireworks

Painel image Editing

Transform tools; Contém ferramentas de transformação de imagens, como a Scale, Skew,
Distort e Free Rotate.
Transform Commands: Contém comandos de transformação, como Numeric Transform, Rotate
180, Rotate 90 CW, Rotate 90 CCW, Flip Horizontal, Flip Vertical e Remove Transformations.
Adjust Colors: Contém ferramentas para ajustes de cores, como Auto Level, Brightneess/Con-
trast, Curves, Hue/Saturation, Invert, Levels, Convert to Greyscale, Convert to Sépia Tone.
Filters: Contém os filtros Blur, Blur More, Sharpen, Sharpen More, Unsharp Mask, Add Noise,
Convert to Alpha, Find Edges.
View Options: Contém elementos relativos ao canvas, como réguas, grades e linhas guias. Os
elementos presentes são: Show/Hide Rulers, Show/Hide Grid, Snap/Don´t Snap to Grid, Edit
Grid, Show/Hide Guides, Snap/Don´t Snap to Guides, Lock Unlock Guides e Edit Guides.
Na parte superior do painel, existem alguns ícones com outras ferramentas: Red Eye Removal
tool, Crop, Scale, Blur tool, Sharpen tool, Dodge tool e Burn tool.

Exercício Aula 06

71
 Fireworks

Aula 07 – Criando Animação

Gráficos animados proporcionam um visual sofisticado e emocionante a um site da Web. No
Macromedia Fireworks 8, é possível criar gráficos animados com faixas de propaganda, logo-
tipos e desenhos animados.
Uma maneira de criar animações no Fireworks é por meio da criação de símbolos e da altera-
ção de suas propriedades ao longo do tempo, para criar a ilusão de movimento. Um símbolo
é como um ator cuja coreografia é criada pelo usuário. A ação de cada símbolo é armazenada
em uma moldura. Quando todas as molduras juntas são reproduzidas em uma seqüência,
obtém-se a animação.

Trabalho com símbolos de animação

Os símbolos de animação executam ações no arquivo Fireworks como os atores em um filme.
Por exemplo, em uma animação com três gansos voando no céu, cada ganso é um membro
do elenco.
Um símbolo de animação pode ser qualquer objeto criado ou importado, e é possível ter vá-
rios símbolos em um arquivo. Cada símbolo tem suas próprias propriedades e apresenta uma
animação independentemente. Desta forma, é possível criar símbolos que se movem através
da tela enquanto outros se apagam ou encolhem.
Como os símbolos de animação são colocados automaticamente na biblioteca, é possível reu-
tilizá-los para criar outras animações.

Criação de símbolos de animação

Depois de criar um símbolo de animação, é possível definir as propriedades que determinam
o número de molduras na animação e o tipo de ação, como dimensionamento ou rotação.
Por padrão, o novo símbolo de animação tem cinco molduras, cada uma com um tempo de
retardo de 0,07 segundo.
1. Selecionar o objeto.
2. Selecionar Modify (Modificar) > Animation (Animação) > Animate Selection (Animar sele-
ção), ou clique sobre o botão direito do mouse e selecione Animation (Animação) > Animate
Selection (Animar seleção).
3. Inserir as configurações desejadas na caixa de diálogo Animate.

Criando uma aimação

Frames (Molduras) é o número de molduras que se deseja incluir na animação. Embora o
controle deslizante permita definir no máximo 250 molduras, o usuário pode digitar qualquer
número desejado na caixa de texto Frames (Molduras). O padrão é 5.
Move (Movimento) é a distância desejada, em pixels, para a movimentação de cada objeto.
72
 Fireworks

Esta opção está disponível somente na caixa de diálogo Animate. Embora o padrão seja 72,
o usuário pode digitar o número que quiser na caixa de texto Move (Mover). O movimento é
linear e não há molduras principais (ao contrário do Macromedia Flash e Director).
Direction (Direção) é a direção, em graus, na qual se deseja que o objeto se mova. A escala
de valores varia de 0 a 360º. Esta opção está disponível somente na caixa de diálogo Ani-
mate. Também é possível alterar os valores de Movement (Movimento) e Direction (Direção)
arrastando-se as alças de animação do objeto (consultar “Edição de caminhos de movimento
de símbolo” na página 364). Scaling (Dimensionamento) é a porcentagem de alteração do
tamanho do início ao fim. Embora o padrão seja 100%, o usuário pode digitar o número que
quiser na caixa de texto.
Scaling (Dimensionamento). Para dimensionar um objeto de 0 a 100%, o objeto original deve
ser muito pequeno; os objetos vetoriais são recomendáveis.
Opacity (Opacidade) é o grau de escurecimento ou clareamento do início ao fim. A faixa de
valores vai de 0 a 100 e o padrão é 100%. A criação de um clareamento/escurecimento exige
duas ocorrências do mesmo símbolo — uma para executar o clareamento e outra para exe-
cutar o escurecimento.
Rotation (Rotação) é a quantidade, em graus, que o símbolo gira do início ao fim. A escala
de valores varia de 0 a 360º. É possível inserir valores maiores para mais de uma rotação. O
padrão é 0º.
CW and CCW (SH e SAH) indica a direção na qual o objeto gira. CW (SH) indica rotação em
sentido horário e CCW (SAH) indica rotação em sentido anti-horário.

Porpriedades da Animation

Ao selecionar a animação aparecerão as propriedades da animação.

Propriedades da animação

Edição de caminhos de movimento de símbolo

Ao selecionar um símbolo de animação, ele apresenta uma caixa delimitadora exclusiva e um

caminho de movimento anexado que indica a direção na qual o símbolo se move.
O ponto verde no caminho do movimento indica o ponto de início, enquanto o ponto vermelho
mostra o ponto final. Os pontos azuis no caminho representam as molduras. Por exemplo, um
símbolo com cinco molduras terá um ponto verde, três pontos azuis e um ponto vermelho em
seu caminho.
A posição do objeto no caminho indica a moldura atual. Assim, se o objeto aparecer no terceiro
ponto, a Frame 3 (Moldura 3) será a moldura atual. É possível alterar a direção do movimento
alterando o ângulo do traçado.

Exemplos de animação

73
 Fireworks

Para alterar o movimento ou direção:

Arrastar uma das alças de início ou fim de animação do símbolo para uma nova localização. O
ponto verde indica o ponto de início; o ponto vermelho indica o ponto final.
Manter pressionada a tecla Shift e arrastar para restringir a direção do movimento em incre-
mentos de 45°.

Remoção de uma animação

É possível remover animações através da exclusão do símbolo de animação da biblioteca ou

da remoção da animação do símbolo.
Para remover um símbolo da biblioteca:
1. No menu Windows (Janela)> Library (Biblioteca), selecionar o símbolo de animação que se
deseja remover.
2. Arrastar o símbolo para o ícone de lixeira no canto inferior direito.
Para remover a animação de um símbolo de animação selecionado:
Selecionar Modify (Modificar) > Animation (Animação) > Remove Animation (Remover anima-
ção), ou clique com o botão direito e selecione Animation (Animação) > Remove Animation
(Remover animação)
O símbolo se transforma em um símbolo gráfico e não é mais animado.

Interpolação
Tweening (Interpolação) é um termo tradicional em animação que descreve o processo no
qual um animador-chefe desenha somente as molduras principais (molduras que contêm as
alterações principais), enquanto os assistentes desenham as molduras intermediárias.
No Fireworks, a interpolação mistura duas ou mais ocorrências do mesmo símbolo, criando
ocorrências intermediárias com atributos interpolados. A interpolação é um processo manual
útil para movimentos mais sofisticados de um objeto através da tela e para objetos cujos Live
Filters (Filtros ao vivo) mudam em cada moldura da animação.
Para interpolar ocorrências:
1. Selecionar duas ou mais ocorrências do mesmo símbolo gráfico na tela. Não selecionar
ocorrências de símbolos diferentes.
2. Selecionar Modify (Modificar) > Symbol (Símbolo) > Tween Instances (Interpolar ocorrên-
cias) ou clique com o botão direito do mouse e selecionar Symbol (Símbolo) > Tween Instances
(Interpolar ocorrências)
3. Na caixa de diálogo Tween Instances, digitar o número de etapas intermediárias a serem
inseridas entre o par original.
4. Para distribuir os objetos interpolados em molduras separadas, selecionar Distribute to
Frames (Distribuir para molduras) e clicar em OK.

Se o usuário optar por não distribuir os objetos em molduras separadas, isso poderá ser feito
posteriormente selecionando todas as ocorrências e clicando, no painel Frames (Molduras),
no botão Distribute to Frames (Distribuir para molduras).

74
 Fireworks

Animação Quadro a Quadro

Uma outra forma bem manual de criar uma animação e posicionando os elementos na tela da
forma que queremos animar e depois selecionando a opção Distribute to Frames (Distribuir
para molduras) no painel Frames (Molduras).

Trabalho com molduras

As animações são construídas com a criação de várias molduras. É possível ver o conteúdo de
cada moldura usando-se o painel Frames (Molduras). O painel Frames é o local de criação e
organização de molduras. É possível nomear as molduras, reorganizá-las, definir manualmente
a duração da animação e mover objetos de uma moldura para outra.

Painel Frames e History

Configuração do retardo de uma moldura

O retardo de moldura determina a duração de exibição da moldura atual. O retardo é especi-

ficado em centésimos de segundo. Por exemplo, uma configuração de 50 exibe a moldura por
meio segundo, enquanto uma configuração de 300 a exibe por três segundos.
Para definir o valor de retardo de uma moldura:
1. Selecionar uma ou mais molduras:
Para selecionar uma faixa contígua de molduras, pressionar a tecla Shift e clicar nos nomes
da primeira e da última molduras.
Para selecionar uma faixa de molduras não contíguas, manter pressionada a tecla Control
(Windows) ou Command (Macintosh) e clicar no nome de cada moldura.
2. Seguir um destes procedimentos:
No menu Options (Opções) do painel Frames (Molduras), selecionar Properties (Proprieda-
des).
Clicar duas vezes na coluna de retardo da moldura.
Aparece a janela pop-up Frame Properties (Propriedades da moldura).
3. Digitar um valor para o retardo da moldura.
4. Pressionar Enter ou clicar fora do painel para fechar a janela pop-up.

Adição, movimentação, cópia e exclusão de molduras

É possível adicionar, copiar, excluir e alterar a ordem de molduras no painel Frames (Moldu-
ras).

75
 Fireworks

Para adicionar uma nova moldura:

Na base do painel Frames, clicar no botão New/Duplicate Frame (Moldura nova/ duplicada).

Para adicionar molduras a um local específico na seqüência:

1. No menu Options (Opções) do painel Frames, selecionar Add Frames (Adicionar moldu-
ras).
2. Digitar o número de molduras a adicionar.
3. Selecionar a posição em que as molduras serão inseridas: antes da moldura atual, depois
dela ou no início ou no fim. Em seguida, clicar em OK.

Para fazer uma cópia de uma moldura:

Arrastar uma moldura existente até o botão New/Duplicate Frame (Moldura nova/ duplicada)
na base do painel Frames.

Para copiar uma moldura selecionada e colocá-la em uma seqüência:

1. No menu Options (Opções) do painel Frames, selecionar Duplicate Frame (Duplicar mol-
dura).
2. Digitar o número de duplicatas a serem criadas para a moldura selecionada e escolher onde
as molduras duplicadas serão inseridas. Em seguida, clicar em OK.
A duplicação de uma moldura é útil quando se deseja que os objetos reapareçam em outra
parte da animação.

Para reordenar molduras:

Arrastar as molduras, uma a uma, para uma nova localização na lista.

Para excluir a moldura selecionada, executar um dos seguintes procedimentos:

No painel Frames, clicar no botão Delete Frame (Excluir moldura).

Arrastar a moldura até o botão Delete Frame.
No menu Options (Opções) do painel Frames, selecionar Delete Frame.

Compartilhamento de Layers (camadas) através de Frames

(molduras)
A duas formas de trabalhar com Layers (camadas) em animação:
Forma padrão – após criada uma animação se colocar um objeto ou texto em um frame ele
ficará apenas naquele frame.
Share Across Frames (Compartilhar entre molduras) – se ativarmos essa opção mesmo colo-
cando um objeto ou texto em um frame todos os frames terão o objeto ou frame.
Para ativar a opção Share Across Frames (Compartilhar entre molduras)
1. Clicar duas vezes na camada (como se fosse renomear).
2. Ative a opção Share Across Frames (Compartilhar entre molduras).

76
 Fireworks

Trabalho com animações existentes

É possível usar um arquivo de GIF animado existente como parte de uma animação do Fi-
reworks. Há duas maneiras de se usar o arquivo: importar o GIF para um arquivo do Fireworks
existente ou abri-lo como um novo arquivo.
Ao importar um GIF animado, o Fireworks o converte em um símbolo de animação e o coloca
na moldura selecionada atualmente. Se a animação tiver mais molduras do que o filme atual,
o usuário poderá escolher a adição automática de mais molduras.
Os GIFs importados perdem suas configurações originais de retardo de moldura e assumem
o retardo de moldura do documento atual. Como o arquivo importado é um símbolo de ani-
mação, será possível aplicar movimento adicional a ele. Por exemplo, o usuário pode importar
uma animação de um homem andando no lugar e depois aplicar propriedades de direção e
movimento para fazê-lo andar através da tela.
Ao abrir um GIF animado no Fireworks, cria-se um novo arquivo e coloca-se cada moldura do
GIF em uma moldura separada. Embora o GIF não seja um símbolo de animação, ele mantém
as configurações de retardo de moldura do arquivo original.
Depois que o arquivo for importado, será necessário definir seu formato como Animated GIF
(GIF animado) para exportar o movimento a partir do Fireworks.
Para importar um GIF animado:
1. Selecionar File (Arquivo) > Import (Importar).
2. Localizar o arquivo e clicar em Open (Abrir).
3. Clicar em Yes (Sim) para adicionar mais molduras à animação.
Clicando-se em Cancel (Cancelar), somente a primeira moldura do GIF animado será exibi-
da. Embora todo o documento seja importado, será necessário adicionar mais molduras para
visualizá-lo.
Para abrir um GIF animado:
Selecionar File (Arquivo) > Open (Abrir) e localizar o arquivo GIF.

Animação de Arquivos
O Fireworks pode criar uma animação com base em um grupo de arquivos de imagem. Por
exemplo, é possível criar um anúncio em faixa com base em diversos gráficos existentes,
abrindo cada gráfico e colocando-o em uma moldura separada no mesmo documento.
Para abrir vários arquivos como uma animação:
1. Selecionar File (Arquivo) > Open (Abrir).
2. Manter a tecla Shift pressionada e clicar para selecionar vários arquivos.
3. Selecionar Open as Animation (Abrir como animação) e clicar em OK.
O Fireworks abre os arquivos em um novo documento único, colocando cada um em uma
moldura separada, na ordem em que foram selecionados.

77
 Fireworks

Exercício Aula 07

78
 Fireworks

Aula 08 – Fatias, Rollover e Pontos Ativos

As fatias são os elementos básicos para criar interatividade no Macromedia Fireworks 8. Elas
são objetos da Web — não existem como imagens, mas como código HTML em última análise.
É possível vê-las, selecioná-las e renomeá-las através da Web Layer (camada Web) no painel
Layers (Camadas). Com o uso do método de rollover arrastar e soltar para anexar interatividade
a fatias, é possível criar com rapidez efeitos de rollover e mudança de imagens no espaço de
trabalho. Também é possível incorporar interatividade a páginas da Web com pontos ativos.
Os pontos ativos são usados para criar um mapa de imagem, o código HTML que define uma
região ativa em um documento HTML.

Criação e edição de fatias

O fatiamento corta um documento do Fireworks em pedaços menores e exporta cada fatia
como um arquivo separado.

Img Slice – Criando Slice(Fatias).

Para criar um objeto de fatia, desenhe-o com a ferramenta Slice (Fatia).
As linhas que se estendem do objeto de fatia são guias de fatia que definem o perímetro e a
posição das fatias. As guias de fatia que se estendem além dos objetos de fatia definem como o
restante do documento será fatiado ao ser exportado. É possível alterar o formato de um objeto
de fatia retangular arrastando as guias de fatia que o circundam. É impossível redimensionar
objetos de fatia não retangulares através da movimentação das guias de fatia.

Para desenhar um objeto de fatia retangular:

1. Selecionar a ferramenta Slice (Fatia).

2. Arrastar para desenhar o objeto de fatia. O objeto de fatia é exibido na Web Layer (Camada
da Web) e as guias de fatia são exibidas no documento.

Criação de fatias não retangulares

Fatias retangulares podem ser insuficientes ao se tentar incorporar interatividade a uma

imagem não retangular. Se o usuário desejar acrescentar um efeito de rollover a uma fatia,
por exemplo, e os objetos de fatia se sobrepuserem ou tiverem formas irregulares, uma fatia
retangular poderá trocar imagens de fundo indesejadas com a imagem de troca. O Fireworks
resolve este problema com o uso da ferramenta Polygon Slice (Fatia poligonal), que permite
o desenho de fatias com qualquer forma poligonal.

79
 Fireworks

Para desenhar um objeto de fatia poligonal:

1. Selecionar a ferramenta Polygon Slice (Fatia poligonal).

2. Clicar para posicionar os pontos vetoriais do polígono. A ferramenta Polygon Slice (Fatia
poligonal) desenha apenas segmentos de linhas retas.

3. Ao desenhar um objeto de fatia poligonal em torno de objetos com bordas suaves, certi-
ficar-se de incluir todo o objeto para evitar a criação de bordas acentuadas indesejadas no
gráfico da fatia.
4. Para interromper o uso da ferramenta Polygon Slice (Fatia poligonal), selecionar outra fer-
ramenta no painel Tools (Ferramentas). Não é necessário clicar no primeiro ponto novamente
para fechar o polígono.

Para criar uma fatia retangular ou poligonal a partir de um objeto vetorial ou

traçado:
1. Selecionar um traçado vetorial.
2. Selecionar Edit (Editar) > Insert (Inserir) > Insert Rectangular Slice (Inserir fatia retangular)
ou Insert Polygon Slice (Inserir fatia poligonal) dependendo da forma desejada.

Propriedades da Fatia

Também é possível definir um hiperlink para uma fatia.

Para ocultar ou mostrar todos os pontos ativos, fatias e guias:
■ Clicar no botão Hide/Show Slices (Ocultar/mostrar fatias) apropriado na seção Web tools
(Ferramentas da Web) do painel Tools (Ferramentas).

80
 Fireworks

Rollover
O método de rollover arrastar e soltar é uma forma rápida e eficiente de criar efeitos de rollo-
ver e troca-de imagem. Imagens de rollover são gráficos que mudam de aparência em um
navegador da Web ao se mover o ponteiro do mouse sobre eles. Quando o usuário seleciona
uma fatia, aparece um círculo com um retículo no centro da fatia. Isso é chamado de alça de
comportamento.

É possível criar efeitos de rollover e troca de imagem com facilidade arrastando-se a alça de
comportamento de uma fatia de acionamento e soltando-a em uma fatia alvo. O acionador e
o alvo podem ser a própria fatia.

Criação de um rollover simples

Um rollover simples troca a moldura diretamente abaixo da moldura superior e envolve apenas
uma fatia.
1 – Crie uma Fatia com a ferramenta Slice (Fatia), sobre a imagem que pretende efetuar o
efeito de Rollover.
2 – Crie uma nova moldura no painel Frames (Molduras) clicando no botão New/Duplicate
Frame (Moldura nova/duplicada).
3 - Na nova Frames (Molduras) insira a nova imagem que devera aparecer no rollover.
4 – No primeiro Frame selecione a Alça de Seleção da Slice (Fatia) e arraste para cima do
Nome da Fatia.

5 – Na janela de propriedades Swap Image escolha o Frame 2 e clique em OK.

81
 Fireworks

Rollover entre Slice (Fatias)

Podemos criar um rollover onde ao passar sobre uma fatia outra fatia seja alterada.
1 – Crie uma Fatia com a ferramenta Slice (Fatia), sobre a imagem que pretende efetuar o
efeito de Rollover.
2 – Crie uma nova moldura no painel Frames (Molduras) clicando no botão New/Duplicate
Frame (Moldura nova/duplicada).
3 - Na nova Frames (Molduras) insira a nova imagem que devera aparecer no rollover.
4 – No primeiro Frame selecione a Alça de Seleção da Slice (Fatia) - origem e arraste para
cima do Nome de outra Fatia - destino.
5 – Na janela de propriedades Swap Image escolha o Frame 2 e clique em OK.

Uso de arquivos de imagem externos para a imagem de troca

É possível usar uma imagem fora do documento atual do Fireworks como origem para uma
imagem de troca. As imagens de origem podem estar em formato GIF, GIF animado, JPEG ou
PNG. Quando um arquivo externo é selecionado como origem da imagem, o Fireworks troca
esse arquivo pela fatia de destino durante o acionamento da imagem de troca em um nave-
gador da Web.

Rollover com imagens externas

1 – Crie uma Fatia com a ferramenta Slice (Fatia), sobre a imagem que pretende efetuar o
efeito de Rollover.
2 – Não há necessidade de mais do que um Frame (Moldura).
3 – Desenhe a Slice (Fatia) onde deverá aparecer a imagem.
3 – Selecione a Alça de Seleção da Slice (Fatia)-origem e arraste para cima do Nome de outra
Fatia - destino.
5 – Na janela de propriedades Swap Image escolha a opção More Options.

82
 Fireworks

6 – Na janela Swap Image click sobre a pasta amarela de Image File e selecione uma imagem,
depois clique em OK.

O arquivo deve ter a mesma largura e altura da fatia pela qual está sendo trocado. Se isto
não ocorrer, o navegador redimensionará o arquivo para que se ajuste dentro do objeto de
fatia. O redimensionamento do arquivo poderá reduzir sua qualidade, especialmente no caso
de um GIF animado.

HotSpot (Pontos Ativos)

Os pontos ativos são ideais quando se deseja vincular áreas de uma imagem a outras páginas
da Web, não sendo necessário, porém, realçar aquelas áreas ou produzir efeitos de rollover
em resposta à movimentação ou ações do mouse.

Criação de pontos ativos

Depois de identificar as áreas em um gráfico de origem que seriam pontos de navegação satis-
fatórios, criar os pontos ativos e, em seguida, atribuir vínculos URL, menus pop-up, mensagens
da barra de status e texto alternativo a eles.
É possível desenhar o ponto ativo em volta de uma área de destino no gráfico com o uso das
ferramentas Hotspot (Ponto ativo): Rectangle (Retângulo), Circle (Círculo) ou Polygon (Po-
lígono).

83
 Fireworks

Para criar um ponto ativo retangular ou circular:

1. Na seção Web do painel Tools (Ferramentas), selecionar a ferramenta Rectangle Hotspot

(Ponto ativo retangular) ou Circle Hotspot (Ponto ativo circular).

2. Arrastar a ferramenta Hotspot (Ponto ativo) para desenhar um ponto ativo sobre uma área
do gráfico. Manter pressionada a tecla Alt (Windows) ou Option (Macintosh) para desenhar a
partir do ponto central.

Para criar um ponto ativo de formato irregular:

1. Selecionar a ferramenta Polygon Hotspot (Ponto ativo poligonal).

2. Clicar para posicionar pontos vetoriais, como se estivesse desenhando segmentos retos
com a ferramenta Pen (Caneta). Se o traçado for aberto ou fechado, o preenchimento definirá
a área do ponto ativo.

Propriedades do HotSpot (Ponto Ativo)

Shape: Tipo de forma do HotSpot (Ponto Ativo)

Link: ao digitar uma URL ou nome de arquivo neste local, quando o usuário clicar neste ponto
ativo, o endereço digitado será aberto. Exemplo: http:\\www.uol.com.br. Sempre inicia com
“http:\\”.
Alt.: quando o usuário parar o mouse sobre o ponto ativo o texto digitado neste campo apa-
recerá.
Destino: define onde a URL será aberta.
_blank: carrega a página em uma nova janela do navegador sem nome.
_parent: carrega a página no conjunto principal de molduras ou janela da moldura que con-
tém o link. Se a moldura contendo o link não estiver aninhada, a página carregará em toda a
janela do navegador.
_self: carrega a página na mesma moldura ou janela que o link. Este destino está implícito,
portanto geralmente você não precisará especificá-lo.
_top: carrega a página na janela toda do navegador, removendo assim todas as molduras.

84
 Fireworks

Exercício Aula 08

85
 Fireworks

Aula 09 - Otimização e Exportação

A meta principal em um projeto gráfico para a Web é a criação de imagens atraentes e que se
descarreguem com rapidez. Para isso, é necessário selecionar um formato de arquivo com a
melhor compressão para a imagem, mantendo ao mesmo tempo a melhor qualidade possível.
Esse procedimento de equilíbrio é denominado otimização, que consiste em obter a mistura
correta de cor, compressão e qualidade.

A otimização de gráficos no Fireworks envolve as seguintes ações:

■ Escolha do melhor formato de arquivo. Cada formato de arquivo tem um método diferente
de compressão das informações de cores. A escolha do formato apropriado para determina-
dos tipos de gráficos pode reduzir sensivelmente o tamanho do arquivo. ■ Configuração de
opções específicas do formato. Cada formato de arquivo gráfico tem um conjunto exclusivo de
opções. É possível usar opções, como profundidade de cor, para reduzir o tamanho do arquivo.
Alguns formatos de arquivo gráfico, como GIF e JPEG, também têm opções para o controle
da compressão da imagem.
■ Ajuste das cores no gráfico (somente para formatos de arquivo de 8 bits). É possível limitar
as cores limitando a imagem a um conjunto de cores específico, denominado paleta de cores.
Com isto, é possível eliminar cores não usadas na paleta de cores. Menos cores na paleta
significam menos cores na imagem, o que resulta em um tamanho de arquivo menor para os
tipos de arquivo de imagem com paletas.
É recomendável experimentar todos os controles de otimização para encontrar o melhor equi-
líbrio entre qualidade e tamanho.

Painel Optimize (Otimizar)

É possível selecionar configurações de otimização comuns no Property inspector (Inspetor de
propriedades) ou no painel Optimize (Otimizar) para definir rapidamente o formato de um ar-
quivo e aplicar várias configurações de formato específicas. Quando uma opção for selecionada
no menu pop-up de opções de exportação padrão no Property inspector, as opções restantes
no painel Optimize serão definidas automaticamente. Caso desejado, será possível ajustar
ainda mais cada opção individualmente.

Painel Optimize

Otimização predefinidas:

No Property inspector (Inspetor de propriedades) ou no painel Optimize (Otimizar), selecionar

uma predefinição no menu pop-up Settings (Configurações):
86
 Fireworks

GIF Web 216 força todas as cores para cores websafe. A paleta de cores contém até 216 co-
res.
GIF WebSnap 256 converte cores não-websafe nas cores websafe mais parecidas. A paleta de
cores contém até 256 cores.
GIF WebSnap 128 converte cores não-websafe nas cores websafe mais parecidas. A paleta de
cores contém até 128 cores.
GIF Adaptive 256 (GIF adaptativa 256) é uma paleta de cores que contém somente as cores
reais usadas no gráfico. A paleta de cores contém até 256 cores.
JPEG – Better Quality (JPEG - Melhor qualidade) define a qualidade para 80 e a suavização
para 0, resultando em um gráfico de alta qualidade, porém, maior.
JPEG – Smaller File (JPEG – Arquivo menor) define a qualidade para 60 e a suavização para
2, resultando em um gráfico com menos da metade do tamanho de um JPEG de melhor qua-
lidade, mas com qualidade reduzida.
Animated GIF Websnap 128 (GIF animado Websnap 128) define o formato do arquivo para
GIF animado e converte cores não-websafe nas cores websafe mais parecidas. A paleta de
cores contém até 128 cores.

Tipo de arquivo

O usuário deve basear a seleção do formato de arquivo no design e uso do gráfico. A aparência
de um gráfico pode variar de um formato para outro, especialmente ao usar tipos de compres-
são diferentes. Além disso, somente certos tipos de arquivos gráficos são aceitos pela maior
parte dos navegadores da Web. E também outros tipos de arquivo são ideais para impressão
ou uso em aplicativos de multimídia.
Os seguintes tipos de arquivo estão disponíveis:
GIF, ou Graphics Interchange Format, é um formato gráfico popular para a Web. GIFs contêm
um máximo de 256 cores. Além disso, os GIFs podem conter uma área transparente e vários
quadros para animação. Imagens com áreas de cor sólida podem se compactar mais ao serem
exportadas como GIFs. Um GIF é geralmente ideal para desenhos, logotipos, imagens com
áreas transparentes e animações.
JPEG, desenvolvido pelo Joint Photographic Experts Group especificamente para imagens foto-
gráficas ou com cores de alta densidade. O formato JPEG suporta milhões de cores (24 bits).
Esse formato é o melhor para fotografias digitalizadas, imagens que usam texturas, imagens
com transição de cores em dégradé e qualquer imagem que exija mais de 256 cores.
PNG, ou Portable Network Graphic, é um formato gráfico versátil para a Web. Porém, nem todos
os navegadores da Web podem visualizar gráficos PNG. O formato PNG pode suportar cores
de até 32 bits, conter transparência ou um canal alfa e ser progressivo. PNG é o formato de
arquivo nativo do Fireworks. Porém, arquivos PNG Fireworks contêm informações específicas
do aplicativo que não são armazenadas em um arquivo PNG exportado ou em arquivos criados
em outros aplicativos.
WBMP, ou Wireless Bitmap, é um formato gráfico criado para dispositivos de computação mó-
veis, como telefones celulares e PDAs (Personal Digital Assistant, assistente pessoal digital).
Esse formato é usado especificamente em páginas WAP (Wireless Application Protocol, pro-
tocolo de aplicações sem fio). O WBMP é um formato de 1 bit, portanto, só duas cores ficam
visíveis: preto e branco.
TIFF, ou Tagged Image File Format, é um formato gráfico usado para armazenar imagens
bitmap. TIFFs são usados com maior freqüência em publicações impressas. Muitos aplicativos
de multimídia também aceitam gráficos TIFF importados.
BMP, o formato de arquivo gráfico do Microsoft Windows, é um formato de arquivo comum
usado para exibir imagens bitmap. BMPs são usados primariamente no sistema operacional
Windows. Muitos aplicativos podem importar imagens BMP.

87
 Fireworks

PICT, desenvolvido pela Apple Computer, é um formato de arquivo gráfico normalmente usado
no sistema operacional Macintosh. A maioria dos aplicativos para Mac pode importar imagens
PICT

Paleta de cores

GIFs e outros formatos de imagem de 8 bits contêm uma paleta de cores. A paleta de cores é
uma lista de até 256 cores disponíveis para o arquivo. Somente as cores definidas na paleta
de cores aparecem na imagem gráfica, porém algumas paletas de cores contêm cores que
não estão no gráfico.
As seguintes paletas estão disponíveis no Fireworks:
Adaptive (Adaptativa) é uma paleta personalizada derivada das cores reais do documento. As
paletas adaptativas, em geral, produzem as imagens de melhor qualidade.
Web Adaptive (Adaptativa Web) é uma paleta adaptativa na qual as cores parecidas com cores
websafe são convertidas para a cor websafe mais próxima. As cores websafe são aquelas que
se originam da paleta.
Web 216. Web 216 é uma paleta com as 216 cores comuns aos computadores Windows e
Macintosh. Essa paleta é muitas vezes denominada paleta websafe ou à prova de navegador,
pois produz resultados razoavelmente consistentes em vários navegadores da Web em qual-
quer plataforma, quando exibidas em monitores de 8 bits.
Exact (Exata) contém as cores exatas usadas na imagem. Somente as imagens contendo 256
cores ou menos podem usar a paleta Exact (Exata). Se a imagem contiver mais de 256 cores,
a paleta será alternada para Adaptive.
O Windows e o Macintosh contêm 256 cores definidas pelos padrões da plataforma Windows
ou Macintosh, respectivamente.
Grayscale (Tons de cinza) é uma paleta de 256 ou menos tons de cinza. A escolha dessa paleta
converterá a imagem em tons de cinza.
Black and White (Preto e branco) é uma paleta que consiste somente em duas cores: preto
e branco.
Uniform (Uniforme) é uma paleta matemática baseada em valores de pixels RGB.
Custom (Personalizada) é uma paleta que foi modificada ou carregada de uma paleta externa
(arquivo ACT) ou um arquivo GIF. O ajuste da paleta de cores durante a otimização afeta as
cores da imagem. É possível otimizar e personalizar paletas de cores com o uso da tabela de
cores no painel Optimize.

Visualização e comparação de configurações de otimização

Os botões de visualização de documento exibem o gráfico tal como apareceria em um navegador
da Web, com base nas configurações de otimização. É possível visualizar os comportamentos
de rollover e navegação, bem como a animação.

Os botões de visualização de documento exibem o tamanho total, o tempo de download es-

timado e o formato de arquivo de um documento. O tempo de download estimado é o tempo
médio de download de todas as fatias e molduras do documento com um modem de 56 Kbps.
As exibições 2-Up (2 para cima) e 4-Up (4 para cima) exibem informações adicionais que va-
riam de acordo com o tipo de arquivo selecionado.
Para visualizar um gráfico com base nas configurações de otimização atuais:

88
 Fireworks

Clicar no botão Preview (Visualizar) no canto superior esquerdo da janela do documento.

Para comparar exibições com configurações de otimização diferentes:
1. Clicar no botão 2-Up ou 4-Up no canto superior esquerdo da janela do documento.
2. Clicar em uma das visualizações de tela dividida para selecioná-la.
3. No painel Optimize, digitar as configurações.
4. Selecionar as outras visualizações e especificar configurações de otimização diferentes
para cada visualização para compará-las. Quando a exibição 2-Up ou 4-Up é selecionada, a
primeira divisão de exibição apresenta o documento PNG original do Fireworks para permitir
a comparação com as versões otimizadas. É possível alternar essa exibição para exibir outra
versão otimizada.

Image Preview
Exibe a otimização recomendada e as opções de exportação para o documento atual. Quando
selecionado diretamente no menu File (Arquivo), a opção Image Preview exibe as configura-
ções do documento atual definidas no painel de otimização.
A área de visualização de Image Preview exibe o documento ou o gráfico exatamente como
será exportado e estima o tamanho do arquivo e o tempo de download com as configurações
de exportação atuais. Menu File> Image Preview.

Image Preview - Options

A Guia Option (Opções) permite a configuração do formato do Arquivo,

2 – Format (Formato): define o formato do arquivo (escolhemos GIF).

3 – Palette (Paleta): define a paleta de cores a ser utilizada no arquivo.
4 – Loss (Perda): define a perda de qualidade do arquivo, alta (100) ou baixa (0).
5 – Número máximo de cores: define o número máximo de cores que o arquivo pode ter.
6 – Mostra as cores presentes em sua imagem.
7 – Define uma transparência à imagem.

Definir cor Transparente: acionando este botão e clicando sobre uma cor na imagem,

89
 Fireworks

esta é definida como transparente.

Adicionar cor à Transparência: define mais uma cor transparente.

Remover cor da Transparência: remove uma cor da transparência.

8 – Matte: define a cor que participará no serrilhamento da imagem caso alguma cor seja
transparente.
Nota: no caso de uma imagem JPEG (que não pode ter cor transparente), o Mate define a cor
do fundo da imagem.
9 – Mostra opções importantes sobre o arquivo, como o tamanho e o tempo que o usuário
levará para visualizar a imagem através da internet.
10 – Após configurado clicar sobre o Export (Exportar).

A Guia File (Arquivo) permite a configuração do tamanho do Arquivo.

Para definir as dimensões da imagem exportada usando Image Preview:

1. Clicar na guia File.
2. Especificar uma porcentagem de escala ou digitar a largura e altura desejadas em pixels.
Selecionar Constrain (Restringir) para colocar em escala a largura e a altura proporcional-
mente.

Image Preview - File

A Guia Animation (Animação) permite a configuração da animação caso você esteja traba-
lhando com uma GIF Animada.
Para definir as configurações de animação usando Image Preview:
1 Clicar na guia Animation (Animação).
2. Utilizar as técnicas a seguir para visualizar molduras de animação:
Para exibir uma única moldura, selecionar a moldura desejada na lista do lado esquerdo da caixa
de diálogo ou utilizar os controles de moldura na área inferior direita da caixa de diálogo.
Para reproduzir a animação, clicar no controle Play/Stop (Reproduzir/Parar) na área inferior
direita da caixa de diálogo.
3. Fazer as edições na animação:
Para especificar o método de eliminação de moldura, selecionar a moldura desejada na lista
e escolher uma opção no menu pop-up (indicado pelo ícone de lixeira).
Para definir o retardo de moldura, selecionar a moldura desejada na lista e digitar o tempo de
retardo em centésimos de segundo no campo Frame Delay (Retardo de moldura).

90
 Fireworks

Image Preview - Animation

Para configurar a animação de modo a reproduzi-la repetidamente, clicar no botão Looping
(Ciclos) e selecionar o número desejado de repetições no menu pop-up.
Selecionar a opção Auto-Crop (Cortar automático) para cortar cada moldura como uma área
retangular de forma que a saída só inclua a área da imagem que diferir entre as molduras. A
seleção dessa opção reduz o tamanho do arquivo.
Selecionar a opção Auto-Difference (Diferença automática) para que a saída só inclua os pixels
alterados de uma moldura para a outra. A seleção dessa opção reduz o tamanho do arquivo.

Export Area

A Ferramenta Export Área (Área de Exportação) define a área da imagem que deve ser
exportada e para utilizar esta ferramenta, siga os seguintes passos:
1 – Selecione a ferramenta Export Area (Área de Exportação) na caixa de ferramentas.
2 – Marque um retângulo na área da imagem que deve ser exportada.
3 – Tecle ENTER para que a caixa de diálogo Image Preview (Visualizar Imagem) seja exibi-
da.
4 – Defina as opções de exportação da imagem e clique no botão Export (Exportar).

Exercício Aula 09

Utilize os ensinamentos aprendidos nesta aula para otimizar e exportar da melhor forma pos-
sível as imagens cedidas pelo seu professor.

91
 Fireworks

Aula 10 – Trabalho Layout

92
 Fireworks

Aula 11 – Botões, Barra de Navegação e Menu

Pop-Up
Podemos através de imagens fatiadas, criar Set Nav Bar (Barras de Navegação) e Menu Pop-
Up. Para isso utilizaremos Behaviors (Comportamentos).

Button (Botões)
Botões são elementos de navegação para uma página da Web. Um botão pode ter até quatro
estados. Cada estado representa a aparência do botão em resposta a um evento do mouse:
O estado Up (Acima) é o padrão ou a aparência do botão “em repouso”.
O estado Over (Sobre) representa a aparência do botão quando o ponteiro passa sobre ele. Esse
estado alerta os usuários de que o clique no mouse provavelmente resultará em uma ação.
O estado Down (Abaixo) representa o botão após o usuário clicar nele. É comum utilizar-se
uma imagem côncava do botão para indicar que ele foi pressionado. Esse estado de botão
normalmente representa a página da Web atual em barras de navegação com vários botões.
O estado Over While Down (Sobre durante o estado Abaixo) indica a aparência quando o
ponteiro passa sobre um botão no estado Down (Abaixo). Esse estado de botão geralmente
mostra que o ponteiro está sobre o botão da página da Web atual em barras de navegação
com vários botões.
Active Area (Área Ativa) Área de ativação do botão.
Com o Button Editor (Editor de botão), é possível criar todos esses diferentes estados do botão,
bem como uma área para iniciar a ação do botão.

Button Editor (Editor de botão)

Orienta o usuário durante as etapas de criação dos controles de comportamento do botão.

1 – Selecione o elemento a ser transformado em botão.
2 – Menu Modify (Modificar)> Symbol (Símbolo)> Convert to Symbol (F8), ou clique botão
direito do mouse e selecione a opção Convert to Symbol (F8).

Painel de Símbolo
3 –Em Name de um nome ao botão.
4 – Selecione o item Button (botão). E clique em OK.

Simbolo de botão
5 – Clique duas vezes sobre o nome do button.

93
 Fireworks

6 – Abre o Editor Button (Editor de Botões) no estado Up.

7 – Para criar os Estados Over, Down, Over While Down e Active Área, se necessários, basta
clicar na aba correspondente e criar o novo estado do botão.
8 – Se quiser copiar as características do botão do estado anterior basta clicar sobre o Copy
Up Graphic.
9 – Após terminado basta clicar sobre o Botão Done.
Normalmente um botão tem pelo menos 2 estados Up (Acima) e Over (Sobre). Se clicarmos so-
bre o botão Import a Button a Biblioteca de botões abre-se uma lista de modelos de botões.

Set Nav Bar Image (Barra de Navegação de Imagem)

Esse behavior configura as propriedades de uma barra de navegação, que apresenta um con-
junto de imagens que mudam conforme a ação do usuário. Uma barra de navegação nada
mais é de que varias botões ou imagens com comportamentos de botões juntos.

Criando um Barra de Navegação

No caso de queremos criar uma barra de navegação com os 4 comportamentos do Botão:

Up (Acima), Over (Sobre), Down (Abaixo), Over While Down Image (Sobre durante o estado
Abaixo).
1- Precisaremos de 4 frames um para cada comportamento do botão.
2- Fatiar todos os itens que faram parte da Barra de Navegação
3- Em cada uma das Fatias clicar na mira e escolher Add Nav Bar (Barra de Navegação)

4 – Abrirá a janela Set Nav Bar Image

94
 Fireworks

Nav Bar Preview: Exibe a área da Slice (fatia).

Include Over While Down State, deixe essa opção marcada e coloque a imagem referente a
ele no frame 4.
Show Down image upon load: Exibe a imagem Down depois de carregada.
5 – Basta então clicar sobre o botão Ok.

Set Text of Status Bar

Podemos fazer com que ao usuário passar o mouse sobre uma fatia, uma mensagem seja
exibida
na barra de status do navegador e para isso, siga os seguintes passos:
1 – Crie uma Slice (Fatia), ou selecione uma já existente.
2 – Clique no ícone com o desenho de um alvo que se encontra no centro da fatia e no menu
que aparece escolha a opção Add Texto f Status Bar
3 – Na caixa de diálogo que aparece digite o texto que deve aparecer na barra de status e
clique no
botão OK.

Criando um Menu Pop-up

Menus Pop-up são menus que funcionam da seguinte forma: o usuário passa o mouse sobre
um botão e logo aparece um pequeno menu onde ele pode escolher entre diversos hiper-
links.
Para criar um Menu Pop-up siga os seguinte passos:
1 – Desenhe a área que ativará o menu, ou seja, a área onde o usuário deve passar o mouse
para que o menu apareça.

2 – Crie uma fatia sobre esta área.

3 – Selecione a fatia e clique no ícone de um alvo que aparece no centro dela. Feito isso escolha
no menu que aparece a opção Add Pop-up Menu (Adicionar Menu Pop-UP).

95
 Fireworks

4 – Abrirá uma caixa de diálogo com quatro guias e estas servem para configurar o Menu.
Veja a utilidade de cada guia:

Guia Content (Conteúdo): nesta guia definimos as opções existentes neste

menu.

Pop-up Menu Editor - Content

1 – Clique sobre o botão Add Menu (Adicionar Menu).

2 – Dê um clique duplo na linha que aparece na parte central desta caixa de diálogo e defi-
na:
Text (Texto): texto que aparecerá no Menu;
Link: define um hiperlink para o texto.
Tearget (Destino): define onde o link será aberto.
3 – Repita o passo 2 até que o Menu esteja completo.

Guia Appearance (Aparência): nesta guia definimos aparência do Menu Pop-Up.

96
 Fireworks

Pop-Up Menu Editor - Appearence

1 – Cells (Células): define se o menu será composto de IMAGENS ou somente por um código
HTML.
2 – Define se o Menu será horizontal ou vertical.
3 – Font (Fonte): define a fonte dos textos existentes no menu.
4 – Size (Tamanho): define o tamanho do texto existente no menu.
5 – Estilo: define o estilo do texto existente no menu.
6 – Alinhamento: define o alinhamento do texto.
7 – Up State (Estado Acima): define a aparência normal do menu.
8 – Over State (Estado Sobre): define a aparência do menu quando o usuário passa o mouse
por cima
do mesmo.

Guia Advanced (Avançada): define opções de tamanho e borda para o menu.

Pop-Up Menu Editor - Position

Guia Position (Posição): define a posição do menu em relação à fatia.

4 – Tecle F12 e veja o resultado.

97
 Fireworks

Exercício Aula 11

98
 Fireworks

Aula 12 – Processo em Lote

O processo em lote é uma maneira conveniente de converter automaticamente um grupo de
arquivos gráficos. Estas são as opções de processo em lote:
Converter uma seleção de arquivos em outro formato (Export).
Converter uma seleção de arquivos no mesmo formato com configurações de otimização di-
ferentes (Export).
Colocar em escala arquivos exportados (Size).
Localizar e substituir texto, cores, URLs, fontes e cores não-Web216 (Find e Replace).
Renomear grupos de arquivos por meio de qualquer combinação das seguintes operações:
adição de um prefixo, acréscimo de um sufixo, substituição de uma subseqüência e substituição
de espaços em branco (Rename).
Executar comandos em uma seleção de arquivos (Commands).
Podemos trabalhar com Processo em Lote de duas formas, uma com as alterações padrões e
a outra com um conjunto de alterações personalizadas.

Processo em lote – Size

Utilizaremos um processo que aplique um determinado tamanho a várias imagens ao mesmo
tempo.
1. Selecione no menu em File (Arquivo) >Batch Process (Processo em Lote).

2. Selecione as imagens que serão utilizadas e clique no botão Add:

99
 Fireworks

3. Após isso, clique no botão Next (Próximo). Uma nova tela irá aparecer. Nela, selecionaremos
o tipo de processo que vamos utilizar, no caso Scale (Tamanho):

4. Após selecionar Scale, clique no botão Add >:

Logo abaixo, em Scale, você verá 3 opções: Scale to Size, Scale to Fit Area e Scale to Per-

100
 Fireworks

centage.

Scale to Size.

Em Scale to Size, você poderá definir o tamanho das imagens aplicando um valor a Width
(Largura) e a Height (Altura)

Scale to Fit Area

Em Scale to Fit Area, você poderá ajustar a área total das imagens aplicando um valor a Max
width (Largura máxima) e a Max height (Altura máxima)

Neste campo, você poderá definir a largura máxima das imagens.

Neste campo, você poderá definir a altura máxima das imagens.
Somente aplicar aos arquivos que sejam maiores que os valores estipulados.

101
 Fireworks

Scale to Percentage

Em Scale to Percentage , você poderá ajustar o tamanho das imagens através de Porcentagens,
exemplo: ima imagem de 800x600 pixels, aplicado Scale to Percentage de 50% ela ficará com
o tamanho de 400x300 pixels.

Neste campo, você poderá definir a porcentagem que será aplicada ao tamanho das imagens,
tanto para menor quanto para maior.
Após apresentados todas as opções que o Scale oferece, vamos conhecer o próximo passo.
Após escolher a melhor opção das apresentadas acima, clique no botão Next >. Lodo depois,
irá aparecer a seguinte tela:

Em Batch output você terá as seguintes opções:

Same location as original file: Nesta opção, você salvará as imagens no mesmo local onde
estão as imagens originais, ou seja, neste opção você irá sobrescrever os arquivos originais.
Custom location: Nesta opção, você poderá escolher um novo local (ou pasta) onde deverão
ser salvas as imagens.

102
 Fireworks

Backups é usado caso seja necessário fazer uma cópia dos arquivos originais que foram usa-
dos. Você terá as seguintes opções:
Overwrite existing backups: Nesta opção, você ira sobrescrever os backups existentes (caso
eles existam ou não).
Incremental backups: Nesta opção, só serão criados os backups.
Obs.: O Backups pode ser ou não utilizado, dependo da necessidade de cada um.
Após escolhida as opções desejadas, clique não botão Batch para aplicar o processo.

Logo depois, irá aparecer a janelinha acima que indicará que o Processo em Lote foi conclu-
ído.

Exercício Aula 12

Vamos criar uma marca d´agua em nossas imagens.

Processo de Lote 01
Crie o símbolo da AIS como marca d´agua
Crie um processo de Lote que coloque esta marca d´agua em todas as imagens

Processo de Lote 02
Crie uma copia das imagens em tamanho 65 x 65.

Processo de Lote 03
Criar uma cópia das imagens de tamanho 65x 65, porém em tons de cinza.

103
 Fireworks

Aula 13 – Commands e Extension

Nunca foi tão fácil estender os recursos do Fireworks. O Fireworks oferece várias maneiras
diferentes de criar comandos personalizados que aprimoram seus recursos.
O Extension Manager permite instalar e gerenciar extensões que estendem a funcionalidade
do Fireworks. Uma outra opção é utilizar as comando personalizado do menu Commands.

Commands
São comandos prontos para uso, geralmente criado por terceiros. São recursos que facilitam
o trabalho do desenvolvedor. Menu Commands.

Batch Commands

Os Batch Commands produzem alterações nos elementos, como ajustes automáticos de Level
(Auto Level Selection), Blur (Blur Selection), inversão de cores (Invert Selection Color), diver-
sos tipos de rotações da Área de Trabalho (Rotate 180, Rotate 270, Rotate 90), rotações no
elemento (Rotate Selection 180, Rotate Selection 270, Rotate Selection 90), seleção de todos
os elementos na Área de Trabalho (Select All) e aplicar efeito Sharpen (Sharpen Selection).
Para aplicar, selecione o elemento e escolha o Batch Command desejado. Não há a necessidade
de configurar nenhum Batch Command, todos eles são de aplicação automática.

Creative

O Creative produz alguns efeitos criativos interressantes. Alguns deles podem ser configurados
e outros são de aplicação automática.
Os de aplicação automática (ou seja, basta selecionar o elemento e aplicar o comando para
que ele seja ativado) são: Convert to Grayscale (converte para tons de cinza) e Convert to
Sepia Tone (converte para tons de sépia). Os demais precisam de alguma configuração.

104
 Fireworks

Add Arrowheads

Permite a inserção de uma ponta de lança em uma linha. Existem ao todo 17 tipos de pontas
para serem aplicadas e é possível definir se a aplicação será realizada no ínicio, no final ou
nos dois lados da linha.

Add to start: Define o formato da ponta que será adicionado no início da linha.
Add to end: Especifica o formato da ponta que será adicionado ao final da linha.
Arrowheads: Estabelece o tipo de ponta a ser usada no início e/ou no final se as opções Add
to start e/ou Add to end estiverem marcadas.
Scale: Determina a escala da seta. Valor 100% é o tamanho normal.
Apply Stroke: Define se que aplicar um borda, deixando toda a ponta da seta mais grossa.
Solid Fill: Define se o preenchimento será sólido.
Terminando de configurar, clique no botão OK.

Add Picture Frame

Insere uma moldura de fotografia na Área de Trabalho. São dezenas de molduras disponíveis.
Ao aplicar o comando, a janela é aberta.

Select a Pattern: Seleciona o desenho da moldura.

Frame size: Define o tamanho (espessura) da moldura.
Terminando de configurar, clique no botão OK.

105
 Fireworks

Add Shadow

Insere uma sombra ao elemento. Após aplicar o comando, é necessário configurar o tipo de
sombra na própria Área de Trabalho.

Ao centro do elemento há um controle de intesidade da sombra identificado pela reta com um

círculo e um quadrado em cada extremidade. Arraste o elemento para cima para criar sombras
mais escuras. Aumente a área clicando no ícone quadrado para modificar a sombra.
Além disso, é possível alterar a direção usando o controle Direction (losangolo amarelo). Clicando
no ícone, a direção é resetada. Se mover o controle com o ponteiro do mouse pressionado, a
direção é alterada para o ponto que o leitor desejar.
O outro controle é o Perpective (losangolo amarelo). Clique nele para resetar a perspectiva.
Se mover o controle com o ponteiro do mouse pressionado, a perspectiva é alterada.

Fade Image

Insere um efeito fade na imagem. O fade contém uma parte da imagem opaca e outra parte
transparente. A transição entre as duas partes é criada automaticamente. Vale lembrar que
essa imagem é estática.

Ao aplicar, a janela é aberta. Basta clicar no tipo de fade desejado. São oito tipos disponíveis.
Em seguida, clique em OK.

106
 Fireworks

Twist and Face

Insere um efeito de giro e de fade ao mesmo tempo.

Ao aplicar o comand, é necessário configurar a janela:

Steps: Determina quantos passos o elemento irá ter.

Spacing: Define o espaço entre um elemento e outro (passos).
Rotation: Define a rotação do elemento.
Opacity: Determina a opacidade do elemento.
Depois de configurar o comando, clique em Apply, presente no canto inferior direito da janela
de configurações.

Manage Extensions
Permite gerenciar extensões instaladas no Fireworks. As extensões são arquivos que executam
tarefas predefinidas, facilitando o trabalho do desenvolvedor.
A Macromedia disponibiliza um site contendo inúmeros arquivos de extensões. O endereço é:
( http://www.macromedia.com/exchange/fireworks/ ).
Você precisará criar um Id (Login), ou seja, se cadastrar no sistema para poder baixar os ar-
quivos disponíveis. Após se cadastrar, basta efetuar o seu login, escolher e efetuar o download
das extensões que serão úteis ao seu trabalho.
Como as extensões existem desde versões mais antigas do programa, pode haver incom-
patibilidade de extensões elaboradas para versões anteriores do software. Após baixar uma
extensão, ao acionar o comando, é aberto o Macromedia Extension Manager, contendo:

107
 Fireworks

Img Install New Extension: Instala uma extensão. Se preferir, utilize o atalho Ctrl+I.
Img Remove Extension: Desinstala uma extensão. O atalho é Ctrl+R.
Fireworks 8: Seleciona o software. O Extension Manager permite gerenciar extensões para
outros produtos da Macromedia, inclusive versões anteriores do Fireworks, se tiver instalado
na mesma máquina.
Img Go to Macromedia Exchange: Carrega automaticamente o site contendo as extensões
para serem baixadas. Para usar, é necessário estar conectado à Internet.
As extensões baixadas deverão ter a extensão .mxp. Após baixar e abrir o Macromedia Exten-
sions Manager, clique no ícone Install New Extension. Procure em seu HD o arquivo baixado.
Selecione-o e clique em Install.
Uma caixa de mensagem contendo o contrato de licença será aberta para que você aceite ou
não a instalação. Clique em Accept.
Se a instalação der certo, aparecerá uma mensagem informando. Clique em OK.
Para utilizar no Fireworks é necessário fechá-lo e abri-lo novamente para que a nova extensão
seja incorporada ao programa.
As extensões serão inclusas no menu correspondente à coluna Type da janela Macromedia
Extension Manager. Por exemplo, se o tipo for texture, a extensão estará disponível no item
texture do Inspector de Propriedades.
Para desinstalar uma extensão, vá ao menu File (Arquivo)> Remove Extension (Remover Ex-
tensão). Dependendo do tipo de extensão, quando for aplicá-lo, uma janela de configurações
é aberta. Essas configurações variam de extensão para estensão.

Exercícios Aula 13

108
Fireworks

Aula 14 – Trabalho Final

109