Fireworks_CS3_Komedi

Fone: (0xx19) 3234-4864 E-mail: [email protected]

Site: www.komedi.com.br FWK1.0

K O M E D I

Copyright © by Editora Komedi, 2008

Dados para Catalogação

Rimoli, Monica Alvarez

Adobe Fireworks CS3

Campinas:Editora Komedi, 2008.

220 p.

Adobe Fireworks CS3 é marca registrada da Adobe, Inc.

Nenhuma parte desta publicação poderá ser reproduzida, armazenada ou transmitida de qualquer modo, ou por qualquer meio, seja mecânico, eletrônico,

fotocópia, gravação ou outros, sem prévia autorização escrita da Editora Komedi.

ISBN: 978-85-7582-464-1

Editor: Sérgio Vale Gerente de Vendas: Sandro Celestino de Araújo

Diagramação: Monica Alvarez Rimoli Capa: Luciano de Angelo Roncolato

Todos os direitos reservados na forma da lei pela: Editora Komedi

Rua Álvares Machado, 460, 3o andar 13013-070, Centro, Campinas, SP

Tel/fax: (19) 3234.4864 www.komedi.com.br

e-mail: [email protected]

2008

Impresso no Brasil

Índice

www.komedi.com.br III

1.� O AMBIENTE ADOBE FIREWORKS CS3.....................................................9�

1.1� INSTALAÇÃO DO FIREWORKS..................................................................................9�1.2� A INICIALIZAÇÃO DE FIREWORKS .........................................................................10�1.3� CARACTERÍSTICAS DAS IMAGENS .........................................................................11�

1.3.2� Tamanho e Resolução de Imagens .............................................................12�1.3.3� Formatos de Arquivo ..................................................................................13�

1.4� A ÁREA DE TRABALHO .........................................................................................14�1.4.1� Janela do Documento..................................................................................15�1.4.2� Barra de Menus...........................................................................................16�1.4.3� Painel Tools – Ferramentas ........................................................................16�1.4.4� Property Inspector – Inspetor de Propriedades...........................................19�1.4.5� Panels – Painéis ..........................................................................................20�

1.5� FECHAMENTO DO PROGRAMA...............................................................................22�1.6� EXERCÍCIOS...........................................................................................................22�

2.� GERENCIAMENTO DE ARQUIVOS............................................................23�

2.1� CRIAÇÃO DE DOCUMENTOS ..................................................................................23�2.2� VISUALIZAÇÃO DE DOCUMENTOS .........................................................................24�2.3� VISUALIZAÇÃO NO BROWSER – NAVEGADOR.......................................................27�2.4� SALVAR ARQUIVOS DO FIREWORKS .....................................................................27�2.5� ABERTURA E IMPORTAÇÃO DE UM ARQUIVO........................................................30�

2.5.1� Importação de Arquivo PNG......................................................................32�2.5.2� Importação de Digitalizador ou Câmera Digital ........................................33�

2.6� EXERCÍCIOS...........................................................................................................34�

3.� TRABALHO COM DOCUMENTOS..............................................................35�

3.1� EXIBIÇÃO DE UM DOCUMENTO .............................................................................35�3.1.1� Ferramentas Zoom e Hand – Zoom e Mão.................................................35�3.1.2� Modos de Exibição .....................................................................................37�3.1.3� Múltiplas Exibições de Documento............................................................37�

3.2� ALTERAÇÕES DA TELA – CANVAS ........................................................................38�3.2.1� Alteração de Tamanho, Cor e Resolução da Tela ......................................38�3.2.2� Nova Amostragem X Ajuste da Resolução ................................................41�3.2.3� Giro da Tela ................................................................................................42�3.2.4� Ajuste da Tela .............................................................................................42�3.2.5� Corte de um Documento.............................................................................43�3.2.6� Aparando a Tela..........................................................................................43�

3.3� RÉGUAS, GUIAS E GRADES ...................................................................................44�3.3.1� Rulers – Réguas ..........................................................................................44�3.3.2� Guides – Guias............................................................................................44�3.3.3� Grid – Grades..............................................................................................46�

Adobe Fireworks CS3

IV www.komedi.com.br

3.4� EXERCÍCIOS.......................................................................................................... 46�

4.� CORES ............................................................................................................... 49�

4.1� SEÇÃO COLORS DO PAINEL TOOLS ...................................................................... 49�4.2� PAINÉIS DE CORES................................................................................................ 50�

4.2.1� Painel Swatches ......................................................................................... 51�4.2.2� Painel Color Mixer – Misturador de Cores ............................................... 52�4.2.3� Painel Info – Informações.......................................................................... 54�

4.3� EXERCÍCIOS.......................................................................................................... 55�

5.� DESENHO DE OBJETOS VETORIAIS........................................................ 57�

5.1� FERRAMENTA LINE – LINHA ................................................................................ 57�5.2� FERRAMENTAS RECTANGLE E ELLIPSE ................................................................ 57�5.3� FERRAMENTA POLYGON – POLÍGONO.................................................................. 59�5.4� DESENHANDO COM AUTOFORMAS....................................................................... 60�5.5� FERRAMENTA PEN – CANETA .............................................................................. 63�5.6� FERRAMENTA VECTOR PATH ............................................................................... 64�5.7� EXERCÍCIOS.......................................................................................................... 64�

6.� DESENHO DE BITMAPS................................................................................ 67�

6.1� CRIAÇÃO DE UM OBJETO BITMAP ........................................................................ 67�6.2� FERRAMENTA PENCIL - LÁPIS .............................................................................. 67�6.3� FERRAMENTA BRUSH – PINCEL............................................................................ 68�6.4� EXERCÍCIOS.......................................................................................................... 69�

7.� TRAÇO E PREENCHIMENTO...................................................................... 71�

7.1� TRAÇO.................................................................................................................. 71�7.2� PREENCHIMENTO.................................................................................................. 73�

7.2.1� Preenchimentos Gradient e Pattern............................................................ 74�7.3� EXERCÍCIOS.......................................................................................................... 76�

8.� SELEÇÕES........................................................................................................ 79�

8.1� SELEÇÃO DE UM OBJETO...................................................................................... 79�8.1.1� Ferramenta Pointer – Indicador ................................................................. 79�8.1.2� Ferramenta Subselection – Sub-seleção .................................................... 80�8.1.3� Ferramenta Selection Behind – Seleção Oculta ........................................ 81�8.1.4� Informações de seleção no inspetor Properties.......................................... 81�8.1.5� Modificação de uma Seleção ..................................................................... 82�

8.2� SELEÇÃO DE BITMAP............................................................................................ 83�8.2.1� Opções das Ferramentas de Seleção de Bitmap ........................................ 83�8.2.2� Criação de Moldura de Seleção de Pixel ................................................... 84�8.2.3� Ferramenta Polygon Lasso – Laço Poligonal ............................................ 85�

Índice

www.komedi.com.br V

8.2.4� Ferramenta Magic Wand – Varinha Mágica ..............................................85�8.3� CORTE DE UM BITMAP SELECIONADO...................................................................86�8.4� AJUSTES DE UMA MOLDURA DE SELEÇÃO .............................................................87�

8.4.1� Enevoamento de uma Seleção de Pixel ......................................................89�8.4.2� Expansão ou Retração de uma Moldura.....................................................90�8.4.3� Seleção de Área em Torno de Moldura Existente ......................................91�8.4.4� Suavização da Borda de uma Moldura.......................................................92�

8.5� PINTURA DE UM OBJETO BITMAP..........................................................................93�8.6� FERRAMENTA ERASER – BORRACHA ....................................................................94�8.7� FERRAMENTA EYEDROPPER – CONTA-GOTAS ......................................................94�8.8� RETOQUE DE UM BITMAP......................................................................................95�

8.8.1� Ferramentas Blur e Sharpen .......................................................................95�8.8.2� Ferramenta Smudge – Manchar..................................................................96�8.8.3� Ferramentas Dodge e Burn .........................................................................96�8.8.4� Ferramentas Stamp – Carimbo ...................................................................97�

8.9� TRANSFORMAÇÃO E DISTORÇÃO DE SELEÇÕES ..................................................100�8.10� ORGANIZAÇÃO DE UM OBJETO.......................................................................103�

8.10.1� Empilhamento de um Objeto ...............................................................103�8.10.2� Alinhamento de um Objeto..................................................................104�

8.11� EXERCÍCIOS....................................................................................................105�

9.� CAMADAS, MASCARAMENTO E MISTURA ..........................................107�

9.1� TRABALHANDO COM LAYERS – CAMADAS.........................................................107�9.1.1� O Painel Layers – Camadas......................................................................107�9.1.2� Ativação de uma Camada.........................................................................108�9.1.3� Adição e Remoção de Camadas ...............................................................108�9.1.4� Exibição de Camadas................................................................................110�9.1.5� Organização de Camadas..........................................................................110�9.1.6� Mesclagem no Painel Layers....................................................................111�9.1.7� Proteção de Camadas e Objetos ...............................................................111�9.1.8� Compartilhamento de Camadas em Animações.......................................112�9.1.9� Web Layer – Camada da Web..................................................................112�

9.2� MASCARAMENTO DE IMAGENS ...........................................................................112�9.2.1� Máscaras de Bitmap..................................................................................113�

9.3� MISTURA E TRANSPARÊNCIA...............................................................................113�9.3.1� Modos de Mistura.....................................................................................113�9.3.2� Uso do Modo Difference – Diferença de Cores .......................................114�9.3.3� Ajuste da Opacidade e Aplicação de uma Mistura...................................115�

9.4� EXERCÍCIOS.........................................................................................................116�

10.� TEXTOS............................................................................................................119�

10.1� DIGITAÇÃO DE TEXTO....................................................................................119�

Adobe Fireworks CS3

VI www.komedi.com.br

10.2� MOVIMENTO DO BLOCO DE TEXTO ............................................................... 120�10.3� EDIÇÃO DE TEXTO......................................................................................... 121�

10.3.1� Fonte, Tamanho e Estilo do Texto...................................................... 121�10.3.2� Cor do Texto ....................................................................................... 122�10.3.3� Kerning................................................................................................ 123�10.3.4� Leading – Entrelinhamento................................................................. 123�10.3.5� Orientação do Texto............................................................................ 124�10.3.6� Alinhamento de Texto......................................................................... 125�10.3.7� Paragraph Indent – Recuo do Texto ................................................... 125�10.3.8� Espaçamento de Parágrafo.................................................................. 126�10.3.9� Suavização das Bordas de Texto ........................................................ 126�10.3.10� Expansão e Contração da Largura de Caractere ................................. 126�10.3.11� Deslocamento da Linha de Base ......................................................... 127�

10.4� TRAÇOS, PREENCHIMENTOS E EFEITOS ......................................................... 127�10.4.1� Anexando um Traçado ao Texto......................................................... 128�10.4.2� Transformação de Texto ..................................................................... 130�

10.5� IMPORTAÇÃO DE TEXTO................................................................................ 131�10.6� VERIFICAÇÃO ORTOGRÁFICA........................................................................ 131�10.7� EXERCÍCIOS................................................................................................... 133�

11.� EFEITOS AO VIVO ....................................................................................... 135�

11.1� LIVE EFFECTS – APLICAÇÃO DE EFEITOS ...................................................... 135�11.1.1� Efeito Bevel – Bordas Chanfradas...................................................... 136�11.1.2� Efeito Emboss – Relevo...................................................................... 137�11.1.3� Sombra, Sombra Interna e Brilho ....................................................... 138�11.1.4� Brightness/Contrast – Brilho e Contraste ........................................... 139�11.1.5� Hue/Saturation – Matiz e Saturação ................................................... 140�11.1.6� Inversão de um Valor de Cor .............................................................. 141�11.1.7� Embaçamento de uma Imagem........................................................... 141�11.1.8� Aguçamento de uma Imagem ............................................................. 145�

11.2� EDIÇÃO DE EFEITOS AO VIVO ........................................................................ 146�11.3� EXERCÍCIOS................................................................................................... 147�

11.3.1� Criando uma esfera 3D ....................................................................... 147�

12.� ESTILOS, SÍMBOLOS E URLS ................................................................... 149�

12.1� PAINEL STYLES – USO DE ESTILOS................................................................ 149�12.1.1� Criação e Exclusão de Estilos ............................................................. 150�

12.2� SYMBOLS – SÍMBOLOS .................................................................................. 151�12.2.1� Criação de Símbolos ........................................................................... 151�

12.3� USO DO RECURSO 9-SLICE SCALING .............................................................. 153�12.4� .TRABALHO COM URLS................................................................................. 155�

12.4.1� Criação de Bibliotecas de URLs......................................................... 155�

Índice

www.komedi.com.br VII

12.4.2� Exportação e Importação de URLs......................................................157�12.5� EXERCÍCIOS....................................................................................................157�

13.� TRABALHANDO COM PÁGINAS ..............................................................159�

13.1� ADIÇÃO E REMOÇÃO DE PÁGINAS...................................................................159�13.2� EDIÇÃO DE PÁGINAS ......................................................................................160�13.3� EXPORTAÇÃO DE PÁGINAS PARA HTML .......................................................160�13.4� EXERCÍCIOS....................................................................................................163�

14.� FATIAS, ROLLOVERS E PONTOS ATIVOS ............................................165�

14.1� CRIAÇÃO E EDIÇÃO DE SLICES – FATIAS........................................................165�14.2� ROLLOVERS – TROCA DE IMAGENS ................................................................167�

14.2.1� Adição de interatividade a Fatias.........................................................167�14.2.2� Remoção de um rollover......................................................................171�14.2.3� O Painel Behaviors – Comportamentos...............................................171�14.2.4� Preparação de Fatias para exportação..................................................172�14.2.5� Configurações de exportação...............................................................173�

14.3� HOTSPOTS E IMAGE MAPS..............................................................................175�14.3.1� Criação de Pontos Ativos.....................................................................175�14.3.2� Edição de Pontos Ativos......................................................................176�14.3.3� Preparação de Pontos Ativos para exportação.....................................176�14.3.4� Criação de Mapas de Imagem..............................................................176�

14.4� EXERCÍCIOS....................................................................................................177�

15.� BOTÕES E BARRA DE NAVEGAÇÃO.......................................................181�

15.1� CRIAÇÃO DE SÍMBOLOS DE BOTÃO ................................................................181�15.1.1� Estados do Botão .................................................................................181�15.1.2� Button Editor – Editor de Botões.........................................................182�15.1.3� Inserção de Botões em um Documento ...............................................185�15.1.4� Edição de símbolos de botão ...............................................................186�15.1.5� Edição de propriedades em nível de símbolo ......................................186�15.1.6� Edição de propriedades em nível de ocorrência ..................................187�15.1.7� Propriedades de Botão Interativo.........................................................187�

15.2� CRIAÇÃO DE NAV BARS .................................................................................189�15.3� EXERCÍCIOS....................................................................................................191�

16.� MENUS POP-UP..............................................................................................193�

16.1� POP-UP MENU EDITOR ...................................................................................193�16.2� MENU POP-UP BÁSICO ...................................................................................193�

16.2.1� Criação de Submenus ..........................................................................195�16.2.2� Posicionamento de Menus e Submenus Pop-up ..................................196�

16.3� EXPORTAÇÃO DE MENUS POP-UP...................................................................197�

Adobe Fireworks CS3

VIII www.komedi.com.br

16.4� EXERCÍCIOS................................................................................................... 197�

17.� ANIMAÇÕES .................................................................................................. 201�

17.1� CONSTRUÇÃO DE UMA ANIMAÇÃO................................................................ 201�17.1.1� Como Trabalhar com um Símbolo de Animação ............................... 201�17.1.2� Criação de um Símbolo de Animação ................................................ 202�17.1.3� Como visualizar uma animação.......................................................... 204�17.1.4� Edição de um Símbolo de Animação.................................................. 204�

17.2� COMO TRABALHAR COM FRAMES ................................................................. 205�17.2.1� Configuração do Retardo de uma Moldura......................................... 205�17.2.2� Como Mostrar e Ocultar Molduras..................................................... 206�17.2.3� Nomeação de Molduras de Animação ................................................ 206�17.2.4� Como Adicionar, Mover, Copiar e Excluir Molduras ........................ 207�17.2.5� Como Mover Objetos Selecionados no Painel Frames....................... 208�

17.3� INTERPOLAÇÃO ............................................................................................. 208�17.3.1� Exportação de uma Animação ............................................................ 209�

17.4� EXERCÍCIOS................................................................................................... 210�

18.� OTIMIZAÇÃO E EXPORTAÇÃO............................................................... 213�

18.1� EXPORTAÇÃO DE UMA IMAGEM ÚNICA.......................................................... 213�18.2� EXPORTAÇÃO DE UM DOCUMENTO FATIADO................................................. 214�18.3� EXPORTAÇÃO DE FATIAS SELECIONADAS ...................................................... 214�18.4� EXPORTAÇÃO DE UMA ANIMAÇÃO ................................................................ 215�18.5� EXPORTAÇÃO DE FRAMES OU LAYERS........................................................... 216

18.6� EXPORTAÇÃO DE ÁREA DE DOCUMENTO ...................................................... 216�18.7� EXPORTAÇÃO DE HTML............................................................................... 217�18.8� BOTÃO QUICK EXPORT ................................................................................. 218�

O Ambiente Adobe Fireworks CS3

www.komedi.com.br 9

1. O Ambiente Adobe Fireworks CS3

Adobe Fireworks CS3 é a solução definitiva para produção e projetos gráficos profissionais na Web. É o primeiro ambiente de produção que trata e resolve os desafios especiais que se apresentam aos desenvolvedores e designers gráficos da Web.

Você pode usar fireworks para criar, editar, e animar imagens da Web, para adicionar interatividade avançada e para otimizar imagens em um ambiente profissional. Nos fireworks, você pode criar e editar gráficos bitmap e de vetor em uma única aplicação. Tudo é editável, a qualquer momento. E você pode automatizar o fluxo de trabalho para enfrentar as demandas de atualizações e alterações de projeto.

1.1 Instalação do Fireworks Antes de instalar fireworks, certifique-se de que seu computador está equipado com o seguinte hardware e software:

Processador Intel® Pentium® 4, Intel Centrino®, Intel Xeon®, Intel Core™ Duo (ou compatível) ;

Microsoft® Windows® XP com Service Pack 2 ou Windows Vista™ Home Premium, Business, Ultimate, ou Enterprise;

