1

Adobe Fireworks CS5

Profº Elton Rodrigo

2

Sumário

Introdução ........................................................................................................................ 4

Capítulo 1 – Área de Trabalho do Adobe Fireworks CS5 ...................................................... 5

1.1 – Barra de Ferramentas ................................................................................................ 6

1.1.2 - Painéis ...................................................................................................................... 6

1.1.3 - Gráficos de outros aplicativos ................................................................................. 6

1.1.4 – Arquivos do Photoshop .......................................................................................... 6

1.1.5- Abertura de arquivos do FreeHand, Illustrator ou CorelDRAW ............................... 7

Capítulo 2 – Caixa de ferramentas ..................................................................................... 8

2.1 - Área de Trabalho ........................................................................................................ 9

2.2 – Visualização ............................................................................................................... 9

Capítulo 3 – Réguas e Linhas ............................................................................................ 10

3.1 - Réguas ...................................................................................................................... 10

3.2 – Linhas Guias ............................................................................................................. 10

3.3 – Grades ...................................................................................................................... 10

3.4 – Modificando a área da tela ...................................................................................... 11

Capítulo 4 – Ferramentas vetoriais .................................................................................. 12

4.1 – Linha ......................................................................................................................... 12

4.2 – Canetas .................................................................................................................... 12

4.3 – Ferramenta Retângulo e suas divisões .................................................................... 13

4.4 – Texto ........................................................................................................................ 15

4.5 – Ferramentas de transformação ............................................................................... 16

Capítulo 5 – Trabalhando com formas .............................................................................. 17

5.1 – Alinhamento e distribuição ..................................................................................... 17

5.2 – Grupos ..................................................................................................................... 17

5.3 – Empilhamento de objetos ....................................................................................... 17

5.4 – Transformação de Caminhos ................................................................................... 18

Capítulo 6 – Linhas e Preenchimentos .............................................................................. 19

6.1 - Linhas ........................................................................................................................ 19

6.2 - Preenchimentos........................................................................................................ 20

Capítulo 7 - Filtros ........................................................................................................... 21

3

Capítulo 8 – Painel Estilos ................................................................................................ 23

Capítulo 9 - Camadas ....................................................................................................... 24

Capítulo 10 - Símbolos ..................................................................................................... 27

10.1 – Criando Animações ................................................................................................ 27

Capítulo 11 – Bitmaps ...................................................................................................... 31

11.1– Mascarando Bitmaps .............................................................................................. 31

11.2– Ferramentas de desfoque ...................................................................................... 32

11.3– Criando um esfumaçamento .................................................................................. 33

11.4– Rubber Stamp Tool ................................................................................................ 35

Capítulo 12 – Aplicações para Web .................................................................................. 36

12.1 – Criando um layout ................................................................................................. 36

12.2 – Exportando uma arte fatiada................................................................................. 37

12.3– Menus Pop-UP ........................................................................................................ 38

12.4 – Galeria de imagens ................................................................................................ 40

12.5 – Mapeamento de imagens ...................................................................................... 44

4

Introdução O Adobe Fireworks CS5 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 Adobe

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 frequentemente 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, pode-se 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 e PNG, 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.

Serão mostrados os recursos do Fireworks para criar imagens incorporando elementos de bitmap e

vetoriais, utilizando uma caixa de ferramentas interessante cheia de efeitos especiais. A criação de

botões, adição de efeitos de rollover e criação de animação em GIF e PNG. Será ensinado 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 é uma ferramenta versátil e útil para facilitar seus esforços para design da Web e torná-

los mais agradáveis.

5

Capítulo 1 – Área de Trabalho do Adobe Fireworks CS5

Ao abrir o Fireworks será mostrada uma tela que inclui o painel Ferramentas, o Inspetor de propriedades, menus e outros painéis. Neste momento poderá abrir um documento existente (open), criar um novo documento (Create New) ou acessar ao Fireworks Exchange, cujas ferramentas Adobe permitem que incorporem novos recursos, chamados de extensões. Já a opção Exchange vai permitir essa incorporação com uma barra de ferramentas, uma caixa de ferramentas na lateral esquerda e painéis na lateral direita, sendo que no rodapé será exibida a caixa de propriedades.

Figura 1 – Janela principal do Dreamweaver CS5

Ao clicar sobre o botão “Fireworks Document (PNG)” abrirá uma janela, a qual dará informações de tamanho de tela (largura – W e altura – H), resolução a ser trabalhada e cor da tela.

Figura 2 – Janela New Document

6

1.1 – Barra de Ferramentas Nesta barra, há várias ferramentas, algumas das quais estão organizadas em grupos. Como exemplo, há um grupo que é representado por um pequeno triângulo no canto inferior direito da ferramenta. Na imagem abaixo ao manter-se pressionado o mouse sobre a ferramenta “CROP” (recortar) serão apresentadas as opções de ferramentas. Os atalhos para acesso a ferramenta estão dentro dos parênteses, no caso, representada pela letra C. Ao pressionar uma vez será disponibilizada a ferramenta “Crop”, que ao ser pressionada novamente mudará para a ferramenta “Export Area tool”.

Figura 3 – Pressionando um botão da barra de ferramentas

