Fireworks

Guia do Curriculo

© 1997–1998 Macromedia, Inc. Todos os direitos reservados. Macromedia, logo Macromedia, Dreamweaver, Director, Fireworks, Flash, Fontographer, FreeHand, e

Xtra são marcas comerciais ou registradas da Macromedia, Inc. Os demais nomes de marcas também podem ser marcas comerciais ou registradas pertencentes a

outras empresas.

Imagem do Fireworks desenvolvida no Fireworks pela Research Studios de Londres. Fonte desenvolvida no Fontographer pela Font Bureau, Inc.

ii CURRÍCULO DO FIREWORKS

êNDICE

Introdução . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . iv

Lição 1: O Ambiente Fireworks

Aprenda as diferenças entre imagens vetoriais e de bitmap, como

configurar um documento do Fireworks, como utilizar as ferramentas

Conheça as ferramentas básicas para criar e modificar imagens

no Fireworks. Crie e importe imagens, utilize a ferramenta de texto

e anexe texto a um caminho. Crie formas, segmentos de linha

curvados e retos e crie caminhos com a ferramenta pincel.

Familiarize-se com as ferramentas de alinhamento. Aplique

Adicione efeitos, crie máscaras e anexe texto a um caminho.

Edite imagens de bitmap. Crie botões padrão utilizando os

estados de botões padrão. Aplique os efeitos “Live Effects” do

Fireworks a texto e formas. Crie seu próprio efeito de rollover

A animação torna páginas da Web mais interessantes. Aprenda

a incorporar as técnicas de animação do Fireworks em sua página

da Web. Utilize camadas com quadros. Crie símbolos e exemplos.

Utilize o modo tweening para movimento e para criar transformações.

Otimizar imagens para a Web é uma etapa importante do processo

de desenvolvimento gráfico. Aprenda as diferenças entre os principais

formatos de imagem. Configure opções de paleta e crie GIFs

transparentes. Utilize o Fireworks para criar animações GIF. Utilize a

caixa de diálogo Export Preview para visualizar formatos e configurações

Adicionar links a partes selecionadas de suas imagens é uma etapa

importante na construção de um site eficiente e visualmente atraente.

Aprenda a criar e editar links e construir um mapa de imagem com

objetos URL. Aprenda a utilizar o Fireworks para dividir gráficos e gerar

efeitos de rollover em páginas HTML integradas. . . . . . . . . . . . . . . . . . . . . . 41

iii

INTRODU.ÌO

O Fireworks simplifica o processo de criação e otimização de imagens para a Web.

Tradicionalmente, projetistas da Web utilizavam uma ferramenta de bitmap como o Photoshop para criar

imagens, um programa de desenho baseado em vetores para criar texto e uma combinação de filtros,

utilitários e shareware para aplicar efeitos e criar mapas de imagem e animações, DeBabelizer para

otimizar imagens JPEG e GIF, e um navegador para visualizar. Revisar uma imagem freqüentemente

forçava os desenvolvedores a apagar tudo e iniciar novamente.

O Fireworks possibilita a combinação de vetores e bitmaps, a aplicação de efeitos Live Effects, a otimização

de paletas e a visualização da qualidade da imagem. Não há necessidade de alternar para outros aplicativos

e utilitários com o Fireworks. Ele é a solução para a criação e otimização de imagens da Web.

Utilizando o Fireworks, você pode dividir imagens da Web para mesclar tipos de compactação e

formatos de arquivos para transferências muito rápidas. Também é possível incorporar efeitos de

rollover em imagens divididas, definir blocos de texto como GIFs, colocar fotos como JPEGs totalmente

coloridos e gerar automaticamente uma tabela HTML para reorganizar suas imagens divididas.

Ele também gera o JavaScript para efeitos de rollover, incluindo pré-carregamentos de imagens para

ação rápida quando o mouse se move sobre o botão.

Neste curso prático, você irá aprender como utilizar os recursos do Fireworks para criar imagens incorporando

elementos de bitmap e vetoriais, utilizando uma caixa de ferramentas interessante cheia de

