tuturiais fireworks mx

Usando o Fireworks MX

macromedia

Marcas comerciais Afterburner, AppletAce, Attain, Attain Enterprise Learning System, Attain Essentials, Attain Objects for Dreamweaver, Authorware, Authorware Attain, Authorware Interactive Studio, Authorware Star, Authorware Synergy, Backstage, Backstage Designer, Backstage Desktop Studio, Backstage Enterprise Studio, Backstage Internet Studio, Design in Motion, Director, Director Multimedia Studio, Doc Around the Clock, Dreamweaver, Dreamweaver Attain, Drumbeat, Drumbeat 2000, Extreme 3D, Fireworks, Flash, Fontographer, FreeHand, FreeHand Graphics Studio, Generator, Generator Developers Studio, Generator Dynamic Graphics Server, Knowledge Objects, Knowledge Stream, Knowledge Track, Lingo, Live Effects, Macromedia, Macromedia M Logo & Design, Macromedia Flash, Macromedia Xres, Macromind, Macromind Action, MAGIC, Mediamaker, Object Authoring, Power Applets, Priority Access, Roundtrip HTML, Scriptlets, SoundEdit, ShockRave, Shockmachine, Shockwave, Shockwave Remote, Shockwave Internet Studio, Showcase, Tools to Power Your Ideas, Universal Media, Virtuoso, Web Design 101, Whirlwind e Xtra so marcas registradas da Macromedia, Inc. e podem ser registradas nos Estados Unidos ou em outras jurisdies, inclusive internacionalmente. Outros nomes de produtos, logotipos, desenhos, ttulos, palavras ou frases mencionados nesta publicao podem ser marcas comerciais, marcas de servio e denominaes comerciais pertencentes Macromedia, Inc. ou a outras entidades, e podem ser registrados em determinadas jurisdies, iclusive internacionalmente. Este guia contm vnculos com sites de terceiros na Web que no esto sob o controle da Macromedia e a Macromedia no responsvel pelo contedo dos sites vinculados. Ao acessar um site de terceiros na Web mencionado neste guia, faa-o por seu prprio risco. A Macromedia fornece estes vnculos apenas como convenincia e a incluso do vnculo no significa que a Macromedia endosse ou aceite qualquer responsabilidade pelo contedo dos sites de terceiros. Iseno de responsabilidade da Apple A APPLE COMPUTER, INC. NO D GARANTIAS, EXPLCITAS OU IMPLCITAS, RELATIVAS AO PACOTE DE SOFTWARE ANEXO, SUA COMERCIABILIDADE OU SUA ADEQUAO A QUALQUER PROPSITO ESPECFICO. A EXCLUSO DAS GARANTIAS IMPLCITAS NO PERMITIDA EM ALGUNS LOCAIS. A EXCLUSO ACIMA PODE NO SE APLICAR A VOC. ESTA GARANTIA LHE D DIREITOS JURDOS ESPECFICOS. VOC PODE TER OUTROS DIREITOS QUE VARIEM DE UM LUGAR PARA O OUTRO. Copyright 2002 Macromedia, Inc. Todos os direitos reservados. Patentes americanas 5.353.396, 5.361.333, 5.434.959, 5.467.443, 5.500.927, 5.594.855 e 5.623.593. Partes do software licenciadas sob patente americana 4.558.302 e contrapartes estrangeiras. Outras patentes pendentes. Copyright parcial 1988, 2000 Aladdin Enterprises. Todos os direitos reservados. Este software baseia-se em parte no trabalho do Independent JPEG Group. Copyright parcial 1998 Soft Horizons. Todos os direitos reservados. Este manual no pode ser copiado, fotocopiado, reproduzido, traduzido ou convertido em qualquer formato eletrnico ou de leitura por mquina no todo ou em parte sem a prvia autorizao por escrito da Macromedia, Inc. Nmero de pea ZFW60M200PO Agradecimentos Redao: Dale Crawford, Tonya Estes, David Jacowitz, Kenneth Price Edio: Rosana Francescato Projeto gerenciado por: Stuart Manning Produo: Caroline Branch, John Francis, Patrice O'Neill Produo de localizao snior: Masayo Noda Gerente de localizao snior: Sami Kaied Gerente de projeto de localizao: Gloria Figueroa Fotografia: Chris Basmajian Multimdia: Aaron Begley Primeira edio: junho de 2002 Macromedia, Inc. 600 Townsend St. San Francisco, CA 94103

2

NDICE ANALTICO

INTRODUO Guia de introduo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

Requisitos do sistema . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 Instalao do Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 O que h de novo no Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10CAPTULO 1 Tutorial de princpios bsicos do projeto grfico . . . . . . . . . . . . . . . . . . . . . . 15

O que voc aprender . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 O que voc deve saber . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 Cpia da pasta Tutorials . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 Exibio do arquivo concludo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 Criao e salva de um novo documento. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 Explorao do ambiente de trabalho do Fireworks. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 Criao e edio de um objeto vetorial . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 Importao de bitmap e seleo de pixels. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 Adio e edio de efeitos ao vivo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 Como trabalhar com camada e objeto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 Criao e edio de mscara . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 Criao e edio de um texto. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 Exportao do documento. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 Seguir as prximas etapas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42CAPTULO 2 Tutorial de princpios bsicos do projeto da Web . . . . . . . . . . . . . . . . . . . . . 43

O que voc aprender . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . O que voc deve saber . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Cpia da pasta Tutorials . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Exibir a pgina da Web concluda . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Abertura do arquivo de origem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Importao de um grfico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Diviso do documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Criao de um rollover de arrastar e soltar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Criao e edio de um boto para criar uma barra de navegao . . . . . . . . . . . . . . . . . Criao e edio de um menu pop-up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Otimizao do documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Exportao de HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Teste do arquivo concludo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Seguir as prximas etapas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

43 43 44 44 45 45 46 48 51 57 64 67 70 71

3

CAPTULO 3 Princpios bsicos do Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73

Sobre grficos vetoriais e de bitmap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73 Sobre o trabalho no Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74 Criao de um novo documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75 Abertura e importao de um arquivo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76 Salva de um arquivo do Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82 Ambiente de trabalho do Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83 Alterao da tela . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94CAPTULO 4 Seleo e transformao de um objeto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103

Seleo de um objeto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103 Seleo de um pixel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106 Edio de objetos selecionados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116 Transformao e distoro de objetos selecionados e selees . . . . . . . . . . . . . . . . . . . 118 Organizao de um objeto. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121CAPTULO 5 Como trabalhar com um bitmap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125

Como trabalhar com um bitmap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125 Criao de um objeto bitmap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125 Desenho, pintura e edio de um objeto bitmap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127 Retoque de um bitmap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130 Ajuste da cor e do tom de um bitmap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133 Embaamento e aguamento de um bitmap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142CAPTULO 6 Como trabalhar com objetos vetoriais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147

Desenho de objeto vetorial . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147 Edio de um traado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159CAPTULO 7 Utilizao de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169

Digitao de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169 Edio de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171 Como aplicar traos, preenchimentos e efeitos ao texto . . . . . . . . . . . . . . . . . . . . . . . . 180 Anexao de texto a um traado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180 Transformao de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183 Converso de texto em traados. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183 Importao de texto. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184 Verificao ortogrfica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185 Utilizao do Editor de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186CAPTULO 8 Aplicao de cor, trao e preenchimento . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189

Uso da seo Cores do painel Ferramentas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189 Organizao de um grupo de exemplos e de um modelo de cor . . . . . . . . . . . . . . . . . . 190 Uso de uma caixa de cor e janela pop-up de cores . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197 Como trabalhar com um trao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198 Como trabalhar com um preenchimento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204 Aplicao de um preenchimento dgrad ou com padro . . . . . . . . . . . . . . . . . . . . . . 205 Adio de textura a traos e preenchimentos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210

4

ndice analtico

CAPTULO 9 Uso de Efeitos ao vivo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213

Aplicao de Efeitos ao vivo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213 Edio de Efeitos ao vivo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218CAPTULO 10 Camada, mascaramento e mistura . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221

Como trabalhar com uma camada. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221 Mascaramento de imagens. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227 Mistura e transparncia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245CAPTULO 11 Uso de estilo, smbolo e URL. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249

Uso de um estilo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249 Uso de um smbolo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252 Como trabalhar com um URL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258CAPTULO 12 Fatias, rollovers e pontos ativos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261

Criao e edio de fatias. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Como tornar as fatias interativas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Preparao de fatias para exportao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Como trabalhar com pontos ativos e mapas de imagem . . . . . . . . . . . . . . . . . . . . . . .

261 269 276 282

CAPTULO 13 Criao de botes e menus pop-up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287

Criao de um smbolo de boto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287 Criao de barras de navegao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297 Criao de menus pop-up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 298CAPTULO 14 Criao de animao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309

Como construir uma animao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309 Como trabalhar com um smbolo de animao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310 Como trabalhar com uma moldura . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314 Interpolao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 319 Como visualizar uma animao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 320 Exportao de uma animao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 320 Como trabalhar com uma animao existente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322 Utilizao de mltiplos arquivos como uma animao. . . . . . . . . . . . . . . . . . . . . . . . . 323CAPTULO 15 Otimizao e exportao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 325

Sobre otimizao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Como usar o Assistente de exportao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Otimizao no espao de trabalho . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Exportao do Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Como usar o boto Exportao rpida. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

325 326 329 347 361

CAPTULO 16 Uso do Fireworks com outros aplicativos. . . . . . . . . . . . . . . . . . . . . . . . . . . . 363

Como trabalhar com o Macromedia Dreamweaver MX. . . . . . . . . . . . . . . . . . . . . . . . 363 Como trabalhar com o Macromedia Flash MX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 377

ndice analtico

5

Como trabalhar com o Macromedia FreeHand . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 382 Como trabalhar com o Macromedia Director . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 386 Como trabalhar com o Macromedia HomeSite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 389 Como trabalhar com o Microsoft FrontPage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 392 Como trabalhar com o Adobe Photoshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 395 Sobre como trabalhar com o Adobe GoLive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 399 Sobre como trabalhar com editores de HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 400CAPTULO 17 Automatizao de uma tarefa repetitiva . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 401