512MB de memória RAM (1GB recomendado);

1 GB de espaço disponível no HD (espaço adicional pode ser necessário para a instalação);

Monitor com resolução de 1.024 x 768 com placa de vídeo de 16-bits;

Drive de DVD-ROM;

Software QuickTime 7 necessário para utilização dos recursos de mídia;

Conexão com Internet para ativação do produto;

Para instalar Fireworks:

1. Insira o CD do Fireworks na unidade de CD-ROM de seu computador. O programa de instalação inicia-se automaticamente.

2. Siga as instruções de instalação. O programa de instalação solicitará as informações necessárias.

3. Ao final da instalação, se solicitado, reinicie seu computador.

Adobe Fireworks CS3

10 www.komedi.com.br

1.2 A Inicialização de Fireworks Existem duas maneiras de você iniciar Fireworks, através do botão “Iniciar” ou do ícone de atalho para o Fireworks, na “Área de Trabalho” do Windows.

Para iniciar o Fireworks através do botão “Iniciar”:

1. Na “Barra de Tarefas” do Windows, clique no botão “Iniciar” ( ).

2. Clique no comando “Todos os Programas”, em seguida, clique no subcomando “Adobe Fireworks CS3”.

Figura 1 – Inicialização do Fireworks CS3 pelo menu “Iniciar”

Para carregar o Fireworks através do ícone de atalho:

1. Na “Área de Trabalho”, do Windows, dê um duplo-clique sobre o ícone do “Adobe Fireworks CS3”, Figura 2. O Fireworks será carregado.

Figura 2 – Ícone de atalho do Fireworks CS3


www.komedi.com.br 11

1.3 Características das Imagens Fireworks é uma aplicação versátil para criar, editar e otimizar imagens para Web. Você pode criar e editar imagens de bitmap e de vetor, efeitos da Web, como “Rollovers” e “Pop-up Menus”, diminuindo o tempo de realização de tarefas repetitivas.

Os computadores exibem as imagens no formato vetorial ou de bitmap. Compreender a diferença entre os dois formatos pode ajudar você a trabalhar de modo mais eficiente.

Figura 3 – Imagem vetorial Figura 4 – Imagem de bitmap

1.3.1.1 Imagens Vetoriais

As imagens vetoriais descrevem as imagens através de linhas e curvas, chamadas vetores, que também possuem propriedades de cor e posição. Por exemplo, uma elipse é descrita por pontos pelos quais passam as linhas, criando a forma do contorno. A cor da elipse é determinada pela cor do contorno e pela cor da área delimitada pelo contorno.

Ao editar uma imagem vetorial, você modifica as propriedades das retas e curvas que descrevem a forma da imagem. É possível mover, redimensionar, alterar a forma e a cor de uma imagem vetorial sem modificar a qualidade da sua aparência. As imagens vetoriais independem da resolução, o que significa que podem ser exibidos em dispositivos de saída de várias resoluções sem perda de qualidade.

São mais utilizadas para desenhos de formas geométricas e ilustrações artísticas, sendo desenvolvidas por aplicativos como o Adobe Illustrator, CorelDraw e Adobe Freehand.

1.3.1.2 Imagens de Bitmap (Mapa de Pontos)��

�

As imagens de bitmap descrevem imagens através de pontos coloridos, chamados pixels, dispostos em uma grade. Por exemplo, a imagem de uma elipse é descrita pelo local específico e pelo valor da cor de cada pixel contido na grade, gerando uma imagem muito parecida com um mosaico. São utilizadas para representar imagens fotográficas.

Adobe Fireworks CS3


Ao editar uma imagem de bitmap, você modifica pixels em vez de linhas e curvas. As imagens de bitmap dependem da resolução porque os dados que descrevem a imagem estão fixos em uma grade de um determinado tamanho. A edição de uma imagem de bitmap pode alterar a qualidade de sua aparência. A exibição de uma imagem de bitmap em dispositivos de saída com diferentes resoluções também afeta a qualidade de sua aparência.

O Fireworks é um aplicativo para edição de imagens digitais que trabalha tanto com arquivos de bitmap como com arquivos vetoriais. Conforme você for conhecendo o Fireworks, entenderá melhor como as imagens funcionam, quais suas limitações e como trabalhar com elas.

1.3.2 Tamanho e Resolução de Imagens Para produzir imagens de alta qualidade, é importante entender como os dados de pixel das imagens são medidos e exibidos.

1.3.2.1 Dimensões em Pixel

O número de pixels presentes na altura e largura de uma imagem bitmap. O tamanho da exibição da imagem na tela é determinado pelas dimensões em pixels da imagem, além do tamanho e da configuração do monitor.