efeitos especiais. Você criará botões, adicionará efeitos de rollover e criará uma animação GIF. Também

irá aprender a otimizar imagens e utilizar Export Preview para comparar formatos e opções de paletas

antes de tomar uma decisão final e a utilizar o Fireworks para criar mapas de imagem e imagens divididas.

O Fireworks vem com um sistema extensivo de Ajuda on-line que pode ser consultado em casos de

dúvida. A maioria das paletas de ferramentas também tem Screen Tips que descrevem funções de

ícones quando o cursor fica sobre elas. Além disso, um manual do Fireworks no formato PDF está

localizado em “Arquivos de programas/macromedia/fireworks/using fireworks” para a plataforma

Windows e na pasta de aplicativos Fireworks, usando a pasta do Fireworks para o Macintosh.

Você também pode visitar o site da Macromedia na Web no endereço www.macromedia.com para

atualizações de software, novidades e dicas para tornar o seu trabalho mais produtivo.

Você descobrirá que o Fireworks é uma ferramenta versátil e útil para facilitar seus esforços para design

da Web e torná-los mais agradáveis. Esperamos que você goste dele.

iv CURRÍCULO DO FIREWORKS

LI.ÌO 1: O AMBIENTE FIREWORKS

OBJETIVOS

Nesta lição você irá aprender:

• as diferenças entre imagens vetoriais e de bitmap

• como configurar um documento do Fireworks

• como utilizar as ferramentas e paletas do Fireworks

• como trabalhar com camadas

CONTEXTO: IMAGENS BASEADAS EM VETORES E PIXELS EM UM AMBIENTE

O Fireworks é um aplicativo de imagens vetoriais e de bitmap. Normalmente, há dois tipos de imagens

de computador: objetos vetoriais criados em um aplicativo como o Macromedia FreeHand e imagens de

bitmap criadas em um aplicativo como o Adobe Photoshop.

Objetos vetoriais são compostos de caminhos e objetos de bitmap são compostos de pixels individuais.

O Fireworks combina a aparência maleável de objetos de bitmap com a flexibilidade, controle e

capacidade de edição de caminhos Bezier em um único ambiente. Nesta lição, você conhecerá a

interface, ferramentas e ambiente de trabalho do Fireworks e aprenderá a trabalhar com imagens

vetoriais e bitmaps ao mesmo tempo.

EXERCêCIOS

Uma Imagem com Componentes Vetoriais e de Bitmap

1. Ative o aplicativo Fireworks.

dentro da pasta “Fireworks” transferida a partir do CD-ROM.

3. Clique em Open. A imagem que você verá na janela de documento tem uma imagem de bitmap (a

borboleta) e imagens vetoriais.

1 CURRÍCULO DO FIREWORKS

CURRÍCULO DO FIREWORKS

4. Selecione a ferramenta Pointer na caixa de ferramentas

do Fireworks (Figure 1-2).

5. Clique uma vez na parte da imagem com a borboleta para

selecioná-la.

6. Selecione a ferramenta Magnify e clique e arraste um

retângulo ao redor de uma parte pequena da imagem de

bitmap da borboleta.

7. Selecione 100% a partir do menu pop-up Document

magnification localizado na barra de ferramentas View

Control no canto inferior esquerdo da tela.

8. Selecione a ferramenta Subselection e clique uma vez no caminho mais externo da imagem vetorial.

Quando o caminho estiver selecionado com a ferramenta Subselection, os pontos ficarão visíveis

(Figure 1-5).

9. Selecione a ferramenta Magnify e utilize-a para clicar e arrastar um retângulo ao redor de uma

pequena parte do caminho selecionado. Selecione 100% a partir do menu pop-up Document

magnification localizado no canto inferior esquerdo da barra de ferramentas View Control. Utilizando

a ferramenta Subselection, clique em uma das alças de ponto e gire-a levemente.

O caminho e a sombra assumem um novo formato. Criando caminhos editáveis com atributos de

bitmap, o Fireworks garante que seu trabalho poderá ser completamente editado por todas as

etapas do processo de design.