Localizar e substituir . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 402 Processo em lote . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 407 Uso do Registro de projeto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 414 Extenso dos recursos do Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 415CAPTULO 18 Preferncias e atalhos de teclado. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 421

Configurao de preferncias. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 421 Alterao dos conjuntos de atalho de teclado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 424 Como trabalhar com arquivos de configurao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 427NDICE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 433

6

ndice analtico

INTRODUO Guia de introduo

Macromedia Fireworks MX a soluo para produo e projetos grficos profissionais na Web. o primeiro ambiente de produo que trata e resolve os desafios especiais que se apresentam aos desenvolvedores e projetistas grficos da Web. Usar o Fireworks para criar, editar e animar imagens grficas na Web, adicionar interatividade avanada e otimizar imagens em um ambiente profissional. No Fireworks, possvel criar e editar grficos vetoriais e de bitmap em um nico aplicativo. Tudo editvel, o tempo todo. E o usurio pode automatizar o fluxo de trabalho para atender as necessidades de atualizaes e alteraes demoradas. Fireworks opera integrado com outros produtos da Macromedia como Flash, FreeHand e Director e tambm com os mais conhecidos aplicativos de imagens grficas e editores de HTML, para proporcionar uma soluo de Web verdadeiramente integrada. Voc pode facilmente exportar imagens grficas do Fireworks com cdigo personalizado de HTML e Java Script para o editor HTML que estiver usando.

Requisitos do sistemaAntes de instalar o Fireworks, assegurar-se de que seu computador esteja equipado com o hardware e software descritos a seguir. Microsoft Windows

Processador Intel Pentium II de 300MHz Windows 98 SE, ME, NT 4 (Service Pack 6), 2000 ou XP 64 MB de RAM disponvel (recomenda-se 128 MB) mais 80 MB de espao disponvel emdisco

resoluo de 800 x 600 pixels, 256 cores ou melhor Adobe Type Manager verso 4 ou posterior, para uso com fontes Tipo 1 unidade de CD-ROMMacintosh

Processador Power Macintosh G3, executando o OS 9.1 ou posterior, ou OS X verso 10.1 ouposterior

64 MB de RAM disponvel (recomenda-se 128 MB) mais 80 MB de espao disponvel em disco resoluo de 800 x 600 pixels, 256 cores ou melhor

7

Adobe Type Manager verso 4 ou posterior para uso com fontes Tipo 1 (somente OS 9.x) unidade de CD-ROM Instalao do FireworksLer o documento ReadMe no DC-ROM do Fireworks para para ficar a par das informaes mais recentes.Para instalar o Fireworks: 1 2

Inserir o CD do Fireworks na unidade de CD-ROM do computador. Seguir um destes procedimentos: acontecer, escolher Iniciar > Executar. Clicar em Procurar e escolher o arquivo Setup.exe no CD do Fireworks. Clicar em OK na caixa de dilogo Executar.

No Windows, o programa de instalao do Fireworks se inicia, automaticamente. Se isso no No Macintosh, clicar duas vezes no cone Instalador do Fireworks.3

Seguir as instrues da tela. O programa de instalao solicita a digitao das informaes necessrias. Quando solicitado, reiniciar o computador.

4

Execuo do Fireworks em sistemas conectados em rede A Macromedia utiliza deteco de licena de rede para impedir que cpias do Fireworks com o mesmo nmero de srie sejam executadas em vrios sistemas conectados por uma rede local. Se tentar iniciar o Fireworks e houver um nmero maior de usurios do que o definido pela licena executando o Fireworks na mesma rede, aparecer um alerta de restrio de licena. Se achar que no deveria receber esta mensadem ou se desejar obter licenas adicionais para o produto, entre em contato com o Suporte Tcnico da Macromedia em http://www.macromedia.com/br/ support/email/cs/. Exibio de um arquivo instalado com Fireworks Em algum momento pode ser necessrio exibir ou acessar os arquivos instalados com o Fireworks. Durante a instalao, o Fireworks coloca os arquivos em vrios locais no sistema. importante entender onde esses arquivos residem e por qu. Para mais informaes, consultar Como trabalhar com arquivos de configurao na pgina 427. Usurios de Macintosh devem prestar ateno especial ao novo formato que o Fireworks utiliza para armazenar o aplicativo e seus arquivos de configurao padro. Para mais informaes, consultar Exibio do contedo do pacote (somente Macintosh) na pgina 431. Como aprender o Fireworks Existem vrios recursos para aprender a trabalhar com o Fireworks, inclusive um manual de incio rpido impresso (Guia de introduo do Fireworks MX), o sistema de ajuda que pode ser iniciado no aplicativo, uma verso PDF da documentao completa do Fireworks e vrios recursos informativos na Internet.

8

Introduo

A Ajuda do Fireworks est

disponvel sempre que o aplicativo estiver ativo e contm a documentao completa do Fireworks. Escolher Ajuda > Usando o Fireworks para abrir a Ajuda do Fireworks. Usurios do Mac OS X, escolher Ajuda > Ajuda do Fireworks.

Os tutoriais do Fireworks fornecem uma introduo interativa aos principais recursos do aplicativo e podem ser concludos em cerca de uma hora cada um. Eles incluem tarefas comuns do Fireworks como utilizar as ferramentas de desenho e edio, otimizar imagens e criar elementos interativos como rollovers e barras de navegao. O painel de Respostas

um local central onde possvel encontrar tutoriais, notas tcnicas e as mais atualizadas informaes sobre o Fireworks, tudo em um nico lugar. O painel de Respostas dinmico; com apenas um clique no boto possvel obter as atualizaes e informaes mais recentes sobre o Fireworks, diretamente da Macromedia. vrias caixas de dilogo e dicas de ferramentas, criadas para auxililo a utilizar o programa. As dicas de ferramentas aparecem quando o ponteiro ficar parado sobre um elemento da interface de usurio. de viso geral sobre os recusos bsicos do

O Aplicativo Fireworks possui

Guia de introduo do Fireworks MX inclui informaes

Fireworks.O documento Utilizao do Fireworks MX em PDF um documento pesquisvel e imprimvel, que

contm a documentao completa do Fireworks. O PDF est disponvel no CD de instalao e no site da Macromedia na Web em http://www.macromedia.com/br/.O site da Macromedia na Internet atualizado regularmente com as ltimas informaes sobre o Fireworks, alm de apresentar recomendaes de usurios especializados, tpicos avanados, exemplos, dicas e novidades. Consultar o site da Macromedia na Web para saber das ltimas notcias sobre o Fireworks e como obter o mximo do programa no site http://www.macromedia.com/br/support/. O grupo de discusso Fireworks proporciona um intercmbio estimulante para usurios do

aplicativo, representantes de suporte tcnico e para a equipe de desenvolvimento do Fireworks. Usar um leitor de grupo de notcias e ir para news://forums.macromedia.com/macromedia.fireworks.Extending Fireworks MX inclui informaes sobre escrita em JavaScript para automatizar as tarefas

do Fireworks. Todos os comandos ou configuraes no Fireworks podem ser controlados usandocomandos JavaScript especiais que o Fireworks pode interpretar. A verso PDF do Extending Fireworks MX est disponvel no CD de instalao e no site da Macromedia na Web em http://www.macromedia.com/support/fireworks/extend.html. Registro do Fireworks Para obter suporte adicional da Macromedia, importante registrar a cpia do Macromedia Fireworks, pela Internet ou por correio. Ao efetuar o registro, o usurio ser colocado na lista de prioridade para receber notcias do momento sobre atualizaes e novos produtos da Macromedia. E receber e-mails contendo informaes sobre atualizaes do produto e novidades que aparecerem nos sites www.macromedia.com e www-euro.macromedia.com.Para registrar sua cpia do Fireworks, seguir um destes procedimentos:

Escolher Ajuda > Registro on-line e preencher o formulrio eletrnico. Escolher Ajuda > Registro por correio, imprimir o formulrio e enviar para o endereo indicado.

Guia de introduo

9

O que h de novo no FireworksOs novos recursos tornam o Fireworks MX um aplicativo cada vez mais acessvel com maior capacidade para criar grficos e maior interatividade com sites da Web. O Fireworks MX aumenta a produtividade de designers experientes da Web, desenvolvedores de HTML que tambm trabalhem com grficos e desenvolvedores da Web iniciantes, que precisem desenvolver pginas da Web interativas e ricas em grficos, com pouco ou nenhum conhecimento de JavaScript. O Fireworks MX passou por um importante refinamento, com a racionalizao da interface de usurio, capacidades mais poderosas de botes e menus pop-up e ferramentas vetoriais e de bitmap intuitivas. A integrao com outros aplicativos da Macromedia bem como com aplicativos de terceiros facilita trabalhar com vrios formatos de arquivos no Fireworks e envilos a outros aplicativos tranqilamente enquanto estiver trabalhando. Tambm nova no Fireworks a capacidade para criar comandos JavaScript com o Macromedia Flash, que aparecem no Fireworks MX como painis ou caixas de dilogo. Recursos fceis de usar Graas a um ambiente de trabalho intuitivo e confortvel que inclui um Inspetor de propriedades e ferramentas que funcionam de forma profissional o Fireworks MX um aplicativo fcil de aprender e de incio operacional rpido. O Fireworks MX tem nova aparncia, melhor organizada e em consonncia com outros aplicativos no Macromedia MX Studio.Os aprimoramentos do gerenciamento de painis incluem a capacidade de agrupar painis e recolher os grupos de modo que apenas a barra de ttulo do grupo fique visvel, at que seja necessrio usar os painis. Pode-se encaixar os grupos de painis em uma rea de encaixe de painel para organizar o espao de trabalho ou arrastar grupos ou painis individuais em qualquer lugar no espao de trabalho. Para mais informaes, consultar Organizao de grupos de painis e painis na pgina 87. O Inspetor de propriedades um painel dinmico cheio de opes que mudam medida que o usurio trabalha. Abrir um documento, e o Inspetor de propriedades exibir as propriedades do documento como a cor e o tamanho da tela. Escolher uma ferramenta do painel Ferramentas, e o Inspetor de propriedades exibir as opes da ferramenta. Selecionar um objeto vetorial, e ele exibir as informaes de trao e preenchimento.

