apresentação de fireworks

Coordenação de Ensino - Duque de Caxias

Macromedia Fireworks 8Macromedia Fireworks 8


O que é o Fireworks?

O Macromedia Fireworks é uma ferramenta profissional de edição gráfica para a criação, edição e animação de imagens para usos diversos.


Iniciando uma projetoQuando você abrir o Fireworks, verá a seguinte janela

Caso você já tenha iniciado algum projeto eles estarão listados em Open Recent Item. Se desejar iniciar um novo projeto novo, clique e Create New na opção Fireworks File.

Obs.: Se não quiser que essa tela apreça de novo selecione a opção Don't show Again


Iniciando um projeto

Ao clicar em Fireworks File, Abrirá a seguinte janela:

Canvas Size ( Tamanho da janela )

Width: Largura da janelaHeight: Altura da janelaResolution: Resolução (Qualidade )

da imagem

Canvas Color ( Cor da janela)

White: Branca.Transparent: TransparenteCustom Personalizada


Área de trabalho do Fireworks

1- Barra de Título: Exibe o título do documento que está sendo editado.

2- Barra de Menu: Possui todos os comandos possíveis do programa.

3- Barra de Ferramentas: Possui atalho para comandos mais usados do programa.

4- Palco : Área de edição dos objetos.

5- Painéis de Edição: Exibe ferramentas mais complexas do programa.

6- Inspetor de Propriedades: Exibe as propriedades do(s) Elemento(s) selecionado(s).

12

5

3

4

6


Guias de Visualização

O Fireworks possui 4 modos de visualização do projeto (em Vermelho)

Original: Mostra o projeto em sua forma original do formato .png (Documento só Fireworks). Como está sendo editado.

Preview : Mostra o objeto como será visualizado em um navegador, Internet Explorer, por exemplo.

2-UP: Mostra o objeto com as características de exportação do arquivo png para jpg e gif.

4-UP: Mostra o objeto com as características de exportação do arquivo png para jpg e gif .


Painéis de Edição

São painéis que permitem alterar diversas propriedades dos objetos que estão sendo editados.

Para exibí-los, bastar clicar sobre o Nome do painel. Você verá funções detalhadas de cada painel adiante


Painel de Ferramentas

O painel de Ferramentas está dividido em 6 categorias: Manipulação de objetos (seleção), Bitmap, Vetores, Site, Cores e as Ferramentas de Visualização.


Ferramenta Retângulo

Esta ferramenta permite a criação de varis formas geométricas.

Obs.: Para exibi as suas variações selecione a ferramenta e continue pressionando com o botão até elas serem exibidas.


Inspetor de Propriedades

No inspetor de propriedades é possível alterar as características da formas geométricas.

É possível alterar o preenchimento , o contorno e adicionar efeitos como a transparência da forma, Inversão de cores.

Cor e estilo de preenchimento


Exemplos de efeitosObs.: Para deixar a forma sem preenchimento, na caixa de cores a opção

Transparent.

Suavização das extremidades

Hard

Anti-Alias

Feather


Exemplos de efeitos

Estilo e frequência da textura

Quando estiver trabalhando com imagens Bitmap, essa opção não pintará áreas transparentes de uma figura, quer dizer, só serão pintadas as áreas que contêm pixels

Cor, espessura e estilo do contorno

Obs.: Para deixar a forma sem contorno, na caixa de cores escolha a opção Transparent.


Exemplos de efeitos

Suavização do contorno

0%

100%

Estilo e frequência da textura, respectivamente


Ferramenta Linha

Com a ferramenta linha é possível criar traços no documento. Para fazer uma linha perfeita basta pressionar o CTRL.

Obs.: É possível alterar suas características no Inspetor de Propriedades

Por ser tratar de uma linha, só possível alterar o contornos e os efeitos .


Ferramenta Lápis

Com a Ferramenta Lápis é possível fazer traçados a mão livre. As linha podem ter apenas os efeitos alterados no Inspetor de Propriedades.


Ferramenta Pincel

A ferramenta Pincel é outra opção para desenhar a mão livre no Fireworks

Obs.: Ela possui mas recursos gráficos que o lápis como tipo de ponta e espessura. É possível adicionar texturas como “cor” da Linha.


Ferramenta Caneta

Permite a criação de retas e curvas através da ligação de pontos. Os pontos são interligados dando origem à forma.