1.1.2 - Painéis Painéis são controles flutuantes que auxiliam editar diferentes aspectos de um objeto selecionado, permitindo trabalhar em molduras, camadas, símbolos, exemplos de cor e muito mais. É possível criar um espaço de trabalho personalizado manipulando janelas de Documento e painéis, bem como salvar espaços de trabalho e alternar entre eles. Destaca-se que cada painel pode ser arrastado, portanto, pode-se agrupar controles em arranjos personalizados.

Figura 4 – Painel Estilos

1.1.3 - Gráficos de outros aplicativos O Fireworks possibilita abrir arquivos de outros aplicativos ou formatos de arquivo, inclusive arquivos do Adobe Photoshop, Adobe Illustrator, descompactado do CorelDRAW e GIF animados. Ao abrir um formato de arquivo diferente do PNG (Formato padrão do Fireworks) usando File > Open será criado um novo documento do Fireworks. Entretanto, se o novo documento for um arquivo PNG, o documento original permanecerá inalterado.

1.1.4 – Arquivos do Photoshop Ao abrir um arquivo do Photoshop no Fireworks, as camadas de texto permanecerão totalmente editáveis e as camadas do Photoshop serão convertidas para objetos do Fireworks. Há a possibilidade de modificar as configurações de importação do Photoshop para que camadas do Photoshop sejam convertidas para molduras do Fireworks e camadas de texto para imagens bitmap.

7

1.1.5- Abertura de arquivos do FreeHand, Illustrator ou CorelDRAW Gráficos de vetor geram imagens usando linhas e curvas (vetores) que incluem informações de cor e posição. Um desenho vetorial pode ser aberto do FreeHand, Illustrator, ou CorelDRAW e, em seguida, ser aplicado edições do Fireworks, tais como, traços de pincel e preenchimentos texturizados ao desenho. O Fireworks pode importar arquivos CDR descompactados criados com o CorelDRAW X4 ou X5 para o Windows, mas não pode abrir ou importar arquivos CMX ou arquivos CDR compactados. Entretanto, o CorelDRAW suporta um conjunto de recursos diferente do Fireworks, cujas alterações ocorrem na importação de arquivos CDR:

O conteúdo da página principal é repetido em cada moldura do Fireworks; Apenas os dois objetos finais de uma mistura do CorelDRAW são importados; Os objetos são agrupados após a importação; Dimensões convertem em objetos vetoriais; O texto básico é importado; Cores são convertidas para RGB.

8

Capítulo 2 – Caixa de ferramentas Na Caixa de Ferramentas encontra-se uma hierarquia de divisão das ferramentas, sendo que cada seção possui suas particularidades. Temos as seguintes seções:

Select (Selecionar): Possui as ferramentas de seleção, subdivididas em: Selecionar atrás (Select behind tool); Selecionar secundário (flecha branca); Dimensionar com as divisões Inclinar e distorcer; Selecionar para exportação.

Bitmap: São ferramentas que trabalham as imagens com variações complexas de cores, tons ou formas, como fotos, gravuras ou imagens digitalizadas ou escaneadas, cujas ferramentas são subdivididas em:

Marquee Tool que se subdivide com a Oval Marquee Tool; Lasso Tool subdividida ainda em Poligon Lasso Tool; Magic Wand Tool (Varinha mágica); Lápis Pencil Tool; Brush Tool (Pincel); Erase Tool (borracha), ferramentas de desfoque e suavização (Blur tool); Carimbo (Ruber Stamp Tool) que tem como subdivisão a ferramenta

Replace Color Tool (permite substituir a cor), Red Eye Removal Tool (permite remoção de olhos vermelhos de imagens).

Vector (Vetorial): Trabalha os desenhos em linhas com formas geométricas e fórmulas matemáticas. Gráficos e ilustrações a mão livre, imagens em 2D e 3D. Sua ferramenta é subdividida em:

Linha (line tool); Caneta (pen tool); Retângulo (rectangle tool); Ferramenta texto (Text tool); Ferramentas de transformação (Freeform tool); Ferramenta de fatiamento (Knife tool) que aparece desabilitada, a

qual se habilitará ao desenhar uma forma e for preciso cortá-la.

Web: Ferramentas destinadas ao preparo de arte para web: Ferramentas de Hotspot (Rectangle Hotspot tool); Ferramentas de fatiamento (Slice tool); Ferramenta para ocultar Hotspot; Ferramenta para mostrar Hotspot.

9

Colors (Cores): Ferramentas de preenchimentos e traços. Conta-gotas (Eyedropper tool) permite capturar a cor de qualquer

local dentro da área útil de trabalho, inclusive capturar cores de bitmaps;

Balde de tinta (Paint Bucket tool) permite preencher objetos, observando que, caso o objeto não esteja selecionado ele vai preencher todo o palco com a cor escolhida. Sendo assim, no menu suspenso está a ferramenta de preenchimento gradiente;

Ferramenta cor de contorno e cor de preenchimento, ressaltando que na última linha está a ferramenta que volta às cores padrões do programa contorno preto e preenchimento branco (Set Default Stroke / Fill Colors);

Na opção do meio há a ferramenta que permite deixar sem preenchimento e ou contorno (No Stroker or Fill);

A ferramenta Swap Stroke / Fill Colors permite inverter as cores de contorno e preenchimento.