O Fireworks ameniza a diferença entre imagens vetoriais e de bitmap. O caminho de um objeto do

Fireworks tem um caminho vetorial editável. Mas ele pode ter uma pincelada larga, texturizada, um

preenchimento de imagem e um efeito como uma sombra, fissura ou brilho.

3 CURRÍCULO DO FIREWORKS

Pointer

Select Behind

Crop

Export Area

Subselection

Marquee

Ellipse Marquee

Lasso

Polygon Lasso

Magic Wand

Hand Magnify

Line Pen

Rectangle

Ellipse

Polygon

Text

Brush

Redraw Path

Scale

Skew

Distort

Freeform

Reshape Area

Path Scrubber (–)

Path Scrubber (+)

Eyedropper Paint Bucket

Eraser Rubber Stamp

Line Well

Swap Colors Default Colors

Fill Well

Pencil

CURRÍCULO DO FIREWORKS

Use esta

ferramenta Para

Pointer Seleciona e arrasta os objetos

Select Behind Seleciona os objetos que estão atrás de outros objetos

Crop Descarta partes de uma imagem

Export Area Exporta uma parte do documento

Subselection Seleciona um objeto dentro de um grupo ou pontos em um caminho

Marquee Seleciona uma área de pixels retangular no modo Image Edit

Ellipse Marquee Seleciona uma área de pixels elíptica no modo Image Edit

Lasso Seleciona uma área de pixels à mão livre no modo Image Edit

Polygon Lasso Seleciona uma área de pixels poligonal no modo Image Edit

Magic Wand Seleciona áreas de pixels de cores semelhantes no modo Image Edit

Hand Movimenta o documento

Magnify Altera a ampliação da visualização

Line Desenha linhas retas

Pen Desenha caminhos por meio de pontos de ancoragem

Rectangle Desenha retângulos, retângulos arredondados e quadrados

Ellipse Desenha elipses e círculos

Polygon Desenha polígonos e estrelas

Text Cria blocos de texto

Pencil Desenha traçados de lápis de um pixel

Brush Desenha traçados de pincel usando as configurações do painel Brush

Redraw Path Redesenha partes de um caminho selecionado usando as configurações do

painel Brush

Scale Redimensiona e rotaciona objetos

Skew Inclina e rotaciona objetos e altera a perspectiva

Distort Distorce e rotaciona objetos

Freeform Estende ou reduz o segmento de um caminho usando um cursor

redimensionável

Reshape Area Faz a reformatação de um caminho selecionado dentro da área do cursor

redimensionável

Path Scrubber (+) Aumenta as características do traçado controlado pela pressão ou velocidade

Path Scrubber (–) Diminui as características do traçado controlado pela pressão ou velocidade

Eyedropper Faz a amostragem de uma cor, aplicando-a ao tinteiro de cor ativo

Paint Bucket Preenche objetos com cores, degradês ou padrões e ajusta preenchimentos

com as alças da ferramenta Paint Bucket

Eraser Remove ou substitui partes dos objetos da imagem e recorta caminhos

Rubber Stamp Copia partes do objeto de uma imagem

4

5 CURRÍCULO DO FIREWORKS

O Fireworks tem dois modos básicos — modo Object e modo Edição de Imagem:

usam a mesma caixa de ferramentas e algumas ferramentas, mas não todas. As ferramentas que não

estão disponíveis em um modo específico ficam desativadas quando você está trabalhando naquele modo.

Modo Edição de Imagem

1. Entre no modo Edição de Imagem clicando duas vezes na imagem de bitmap da borboleta.

2. Observe a borda listrada que indica que o Fireworks está no modo Edição de Imagem. As

ferramentas de edição de imagem como as ferramentas Marquee, Lasso, Eraser e Rubber Stamp

estão agora ativas e disponíveis para utilização.

3. Clique fora da imagem ou no botão Stop, localizado na parte inferior na barra de status (PC), ou na

barra de ferramentas de opacidade (Mac), para sair do modo de edição de imagem.

Atividades no modo Edição de Imagem incluem:

– criar e editar imagens para a Web

– editar imagens importadas da Web