possvel alterar essas e outras opes inclusive Efeitos ao vivo, modos de mesclagem e opacidade diretamente do Inspetor de propriedades, em vez de clicar para abrir ou ativar painel aps painel. O Inspetor de propriedades, familiar aos usurios do Macromedia Dreamweaver e Flash reduz o nmero de painis no espao de trabalho. Para mais informaes, consultar Utilizao do Inspetor de propriedades na pgina 85.A edio vetorial e de bitmap no-modal elimina a necessidade de manter-se atualizado nos modos vetoriais e de bitmap. Escolher uma ferramenta ou selecionar um tipo de objeto determina automaticamente se devero ser criados e editados bitmaps, vetores ou texto. Aprimoramentos da edio de bitmap proporcionam capacidades intuitivas para criar bitmaps por meio de recortar ou copiar e colar, para mover selees de moldura entre bitmaps e para efetuar o ajuste fino de imagens com um novo grupo de ferramentas de retoque de imagens. Alm disso, os comandos de seleo comuns esto organizados em um novo menu Seleo.

10

Introduo

As sees do painel Ferramentas, que separam as ferramentas usadas para criar e editar objetos de

bitmaps, vetoriais e objetos da Web oferecem dicas para escolher de forma intuitiva a ferramenta adequada e alcanar os resultados criativos previsveis. Outras ferramentas e recursos de ferramentas so separados nas categorias Selecionar, Cores e Exibir. Para mais informaes, consultar Utilizao do painel Ferramentas na pgina 84.O boto Exportao rpida exibe opes convenientes para exportar vrios formatos de arquivo ou estilos de HTML ou iniciar outros produtos Macromedia a partir da janela de documento, eliminando o tempo de configurao e racionalizando o fluxo de trabalho. Para mais informaes, consultar Como usar o boto Exportao rpida na pgina 361. O texto na tela permite integrar visualmente texto e grficos sem a utilizao do Editor de texto. Basta escolher a ferramenta Texto, clicar na tela e comear a digitar. No Inspetor de propriedades, possvel definir os atributos de texto para a ferramenta Texto antes de iniciar a digitao ou de realar o texto existente e format-lo. O Fireworks MX tem uma gama de novos controles de texto e pargrafo para formatar texto. Para mais informaes, consultar Utilizao de texto na pgina 169. O zoom varivel permite

arrastar a ferramenta Ampliar para determinar o valor preciso da ampliao. Aps arrastar para ampliar o documento, o valor da ampliao ser exibido na caixa de texto Definir ampliao na parte inferior do documento.

A compatibilidade com Windows XP e Macintosh OS X beneficia-se de sistemas operacionais mais

recentes. O Fireworks MX totalmente "carbonizado" para suportar todas as melhorias da interface de usurio do SO X.Exportao de XHTML permite exportar, atualizar e usar o Roundtrip XHTML nos mesmos estilos que o Fireworks oferece para HTML. possvel integrar totalmente (roundtrip) documentos legados que tenham sido convertidos em XHTML no Dreamweaver MX. Painel Resultados,

um novo recurso no Fireworks MX, Dreamweaver MX e Flash MX, um vnculo atualizvel para o contedo da Web, localizado de forma conveniente no espao de trabalho do Fireworks. Quando estiver on-line, o usurio poder clicar no boto Atualizar e fazer o download de informaes de referncia recentes da Macromedia ou fazer pesquisa on-line de documentao em bancos de dados, como de notas tcnicas.

O corretor ortogrfico pesquisa palavras incorretas em todos os blocos de texto do documento. Ao encontrar a palavra que no reconhea, ele oferece sugestes para corrigi-la ou permite adicion-la ao seu dicionrio. Cache de fonte entre plataformas facilita

compartilhar arquivos entre grupos de trabalho e clientes sem se preocupar com problemas de fonte entre plataformas. O Fireworks mantm a aparncia de todo o texto de um documento em sistemas que no tenham as fontes existentes nesse documento.

Recursos de aumento de capacidade O Fireworks MX apresenta uma srie de novos recursos poderosos de criatividade e automao que os designers iniciantes da Web acharo fceis de usar e que agradaro aos desenvolvedores mais experientes. Esses recursos fazem com que o Fireworks seja um elemento essencial do processo de design e desenvolvimento da Web desde a concepo at a integrao.O Assistente de grficos controlado por dados permite atribuir variveis a texto, imagens, pontos ativos e fatias, para gerar, em seguida, vrios documentos baseados no original, cada um contendo informaes exclusivas obtidas em um arquivo de banco de dados delimitado por vrgula ou XML.

Guia de introduo

11

O Criador da barra de navegao no

menu Comandos automatiza o processo para a criao rpida de barras de navegao usando os convenientes smbolos de boto do Fireworks MX. possvel selecionar uma ocorrncia de um smbolo de boto e escolher o nmero de cpias a fazer, escolher a orientao e o espaamento vertical ou horizontal e atribuir rtulos de boto e URLs em uma caixa de dilogo integrada.

Os aprimoramentos do Editor de menu pop-up acrescentaram

controle criativo ao novo recurso mais popular do Fireworks 4. Agora, possvel criar um menu pop-up horizontal ou vertical e determinar as caractersticas da borda, espaamento da clula e o tamanho da clula, independentemente do tamanho do texto. Tambm possvel definir a posio de menus em relao ao objeto de acionamento, assim como a posio de submenus em relao ao item do menu de acionamento ou ao menu pop-up principal. O Fireworks gera, automaticamente, o cdigo JavaScript; os menus exportados so totalmente compatveis com o Dreamweaver MX. Para mais informaes, consultar Criao de menus pop-up na pgina 298.

A edio de smbolo de boto no nvel de ocorrncia permite

criar um smbolo de boto e, facilmente, diferenciar botes individuais com texto, URLs e alvos exclusivos usando o Inspetor de propriedades. Entretanto, possvel editar outras caractersticas grficas no nvel do smbolo e atualizar as edies em todas as ocorrncias do boto sem afetar as propriedades no nvel da ocorrncia. Para mais informaes, consultar Criao de um smbolo de boto na pgina 287.

Recursos de fluxo de trabalho aberto No necessrio ficar limitado ao fluxo de trabalho de outra pessoa. Com o Fireworks MX, possvel integrar a produo grfica ao processo de desenvolvimento com um fluxo de trabalho aberto e eficiente, que reconhece e oferece suporte aos formatos de arquivo, aplicativos e padres utilizados.Comandos JavaScript com interface SWF colocam a criao de comandos JavaScript em um nvel mais elevado. Os desenvolvedores podem criar e executar comandos complexos para estender e automatizar o Fireworks MX por meio da combinao da API de extensibilidade do Fireworks JavaScript com interfaces desenvolvidas no Flash MX usando componentes e ActionScript. Para mais informaes, consultar Extending Fireworks MX, disponvel como documento PDF no CD de instalao e no site http://www.macromedia.com/support/fireworks/extend.html. Suporte ao Macromedia Exchange significa

que os usurios, mesmo os que no estejam interessados em criar comandos JavaScript, podem fazer download de comandos criados por usurios a partir do Exchange. Os comandos aparecem no espao de trabalho do Fireworks MX como painis ou caixas de dilogo fceis de usar. O Fireworks MX fornecido com vrios comandos criados pelo usurio no menu Comandos, assim como um painel Alinhar no menu Janela.

Os controles de layout da tabela de fatias permitem

definir e otimizar layouts da tabela de fatias arrastando as guias de fatia. O Fireworks redimensiona, automaticamente, as fatias anexadas, adicionando e excluindo fatias conforme necessrio. Para mais informaes, consultar Movimentao de guias de fatia para editar fatias na pgina 267.

O recurso Reconstituir tabelas cria,

de forma instantnea, um novo arquivo de origem PNG no Fireworks quando o usurio aponta para qualquer arquivo HTML que contenha tabelas com fatias de imagens. Comportamentos do Macromedia Fireworks e Dreamweaver, tais como rollovers de imagem e menus pop-up so importados e anexados s fatias apropriadas.

12

Introduo

Isso ser til quando estiver trabalhando em projetos de site da Web existentes em que os nicos arquivos diponveis forem as pginas HTML postadas. possvel abrir arquivos HTML no Fireworks e criar arquivos de origem PNG a partir deles. Para mais informaes, consultar Criao de arquivo PNG do Fireworks a partir de arquivos HTML na pgina 78.Texto do Roundtrip Photoshop 6 permite abrir arquivos Photoshop 6 ou 7 com texto intacto, de forma que os grficos possam ser editados e exportados novamente para o formato do Photoshop, enquanto mantm aparncia correta e possibilidade de edio. Para mais informaes, consultar Sobre importao de texto do Photoshop na pgina 396. Roundtrip com Microsoft FrontPage est

disponvel com um clique no boto Exportao rpida. As tabelas Iniciar e Editar funcionam no arquivo original no Fireworks; as tabelas so atualizadas no FrontPage sem perder as alteraes de cdigo feitas no FrontPage. Para mais informaes, consultar Exportao de HTML do Fireworks para o FrontPage na pgina 393. de clientes no espao de trabalho do Fireworks MX. Basta escolher Janela > Sitespring para abrir a janela Sitespring. Para mais informaes, consultar a documentao do Sitespring.

A integrao com Macromedia Sitespring aplica as melhores prticas na produo e gerenciamento

Guia de introduo

13

14

Introduo

CAPTULO 1 Tutorial de princpios bsicos do projeto grfico

Este tutorial ir orient-lo nas tarefas bsicas para execuo de um projeto grfico com o Macromedia Fireworks MX. Voc ter experincia prtica usando o aplicativo grfico da Web, lder no seu segmento, e aprender os conceitos bsicos de um projeto grfico no caminho. Se j estiver familiarizado com projetos grficos no Fireworks, talvez deseje ir para Tutorial de princpios bsicos do projeto da Web na pgina 43, onde aprender tudo sobre como projetar pginas da Web com o Fireworks.

O que voc aprenderNeste tutorial, em menos de uma hora, ter concludo as tarefas necessrias para criar uma propaganda de aluguel de carros clssicos usando o Fireworks. Voc aprender o seguinte:

Cpia da pasta Tutorials Exibio do arquivo concludo Criao e salva de um novo documento Explorao do ambiente de trabalho do Fireworks Criao e edio de um objeto vetorial Importao de bitmap e seleo de pixels Adio e edio de efeitos ao vivo Como trabalhar com camada e objeto Criao e edio de mscara Criao e edio de um texto Exportao do documento