View (Visualização): Ferramentas de visualização do trabalho.

Ressalta-se que algumas ferramentas poderão ser configuradas de acordo com a necessidade do usuário. Para isso basta dar um duplo clique na mesma.

2.1 - Área de Trabalho A área de trabalho do Fireworks apresenta o painel de ferramentas, o Painel de Propriedades, menus e outros painéis. O painel de Ferramentas, à esquerda da tela contém categorias rotuladas, incluindo grupos de ferramentas bitmap, vetor e da web. Por padrão, o Painel de propriedades aparece ao longo da parte inferior do documento e exibe inicialmente as propriedades do documento. Em seguida, ele se transforma para exibir as propriedades de uma ferramenta recém-selecionada ou de um objeto atualmente selecionado à medida que trabalha no documento. Os painéis estão inicialmente encaixados em grupos ao longo da lateral direita da tela, sendo que a janela do documento aparece no centro do programa.

2.2 – Visualização A visualização exibe o tamanho total, o tempo de download estimado e o formato de arquivo de um documento. O tempo de download estimado é a média do tempo necessário para o download estimado de todas as fatias e estados em um modem de 56k. As exibições de 2 a 4 páginas combinadas mostram informações adicionais que variam dependendo do tipo de arquivo selecionado.

Figura 5 – Barra de visualização

10

Capítulo 3 – Réguas e Linhas O Fireworks possui a maioria dos recursos dos softwares de computação gráfica e as grades, réguas e linhas guias fariam parte desse processo para facilitar o trabalho. Estas opções estão disponíveis através do menu View.

3.1 - Réguas Por se tratar de um programa focado em WEB as suas medidas serão em pixels.

Figura 6 – Réguas

3.2 – Linhas Guias Guias são linhas que podem ser arrastadas até a tela de desenho do documento a partir das réguas. É possível usar guias para marcar partes importantes de um documento, como as margens e o ponto central do documento. Para criar linhas guias em um documento, é preciso clicar sobre a régua e arrastar a linha para dentro da área de desenho. Através do menu View é possível congelar as linhas guias e ocultá-las da tela (Menu View > Guides).

3.3 – Grades A grade exibe um sistema de linhas horizontais e verticais na tela de desenho para posicionamento preciso. Para exibir as grades é preciso clicar no menu View > Grid. É possível controlar as suas propriedades através do menu View > Grid > Edit Grid alterando a cor e suas dimensões.

Figura 7 – Propriedades de grades

11

3.4 – Modificando a área da tela É possível fazer alterações no documento em que está trabalhando como, redimensionar, cortar e girar. Esses procedimentos podem ser feitos através do menu Modify > Canvas.

Figura 8 – Menu de modificação da área da tela

12

Capítulo 4 – Ferramentas vetoriais Uma das maiores vantagens do Adobe Fireworks é ser possível trabalhar com a criação vetorial e quando salvar o documento é gravado como um bitmap (PNG). As ferramentas de desenho do Fireworks são semelhantes aos demais softwares de desenho vetorial.

4.1 – Linha Permite desenhar linhas retas. Deve-se clicar na tela e arrastar para definir a dimensão da linha. Se arrastar o mouse com a tecla Shift pressionada, as linhas serão sempre horizontais, verticais ou diagonais em 45º. Ao clicar na ferramenta linha, pode-se observar que na barra de propriedades no rodapé do programa as opções da barra de ferramentas modificam-se para as configurações da ferramenta linha.

Figura 9 – Propriedades da ferramenta linha

4.2 – Canetas A Pen tool (Ferramenta caneta) é uma ferramenta que permite trabalhar com caminhos retos e curvos. Ela possui mais duas subdivisões que são as ferramentas Vector Path Tool e Redraw Path Tool que também funcionam como pinceis de canetas. A ferramenta caneta é umas das mais complexas ferramentas de desenho, mas o domínio dela vai permitir uma maior qualidade em seus desenhos.

Para acertar a forma desenhada com a caneta deve-se utilizar a ferramenta Subselection tool ela permite alterar os pontos (nós) do desenho feito com a ferramenta.

Figura 10 – Desenho feito com a Pen tool

No exemplo abaixo observa-se que o desenho ultrapassa as dimensões da área do palco, portanto não é preciso que todo o desenho fique dentro da área útil.

13

Figura 11 – Traços ultrapassam o palco, mas só é exibido o que está dentro dele

4.3 – Ferramenta Retângulo e suas divisões Através da ferramenta retângulo é possível desenhar retângulos, simples, com cantos arredondados, elipses, polígonos e estrelas. É possível desenhar quadrados com a ferramenta quadrados pressionando a tecla SHIFT. Ao finalizar o desenho é possível fazer alterações através da pela barra de propriedades que permite editar a largura (W) e altura (H) e o posicionamento X e Y do objeto. É possível, também, alterar as cores de preenchimento e contorno. Abaixo das opções de contorno existe a opção “Rectangle Roundness”, ela permite arredondar os cantos do retângulo desenhado. Na terceira coluna tem as opções de mesclagem e filtros a serem aplicados ao retângulo.

Figura 12 – Menu da ferramenta retângulo

14

Figura 13 – Propriedades da ferramenta Retângulo