Linhas Retas – Para criar uma forma com linhas retas, selecione a ferramenta e clique no documento. Depois clique em outra região do documento, onde sera traçada em reta entre esses pontos para formar os pontos de ligação. Para fechar a forma, clique na ponto inicial da mesma.


AlçaCurva

Ferramenta Caneta

Linhas Curvas – Para criar uma forma com linhas curvas, selecione a ferramenta e clique no documento para defini o ponto inicial da curva. Clique em outro ponto, mas não solte o botão do mouse e mova o curso do mouse para definir a curvatura.


Ponteiro

Com a ferramenta ponteiro pode selecionar todos os elementos existentes no documento. Para selecionar um elemento, clique sobre ele ou fora do mesmo e arraste até o quadrado selecionar o objeto por completo


Selecionar Atrás

Para selecionar essa ferramenta, selecione a ferramenta ponteiro e continue pressionando até serem exibidas as variações dela.

Com essa ferramenta é possível selecionar objetos que estejam atrás de gráficos que os encobrem

Há uma circunferência atras do quadrado.


Seleção Secundária

Assim como a ferramenta ponteiro, essa também seleciona objetos no documento, de maneiras que você clica sobre eles ou clica e arraste até que englobe o objeto.

Alem da seleção, é possível fazer modificações nos gráficos através da manipulação de pontos. Você pode selecionar, vem como arrastar os pontos do gráfico. É utilizada também para trabalhar com as alças das linhas curvas.

OBS: Quando há um grupo de objetos, essa ferramenta é usada para selecionar um ou mais objetos do grupo

Manipulação das alças da linha curva

Manipulação de pontos do gráfico


Moldura da Caixa de Seleção

Permite a seleção de áreas de pixeis de uma imagem Bitmap. É possível escolher ente o modo de seleção retangular ou elíptica. Para isso, selecione a ferramenta e continue pressionando com o botão do mouse ate serem exibidas as duas opções de seleção

Obs.: Para aumentar a área de seleção, mantenha a tecla SHIFT e selecione o objeto que deseja incluir. Para retirar uma area da seleção, mantenha a tecla ALT e selecine a área que deseja retirar.

No Inspetor de Propriedades, Você pode escolher as caracteristicas da seleção.


Moldura da Caixa de Seleção

- Estilo da seleção

Normal – A seleção é feita à mão livre.Fixed Ratio – Define a proporção do tamanho da caixa de seleção nos

campos de redimensionamento abaixo desta opção.Fixed Size – Define o tamanho da caixa de seleção nos campos de

redimensionamento abaixo desta opção.

- Suavização da Seleção

Hard – Cria a borda da seleção bem definida.Anti-Alias – Impede a criação de bordas dentadas na seleção.Feather – A borda da seleção de pixels é suavizada. Ao lado desta opção

existe um campo, onde será preciso especificar o valos da intensidade da visualização


Ferramenta Laço

Essa ferramenta seleciona áreas do documento a mão livre, podendo assim, contornar certas figuras deixando a seleção bem definida. Existem dois modos de seleção do laço: a do Laço e a do Laço Polígono. Para selecionar uma desta opção, selecione a ferramenta e continue pressionando até aparecerem as duas opções

Com o Laço Polígono a seleção e feita através de ligações de pontos. A cada clique no documento são criadas linhas que serão interligadas entre si.

Obs.: Para finalizar a seleção, clique no ponto inicial.


Ferramenta Varinha Mágica

Essa ferramenta seleciona áreas do documento que possuem as mesmas tonalidades de cores.

No inspetor pode aumentar a Tolerance aumentar a quantidade de cores semelhantes

Obs.: No campo de Tolerance o valor pode variar de 0 a 255.


Ferramenta Cortar

Essa ferramenta exclui áreas do documento que consideramos desnecessárias. Para, selecione a área que deseja Manter no documento e dê um clique Duplo dentro da área de seleção

Após o clique duplo.


Ferramenta Texto

A ferramenta texto permite a inserção de textos nos documentos. Com ela selecionada, clique a arraste no documento até atingir o tamanho da caixa de texto desejada.

No Inspetor de Propriedades poderá ser alterada a fonte, cor, tamanho, estilo, alinhamento, entre outras coisas. Na opção em destaque, é possível definir a suavização das extremidades do texto.


Transformar

Com essas ferramentas é possível manipular gráficos vetoriais e imagens Bitmap através de pontos


Ferramenta Dimensionar

A ferramenta Dimensionar permite o redimensionamento do tamanho do objeto. Quando o objeto é selecionado por esta ferramenta, suas extremidades passam a exibir pontos quadrados.