O que voc deve saberEmbora o tutorial seja projetado para usurios iniciantes do Fireworks, ele abrange diversos recursos novos do aplicativo, assim usurios avanados do Fireworks tambm podem ter benefcios. No necessrio ser um designer grfico para executar este tutorial, mas preciso ter habilidades bsicas com computadores e ser capaz de usar aplicativos comuns do espao de trabalho. Entre outros, voc deve saber como procurar arquivos e pastas no disco rgido.

15

Cpia da pasta TutorialsAntes de mais nada, fazer uma cpia da pasta Tutorials, para salvar os resultados do seu trabalho permitindo, assim, que voc ou outro usurio conclua o tutorial posteriormente, usando os arquivos originais.1

Navegar at a pasta do aplicativo Fireworks no disco rgido.Nota: Se no conseguir exibir a pasta do aplicativo Fireworks, talvez tenha acesso limitado aos arquivos do sistema. possvel fazer o download dos arquivos necessrios ao tutorial no Centro de suporte Fireworks na Web em http://www.macromedia.com/br/support/.

2

Arrastar uma cpia da pasta Tutorials para o espao de trabalho.

Exibio do arquivo concludoExibir o arquivo do tutorial concludo para verificar a aparncia do projeto aps a concluso.1 2

Iniciar o navegador da Web. No disco rgido, navegar at a pasta Tutorials, copiada no espao de trabalho, e procurar Tutorial1/Complete.Nota: Algumas verses do Microsoft Windows ocultam, por padro, as extenses dos tipos de arquivos conhecidos. Se essa configurao no tiver sido alterada, ento os arquivos existentes na pasta Complete no exibiro as extenses. Ao manipular grficos da Web, prefervel visualizar as extenses dos arquivos. Para informaes sobre como exibir novamente as extenses de arquivos, consultar a Ajuda do Windows.

3

Selecionar o arquivo final.htm e arrast-lo para uma janela aberta do navegador. Neste tutorial, usar o Fireworks para desenhar e exportar uma cpia desta propaganda de aluguel de carros clssicos.Nota: A pasta Complete tambm inclui o documento do Fireworks a partir do qual ser gerado este arquivo JPEG. Para exibir o documento, clicar duas vezes em final.png.

Criao e salva de um novo documentoAgora, que o arquivo final.htm foi exibido, voc est pronto para iniciar seu projeto.1

No Fireworks, selecionar Arquivo > Novo. A caixa de dilogo Novo Documento aberta.

16

Captulo 1

2

Digitar 480 para a largura e 214 para a altura. Certificar-se de que as medidas estejam em pixels e de que a cor da tela seja, branca e clicar em OK. Uma janela do documento aberta com uma barra de ttulo em que se l Untitled-1.png (Windows) ou Untitled-1 (Macintosh).

3

Se a janela do documento no estiver maximizada, ou seja, se no preencher o centro da tela, maximize-a clicando no boto de maximizao (Windows) ou na caixa zoom (Macintosh) no topo da janela do documento. Isso proporcionar um grande espao de trabalho. Selecionar Arquivo > Salvar como. A caixa de dilogo Salvar como (Windows) ou Salvar (Macintosh) aberta.

4

5 6 7 8

Procurar a pasta Tutorials/Tutorial1 no espao de trabalho. Nomear o arquivo Vintage. Selecionar a opo Adicionar extenso de nome de arquivo, caso isso ainda no tenha sido feito (apenas Macintosh). Clicar em Salvar. A barra de ttulos exibe o novo nome do arquivo com a extenso PNG. PNG o formato de arquivo nativo do Fireworks. A arquivo PNG o arquivo de origem; onde voc realizar todo o seu trabalho no Fireworks. No final deste tutorial, aprender como exportar seu documento para outro formato para us-lo na Web.

Quando estiver concluindo o tutorial, lembrar-se de salvar seu trabalho com freqncia selecionando Arquivo > Salvar.Nota: Na concluso do tutorial, talvez ache til desfazer uma alterao feita. O Fireworks pode desfazer vrias das alteraes recentes, dependendo do nmero de etapas de desfazer definido em Preferncias. Para desfazer a alterao mais recente, selecionar Editar > Desfazer.

Tutorial de princpios bsicos do projeto grfico

17

Explorao do ambiente de trabalho do FireworksAntes de prosseguir o tutorial, examinar os elementos que compem o ambiente de trabalho do Fireworks:

No centro da tela est a janela do documento. No centro da janela do documento est a tela.Esse o local em que so exibidos o documento Fireworks e quaisquer imagens criadas.

No topo da tela est uma barra de menus. A maior parte dos comandos do Fireworks pode seracessando a partir da barra de menus.

No lado esquerdo da tela est o painel Ferramentas. Se o painel Ferramentas no estiver visvel,selecionar Janela > Ferramentas. O painel Ferramentas onde voc encontrar as ferramentas para selecionar, criar e editar diversos itens grficos, bem como objetos da Web.

Na base da janela est o Inspetor de propriedades. Se o Inspetor de propriedades no estivervisvel, selecionar Janela > Propriedades. O Inspetor de propriedades exibe as propriedades de cada objeto ou ferramenta selecionada. possvel alterar essas propriedades. Se no houver objetos ou ferramentas selecionadas, o Inspetor de propriedades exibir as propriedades do documento. O Inspetor de propriedades exibe duas ou quatro fileiras de propriedades. Se o Inspetor de propriedades estiver na metade da altura, ou seja, exibindo apenas duas fileiras, ser possvel clicar na seta expansora no canto inferior direito para visualizar todas as propriedades.

Seta expansora na metade da altura

18

Captulo 1

No lado direito da tela h uma srie de painis como o painel Camadas e o painel Otimizar. possvel abrir esses e outros painis a partir do menu Janela.

Mover o ponteiro sobre diversos elementos da interface. Se o ponteiro for mantido sobre umitem por algum tempo na interface, ser exibida uma dica da ferramenta. As dicas das ferramentas identificam ferramentas, menus, botes e outros recursos de interface em todo o Fireworks. As dicas das ferramentas desaparecem ao distanciar o ponteiro dos elementos de interface que ele est identificando. Voc aprender mais sobre cada um desses elementos medida que avanar neste tutorial.

Criao e edio de um objeto vetorialCom o Fireworks, pode-se criar e editar dois tipos de grficos: objetos vetoriais e imagens bitmap. Um objeto vetorial uma descrio matemtica de uma forma geomtrica. Os traados vetoriais so definidos por pontos. Os traados vetoriais no apresentam degradao na qualidade quando voc os aumenta ou os dimensiona para mais ou para menos. A folha da ilustrao abaixo um conjunto de objetos vetoriais. Observar o grau de suavidade das bordas da folha mesmo quando se aumenta o objeto.

Ao contrrio, uma imagem bitmap composta por uma grade de pixels coloridos. Imagens com variaes complexas de cores como fotografias so, em geral, imagens bitmap.

Enquanto vrios aplicativos oferecem ferramentas para editar formas vetoriais ou imagens bitmap, o Fireworks permite que se trabalhe com ambos os tipos de grficos. Voc trabalhar com grficos vetoriais nesta seo.


19

Criao de objetos vetoriais Agora, voc criar dois dos elementos grficos do seu documento. Primeiro ir criar um retngulo azul na parte inferior do documento. Depois, criar um retngulo que atuar como uma borda do contedo da tela.1

Selecionar a ferramenta Retngulo na seo Vetor do painel Ferramentas.

2

No Inspetor de propriedades, clicar na caixa Cor de preenchimento.

A janela pop-up Cor de preenchimento ser aberta.

3

Digitar 333366 na caixa de texto no topo da janela e, em seguida, pressionar Enter. A caixa Cor de preenchimento alterada para um tom de azul escuro de modo a refletir sua opo de cor.

4

Na janela do documento, posicionar o ponteiro em forma de cruz sobre a tela e arrast-lo para baixo e para a direita para criar um retngulo. possvel desenhar o retngulo em qualquer lugar da tela. Mais adiante neste procedimento, ir posicion-lo e redimension-lo.

5

Ao soltar o boto do mouse aparecer um retngulo azul escuro selecionado na rea que voc definiu.

20

Captulo 1

possvel saber quando um objeto est selecionado pois esse exibido com pontos azuis no canto. A maioria dos objetos tambm possui um realce azul em volta das bordas externas, mas os retngulos so uma exceo.6

No canto esquerdo inferior do Inspetor de propriedades, digitar 480 na caixa Largura e 15 na caixa Altura, depois pressionar Enter. O retngulo redimensionado para ser ajustado s dimenses especificadas. Selecionar a ferramenta Ponteiro na seo Selecionar do painel Ferramentas. Arrastar o retngulo para que fique posicionado na parte inferior da tela, conforme mostrado abaixo. Usar as teclas de seta para obter um posicionamento exato.

7 8

9

Selecionar a ferramenta Retngulo novamente e desenhar um segundo retngulo. Desenh-la em qualquer parte da tela e coloc-la no tamanho desejado. Voc alterar suas propriedades e posio na prxima seo.

Definio de propriedades do objeto Aqui, editar o segundo retngulo criado alterando seu tamanho, posio e cor no Inspetor de propriedades.1

Com o retngulo ainda selecionado, clicar na caixa Cor do trao no Inspetor de propriedades e digitar CCCCCC como o valor da cor. Pressionar Enter para aplicar a alterao.

2

Definir o Tamanho da ponta como 1, arrastando o controle deslizante pop-up ou digitando um nmero na caixa de texto.

3

Clicar na caixa Cor de preenchimento no Inspetor de propriedades e clicar no boto Transparente.


21

4

No Inspetor de propriedades, digitar os valores a seguir nas caixas de altura, largura e coordenada. Depois, clicar fora do Inspetor de propriedades para aplicar as alteraes. Largura: 480 Altura: 215 X: 0 Y: 0 O retngulo se transforma em uma borda cinza em volta da borda da tela.

Se o sistema usar o cinza cor de fundo da janela, talvez seja difcil visualizar o retngulo neste ponto. Mas, no se preocupe, ele ainda est l.5