Ao preparar uma imagem para exibição on-line (por exemplo, uma página da Web que será visualizada em diferentes monitores), as dimensões em pixels se tornam muito importantes.

1.3.2.2 Resolução da Imagem

O número de pixels exibido por unidade de comprimento impresso em uma imagem, geralmente medido em pixels por polegada (dots per inch = dpi).

A resolução da imagem e as dimensões em pixels são interdependentes. A quantidade de detalhes em uma imagem depende de suas dimensões em pixels, enquanto a resolução da imagem controla o espaço de impressão dos pixels. Portanto, a resolução deve ser adequada à saída, ou seja, se a impressora tem resolução de 600 dpi, a imagem/arquivo deve ter no máximo 600 dpi. Trabalhar com resolução alta consome tempo, memória RAM e espaço em disco.



1.3.2.3 Tamanho do Arquivo

O tamanho digital de uma imagem é medido em kilobytes (K), megabytes (MB) ou gigabytes (GB). O tamanho do arquivo é proporcional às dimensões em pixels da imagem. Conseqüentemente, a resolução da imagem torna-se um ajuste entre a qualidade da imagem e o tamanho do arquivo.

Outro fator que influencia no tamanho do arquivo é seu formato – devido à variação nos métodos de compactação utilizados por formatos de arquivo GIF, JPEG e PNG, o tamanho dos arquivos pode variar consideravelmente para as mesmas dimensões em pixels. Da mesma maneira, a profundidade de bits de cores e o número de camadas e canais em uma imagem afetam o tamanho do arquivo.

1.3.3 Formatos 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 compressão diferentes. Além disso, somente certos tipos de arquivos gráficos são aceitos pela maior parte dos navegadores da Web. Finalmente, 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:

Formato Graphics Interchange Format (GIF): utilizado para exibir elementos gráficos e imagens de cores indexadas, além de imagens de documentos HTML. Contêm um máximo de 256 cores e 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 imagens como desenhos, logotipos, imagens com áreas transparentes e animações.

Formato Joint Photographic Experts Group (JPEG): utilizado especificamente para

imagens fotográficas ou com cores de alta densidade. Ao contrário do formato GIF, o formato JPEG mantém todas as informações de cores em uma imagem RGB, mas faz a compactação do tamanho do arquivo descartando dados de maneira seletiva. Suporta milhões de cores (24 bits) e é o melhor para fotografias digitalizadas, imagens que usam texturas, imagens com transição de cores de dégradé e qualquer imagem que exija mais de 256 cores.

Formato Portable Network Graphic (PNG): formato gráfico versátil para a Web. Porém, nem todos os navegadores da Web podem visualizar gráficos PNG, formato de arquivo nativo do Fireworks.

Formato Wireless Bitmap (WBMP): 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, protocolo de aplicações sem fio).

Adobe Fireworks CS3


Formato Tagged Image File Format (TIFF): usado para armazenar imagens de 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.

Formato de arquivo gráfico da Microsoft Windows (BMP): arquivo comum usado para exibir imagens de bitmap. BMPs são usados primariamente no sistema operacional Windows. Muitos aplicativos podem importar imagens BMP.

Formato desenvolvido pela Apple Computer (PICT): normalmente usado no sistema

operacional Macintosh. A maioria dos aplicativos para Mac pode importar imagens PICT.

1.4 A Área de Trabalho Ao ser carregado, o ambiente de trabalho do Fireworks se apresenta como mostrado na Figura 5, já com vários elementos ativos: o painel “Tools”, no lado esquerdo da tela, o inspetor “Properties”, na parte inferior, a “Barra de Menus”, no topo, além de um conjunto de painéis, a princípio encaixados em grupos do lado direito da tela. A janela do documento será aberta no centro do aplicativo.

Figura 5 – “Área de Trabalho” Fireworks



1.4.1 Janela do Documento A tela de trabalho apresenta-se vazia na inicialização. Quando você cria um novo documento, será criado um arquivo do tipo PNG (Portable Network Graphic), formato padrão do Fireworks.

Para criar um novo documento:

1. No menu “File”, clique no comando “New”. A caixa de diálogo “New Document” será aberta.

Figura 6 – Caixa de diálogo “New Document”

2. Na caixa de texto “Width”, digite o valor 400, para a largura da imagem.

3. Na caixa de lista ao lado, selecione a unidade de medida “Pixels”.

4. Na caixa de texto “Height”, digite o valor 300, para a altura da imagem.

5. Na caixa de lista ao lado, selecione a unidade de medida “Pixels”.

6. Na caixa de texto “Resolution”, digite o valor 72 e na caixa de lista ao lado, selecione a unidade de medida “Pixels/Inch”.

7. Na caixa de opção “Canvas Color”, selecione a opção “White”.