Ferramenta Inclinar

A ferramenta permite Inclinar os lados do objeto dando uma nova forma ao mesmo. Seleciona o objeto com essa ferramenta, pontos quadrados serão exibidos ao redor do objeto.


Ferramenta Distorcer

A ferramenta Distorcer permite modificar totalmente a forma original do objeto. Com ela selecionada, clique em qualquer um dos postos ao redor do objeto e arraste até chegar na forma desejada.


Redesenhar Traçado

Quando fizer traço, independente da ferramenta (caneta, lápis ou pincel) e desejar alterar a forma do mesmo, você poderá fazer de duas formas; Transformar livremente ou pela transformação da forma

Para escolher essa ferramenta: Pressione com o botão do mouse na ferramenta Forma Livre e continue pressionando o botão do mouse até as opções serem exibidas.


Forma Livre Com essa ferramenta é possível alterar livremente objetos que foram

criados com alguma ferramenta de traço, como Caneta ou Lápis

Como usá-la: Selecione a ferramenta, e clique na linha ou junção do objeto e arraste até chegar na forma desejada.

Antes da Alteração

Depois da alteração


Ferramenta Transformação da Forma

Com essa ferramenta é possível alterar circularmente objetos que foram criados com alguma ferramenta de traço, como Caneta ou Lápis.

Como usá-la: Selecione a ferramenta, clique onde deseja fazer a alteração e arraste até chegar à forma desejada.

Antes da alteração

Depois da alteração


Ferramenta Conta Gotas

Essa ferramenta é utilizada para capturar cores de pixels de imagens Bitmap. Selecione a ferramenta e clique na área da imagem que contém a cor que deseja capturar. A cor será selecionada para a utilização no preenchimento de outro objeto.

Obs.: Existem três tamanhos das áreas de pixels a serem capturados. Para selecionar uma delas, vá ao Inspetor de Propriedades.


Ferramenta Faca e Borracha

A ferramenta Faca corta objetos vetoriais.

Como usá-la: Selecione a ferramenta, clique e arraste traçando uma linha onde deseja que o ponteiro seja cortado, clique fora do objeto e com a ferramenta ponteiro separe as partes.


Ferramenta Faca e Borracha

Quando se trabalha com o Bitmap, a ferramenta Faca se transforma na ferramenta Borracha . No Inspetor de Propriedades você pode escolher o estilo da borracha e opção para apagar áreas das imagens Bitmap.

Size: Tamanho da borrachaEdge: Suavização da borrachaShape: Tipo da borracha: Quadrada ou Circular

Obs.: A ferramenta Borracha só funciona em imagens Bitmaps.


Ferramenta Carimbo

A ferramenta Carimbo permite a cópia de uma determinada área de uma imagem em outra área dessa mesma figura.

Como usá-la: Com a ferramenta selecionada e a tecla ALT pressionada, clique na região da imagem que será o centro da cópia. Posicione o mouse na região a imagem que você deseja “colar” a cópia, clique e arraste até que a área da imagem fique como desejar.


Ferramenta Carimbo

Você pode alterar algumas características do carimbo no Inspetor de Propriedades.

Size: Tamanho do carimbo.

Edge: Suavização das extremidades da imagem “colada”.

Source Alingned: Essa opção permite que o ponteiro de origem fique móvel, ou seja, que caminhe alinhado com o carimbo. Assim , você poderá clonar várias partes da imagem.

Use Entire Document : Serão duplicados todos os objetos, sejam eles imagens Bitmap ou Gráficos Vetoriais.


Ferramenta Balde

Essa ferramenta preenche determinadas áreas de pixels com uma cor pré-definida.

Como usá-la : Com ela selecionada, escolha uma cor na caixa de cores.


Ferramenta Balde

Podem ser alteradas algumas características dessa ferramenta no Inspetor de Propriedades.

Balde : Escolhe a cor do preenchimento e ao lado entre diversas cores compostas, como por exemplo, gradientes.

Edge: Escolhe a configuração da borda acentuada (hard), suavizada (anti-alias) ou enevoada (feather)

Textura : Escolhe a textura e ao lado da mesma, a intensidade.

Tolerance : Abrangência da área de pixels.


Ferramenta Balde Degrade

Como usá-la : Para utilizar essa ferramenta, selecione a ferramenta BALDE e continue com o botão do mouse pressionando até a opção Balde Degrade for exibida.