Selecionar a ferramenta Ponteiro e clicar em qualquer lugar fora do retngulo para cancelar a seleo. As propriedades alteram no Inspetor de propriedades. Como no h objetos selecionados, agora as propriedades do documento so visualizadas em vez das propriedades do objeto.

Importao de bitmap e seleo de pixelsA seguir, importar uma imagem bitmap e criar uma seleo flutuante com os pixels. Importao de imagem Voc modificar a imagem de um automvel clssico. Primeiro, necessrio importar a imagem.1 2

Selecionar Arquivo > Importar e navegar at a pasta Tutorials no espao de trabalho. Procurar a pasta Tutorial1/Assets. Selecionar car.jpg e clicar em Abrir.

22

Captulo 1

3

Alinhar o ponteiro de insero com o canto superior esquerdo da tela e clicar, conforme mostrado na ilustrao a seguir.

A imagem aparece selecionada na tela.4

Clicar em qualquer lugar fora da imagem selecionada para cancelar a seleo.

Criao de seleo de pixels A seguir, voc selecionar os pixels que compem o carro na imagem importada e ir copi-los e col-los como um novo objeto.1

Selecionar a ferramenta Zoom na seo Exibir do painel Ferramentas.

Ferramenta Zoom

2

Clicar uma vez na imagem. A exibio ampliada para 150%. O aumento permite melhor visualizao do objeto selecionado e oferece um controle mais apurado sobre a seleo.

3

Clicar e manter pressionado o boto do mouse na ferramenta Lao na seo Bitmap do painel Ferramentas. Selecionar a ferramenta Lao polgono no menu pop-up que aparece.

A ferramenta Lao polgono permite que voc desenhe uma seleo em volta dos pixels usando uma srie de linhas retas. Voc usar a ferramenta Lao polgono para selecionar os pixels que formam a imagem do carro.4

No Inspetor de propriedades, definir a opo Borda como Suavizao de serrilhado.


23

5

Clicar com o ponteiro da ferramenta Lao polgono na borda superior do carro, depois clicar vrias vezes em volta da borda do carro para continuar com a seleo.

6

Completar a seleo movendo o ponteiro sobre o ponto em que iniciou a seleo. Um pequeno quadro cinza aparece ao lado do ponteiro Lao polgono para indicar que voc est quase completando a seleo. Clicar para completar a seleo.

Uma borda de moldura aparecer em volta dos pixels selecionados.7

Selecionar Editar > Copiar. A seleo copiada na rea de transferncia. Selecionar Editar > Colar. A imagem do carro colada no documento como um novo objeto bitmap. Selecionar a ferramenta Ponteiro e clicar duas vezes em qualquer lugar fora do bitmap para cancelar a seleo. Clicar no menu pop-up Definir ampliao, na base da janela do documento, e retornar exibio100%.

8

9 10

24

Captulo 1

Adio e edio de efeitos ao vivoA seguir, aplicar efeitos ao vivo imagem bitmap original. Alm disso, alterar o embaamento.1

Clicar em qualquer parte da imagem do deserto. (Porm, cuidado para no clicar no carro.)

2

No Inspetor de propriedades, clicar no boto Adicionar efeitos (o boto com o sinal mais (+)).

Boto Excluir efeitos Boto Adicionar efeitos 3

Selecionar Ajustar cor > Matiz/Saturao no menu pop-up Efeitos. A caixa de dilogo Matiz/Saturao exibida.

4

Selecionar a opo Colorir e clicar em OK. A imagem fica colorida na tela e o efeito adicionado lista de Efeitos ao vivo no Inspetor de propriedades. Os efeitos ao vivo so editveis; sempre possvel adicion-los lista, exclu-los ou edit-los.


25

5

Para editar um efeito, clicar duas vezes em Matiz/Saturao.Dica: Uma outra opo, clicar no boto Informaes ao lado do efeito.

A caixa de dilogo Matiz/Saturao exibida novamente.6

Alterar o Matiz para 25 e a Saturao para 20, e clicar em OK. Os nveis de matiz e saturao da imagem so alterados para exibir uma aparncia spia, como nas fotografias antigas.

7 8

Para adicionar um outro Efeito ao vivo, clicar novamente no boto Adicionar efeitos. Selecionar Embaar > Embaamento maior no menu pop-up Efeitos. Os pixels do bitmap selecionado ficaram embaados e o novo efeito adicionado lista de Efeitos ao vivo no Inspetor de propriedades.

Como trabalhar com camada e objetoAs camadas dividem um documento do Fireworks em planos distintos. Um documento pode ser formado por vrias camadas e cada uma delas pode conter vrios objetos. No Fireworks, o painel Camadas relaciona as camadas e os objetos contidos em cada camada. Com a utilizao do painel Camadas, possvel nomear, ocultar, mostrar e alterar a ordem de empilhamento das camadas e objetos, bem como mesclar bitmaps e aplicar mscaras de bitmap. Alm disso, pode adicionar e excluir camadas com o painel Camadas. Nesta parte do tutorial, usar o painel Camadas para mesclar as duas imagens bitmaps. Depois, nomear os objetos no seu documento. Alm disso, usar o painel Camadas para alterar a ordem de empilhamento dos objetos. Mais adiante no tutorial, ir usar o painel Camadas para aplicar uma mscara imagem mesclada. Mesclagem de bitmaps Agora que aplicou efeitos ao vivo imagem de fundo, ir mescl-la com a imagem do carro em tons de cinza para criar um nico bitmap.

26

Captulo 1

1

Se o painel Camadas estiver minimizado ou invisvel, clicar na seta expansora ou selecionar Janela > Camadas.Seta expansora

2 3

Clicar na miniatura da imagem do carro em tons de cinza no painel Camadas. Com a imagem do carro selecionada, clicar no cone do menu pop-up Opes na parte direita superior do painel Camadas.cone do menu pop-up Opes

4

Selecionar Mesclar para baixo. No painel Camadas, os dois objetos bitmap so mesclados em um bitmap. No Inspetor de propriedades no h mais efeitos na lista de Efeitos ao vivo. Isto porque mesclar para baixo combina os pixels de cada bitmap e os renderiza de modo no editvel como imagens separadas. Os efeitos ao vivo aplicados a um objeto ou bitmap no so mais editveis depois que uma mesclagem para baixo for executada em outro bitmap.


27

Nomeao de um objeto sempre bom nomear seus objetos para poder identific-los com facilidade mais tarde. Quando um documento se tornar grande e possuir vrios objetos, o manuseio ficar difcil se os objetos no tiverem nomes exclusivos. Nesta parte, nomear os objetos no documento usando o painel Camadas e o Inspetor de propriedades.1

Clicar duas vezes na palavra Bitmap ao lado da miniatura da imagem no painel Camadas. Uma caixa de texto exibida.

2

Digitar Classic Car na caixa de texto e pressionar Enter. O novo nome aplicado ao objeto bitmap.

3

Na janela do documento, selecionar o retngulo cinza que circunda o documento. Se estiver muito difcil a visualizao na tela, selecion-lo no painel Camadas. Desta vez, nomear um objeto usando o Inspetor de propriedades. Digitar Border na caixa Nome do objeto do Inspetor de propriedades e pressionar Enter.

4

O nome digitado tambm exibido do lado da miniatura do objeto no painel Camadas.5

Digitar um nome para o objeto do retngulo remanescente usando o painel Camadas ou o Inspetor de propriedades. Usar qualquer nome, mas certificar-se de que esteja escolhendo um nome representativo para poder identificar e gerenciar objetos facilmente no documento mais tarde.

28

Captulo 1

Alterao da ordem de empilhamento de um objeto A imagem bitmap mesclada sobrepe o objeto da borda e o retngulo azul. A borda e o retngulo azul precisam permanecer no topo, pois voc usar o painel Camadas para alterar a ordem de empilhamento dos objetos no documento.1 2

Clicar na miniatura do retngulo azul do painel Camadas para selecion-la. Arrast-la para o topo da Camada 1, acima da miniatura Classic Car.Nota: A camada mais acima no painel Camadas sempre a camada da Web. Voc aprender mais sobre a camada da Web em Tutorial de princpios bsicos do projeto da Web na pgina 43.

Durante o arraste do mouse, o ponteiro alterado de modo a refletir que voc est arrastando um objeto (apenas no Windows). Uma linha escura no painel Camadas indica onde o objeto ser solto se o boto do mouse for liberado naquele momento.3

Soltar o boto do mouse. O retngulo azul solto logo acima do objeto bitmap no painel Camadas. A ordem de empilhamento dos objetos tambm alterada na tela. Agora, o retngulo azul sobrepe o objeto bitmap e o objeto da borda.

4

Voc deseja que o objeto da borda seja o objeto mais superior, ento selecionar sua miniatura e arrast-la para o topo do painel Camadas, acima do retngulo azul.


29

Criao e edio de mscaraAgora que vrias modificaes j foram efetuadas na imagem do carro clssico, voc executar um ltimo procedimento para que ela fique transparente gradativamente. No Fireworks possvel aplicar dois tipos de mscaras: mscaras vetoriais e mscaras de bitmap. Neste tutorial, ser aplicada uma mscara de bitmap simples imagem do carro. Depois, ir modific-la colocando um preenchimento de dgrad. Os pixels da mscara exibiro ou ocultaro a imagem do carro em funo do valor de tons de cinza neles existentes. Aplicao de mscara Primeiro, aplicar uma mscara de bitmap branca e vazia, imagem do carro. A mscara branca mostra um objeto ou uma imagem selecionada, enquanto os pixels pretos em um mscara ocultam a imagem ou o objeto selecionado. Alm disso, ir pintar a mscara para fazer com que a imagem do carro parea estar desaparecendo no fundo.1 2

Com a ferramenta Ponteiro, selecionar a imagem bitmap. Clicar no boto Adicionar mscara na base do painel Camadas. Uma mscara transparente e vazia ser adicionada imagem selecionada. Para verificar se a mscara foi adicionada, observar a miniatura da mscara no painel Camadas. O realce amarelo em volta da miniatura da mscara indica que ela est selecionada.

Miniatura da mscara Objeto da mscara

Edio da mscara Agora, voc vai dar imagem bitmap uma transparncia aparente introduzindo um preenchimento de dgrad na mscara.1