8. Clique no botão “OK”. A janela de documento é aberta, como mostrado na Figura 7, com o documento “Untitled-1.png”.

Adobe Fireworks CS3


Figura 7 – Janela de Documento

1.4.2 Barra de Menus A “Barra de Menus”, mostrada na Figura 8, apresenta os comandos para gerenciamento, edição, exibição, seleção e modificação de arquivos, inserção e formatação de textos, aplicação de efeitos, abertura e fechamento de painéis. Ao longo do trabalho, a “Barra de Menus” será utilizada, com a descrição de seus elementos.

Figura 8 – Barra de Menus

1.4.3 Painel Tools – Ferramentas O painel “Tools” é o local onde você encontrará as ferramentas para selecionar, criar e editar diversos itens gráficos, bem como objetos da Web.

Nesta versão, não é necessário alternar entre os modos bitmap e vetorial, ou seja, uma vez escolhida uma ferramenta, o programa fará a aplicação da ferramenta da maneira apropriada.

Descrição das categorias, suas ferramentas e grupos de ferramentas (da esquerda para a direita e de cima para baixo):



Categoria “Select”

Ferramentas “Pointer” e “Select Behind”;

Ferramenta “Subselection”;

Ferramentas “Scale”; “Skew” e “Distort”;

Ferramentas “Crop” e “Export Area”.

Categoria “Bitmap”

Ferramentas “Marquee” e “Oval Marquee”;

Ferramenta “Lasso" e “Polygon Lasso";

Ferramenta “Magic Wand”;

Ferramenta “Brush”;

Ferramenta “Pencil”;

Ferramenta “Eraser”;

Ferramentas “Blur”; “Sharpen”; “Dodge”; “Burn” e “Smudge”;

Ferramentas “Rubber Stamp”; “Replace Color” e “Red-eye Removal”;

Categoria “Vector”

Ferramenta “Line”;

Ferramentas “Pen”, “Vector” e “Redraw Path”;

Ferramentas “Rectangle”, “Ellipse” e “Polygon”; Conjunto de Autoformas: “Arrow”, “Beveled Rectangle”, “Chanfrer Rectangle”, “Connector Line”, “Doughnut”, “L-Shape”, “Pie”, “Rounded Rectangle”, “Smart Polygon”, “Spiral” e “Star”.

Ferramenta “Text”;

Ferramentas “Freedom”, “Reshape Area”, “Path Scrubber +” e “Path Scrubber –”;

Ferramenta “Knife”.

Categoria “Web”

Ferramentas “Rectangular Hotspot”, “Circle Hotspot” e “Polygon Hotspot”;

Ferramentas “Slice” e “Polygon Slice”;

Ferramenta “Hide Slices and Hotspots”;

Ferramenta “Show Slices and Hotspots”.

Adobe Fireworks CS3


Categoria “Colors”

“Stroke Color”;

“Fill Color”;

“Default Colors”;

“No Stroke or Fill”;

“Swap Colors”.

Categoria “View”:

“Standard Screen mode”;

“Full Screen with Menus mode”;

“Full Screen mode”;

Ferramenta “Hand”;

Ferramenta “Zoom”.

O painel “Tools” poderá ser exibido ou ocultado através do menu “Window”.

Para exibir o painel “Tools”:

1. No menu “Window”, clique no comando “Tools”. Uma marca de seleção indica que o item está ativo, como mostrado na Figura 9.

Figura 9 – Marca de seleção

do painel “Tools”

Para ocultar o painel “Tools”:

1. No menu “Window”, clique no comando “Tools”, para desmarcar a seleção.

Para selecionar uma ferramenta no painel “Tools”:

2. No painel “Tools”, clique no ícone da ferramenta desejada. A ferramenta será selecionada e as opções da ferramenta aparecerão no inspetor “Properties”.



Para selecionar uma ferramenta em um grupo de ferramentas:

Figura 10 – Grupo de Ferramentas

3. No painel “Tools”, clique e mantenha pressionado o botão do mouse no ícone de uma ferramenta que apresente o triângulo no canto inferior direito.

4. No menu apresentado, arraste o ponteiro para realçar a ferramenta desejada.

1.4.4 Property Inspector – Inspetor de Propriedades

Para exibir o inspetor “Properties”:

1. No menu “Window”, clique no comando “Properties”, para torná-lo ativo. O inspetor “Properties” será exibido, Figura 11.

Figura 11 – Inspetor “Properties” reduzido

Para ocultar o inspetor “Properties”:

1. No menu “Window”, clique no comando “Properties”, para cancelar a seleção.

O inspetor “Properties” exibe duas ou quatro fileiras de propriedades.

Para visualizar todas as propriedades:

1. Clique na seta expansora no canto inferior direito ( ). Ele será expandido.

Figura 12 – Inspetor “Properties” expandido

Adobe Fireworks CS3


Para reduzir todas as propriedades:

1. Clique na seta redutora no canto inferior direito ( ). Ele será reduzido.

1.4.5 Panels – Painéis “Panels” são controles flutuantes que facilitam a edição de objetos ou elementos selecionados no documento. Os painéis permitem trabalhar em molduras, camadas, símbolos, amostras de cor, e muito mais.

Os seguintes painéis são agrupados por padrão:

− “Styles”, “URL”, “Library” e “Shapes” – grupo de painéis denominado “Assets”. − “Mixer” e “Swatches” – grupo de painéis denominado “Colors”. − “Pages”, “Layers”, “Frames” e “History” – grupo de painéis denominado “Frames

and History”.

Os painéis “Info”, “Behaviors”, “Find” não estão agrupados por padrão, mas você pode agrupá-los livremente.

“Info” – fornece informações sobre as dimensões de objetos selecionados e as coordenadas exatas do ponteiro à medida que é movido na tela.

“Behaviors” – gerencia comportamentos, determinando o que os pontos ativos e as fatias devem fazer em resposta ao movimento do mouse.

“Find” – permite pesquisar e substituir elementos em um documento ou vários documentos, tais como texto, URLs, fontes e cores.

Principais painéis e suas funções:



“Optimize” – permite gerenciar as configurações que controlam o tamanho de um objeto e o tipo de arquivo e trabalhar com a paleta de cores do arquivo ou objeto a ser exportado.

“Align” – contem controles de alinhamento e distribuição de objetos na tela.

“Pages” – Este item é apresentado junto com o painel “Layers” e é uma das novidades na questão de gerenciamento de projetos.

“Layers” – organiza a estrutura de um documento e possui opções para criar, excluir e manipular camadas.

“Frames” – organiza a estrutura de um documento e possui opções para criar, excluir e manipular molduras e criar animações.

“History” – lista os comandos recentes usados, que podem ser rapidamente desfeitos ou refeitos.

“Styles” – permite armazenar e reutilizar combinações de características de objeto ou selecionar um estilo padrão.

“Library” – contém símbolos gráficos, símbolos de botão e símbolos de animação. É possível arrastar, com facilidade, as ocorrências desses símbolos do painel “Library” para o seu documento.

“URL” – permite criar bibliotecas que contêm os URLS usados com mais freqüência.

“Shapes” – contem “Auto Shapes” não disponíveis no painel “Tools”.

“Mixer” e “Swatches” – gerenciam a paleta de cores do documento atual.

“Symbol Properties” – Local central onde você pode controlar as propriedades dos símbolos gráficos inteligentes.

“Auto Shape Properties” – Fornece controle numérico preciso sobre Auto Shapes. Após a inserção de uma Auto Shape, você pode utilizar este painel para alterar suas propriedades.

Para abrir um painel:

1. No menu “Window”, clique no nome do painel. Uma marca de seleção ao lado do nome de um painel no menu “Window” indica que o painel está aberto.

Para fechar um painel:

1. No menu “Window”, clique no nome do painel.

Adobe Fireworks CS3


Figura 13 – Painel expandido

Para recolher ou expandir um painel ou grupo de painéis:

1. Clique no título do painel ou grupo de painéis.

Para desencaixar ou mover um painel ou grupo de painéis:

1. Arraste o prendedor do painel no

canto superior esquerdo ( ) para fora da área de encaixe de painel.

Para encaixar um painel ou grupo de painéis:

1. Arraste o prendedor do painel para a área de encaixe de painel.

Para retornar os painéis às posições padrão para a resolução da sua tela:

1. No menu “Commands”, aponte para o comando “Panel Layout Sets” e clique no subcomando “800 x 600”.

Para ocultar/exibir todos os painéis e o inspetor “Properties”:

1. No menu “View”, clique no comando “Hide Panels”.

1.5 Fechamento do Programa

Para fechar o programa:

1. Clique no botão “Close” ( ) à direita da barra superior do programa.

1.6 Exercícios 1. Inicialize o programa Fireworks. Examine cada um dos itens da “Barra de

menus”, para facilitar seu reconhecimento.

2. Crie um novo arquivo com as seguintes dimensões: 500 x 400 pixels, 300 dpi, cor transparente.

3. Selecione cada uma das ferramentas do painel “Tools” e observe o inspetor “Properties” correspondente. Selecione, também, as ferramentas de cada um dos grupos de ferramentas, quando disponíveis.

4. Abra cada um dos painéis do menu “Window” e observe seu conteúdo.

5. Feche o programa, sem salvar o arquivo.

Documents

Fireworks_CS3_Komedi