Essa ferramenta têm a mesma função do balde que você acabou de ver. Ela trabalha com imagem em degrade e não com cores sólidas.

Para escolher a cor degrade, com a ferramenta selecionada, clique no BALDE no Inspetor de Propriedades.

Escolha as cores que irão compor o degrade, selecionando as setas, onde você poderá escolher uma das cores pré-definidas.


Ferramenta Mão

Com a ferramenta mão pode enquadrar o documento quando ele não está sendo exibido por inteiro. Com a ferramenta selecionada, clique no documento e arraste até chegar ao enquadramento desejado. Com um clique duplo na ferramenta Mão, a imagem será exibida inteiramente na janela do documento.


Ferramenta Zoom

Essa ferramenta permite aumentar ou diminuir a visualização do documento. Para aumentar o zoom , selecione a ferramenta e clique na região do documento quantas vezes forem necessárias até chegar no tamanho ideal da visualização. Pode ser aumentado em até 6400%

do tamanho original


Importando Imagens

Para importar uma imagem para o Fireworks, na barra de menu clique na guia FILE e, em seguida, em Import. Escolha a imagem que deseja e clique em abrir.

O ponteiro do mouse irá se transformar em uma moldura .Clique no documento onde desejar que o canto superior da imagem seja criado e arraste até a imagem atingir o tamanho desejado.


Modificar Documentos e Objetos

Você poderá alterar algumas configurações que compõem o layout, bem como as propriedades do documento. Para realizar essas operações, você irá trabalhar com as opções presentes na barra de menu na guia Modify, na opção Canvas.


Pixel Dimensions:(Dimensões do pixel) : Você altera as dimensões na vertical e horizontal da imagem.

Print Size:(Tamanho da impressão): Você altera da imagem para a impressão.

Constrain Proportions: Limita proporções e mantém a dimensão horizontal proporcional a vertical, ou seja, quando alterar um dos valores horizontal ou vertical, o outro será aumentado proporcionalmente

Resample Image: Dá um novo exemplo de imagem. Quando está selecionada, adicionada pixels à imagem que tiver seu tamanho alterado.

Image Size


Canvas SizeCanvas Size -Tamanho da tela: Ao clicar nessa opção abrirá a seguinte

janela:

Para alterar o tamanho da tela, coloque os novos valores e especifique se necessário, a nova unidade de medica.

Na opção Anchor o botão central fica selecionado como padrão, indicando que todos os lados da tela serão alterados Selecionando outro botão,apenas o lado da tela correspondente será alterado. A opção Current Size indica o tamanho atual da janela.


Canvas ColorCanvas Color - Cor da janela : Ao clicar nessa opção, abrirá a seguinte

janela.

White : Branco

Transparent: Transparente

Custom (Personalizada): Quando selecionar essa opção, escolha a cor desejada no quadrado que aparece abaixo, conforme figura acima


Barra Modificar

Para exibi-la na barra de menu, clique na quia Window, em seguida em Toolbars e na opção Modify

- Agrupar: Agrupar os elementos que estiverem selecionado. Depois de agrupado, os elementos estarão na mesma subcamada.

- Desagrupar: Desagrupar os elementos, fazendo com que eles se tornem independentes novamente, formando cada um a sua própria subcamada.


Barra Modificar (Continuação)

- Unir: Uni todos os elementos que estiverem selecionados. Se houver uma sobreposição de elementos, as áreas sobrepostas serão extraídas. O novo objeto terá a cor de apenas um deles.

- Dividir: Essa botão só será ativado para objetos que o comando Unir for aplicado. Dividindo os objetos que foram unidos tornando-os independentes novamente.

- Trazer para frente: O objeto selecionado passa a ser posicionado à frente dos outros.

- Avançar: Objeto selecionado avança um nível, ou seja, ele irá sobrepor o objeto que estiver acima dele.

- Recuar: O objeto selecionado retrocede um nível, ou seja, ele fica sobreposto por outros objetos.

- Enviar para Trás: Envia o objeto selecionado para trás de todos os outros do documento.


Barra Modificar (Continuação)- Alinhar: alinha o objeto de diversas formas.

- Alinhar à esquerda

- Alinhar pelo topo

- Distribuir larguras

- Centralizar eixo vertical

- Centralizar eixo horizontal

- Distribuir alturas

- Alinhar à direita

- Alinhar a base.


Barra Modificar (Continuação)

- Girar 90° SAH: Gira o objeto selecionado 90° no sentido horário.