Pode-se também alterar a forma de um objeto, dimensionando ele pelas alças de dimensão (também conhecidos como “nó”).

Figura 14 – Alças de dimensionamento em um retângulo

Ao clicar nas alças de dimensão com ferramenta Subselecion será perguntado se o usuário deseja desagrupar o objeto e o transformar em vetor. Clicando em OK será possível transformar o objeto alterando sua forma.

Figura 15 – Caixa de mensagem perguntando ao usuário o desagrupamento do retângulo

Figura 16 – Retângulo alterado

Pode-se também alterar o objeto através do grupo de ferramentas Scale Tool.

- Permite escalar a imagem, se o mouse é posicionado um pouco acima das alças de dimensão, o ponteiro do mouse mudará para o formato de alça de giro, isso vai permitir rotacionar seu objeto.

- Permite deixar o objeto em perspectiva inclinando-o.

- Permite a distorção livre de um objeto.

15

As opções de alteração do objeto que foram explicadas com a ferramenta retângulo se aplicam a todas as demais ferramentas de desenhos do Fireworks. Elipse: Permite desenhar elipses e circunferências. Para que uma circunferência fique perfeita é preciso desenha-la pressionando a tecla SHIFT. Polígonos: Permite desenhar formas poligonais e estrelas. Através da barra de propriedades é possível escolher entre Para escolher entre polígonos e estrelas e a quantidade de lados, deve-se definir na barra de propriedades antes de fazer o desenho.

Figura 17 – Propriedades da ferramenta elipse

Ferramentas Interativas: O segundo grupo de ferramentas, possuem ferramentas que facilitam a criação formas para uma arte, todas elas possuem uma característica que são alças auxiliares para mudança da forma que tem a forma de pequenos losangos amarelos, essas alças permitem a mudança de forma do objeto.

Figura 18 – Formas com alças auxiliares

4.4 – Texto A ferramenta texto é uma das mais simples de ser manipulada, pois é praticamente igual a qualquer outro programa, com a vantagem que se pode terminar de digitar a palavra e redimensioná-la.

Figura 19 – Propriedades da ferramenta texto

Para poder alterar o texto escrito, basta apenas dar um duplo clique sobre o texto, na barra de propriedades onde se podem definir as dimensões da caixa de nosso texto, o posicionamento X e Y. Na segunda coluna, pode-se definir o tipo da fonte, o tamanho da fonte, cor, negrito, itálico e sublinhado. Na segunda linha dessa coluna tem Kerning (permite acertar o espaçamento entre as letras de uma palavra, é necessário selecionar as letras que precisam de mais ou menos espaços entre elas), Leading (permite aumentar o espaçamento vertical entre as linhas), orientação do texto, e alinhamentos. Na terceira linha tem as endentações de parágrafos, cor de contorno do texto e

16

forma de suavização de serrilhado das fontes. Na quarta linha tem escala horizontal e espaço entre parágrafos. Na terceira coluna temos as opções de filtros que veremos posteriormente.

4.5 – Ferramentas de transformação Permitem transformar a arte, são as ferramentas Freeform Tool e Reshape Área Tool.

Figura 20 – Menu da ferramenta transformação

Ambas possuem configurações que podem ser alteradas na barra de propriedades. Ao utilizá-las em suas formas é preciso se certificar que o objeto está desagrupado se for um texto, é preciso clicar no menu Text > Convert to Path para convertê-lo em caminhos. Desagrupar também o objeto, é preciso clicar com o botão direito e depois Ungroup. As outras ferramentas que fazem parte deste grupo são utilizadas quando se necessitam adicionar ou subtrair pontos de sua forma.

Figura 21 – Texto criado no Fireworks

17

Capítulo 5 – Trabalhando com formas Ao trabalhar com mais de um objeto será necessário à manipulação de objetos.

5.1 – Alinhamento e distribuição É necessário que ao trabalhar com desenhos deve-se ter cuidado com o posicionamento dos mesmos em um trabalho, e para isso pode-se fazer uso das opções de alinhamento e distribuição. Para utilizar os botões da barra de ferramentas, é preciso clicar no menu Modify ou na paleta Align.

Figura 22 – Paleta Align

5.2 – Grupos Quando se trabalha com muitos objetos é aconselhável agrupar os que no momento não serão utilizados e que são partes do mesmo projeto, é possível utilizar isso na barra de propriedades ou o menu Modify. É possível também quebrar um objeto agrupado, através do menu Modify, utilizando a opção Ungroup. Caso precise editar um objeto agrupado, é necessário clicar sobre o objeto com a tecla ALT pressionada e observar que apenas o objeto clicado ficará selecionado.

5.3 – Empilhamento de objetos Quando os objetos estão uns sobre os outros, é possível mudar a ordem de empilhamento dos mesmos, através do Menu Modify > Arrange.

Figura 23 – Menu Arrange

As opções são: Bring to Front: Avança para o nível mais alto; Bring Forward: Avança um nível; Send Backward: Recua um nível; Send to Back: Recua para o nível mais baixo.

18

5.4 – Transformação de Caminhos É preciso trabalhar com a transformação de caminhos quando há dois ou mais objetos. Para isso é preciso selecionar os objetos e clicar no menu Modify > Combine Paths...