Com a miniatura da mscara selecionada no painel Camadas, clicar e manter o boto do mouse pressionado na ferramenta Lata de tinta na seo Bitmap do painel Ferramentas. Selecionar a ferramenta Dgrad no menu pop-up que aparece.

30

Captulo 1

2

Clicar na caixa Cor de preenchimento no Inspetor de propriedades. A janela pop-up Editar dgrad aberta. Selecionar Branco, Preto na base do menu pop-up Predefinio. Os exemplos e a inclinao da cor so alterados para refletir a nova configurao. Os exemplos de cores localizados logo abaixo da inclinao da cor permitem a modificao das cores no dgrad.Inclinao da cor Exemplos de cor

3

4 5 6

Arrastar o exemplo de cores (branca) da esquerda para a direita, cerca de 1/4 do caminho, para ajustar o dgrad. Clicar fora da janela pop-up Editar dgrad para fech-la. Na tela, arrastar o ponteiro Dgrad pela imagem bitmap, como mostrado na ilustrao a seguir. A avaliao visual aparece na tela durante o arraste do mouse, permitindo a definio do ngulo e da distncia em que o dgrad ser aplicado.

7

Soltar o boto do mouse. A mscara modificada com o preenchimento de dgrad criado. A mscara afeta a imagem do carro conferindo a ela uma aparncia de transparncia em dgrad. A miniatura da mscara no painel Camadas exibe o preenchimento de dgrad aplicado.


31

8

Selecionar a ferramenta Ponteiro e clicar na miniatura da mscara no painel Camadas. O Inspetor de propriedades mostra que a mscara foi aplicada usando sua aparncia de tons de cinza. Os pixels mais escuros da mscara bloqueiam a imagem do carro, enquanto os pixels mais claros mostram o carro.

Criao e edio de um textoA seguir, adicionar texto ao documento e aplicar propriedades ao texto com o Inspetor de propriedades. Alm disso, criar quatro blocos de texto, dois para o ttulo da propaganda e dois para o texto do corpo. Criao do texto de ttulo Primeiro criar o texto do ttulo para a propaganda de aluguel de carro.1

Selecionar a ferramenta Texto na seo Vetor do painel Ferramentas e mover o ponteiro sobre a janela do documento. O ponteiro alterado para uma forma de I e o Inspetor de propriedades exibe as propriedades do texto.Tamanho Cor do preenchimento Fonte Botes de estilo

Entrelinhamento Escala horizontal Botes de alinhamento

2

No Inspetor de propriedades, executar um destes procedimentos:

Selecionar Times New Roman no menu pop-up Fonte. Digitar 85 como o tamanho da fonte. Clicar na caixa Cor de preenchimento. O ponteiro alterado para um conta-gotas. Clicar noponteiro conta-gotas no retngulo azul da tela.

A janela pop-up de cores fechada e a caixa Cor de preenchimento alterada para refletir a cor escolhida.

32

Captulo 1

Certificar-se de que nenhum dos botes de estilo (Negrito, Itlico e Sublinhado) esteja selecionado. Clicar no boto Alinhamento esquerda.3

Com o ponteiro em forma de I, clicar uma vez no meio da tela. Um bloco de texto vazio ser criado. O crculo vazado no canto superior direito do bloco de texto indica que o bloco de texto dimensionado automaticamente. Um bloco de texto dimensionado automaticamente no Fireworks ajusta sua prpria largura com base na linha de texto mais longa do bloco.Indicador de dimensionamento automtico

4

Digitar Vintage no bloco de texto. A largura do bloco de texto expandida durante a digitao. Clicar uma vez fora do bloco de texto para aplicar a entrada do texto. O bloco de texto permanece selecionado e a ferramenta Texto ainda a ferramenta selecionada. O crculo vazado no bloco de texto no est mais visvel. Esse indicador somente est visvel durante a insero ou edio de texto.

5

6

Selecionar a ferramenta Ponteiro e arrastar o texto para posicion-lo como mostrado na ilustrao a seguir.

7 8 9

Clicar fora do bloco de texto para cancelar a seleo e escolher de novo a ferramenta Texto. No Inspetor de propriedades, escolher Arial como fonte e 12 como o tamanho da fonte. Clicar novamente na tela, em algum lugar sob o bloco de texto recm-criado e digitar CLASSIC RENTALS em caixa alta.


33

10

Selecionar a ferramenta Ponteiro para aplicar a entrada do texto. A alternncia para uma outra ferramenta no painel Ferramentas aplica entradas e edies de texto da mesma forma que ao clicar fora de um bloco de texto. Ao pressionar a tecla Esc voc obter o mesmo resultado.

11

Arrastar o novo bloco de texto para posicion-lo logo abaixo do bloco de texto Vintage, conforme mostrado na ilustrao a seguir.

12

Clicar fora do bloco de texto para cancelar a seleo.

Criao do texto do corpo Em seguida, criar dois blocos de texto que compem o texto do corpo desta propaganda.1 2

Selecionar a ferramenta Texto. Agora, em vez de apenas clicar na tela, arrastar a ferramenta para desenhar uma moldura com o ponteiro em forma de I, conforme mostrado na ilustrao a seguir.

A bloco de texto exibido. O quadrado vazado no canto superior direito indica que o bloco de texto tem uma largura fixa, definida pela moldura desenhada. Os blocos de texto com largura fixa mantm a mesma largura especificada independentemente da quantidade de texto digitado. A ala de canto vazada ativada ou desativada ao ser clicada. Clicando duas vezes nela alternar o bloco de texto entre dimensionamento automtico e largura fixa.3

Digitar o texto a seguir sem inserir nenhuma quebra de linha durante a digitao: Indulge yourself by traveling in a Vintage classic automobile, with a chauffeur to whisk you to any destination.

34

Captulo 1

Dica: Se voc estiver exibindo o tutorial on-line, basta simplesmente copiar e colar o texto acima no bloco de texto do Fireworks.

O texto flui no bloco de texto criado. O bloco de texto cresce na vertical, no na horizontal.4 5 6

Selecionar a ferramenta Ponteiro e clicar fora do bloco de texto para cancelar a seleo. Depois, escolher de novo a ferramenta Texto. No Inspetor de propriedades, clicar na caixa Cor de preenchimento e escolher o branco como a cor do texto. Clicar no canto inferior esquerdo da tela. Um novo bloco de texto ser exibido no topo do retngulo azul. Digitar o texto a seguir em caixa alta sem inserir quebras de linha: SPORTS - LUXURY - CONVERTIBLE - LIMOUSINE - ANTIQUE - NEO-CLASSIC EXOTIC - ROADSTERDica: Se estiver exibindo o tutorial on-line, basta simplesmente copiar e colar o texto acima.

7

8

Selecionar a ferramenta Ponteiro e reposicionar o bloco de texto conforme mostrado a seguir.

Todo texto criado no Fireworks pode ser editado da mesma forma que em um processador de textos. Para editar texto, basta clicar duas vezes em um bloco de texto com a ferramenta Ponteiro, realar o texto a ser alterado e digitar em cima dele. Ou, clicar com o ponteiro em forma de I em qualquer parte do bloco de texto para introduzir o novo texto.


35

Definio de uma propriedade de texto Agora que os blocos de texto foram criados, voc utilizar o Inspetor de propriedades para alterar diversas propriedades do texto.1

Selecionar o bloco de texto Vintage. As propriedades do bloco de texto aparecem no Inspetor de propriedades. Essas propriedades so semelhantes s opes exibidas quando a ferramenta Texto est selecionada.

2

No Inspetor de propriedades, executar um destes procedimentos: no esteja selecionado. A suavizao de serrilhado suaviza as bordas do texto para que os caracteres do texto apaream mais limpos e mais legveis. Em geral, as fontes serif, como Times New Roman, tm melhor aparncia se a opo Suavizar serrilhado estiver definida com um tamanho superior a 45 pontos. Da mesma forma, as fontes sans serif, como Arial, tm melhor aparncia se a opo Suavizar serrilhado estiver definida com um tamanho superior a 32 pontos.Dica: O termo serif se refere a linhas mnimas (muitas vezes chamadas de ps) anexadas aos caracteres do texto de fontes como Times New Roman. A fonte Arial considerada uma fonte sans serif porque os caracteres do texto no contm serifs.

Selecionar Suavizar serrilhado no menu pop-up Nvel de suavizao de serrilhado, caso esse ainda

Definir a opo Escala horizontal no Inspetor de propriedades como 89% e pressionar Enter.

Os caracteres no bloco de texto Vintage se tornam mais finos. A escala horizontal alonga ou reduz os caracteres no texto selecionado no sentido horizontal. A configurao padro 100%. Uma opo maior alongar o texto na horizontal e uma opo menor diminuir na largura.3

Arrastar o bloco de texto Vintage para que fique posicionado como mostrado na ilustrao a seguir.

4 5

Selecionar o bloco de texto Classic Rentals. No Inspetor de propriedades, executar um destes procedimentos:

Clicar na caixa Cor de preenchimento, digitar FF6600 como o valor da cor e pressionar Enter. Clicar no boto Negrito.

36

Captulo 1

Selecionar Ondular suavizao de serrilhado no menu pop-up Nvel de suavizao de serrilhado.Em geral, as fontes sans serif como a Arial tm melhor aparncia se definidas como Ondular suavizao de serrilhado quando seus tamanhos forem entre 12 e 18 pontos. Da mesma forma, as fontes serif tm melhor aparncia se definidas como Ondular suavizao de serrilhado, quando seus tamanhos forem entre 24 e 32 pontos.6

Arrastar o bloco de texto para reposicion-lo como mostrado a seguir.

7 8

Selecionar o bloco de texto Mate. No Inspetor de propriedades, executar um destes procedimentos: Definir o tamanho da fonte como 13. Selecionar preto como a cor do texto. Clicar no boto Alinhamento direita. Selecionar Ondular suavizao de serrilhado no menu pop-up Nvel de suavizao de serrilhado. Definir a opo Escala horizontal como 88%. Definir a opo Entrelinhamento como 150% e pressionar Enter. O entrelinhamento define o espao entre as linhas do texto. O entrelinhamento normal de texto 100%. Qualquer opo acima de 100% aumentar o espao entre as linhas e qualquer fator abaixo mover as linhas para ficarem mais prximas.