- Girar 90° SA : Gira o objeto selecionado 90° no sentido horário.

- Virar na Horizontal: Vira o objeto no eixo horizontal, Como se estivesse olhando o objeto num espelho.

- Virar na Vertical: Vira o objeto no eixo vertical, como se você estivesse olhando o objeto de cabeça para baixo.


Camadas

As camadas dividem os objetos do documento em vários planos. Você pode separar os elementos em camadas para modificá-los e manuseá-los mais facilmente com a maior segurança.

Criar / Duplicar Camada.

Com esse botão você pode cria novas camadas. As subcamadas são criadas automaticamente quando novos objetos são inseridos no documento.

Para duplicar uma Camada,arraste até o botão Cria / Duplicar Camada, que uma camada será criada com as mesmas características da camada selecionada.


Camadas (Continuação)- Criar Máscara

Criar uma máscara para o objeto da camada.

- Nova imagem de Bitmap

Cria uma camada em modo Bitmap. Todos os objetos que forem inseridos nessa subcamada, incluindo gráficos vetoriais, serão automaticamente transformado em Bitmaps.

- Deletar Camada

Com esse botão você exclui a camada ou subcamada que estiver Selecionada.


Bloquear Camadas

Para bloquear camadas, clique no quadro localizado entre o olho e o nome da camada que um cadeado será exibido neste local. Isso indica que essa camada estará bloqueada. Quando uma camada é bloqueada, o conteúdo não poderá ser editado nem alterado. Para desbloqueá-la, basta clicar sobre o cadeado novamente


Ocultar Camada

Para ocultar uma camada clique no olho e para exibi-la clique novamente. Quando uma camada esta oculta seu conteúdo não e exibido e quando ela não está oculta seu conteúdo é exibido.


Renomear Camada

Para renomear uma camada, dê um clique duplo sobre o a camada ou subcamada que desejar renomear e digite o novo nome.

Obs.: A Camada da Web (Web Layer) é uma camada especial e sempre será exibida como primeira, sem ter seu nome alterado e excluído. Nela são inseridos objetos para atribuir interatividade ao documento.


Molduras

As molduras são semelhantes ás camadas. Em cada moldura você irá criar uma etapa da animação, sendo que cada Moldura poderá ter quantas Camadas forem necessárias. Para trabalhar com as Molduras, selecione no painel Frames and History e a guia Frames.

- Técnica Onio Skin

- Ciclo de animação (GIF). - Nova / Duplicar camada

- Distribuir em Molduras. - Excluir Moldura


Técnica de Onion Skin

A técnica Onion Skin (Casa de Cebola) permite que os quadros anteriores e posteriores sejam visualizados com uma certa transparência

Para alterar as configurações: Clique no botão Técnica de Onion Skin ( em vermelho).

No Onion Skinning – Sem Onion Skin.

Show Next Frame – Mostrar próximo Quadro.

Before and After – Antes e Depois

Show All Frames – Mostrar todos os Quadros.

Custom – Personalizar...

Multi-Frame Editing – Edição de múltiplos Quadros.


Técnica de Onion Skin (Continuação)

Clicando em Custom... A seguinte será exibida onde você irá alterar as configurações da ferramenta.

Show

Before Current Frame: Antes do Quadrado atual.Opacity: Opacidade.After Current Frame: Depois do Quadrado atual.Opacity: Opacidade.Multi-Frame Editing: Edição de múltiplos Quadros.


Exportar

Para Exportar clique na barra de menu no guia File e na opção Export.

Ao clicar na opção Export Aparecerá a esta janela, escolha o formato que desejar nesta lista.

Obs.: O Fireworks proporciona uma ótima manipulação da imagem para que se possa criar sites sem maiores problemas.


Fatias e Pontos Ativos

As Fatias e Pontos ativos São elementos da Web, não existindo como imagens, mas sim como códigos HTML. Os Pontos ativos e Fatias, quando criados, ficam armazenadas na Camada da Web.

Criação de Fatias

É possível criar fatias retangulares ou em forma de polígonos. Para definir com qual forma você ira trabalhar, selecione a ferramenta Fatias e continue pressionando o botão do mouse até as opções serem exibidas.


Criando Pontos Ativos

É possível criar Pontos Ativos, me retângulos, círculos ou Polígonos.

Para criar os pontos ativos basta selecionar a forma desejada. Selecione a ferramenta Pontos Ativos e continue pressionando o botão do mouse até as opções serem exibidas.

apresentação de fireworks

Documents