Union: Unifica os caminhos selecionados. Intersect: Deixa visível apenas à parte onde os objetos estão interseccionados. Punch: O objeto superior corta o objeto inferior. Crop: Semelhante à intersecção, mas deixa visível a cor do objeto de fundo.

Normal Union Intersect Punch Crop

Figura 24 – Exemplo de transformação de caminhos

19

Capítulo 6 – Linhas e Preenchimentos Ao desenhar no Adobe Fireworks observa-se na caixa de ferramentas que há a possibilidade de se trabalhar com cores de preenchimentos e cores de opções de traços.

6.1 - Linhas A opção com uma linha vermelha na diagonal significa sem cor. Ao desenhar o objeto na tela pode-se observar na janela de propriedades que ele permite que se mude o traço.

Figura 25 – Opção de alteração de traço

As opções são: Cor do Traço: Mostrada pelas cores hexadecimais, qual a sua direção em relação ao caminho e se quer preenchimento acima do traço. A categoria de seu traço.

Figura 26 – Menu de alteração de traço

É possível também alterar o sombreamento, o tipo de textura e o arredondamento.

Figura 27 – Objeto com traço alterado

20

6.2 - Preenchimentos A opção com uma linha vermelha na diagonal significa sem preenchimento, as outras opções são: Cor: Tem cores sólidas, Gradientes, Cores WEB e Padrões. Com certeza a parte mais interessante destas cores são os gradientes e padrões, que podem ser Linear, Radial, Elipse, Retangular, Cone, Starburst, Barras, Ripples, Waves, Satin e Folds. Tem ainda a possibilidade de se modificar manualmente a gradiente, bem definir as suas cores.

Figura 28 – Alteração de preenchimento de objeto

Pode-se ainda aplicar desfoques e texturas junto aos preenchimentos.

Figura 29 – Aplicação de desfoque em objeto

Observa-se que na imagem acima existe uma linha com um quadrado em uma das extremidades e uma circunferência na outra esta barra permite definir como é aplicado o gradiente em sua forma.

21

Capítulo 7 - Filtros Na barra de propriedades, além dos traços e contornos, existe ainda uma terceira divisão onde se podem trabalhar os modos de combinação entre os elementos, grau de transparência e filtros a serem aplicados a eles.

Figura 30 – Paleta de efeitos

Para aplicar um filtro em um objeto, basta clicar sobre o botão com o sinal de mais (+) e escolher o filtro desejado. Os filtros são:

Adjust Color: Permite trabalhar o ajuste de cores de um objeto, as opções dentro desse filtro são:

Auto Levels: Permite definir os níveis de cores da imagem; Brightness / Contrast: Permite ajustar o brilho e contraste de um objeto ou imagem;

Figura 31 – Caixa de diálogo Brilho/Contraste

Color Fill: Permite preencher um objeto com outra cor, entre as suas propriedades estão à transparência e o Blend Mode (Modo de Transparência);

Curves: Permite trabalhar nas curvas de cores de um objeto;

Figura 32 – Caixa de diálogo Curvas

22

Hue Saturation: Permite trabalhar a Matiz da cor (HUE) e a saturação da mesma (Saturation), marcando-se a opção “colorize” será permitido trabalhar no objeto alterando-se a cor;

Invert: Permite inverter as cores de um objeto (negativo); Levels: Permite trabalhar manualmente os níveis de cores.

Figura 33 – Caixa de diálogo Níveis

Os filtros aplicados podem ser ocultados clicando sobre o símbolo em forma de (V) e o mesmo ficará em forma de um (x) vermelho.

Figura 34 – Filtros aplicados à um objeto

Para excluir qualquer filtro aplicado, basta apenas clicar no nome do filtro e clicar sobre o botão com o sinal de menos (-).

Bevel and Emboss: Permite aplicar Chanfro e entalhe nos objetos;

Blur: Permite aplicar desfoque nas imagens. As principais opções são: Motion Blur: Desfoque de movimento; Gaussian Blur: Desfoque Gaussiano; Radial Blur: Desfoque radial; Zoom Blur: Desfoque de Zoom.

Noise: aplica um ruído em um objeto / imagem;

Other: Permite transformar um objeto em Alpha;

Shadow and Glow: Permite aplicar ao objeto uma sombra e/ou brilho. As opções são:

Drop Shadow: Permite aplicar uma sombra simples em um objeto;

Glow: Aplica um brilho em um objeto;

Inner Glow: Permite aplicar um brilho interno ao objeto;

Inner Shadow: Aplica uma sombra interna ao objeto;

Solid Shadow: Aplica uma sombra sólida, pode ser utilizada para simular objetos tridimensionais.

23

Capítulo 8 – Painel Estilos O painel Styles armazena algum estilo criado e o reaproveita em um projeto sempre que for necessário. Para isso, basta desenhar um objeto, aplicar seu efeitos e com o objeto selecionado, clicar no botão New Style.

Figura 35 – Painel estilos

Observa-se que na criação do estilo é possível definir o que deseja ficar disponível na criação dos estilos, quando se tratar de um estilo para texto tem também os atributos de texto. Após definir o nome do estilos e suas propriedades, basta clicar em OK. Cada vez que precisar aplicar esse estilo em outro objeto basta desenhar um objeto e clicar no estilo dentro da paleta Styles.