– editar pixels com a ferramenta Pencil

– reaplicar elementos de imagem com a ferramenta Rubber Stamp

– pintar em cores com a ferramenta Brush

– apagar para transparência ou outra cor

– aplicar filtros Xtra a seleções de pixels

– editar GIFs, JPEGs, e PNGs importados

– criar imagens compostas

Modo Objeto

O modo Objeto é o modo padrão. Algumas ferramentas como as ferramentas Pen e Text só ficam ativas

no modo Objeto.

Atividades no modo Objeto incluem:

– desenhar caminhos arrastando uma ferramenta de forma básica ou a ferramenta Line,

colocando pontos com a ferramenta Pen ou desenhando um caminho com uma pincelada de

pixel largo com a ferramenta Pencil

– desenhar caminhos com uma grande variedade de pinceladas, incluindo texturas e padrões

com a ferramenta Brush

– editar caminhos com as ferramentas Freeform, Reshape Area, Redraw Path, Eraser, e Path

Scrubber, entre outras

– editar caminhos movendo pontos e ajustando alças Bezier

– digitar e editar texto

– importar, posicionar e aplicar efeitos a imagens de bitmap

– importar e editar documentos com imagens vetoriais criadas em aplicativos como o FreeHand

CURRÍCULO DO FIREWORKS

Os painéis do Fireworks flutuam sobre o documento. Coloque-os em qualquer lugar da tela. Os painéis

O PAINEL LAYERS AND FRAMES

Os controles Layers and Frames estão localizados em um painel com guias diferentes.

Camadas

painel Layers and Frames.

2. Se ele já estiver aberto, clique na guia

Layers para trazê-lo para a frente.

3. Clique no nome da camada de plano de

fundo para selecioná-la.

A camada ativa fica realçada. A camada

de plano de fundo está sempre na parte

inferior da ordem de empilhamento.

4. Clique no nome da camada Text para

ativá-la.

5. Utilizando a ferramenta Pointer, clique na

linha de texto na imagem.

O quadrado azul indica em que camada o objeto

selecionado reside. A imagem da borboleta e as imagens

vetoriais estão na camada de primeiro plano. Para mover

um objeto selecionado para uma camada diferente, arraste

o ícone do quadrado azul para cima ou para baixo na lista.

6. Clique na área na segunda coluna à esquerda de um nome

de camada para bloquear aquela camada.

Um cadeado indica que a camada está trancada.

Objetos em uma camada trancada não podem ser editados até

que a camada seja destrancada.

7. Clique na área da primeira coluna à esquerda de um nome

de uma camada de texto para ocultar aquela camada

O ícone exibir/ocultar desaparece com o texto dentro do documento.

Ocultar uma camada oculta todos os objetos daquela

camada, mas não os remove do documento. Exibir uma camada

significa exibir todos os objetos daquela camada. Uma camada

oculta não pode ser uma camada ativa.

8. Clique no quadrado da primeira coluna à esquerda do nome da

camada para exibir aquela camada.

Somente objetos em camadas visíveis e desbloqueadas são

editáveis.

Muitas das ações associadas a camadas — adicionar, duplicar,

renomear, remover, ocultar ou exibir, e trancar ou destrancar

camadas — estão localizadas no menu pop-up Options.

Quadros

1. Se o painel Layers and Frames não estiver

abri-lo com a guia Frames à frente

2. Se o painel já estiver aberto, clique na guia

Frames para movê-la para a frente.

BRUSHES AND FILLS

pinceladas desenhadas ou pintadas. Defina a

pincelada das ferramentas Brush, Pen, Line,

e de ferramentas de formas básicas, e edite

as pinceladas de objetos selecionados.

EFEITO

7 CURRÍCULO DO FIREWORKS

área interior de um objeto. Você pode

definir o preenchimento de um caminho

aberto ou fechado.

Categoria e tipo de pincel

Ponta do pincel

Textura da pincelada

Amostra da pincelada

e tinteiro de cores

Categoria e nome

do preenchimento

Tipo de borda

Textura e

transparência

Amostra do

preenchimento e