9

Arrastar uma das alas de canto do bloco de texto para redimension-lo, a fim de que o texto flua como mostrado a seguir. Se necessrio, arrastar todo o bloco de texto para reposicion-lo.


37

10 11

Selecionar o bloco de texto na base do documento. No Inspetor de propriedades, executar um destes procedimentos:

Definir o tamanho da fonte como 13. Selecionar Ondular suavizao de serrilhado no menu pop-up Nvel de suavizao deserrilhado.

Definir a opo Escala horizontal como 75% e pressionar Enter.12

Reposicionar o bloco de texto se necessrio.

Adicionar uma sombra ao texto possvel aplicar efeitos ao vivo ao texto. Aqui, ir adicionar uma sombra ao texto Vintage usando os controles de Efeitos ao vivo no Inspetor de propriedades.1 2

Selecionar o bloco de texto Vintage. Clicar no boto Adicionar efeitos no Inspetor de propriedades. Selecionar Sombra e brilho > Aplicar sombra no menu pop-up Efeitos. As opes para o novo efeito aparecem em uma janela pop-up.

3

Digitar 5 em Distncia e 60% em Opacidade. Clicar fora da janela pop-up para fech-la. Um efeito de sombra adicionado ao bloco de texto Vintage. Clicar em uma rea vazia da janela do documento para cancelar a seleo do bloco de texto.

4

Exportao do documentoNesta fase, voc criou um objeto vetorial e editou suas propriedades, importou uma imagem bitmap e fez modificaes nos pixels, alm de ter criado e formatado texto. Agora, est pronto para otimizar e exportar o documento. Otimizao do grfico Antes de exportar qualquer documento do Fireworks, sempre necessrio otimiz-lo. A otimizao assegura que um grfico seja exportado com o melhor equilbrio de compresso e qualidade possvel.1

Executar um destes procedimentos para abrir o painel Otimizar, caso ainda no esteja aberto:

Selecionar Janela > Otimizar. Se o painel estiver minimizado no lado direito da tela, clicar na seta expansora para exibir todoo painel.

38

Captulo 1

2

Selecionar JPEG - Melhor qualidade no menu pop-up Configuraes. As opes no painel so alteradas para refletir a nova configurao.

Essas configuraes podem ser alteradas, mas neste tutorial usaremos as configuraes padro.3

Clicar na guia Visualizar perto do topo da janela do documento. A guia Visualizar exibe o documento na forma como ele aparecer quando exportado com as configuraes atuais.Tamanho do arquivo Tempo de transferncia

Na parte superior direita da janela, o Fireworks exibe qual ser o tamanho do arquivo exportado e o tempo estimado que levar para exibir o grfico ao ser visualizado na Web.


39

Exportao do grfico O grfico foi otimizado, portanto voc j est pronto para export-lo como um arquivo JPEG.1

Selecionar Arquivo > Exportar. A caixa de dilogo Exportar aberta.

O nome do arquivo listado possui a extenso .jpg. O Fireworks escolhe este formato de arquivo, pois foi selecionado no painel Otimizar.2 3

Navegar at a pasta Tutorials no espao de trabalho e procurar Tutorial1/Export. Certificar-se de que o menu pop-up Salvar como tipo (Windows) ou Salvar Como (Macintosh) l Somente imagens e clicar em Salvar. O arquivo JPEG exportado para o local especificado. Lembrar-se de que o arquivo PNG seu arquivo de origem ou arquivo de trabalho. Embora tenha exportado o documento no formato JPEG, tambm necessrio salvar o PNG, pois, assim, qualquer alterao feita tambm ser refletida no arquivo de origem.

4 5

Selecionar Arquivo > Salvar para salvar as alteraes no arquivo PNG. Selecionar Arquivo > Fechar.

Exibio do documento exportado O novo arquivo criado durante o processo de exportao est localizado na pasta especificada.1

No Fireworks, selecionar Arquivo > Abrir e procurar a pasta Export. O Fireworks criou um arquivo neste local denominado vintage.jpg.

40

Captulo 1

2

Selecionar vintage.jpg e clicar em Abrir. O grfico aberto em uma nova janela do documento do Fireworks. No painel Camadas, todos os objetos foram nivelados. Quando isso ocorre, os objetos so mesclados em um nico objeto e tornam-se objetos que no podem ser editados como objetos separados.

O Inspetor de propriedades exibe as propriedades de um bitmap. Todos os efeitos ao vivo e outros atributos aplicados com o Inspetor de propriedades no esto mais disponveis para o bitmap selecionado.

O documento fica com essa aparncia porque o Fireworks tem que nivelar a imagem e todas as propriedades quando se escolheu export-lo para o formato JPEG. No entanto, voc ainda tem o arquivo PNG de origem, assim se precisar trabalhar mais no desenho, sempre ser possvel abrir o arquivo PNG e todos os objetos ainda podero ser editados.3

Selecionar Arquivo > Abrir e selecionar vintage.png na pasta Tutorial1. Clicar em Abrir. No painel Camadas, todos os objetos esto novamente disponveis como objetos separados. Cada objeto editvel e possui suas propriedades.

4

Clicar em cada objeto. O Inspetor de propriedades exibe as diversas opes para cada um dos objetos selecionados. Selecionar o texto Vintage na tela. O efeito ao vivo Aplicar sombra desse objeto de texto aparece no Inspetor de propriedades. Agora, possvel observar a vantagem de usar um arquivo PNG do Fireworks como seu arquivo de origem. Voc pode fazer alteraes em um documento e esse sempre ser editvel, mesmo se escolher exportar o documento para outro formato como o JPEG.

5


41

Seguir as prximas etapasAs tarefas necessrias para criar grficos no Fireworks foram completadas. Voc aprendeu como criar e salvar um novo documento e como adicionar objetos vetoriais e grficos de bitmap ao documento. Alm disso, aplicou efeitos ao vivo, trabalhou com camadas, criou uma mscara e adicionou texto. Finalmente, aprendeu a exportar o grfico concludo. Para obter informaes sobre qualquer recurso mencionado neste tutorial e informaes sobre recursos adicionais do Fireworks, consultar o ndice de Usando o Fireworks ou pesquisar os tpicos da Ajuda do Fireworks. Para mais tutoriais do Fireworks, visitar o site da Macromedia na Web, em http://www.macromedia.com/br/. Certificar-se de visitar o premiado Centro de suporte da Macromedia, em http://www.macromedia.com/br/support/. Para aprender como usar o Fireworks na criao de pginas da Web interativas, consultar Tutorial de princpios bsicos do projeto da Web na pgina 43. Voc usar a imagem JPEG exportada deste documento e a importar na pgina da Web. Alm disso, aprender a criar interatividade na Web como botes, rollovers e menus pop-up.

42

Captulo 1

CAPTULO 2 Tutorial de princpios bsicos do projeto da Web

Este tutorial ir orient-lo nas tarefas bsicas para execuo de um projeto grfico e interativo para Web com o Macromedia Fireworks MX. Voc adquirir experincia na prtica usando o aplicativo grfico da Web, lder no seu segmento, e aprender os conceitos de um projeto de Web enquanto treina.

O que voc aprenderNeste tutorial, voc vai repetir um fluxo de trabalho de produo tpico do Fireworks para o projeto de uma pgina da Web. Voc aprender o seguinte:

Cpia da pasta Tutorials Exibir a pgina da Web concluda Abertura do arquivo de origem Importao de um grfico Diviso do documento Criao de um rollover de arrastar e soltar Criao e edio de um boto para criar uma barra de navegao Criao e edio de um menu pop-up Otimizao do documento Exportao de HTML Teste do arquivo concludo

O que voc deve saberAntes de iniciar este tutorial, necessrio estar familiarizado com a criao de imagens grficas no Fireworks ou em outros aplicativos grficos de bitmap ou vetoriais. Alm disso, precisa possuir as habilidades bsicas descritas no Fireworks Tutorial de princpios bsicos do projeto grfico na pgina 15. Em especial, voc deve saber como realizar as seguintes tarefas no Fireworks:

Salva de um documento Seleo de um objeto Edio de uma propriedade de objeto Exibio e utilizao de um painel

43

Como trabalhar com camadas e objetos Criao e edio de texto Exportao de grfico Cpia da pasta TutorialsAntes de mais nada, fazer uma cpia da pasta Tutorials, para salvar os resultados do seu trabalho permitindo, assim, que voc ou outro usurio possa concluir o tutorial em uma outra oportunidade, usando os arquivos originais. Se tiver concludo o tutorial Princpios bsicos do projeto grfico, voc j ter feito uma cpia da pasta Tutorials, portanto pode ignorar esta etapa.1

Navegar at a pasta do aplicativo Fireworks no disco rgido.Nota: Se no conseguir exibir a pasta do aplicativo Fireworks, talvez tenha acesso limitado aos arquivos do sistema. possvel fazer o download dos arquivos necessrios ao tutorial no Centro de suporte Fireworks na Web em http://www.macromedia.com/br/support/.

2

Arrastar uma cpia da pasta Tutorials para o espao de trabalho.

Exibir a pgina da Web concludaA seguir, exibir o arquivo do tutorial concludo para ver como o projeto terminado aparecer depois de export-lo como um arquivo HTML.1 2

Iniciar o navegador da Web. No disco rgido, navegar at a pasta Tutorials, copiada no espao de trabalho, e procurar Tutorial2/Complete.Nota: Algumas verses do Microsoft Windows ocultam, por padro, as extenses dos tipos de arquivos conhecidos. Se essa configurao no tiver sido alterada, ento os arquivos existentes na pasta Complete no exibiro as extenses. Na manipulao de grficos e pginas da Web, prefervel visualizar as extenses dos arquivos. Para informaes sobre como exibir novamente as extenses de arquivos, consultar a Ajuda do Windows.

3

Selecionar o arquivo final.htm e arrast-lo para uma janela aberta do navegador. Para o tutorial, voc concluir uma verso parcialmente terminada desta pgina da Global, uma locadora de carros.

4

Mover o ponteiro sobre a imagem grande Vintage. Quando o ponteiro mover sobre a imagem Vintage, uma outra imagem na pgina ser alterada. Isso denominado um rollover desarticulado.

5