Figura 36 – Paleta Estilos

24

Capítulo 9 - Camadas Ao desenhar um objeto no Fireworks uma camada é criada automaticamente para acomodar o objeto. Isso permite uma melhor organização e a possibilidade de se ocultar objetos temporariamente em um trabalho.

Figura 37 – Paleta Camadas

As camadas funcionam para empilhar a ordem dos objetos, sempre um objeto de uma camada superior ficará sobre a inferior. A paleta camadas possui uma pasta chamada Web Layer que é definida para trabalhar com a possibilidade de utilização de recursos para Web. Acima das opções de camadas tem a opção Opacity (Opacidade), em 100% ela está totalmente preenchida. No exemplo abaixo foi criado uma elipse sobre uma imagem e a opacidade foi alterada para 50%.

Figura 38 – O uso de camadas

Ao lado da opacidade existem os modos de mesclagem entra as camadas (Blend Mode), ou seja, a camada de cima pode ter as suas características alteradas, criando assim um efeito como se fossem lentes. Para aplicar um modo de mesclagem, é preciso deixar o objeto que servirá de lente na camada superior e aplicar um modo de mistura. Abaixo alguns modos de mistura.

25

Average Darken Multiply

Color Burn Inverse Color Burn Soft Burn

Diference Linear Light Luminosity

Erase Subtract Dissolve

26

Junto à paleta Layers no canto superior direito tem o botão Options, através desse botão pode-se criar novas camadas, unir camadas, duplicar camadas, ocultar / mostrar camadas, bloquear / desbloquear camadas e definir o tamanho das miniaturas das camadas.

Figura 39 – Menu de opções da paleta de camadas

27

Capítulo 10 - Símbolos Qualquer arte criada no Fireworks pode se transformada em símbolos. Os símbolos a serem criados são: Gráficos, Botões e Animações. Para criar um símbolo, é preciso desenhar uma arte formata-la e depois, clicar com o botão direito sobre ela e escolher Convert to Symbol, ou selecionar a arte e clicar no botão novo símbolo da paleta Library, ou pressionar F8.

Figura 40 – Caixa de converter em símbolo

Ao converter o objeto em botão, observa-se que ele aparece na biblioteca de símbolos, e na área de desenho ele define a área clicável do botão. No meio do botão é mostrado um circulo branco, se clicar nesse símbolo, pode-se adicionar comandos ao botão. Para poder trabalhar no botão, é preciso dar um duplo clique sobre ele. Ele modifica a área de trabalho para a tela de edição do botão, onde tem inicialmente a opção UP, que será a forma do botão quando mostrado na tela. A guia Over (Esta é a forma que o botão terá quando o mouse rolar sobre ele). Para que se possa copiar o botão anterior para as modificações escolha Copy Up Graphic. Aplique um efeito diferente ao botão. Para a opção Down, apenas copie o mesmo estilo, repita o processo para a opção Over While Down (Formato do botão enquanto pressionado). Em Active Área, deve-se tomar um cuidado muito grande com a área de clique do botão representado pelo retângulo verde, ele deve estar bem acertado sobre o botão. Na barra de propriedades, deve preencher os dados para onde vai o link deste botão.

Figura 41 – Propriedades de símbolo

Na opção Link, é onde se digita o link para onde direcionará o link, a opção ALT, é um texto que aparece quando se coloca o mouse sobre a imagem a opção Target é para qual janela ou quadro se destina o seu Link. Pressionando F12 pode ser visualizado o botão no Navegador.

10.1 – Criando Animações Um dos símbolos que pode-se criar é uma animação do tipo GIF Animado.

28

O exemplo abaixo é um banner de 600x100 pixels.

Figura 42 – Desenho do primeiro quadro da animação

Será uma animação de Quatro banners com um tempo de 3 segundos de uma para o outro. Para que possa trabalhar com animação é necessário utilizar a paleta “States”. O padrão é de 7 segundos, para alterar basta dar um duplo clique no número 7 para alterar o valor 3.

Figura 43 – Paleta Frames

Feito isso, é necessário copiar todos os elementos da área de desenho. Na paleta States clicar no botão New / Duplicate State. Tem agora dois states para a animação. Voltando ao state 1, é preciso selecioare todos os objetos, os copiá-los. Clique no state 2 e cole-os, será necessário acertar a posição dos objetos.

Figura 44 – Arte do State 2

29

Figura 45 – Arte do State 3

Figura 46 – Arte do State 4

Para poder testar a animação, pode-se clicar na barra de navegação no rodapé do Fireworks.

Em animações mais complexas, é possível utilizar uma técnica de animação chamada “Onion Skin”, que é a possibilidade de ver os quadros anteriores e posteriores em relação ao quadro

selecionado. O botão que permite a utilização da técnica de Onion Skin é o primeiro na paleta States. Utilizando o botão “Onion Skin” e escolhendo Show AllStates, será mostrado todos os states. Se clicar no state 2 será mostrado somente os quadros 1 e 2. Para transformar a animação em um GIF Animado é necessário exportar a arte. Para isso é necessário clicar no Menu File > Export Wizard. Na primeira etapa é preciso clicar em Continue. Na segunda etapa é necessário informar como devem ser exportados os quadros, escolhendo “Animated GIF” e clicando em Continue. Na próxima etapa será exibida a tela de configurações de exportação.