tinteiro de cores

Categoria e tipo

de efeito

Opções específicas

do efeito

Amostra do efeito

CURRÍCULO DO FIREWORKS 8

COLOR MIXER

TOOL OPTIONS

Se o painel Tool Options não estiver aberto, você poderá

abri-lo clicando duas vezes em uma ferramenta.

Com o painel aberto, clique em várias ferramentas da

Toolbox para investigar as várias opções de ferramentas.

PROPRIEDADES DO DOCUMENTO

Ao iniciar a criação de um novo documento, verifique todas

com cuidado o design de seu documento e requerimentos

finais de saída, você pode decidir com antecedência que

configurações são melhores. Apesar de muitas propriedades

do documento poderem ser alteradas conforme o

necessário, às vezes estas alterações podem ter resultados

inesperados. Pensar e planejar com base no futuro é a

melhor estratégia.

1. Feche 2type.png escolhendo File > Close. (Não salve as alterações.)

2. Crie um novo arquivo escolhendo File > New ou clicando no botão New na barra de ferramentas Main.

Tamanho da Tela de Pintura

Defina o Canvas size na caixa de diálogo New Document para definir o tamanho de seu documento.

Digite 600 no campo Width e 400 no campo Height.

As dimensões da tela de pintura podem ser definidas utilizando pixels, polegadas ou centímetros. Se

você desejar alterar o tamanho da tela de pintura mais tarde, selecione Modify > Document > Canvas

Size ou utilize a ferramenta Crop para cortar a imagem de plano de fundo.

Resolução

A resolução é definida na caixa de diálogo New Document como pixels por polegada ou pixels por

centímetro. Considere a média de entrega pretendida ao atribuir a resolução. Por exemplo, imagens da

Web são salvas normalmente em 72 pixels por polegada devido à resolução padrão de exibição do

monitor do computador.

Para a Web, a melhor resolução é 72 pixels por polegada (per inch).

9 CURRÍCULO DO FIREWORKS

Cor da Tela de Pintura

A tela de pintura é a camada da parte inferior do documento, abaixo da camada de Background. Áreas

transparentes da camada de plano de fundo aparecem com a cor da tela de pintura. Você pode escolher

uma tela de pintura branca, transparente ou colorida na caixa de diálogo New Document.

O Fireworks irá suavizar o serrilhado da cor de sua tela de pintura. Assim, para obter melhores

resultados, defina a cor da tela de pintura para a cor de plano de fundo de sua página da Web.

Número de etapas a desfazer

General > “Undo Steps”.

Observe que a necessidade de RAM aumenta com o número de etapas a desfazer. A configuração

padrão para as preferências Undo é 8.

Alterações às preferências Undo não têm efeito até que o Fireworks seja reiniciado.

CURRÍCULO DO FIREWORKS

Réguas

Grade

A grade é um plano de fundo de linhas horizontais e verticais que você pode utilizar para posicionar seu

trabalho.

2. Escolha View > Grid para desativar a grade.

3. Com View > Snap to Grid selecionada, arrastar um objeto para perto de uma linha de grade faz com

que o objeto seja atraído para a grade.

Guias

Utilize guias que, como a grade, são linhas-guia não exportáveis, para alinhar e posicionar objetos com

precisão.

2. Para adicionar uma guia, as réguas devem estar visíveis. Arraste as guias a partir da régua vertical

ou horizontal.

3. Com View > Snap to Guides selecionada, objetos são atraídos para a guia.

• Observe os modos diferentes em que as imagens são utilizadas na Web hoje em dia.

• Visite cinco sites da Web que utilizem imagens como uma etapa importante da “mensagem” a

passar e analise a função das imagens. Elas contam a história? Elas ajudam a ilustrar o ponto

de vista? Elas vendem o produto? Elas são parte da mensagem corporativa? Elas são

divertidas? Tente encontrar cinco sites muito diferentes.

• Finalmente, tente analisar que tipo de imagem você está vendo, vetoriais ou de bitmap? O tipo

de arquivo indica o tipo de imagem e examinar o código-fonte em HTML de uma página pode