Mover o ponteiro pela barra de navegao no topo da pgina da Web. Os botes so alterados em funo da passagem do ponteiro sobre eles. Clicar no boto Rates para testar o link. O link leva voc pagina do Fireworks, em http://www.macromedia.com/br/, mas ser necessrio digitar seu prprio URL para esse e outros itens ao concluir o tutorial.

6 7

Usar o boto Voltar do navegador para retornar pgina final.htm. Mover o ponteiro sobre a imagem Worldwide Airports. Um menu pop-up ser exibido. Fazer um rollover com o ponteiro sobre cada item do menu, inclusive sobre o primeiro item, que contm um submenu. Clicar em United States para testar o link, depois retornar pgina final.htm.

8

44

Captulo 2

9

Ao concluir a exibio da pgina da Web, poder fech-la ou deix-la aberta para referncia conforme seguir no tutorial.Nota: A pasta Complete tambm inclui o documento do Fireworks a partir do qual o arquivo HTML gerado. Para exibir o documento, clicar duas vezes em final.png.

Abertura do arquivo de origemVoc exibiu o arquivo final.htm em um navegador; agora, est pronto para iniciar seu projeto.1 2

No Fireworks, selecionar Arquivo > Abrir. Navegar at a pasta Tutorials no espao de trabalho. Procurar Tutorial2/Start e abrir global.png.

Nota: Durante a execuo do tutorial, lembrar-se de salvar o trabalho com freqncia selecionando Arquivo > Salvar.

Importao de um grficoAgora que voc j abriu o projeto no concludo da pgina Global na Web, importar um grfico. Se tiver concludo o tutorial Princpios bsicos do projeto grfico do Fireworks, usar o JPEG que voc criou. Se no tiver executado este tutorial, existe uma imagem concluda para voc.1

Selecionar Arquivo > Importar e executar uma das aes a seguir: Export.

Se tiver concludo o tutorial Princpios bsicos do projeto grfico, procurar a pasta Tutorial1/ Se no tiver concludo o tutorial Princpios bsicos do projeto grfico, procurar a pasta Tutorial2/Assets.2 3

Selecionar vintage.jpg e clicar em Abrir. Clicar em qualquer lugar da rea branca e vazia da tela. A imagem exibida, selecionada. Arrastar a imagem para que fique posicionada conforme mostra a ilustrao a seguir.

4

Tutorial de princpios bsicos do projeto da Web

45

Diviso do documentoOs designers da Web usam um processo denominado fatiamento para recortar documentos da Web em pequenas partes, por uma srie de motivos. Imagens menores so transferidas de modo mais rpido na Web, desta forma os usurios podem observar o carregamento da pgina aos poucos em vez de esperar a transferncia de uma imagem enorme. Alm disso, o fatiamento viabiliza a otimizao de vrias partes de um documento de modo diferente. O fatiamento tambm necessrio para introduzir interatividade. Aqui, voc ir criar fatias para alguns dos elementos grficos da pgina da Web. Posteriormente, introduzir interatividade a essas fatias, alm de definir configuraes de compactao e otimizao para elas.1

Com a imagem Vintage ainda selecionada, selecionar Editar > Inserir > Fatia. Uma fatia inserida no topo da imagem. Por padro, as fatias possuem uma sobreposio verde.

2

Clicar em qualquer lugar fora da fatia para cancelar a seleo. As guias de fatia vermelhas definem a fatia, estendendo a altura e a largura do documento. Quando tiver criado a fatia, o Fireworks dividir automaticamente o restante do documento.Nota: Se voc no visualizar as guias de fatia vermelhas, selecionar Exibir > Guias de fatia.

3 4

Clicar com a tecla Shift no grfico Worldwide Airports e no grfico Great WEEKEND Rates no lado esquerdo do documento, para selecionar os dois ao mesmo tempo. Selecionar Editar > Inserir > Fatia. Na caixa de mensagem que exibida, selecionar Mltiplos. Isso permite a insero de vrias fatias ao mesmo tempo. As fatias so inseridas no topo de cada um dos grficos selecionados. A adio de outras fatias altera o layout de fatias automticas no restante do documento.

46

Captulo 2

5

Clicar em qualquer lugar fora das fatias para cancelar a seleo. Existe agora um espao entre as fatias Vintage e Great WEEKEND Rates. Esta uma fatia automtica fina.

6

Colocar o ponteiro sobre a guia da fatia esquerda da imagem Vintage.

O ponteiro alterado para um ponteiro Movimento de guia, indicando que voc pode clicar na guia de fatia e arrast-la. Com o arraste da guia de fatia, possvel alterar a forma de uma fatia.7

Arrastar a guia de fatia para a esquerda at encaixar na guia de fatia da direita, na imagem Great WEEKEND Rates, como mostrado na ilustrao a abaixo.

8

Soltar o boto do mouse. A fatia Vintage agora se estende por toda a borda da fatia Great WEEKEND Rates e a fatia automtica mnima excluda. Considerar a fatias como clulas de uma tabela em um aplicativo de planilhas ou processador de textos. Se voc arrastar as guias para redimensionar uma fatia no Fireworks redimensionar as outras fatias, da mesma forma que se arrastar as bordas da clula de uma tabela redimensionar todas as outras clulas da tabela. Se voc arrastar uma guia de fatia sobre a fatia automtica ou ultrapass-la, as guias de fatia sero mescladas e as fatias automticas desnecessrias sero excludas.


47

9

Se o painel Camadas estiver minimizado ou invisvel, clicar na seta expansora ou selecionar Janela > Camadas. No topo do painel est a Camada da Web. Ela contm todos os objetos da Web de um documento. As trs fatias criadas esto listadas aqui. A Camada da Web sempre a camada mais acima de qualquer documento. Ela no pode ser movida, renomeada ou excluda.

Criao de um rollover de arrastar e soltarDepois de ter fatiado seu documento, agora est na hora de adicionar interatividade. Voc ir usar duas das fatias inseridas na etapa anterior para criar um rollover de arrastar e soltar. H dois tipos de rollovers: simples e desarticulados. Um rollover simples exibe uma imagem diferente quando o ponteiro passar sobre ele em um navegador da Web. Um rollover desarticulado faz com que outra imagem seja alterada em uma parte diferente da tela quando o ponteiro passar sobre ela. Aqui, voc ir criar um rollover desarticulado.1

Selecionar a fatia que cobre a imagem Vintage. O cone redondo no centro da fatia denominado ala de comportamento. Ele permite a introduo de comportamentos, ou interatividade, em uma fatia. Se estiver familiarizado com o Macromedia Dreamweaver, identificar diversos desses comportamentos no Fireworks.

Ala de comportamento

48

Captulo 2

Os comportamentos tambm podem ser aplicados usando o painel Comportamentos. Mas, para obter uma interatividade simples como os rollovers, a ala de comportamento de fatia representa um mtodo mais rpido e fcil de aplicar um comportamento.2

Arrastar a ala de comportamento na fatia Great WEEKEND Rates e liberar o boto do mouse.

Uma linha de comportamento azul se estende da ala de comportamento at o canto da fatia, e a caixa de dilogo Trocar imagem exibida.3

Certificar-se de que a Moldura 2 esteja selecionada no menu pop-up Trocar imagem de, e clicar em OK. Quando o ponteiro passar sobre a fatia Vintage em um navegador, uma imagem da Moldura 2 substituir a imagem Great WEEKEND Rates. A imagem Vintage considerada a acionadora do efeito rollover, e a imagem que substituir a imagem Great WEEKEND Rates considerada a imagem trocada.

4

Se o painel Molduras estiver minimizado ou no estiver visvel, clicar na seta expansora do grupo de painis Molduras e Histrico e clicar na guia Molduras, ou selecionar Janela > Molduras.

O painel Molduras lista as molduras disponveis no documento atual. No momento, existe apenas uma moldura no documento. Em geral, o painel Molduras usado em animao. No caso de rollovers, ele usado para manter a troca de imagens.


49

5

Clicar no boto Moldura nova/duplicada na base do painel. Uma nova moldura criada no painel Molduras, denominada Moldura 2. Agora, o espao de trabalho est vazio, exceto quanto s fatias inseridas.

No h objetos listados no painel Camadas, com exceo do contedo da Camada da Web. Isso se deve ao fato de que, por padro, as camadas no Fireworks no so compartilhadas em todas as molduras, com exceo da Camada da Web, que sempre compartilhada. Os objetos na Camada da Web aparecem em cada uma das molduras do documento, assim sendo, qualquer alterao feita nesses objetos, como nas fatias, afetam todas as molduras.6 7

Selecionar Arquivo > Importar e navegar at a pasta Tutorial2/Assets. Selecionar o arquivo denominado rates.gif e clicar em Abrir. Posicionar o ponteiro de insero sobre a fatia em que estava localizada a imagem Great WEEKEND Rates na Moldura 1. Alinhar o ponteiro da melhor forma possvel com o canto superior esquerdo da fatia.

50

Captulo 2

8

Clicar para inserir a imagem. A imagem Vintage Classic Rates exibida.

9

Clicar na guia Visualizao no topo da janela do documento, e ocultar as fatias do documento clicando no boto Ocultar fatias e pontos ativos na seo Web do painel Ferramentas.

Mover o ponteiro sobre a imagem Vintage. A imagem Great WEEKEND Rates ser alterada quando o ponteiro passar sobre a imagem Vintage.Dica: Se parecer que a imagem salta um pouco ou que a transio entre as imagens no est suave, ajustar a posio da imagem trocada na Moldura 2 enquanto estiver na exibio Original. Para obter um posicionamento preciso, ativar Onion Skinning no painel Molduras, ou verificar se as coordenadas X e Y da imagem Vintage Classic Rates so as mesmas que as da imagem Great WEEKEND Rates no Inspetor de propriedades. Quanto tiver terminado, retornar Moldura 1 e, se necessrio, desativar Onion Skinning. Para mais informaes sobre essas opes, consultar o ndice de Usando o Fireworks ou pesquisar a Ajuda do Fireworks.

10

Depois

tuturiais fireworks mx

Documents

criao e salva

bitmap e seleo

seleo e transformao

macromedia flash

pixels22 adio e edio

whirlwind e xtra

e contrapartes estrangeiras

arrastar e soltar