30

Figura 47 – Janela Image Preview

Na opção Options (que abre automaticamente) tem a opção Format, que permite exportar a arte em todos os formatos gráficos compatíveis com a WEB. Palette: nessa opção pode-se definir o tipo de paleta de cores. Pode-se deixar na opção Adaptive que é padrão. Loss: Essa opção trabalha o serrilhamento de imagens. Na caixa ao lado que o exemplo mostra “128”, é a quantidade máxima de cores a ser aplicada na arte. Abaixo tem a opção “Alpha Transparency” é a opção que permite que imagens gifs possuam também fundo transparente. Na parte da direita da tela, temos a visualização do banner e a possibilidade de animar o banner. Ainda na tela de exportação tem a guia “File” que permite o redimensionamento do banner. A terceira guia “Animation” permite trabalhar os quadros da animação. Para finalizar e criar o gif animado, é preciso clicar no botão “Export”, e definir o nome e o local do gif animado e clicar em export.

31

Capítulo 11 – Bitmaps O Modo de edição de Bitmaps do Adobe Fireworks permite trabalhar as imagens para uso em Web sites. Ao se trabalhar com bitmaps, é importante salientar que as alterações de bitmap só poderão ser desfeitas, através de o comando desfazer CTRL+Z, ou através da paleta History. Caso os danos da imagem ultrapassem a quantidade máxima do comando desfazer ou do histórico, é possível retornar a ultima versão salva do objeto através do comando Reverter (Menu File > Revert).

11.1– Mascarando Bitmaps No exemplo abaixo foi aberto uma imagem qualquer no Adobe Fireworks e desenhado uma forma por cima da imagem.

Figura 48 – Círculo desenhado sobre a imagem

Para mascarar bitmaps é necessário recortar o objeto, clicar na imagem de fundo e depois clicar no Menu Modify > Mask > Paste as Mask.

Figura 49 – Efeito máscara aplicado à imagem

32

Pode-se ainda aplicar efeitos do Adobe Fireworks na máscara.

Figura 50 – Filtros aplicados à imagem

11.2– Ferramentas de desfoque As ferramentas de desfoque permitem que possa trabalhar em uma imagem. As ferramentas são Blur, Sharpen, Dodge, Burn e Smudge.

Figura 51 – Menu da ferramenta desfoque

As propriedades da ferramenta podem ser alteradas pela barra de propriedades.

Figura 52 – Propriedades das ferramentas desfoque

A opção Size, permite mudar o tamanho do pincel que vai aplicar a ferramenta. A opção Edge é referente à suavidade da ferramenta. A opção Shape permite mudar a ponta do pincel. Em Intensity controla-se a pressão do Pincel. O uso dessas ferramentas é cumulativo, se passar várias vezes sobre o mesmo local ele vai reaplicar o efeito.

33

Figura 53 – Imagem original

Figura 54 – Efeitos de desfoque aplicado à imagem

11.3– Criando um esfumaçamento Para criar um esfumaçamento é necessário abrir uma imagem qualquer e desenhar ao redor dela um retângulo de seleção.

34

Figura 55 – Seleção retangular desenhado na imagem

Após isso é preciso clicar no Menu Select e escolher Feather, e definir a quantidade de pixels que deseja esfumaçar.

Figura 56 – Definindo a difusão da imagem

Para finalizar é preciso clicar novamente no menu Select e escolher Select Inverse, depois pressionar DELETE.

Figura 57 – Resultado final de esfumaçamento

35

11.4– Rubber Stamp Tool Também conhecida como carimbo, ela permite que se copie uma parte de uma imagem para outra parte facilmente. Basta posicionar o mouse onde deseja capturar, pressionar a tecla ALT e clicar. Depois é só ir copiando.

Figura 58 – Uso da ferramenta Rubber Stamp Toll

36

Capítulo 12 – Aplicações para Web Nesse capítulo será demonstrado como criar aplicações para web utilizando os principais recursos do Fireworks. Para aplicações web, é possível criar layouts, botões, símbolos, menus pop-up, rollovers, etc...

12.1 – Criando um layout

Figura 59 – Exemplo de layout feito no fireworks

A figura acima exibe um layout criado pelo Fireworks que poderia ser exportado para uma página web desta forma, mas isso iria gerar uma imagem muito pesada e que demoraria ser carregada pelo browser. Um dos recursos que o Fireworks tem é o fatiamento de uma arte

para layout com a ferramenta Slice tool que está na caixa de ferramentas.

37

Figura 60 – Layout fatiado com a ferramenta Slice

Na barra de propriedades, pode-se nomear a fatia, definir as suas medidas, atribuir links, etc...

Figura 61 – Propriedades da ferramenta Slice

12.2 – Exportando uma arte fatiada Após definir quais seriam as divisões do layout, é necessário fazer sua exportação clicando no menu File > Export Wizard. Na janela que abrirá é preciso apenas clicar sobre o botão OK. Será aberta uma segunda janela pedindo para definir qual o tipo de aplicativo será exportado o Layout. Para esse exemplo foi marcada a opção Dreamweaver.

Figura 62 – Caixa de diálogo de exportação para outro aplicativo

38

Será exibida uma tela de aviso sobre utilizar GIF ou JPEG em páginas HTML, será necessário clicar em Exit. A próxima janela exibirá o desenho do layout.

Figura 63 – Janela Image Preview

Na janela de salvar o objeto, no campo de tipo de exportação será preciso marcar a opção HTML and Images. Terminado o processo será criada na pasta, vários arquivos e imagens, sendo cada um deles uma parte do layout.

12.3– Menus Pop-UP Um dos maiores recursos do Fireworks é a possibilidade se criar menus PoP-UP. Para exemplificar, é necessário criar um retângulo que será à base do menu, depois criar um slice sobre o retângulo, clicar com o botão direito e escolher menu Pop-UP.

39

Figura 64 – Janela de criação de Pop-UP

Na janela que abrirá será necessário definir qual o texto dos botões no menu, os links e os destinos se houverem. Na guia Appearance, deverá ser definido qual será a aparência dos botões.

Figura 65 – Guia Appearance

Na guia Advanced permite definir as propriedades de células e bordas do Menu. E na guia Position, permite definir como será a posição do Menu em relação ao botão principal.

40

Figura 66 – Guia Position

12.4 – Galeria de imagens Para criar uma galeria de imagens, é aconselhável preparar todas as imagens. Primeiro, é preciso criar uma pasta chamada galeria ou com outro nome ao critério do projeto. Será trabalhado com 5 (cinco imagens) e definir para elas uma largura de 600 px e 400 px de altura. Pode-se acertar o tamanho das imagens pelo próprio Fireworks. É necessário abrir a primeira

imagem (Menu File > Open). Depois clicar na ferramenta CROP . Na barra de Propriedades pode-se acertar o tamanho do corte.

Figura 67 – Propriedades de imagens (Área de dimensão de imagem)

Essa ferramenta permite cortar a imagem, mas ela ocasiona perca de qualidade. Caso precise minimizar essa perca, é preciso diminuir o tamanho da imagem (Menu Modify > Canvas > Image Size) e depois faça o corte. Após definir o tamanho da imagem, basta dar um duplo clique em uma das alças de dimensão para confirmar o mesmo (Pode ser usada também a tecla ENTER do teclado). Clicando no Menu File > Export será exportada a imagem para a pasta criada anteriormente. É preciso repetir o processo para as demais imagens. No exemplo será iniciado um novo arquivo com 760x420 pixels. Será defina uma cor de fundo para projeto.

41

Após esse processo é preciso criar um Slice de 600x400.

Figura 68 – Fatia 600X400 pixels criada no site

Figura 69 – Propriedades da fatia

Observando que foi atribuido a ele o nome de “repositorio”, embora o próprio Fireworks já houvesse atribuído um nome, é importante esse nome, pois para ser feito com que as miniaturas que serão adicionadas a galeria funcionem chamando as imagens maiores, será gerado um código em Java script. Vamos agora criar as miniaturas. Menu File > Import, para importar a primeira imagem e defini-la com uma largura de 100 pixels, com a tecla SHIFT pressionada é necessário diminuir a imagem, as mesmas ficarão com 100x66. Caso haja muitas imagens será necessário retrabalhar a galeria posteriormente diretamente pelo código fonte, ou por seu programa de autoria HTML, como por exemplo o Adobe Dreamweaver. Com auxilio da paleta Align (Menu Window > Align), pode-se alinhar e distribuir as miniaturas.

42

Figura 70 – Alinhamento das miniaturas

Agora é necessário selecionar todas as imagens, clique com o botão direito do mouse e clicar em Insert Rectangular Slice, como há mais de um item selecionado será perguntado se deseja criar um único slice ou múltiplos, clique na opção Multiple.

Figura 71 – Inserção de fatia retangular

É preciso renomear cada um dos slices para nomes fáceis de serem identificados posteriormente como “imagem01”, “imagem02” e assim por diante. Selecionar a primeira imagem e depois arrastar o botão de behavior (botão branco) até o slice repositorio. Abre-se uma janela de swap Image, clique no botão More Options.

43

Figura 72 – Caixa de diálogo Swap Image

É preciso marcar a opção Image File e direcionar para a imagem. O processo deve ser repetido para todas as imagens.

Figura 73 – Miniaturas linkadas ao repositório

Observa-se que o Fireworks mostra linhas direcionando das miniaturas para o slice repositorio. Pressionando a tecla F12 poder-se visualizar a animação no navegador.

44

Figura 74 – Galeria sendo executada no navegador

12.5 – Mapeamento de imagens No Fireworks há uma opção de criar de imagens áreas clicáveis para que venham a ser mapas de imagens. Junto ao botão de slice existem as opções de Hotspot.

Figura 75 – Menu da ferramenta Hotspot

As opções são, retangular, elíptica e poligonal.

45

Figura 76 – Galeria sendo executada no navegador

Ao terminar de se fazer o desenho é possível modificar as propriedades do mapa de imagens. Definindo link, nome e destino. É importante também dar um nome ao Hotspot, pois pode-se ter mais de um grupo de mapa de imagens em uma única página.

Figura 78 – Propriedades da ferramenta Hotspot