macromedia

Usando o Fireworks MX

2Marcas 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 SOF-TWARE 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

3NDICE ANALTICO

INTROGuia d

RequisiInstalaO que h

CAPTUTutori

O que vO que vCpia dExibiCriaoExploraCriaoImportaAdio Como tCriaoCriaoExportaSeguir a

CAPTUTutori

O que vO que vCpia dExibir aAberturImportaDivisoCriaoCriaoCriaoOtimizExportaTeste doSeguir as prximas etapas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71DUOe introduo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7tos do sistema . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7o do Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 de novo no Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

LO 1al de princpios bsicos do projeto grfico . . . . . . . . . . . . . . . . . . . . . . 15oc aprender . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15oc deve saber . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15a pasta Tutorials . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

o do arquivo concludo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 e salva de um novo documento. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16o do ambiente de trabalho do Fireworks. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 e edio de um objeto vetorial . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19o de bitmap e seleo de pixels. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22e edio de efeitos ao vivo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25rabalhar com camada e objeto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 e edio de mscara . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 e edio de um texto. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32o do documento. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38s prximas etapas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42

LO 2al de princpios bsicos do projeto da Web . . . . . . . . . . . . . . . . . . . . . 43oc aprender . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43oc deve saber . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43a pasta Tutorials . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44 pgina da Web concluda . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44a do arquivo de origem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45o de um grfico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 do documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 de um rollover de arrastar e soltar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48 e edio de um boto para criar uma barra de navegao . . . . . . . . . . . . . . . . . 51 e edio de um menu pop-up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57ao do documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64o de HTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67 arquivo concludo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70

ndic4

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

CAPTUSele

SeleoSeleoEdio TransfoOrganiz

CAPTUComo

Como tCriaoDesenhRetoquAjuste dEmbaa

CAPTUComo

DesenhEdio

CAPTUUtiliza

DigitaEdio Como aAnexaTransfoConverImportVerificaUtiliza

CAPTUAplica

Uso da OrganiUso de Como tComo tAplicaAdio e analtico

LO 4o e transformao de um objeto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103

de um objeto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103 de um pixel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106de objetos selecionados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116rmao e distoro de objetos selecionados e selees . . . . . . . . . . . . . . . . . . . 118ao de um objeto. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121

LO 5 trabalhar com um bitmap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125rabalhar com um bitmap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125 de um objeto bitmap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125o, pintura e edio de um objeto bitmap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127e de um bitmap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130a cor e do tom de um bitmap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133mento e aguamento de um bitmap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142

LO 6 trabalhar com objetos vetoriais. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147o de objeto vetorial . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147de um traado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159

LO 7o de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169o de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171plicar traos, preenchimentos e efeitos ao texto . . . . . . . . . . . . . . . . . . . . . . . . 180

o de texto a um traado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180rmao de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183so de texto em traados. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183ao de texto. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184o ortogrfica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185o do Editor de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186

LO 8o de cor, trao e preenchimento. . . . . . . . . . . . . . . . . . . . . . . . . . . . 189seo Cores do painel Ferramentas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189zao de um grupo de exemplos e de um modelo de cor . . . . . . . . . . . . . . . . . . 190uma caixa de cor e janela pop-up de cores . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197rabalhar com um trao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198rabalhar com um preenchimento. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204o de um preenchimento dgrad ou com padro . . . . . . . . . . . . . . . . . . . . . . 205de textura a traos e preenchimentos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210

CAPTULO 9Uso de Efeitos ao vivo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213Aplicao de Efeitos ao vivo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213Edio de Efeitos ao vivo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218

CAPTULO 10Camada, mascaramento e mistura. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221Como trabalhar com uma camada. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221Mascaramento de imagens. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227Mistura e transparncia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245

CAPTUUso d

Uso de Uso de Como t

CAPTUFatias

CriaoComo tPreparaComo t

CAPTUCria

CriaoCriaoCriao

CAPTUCria

Como cComo tComo tInterpoComo vExportaComo tUtiliza

CAPTUOtimiz

Sobre oComo uOtimizExportaComo u

CAPTUUso d

Como tComo tndice analtico 5

LO 11e estilo, smbolo e URL. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249um estilo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249um smbolo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252rabalhar com um URL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258

LO 12, rollovers e pontos ativos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261 e edio de fatias. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261ornar as fatias interativas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269o de fatias para exportao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276rabalhar com pontos ativos e mapas de imagem . . . . . . . . . . . . . . . . . . . . . . . 282

LO 13o de botes e menus pop-up. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287 de um smbolo de boto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287 de barras de navegao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297 de menus pop-up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 298

LO 14o de animao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309onstruir uma animao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309rabalhar com um smbolo de animao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310rabalhar com uma moldura . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314lao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 319isualizar uma animao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 320o de uma animao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 320rabalhar com uma animao existente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322o de mltiplos arquivos como uma animao. . . . . . . . . . . . . . . . . . . . . . . . . 323

LO 15ao e exportao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 325timizao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 325sar o Assistente de exportao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 326

ao no espao de trabalho . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 329o do Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 347sar o boto Exportao rpida. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 361

LO 16o Fireworks com outros aplicativos. . . . . . . . . . . . . . . . . . . . . . . . . . . . 363rabalhar com o Macromedia Dreamweaver MX. . . . . . . . . . . . . . . . . . . . . . . . 363rabalhar com o Macromedia Flash MX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 377

ndic6

Como trabalhar com o Macromedia FreeHand . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 382Como trabalhar com o Macromedia Director . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 386Como trabalhar com o Macromedia HomeSite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 389Como trabalhar com o Microsoft FrontPage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 392Como trabalhar com o Adobe Photoshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 395Sobre como trabalhar com o Adobe GoLive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 399Sobre como trabalhar com editores de HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 400

CAPTULO 17Automatizao de uma tarefa repetitiva . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 401LocalizaProcessUso doExtens

CAPTUPrefer

ConfiguAlteraComo t

NDICEe analtico

r e substituir . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 402o em lote . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 407 Registro de projeto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 414o dos recursos do Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 415

LO 18ncias e atalhos de teclado. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 421rao de preferncias . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 421o dos conjuntos de atalho de teclado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 424rabalhar com arquivos de configurao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 427

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 433

INTRODUOGuia de introduo

Maco prdese

Usaavangrfpoddem

FireDireparaexpoedit

RequiAnthard

Microso

P W 6

d

r A u

Macinto

Pp

6 r7

romedia Fireworks MX a soluo para produo e projetos grficos profissionais na Web. imeiro ambiente de produo que trata e resolve os desafios especiais que se apresentam aos nvolvedores e projetistas grficos da Web.

r o Fireworks para criar, editar e animar imagens grficas na Web, adicionar interatividade ada e otimizar imagens em um ambiente profissional. No Fireworks, possvel criar e editar

icos vetoriais e de bitmap em um nico aplicativo. Tudo editvel, o tempo todo. E o usurio e automatizar o fluxo de trabalho para atender as necessidades de atualizaes e alteraes oradas.

works opera integrado com outros produtos da Macromedia como Flash, FreeHand e ctor e tambm com os mais conhecidos aplicativos de imagens grficas e editores de HTML, proporcionar uma soluo de Web verdadeiramente integrada. Voc pode facilmente rtar imagens grficas do Fireworks com cdigo personalizado de HTML e Java Script para o

or HTML que estiver usando.

sitos do sistema es de instalar o Fireworks, assegurar-se de que seu computador esteja equipado com o ware e software descritos a seguir.

ft Windows

rocessador Intel Pentium II de 300MHz

indows 98 SE, ME, NT 4 (Service Pack 6), 2000 ou XP

4 MB de RAM disponvel (recomenda-se 128 MB) mais 80 MB de espao disponvel em isco

esoluo de 800 x 600 pixels, 256 cores ou melhor

dobe Type Manager verso 4 ou posterior, para uso com fontes Tipo 1

nidade de CD-ROM

sh

rocessador Power Macintosh G3, executando o OS 9.1 ou posterior, ou OS X verso 10.1 ou osterior

4 MB de RAM disponvel (recomenda-se 128 MB) mais 80 MB de espao disponvel em disco

esoluo de 800 x 600 pixels, 256 cores ou melhor

Intro8

Adobe Type Manager verso 4 ou posterior para uso com fontes Tipo 1 (somente OS 9.x) unidade de CD-ROM

Instalao do Fireworks Ler o documento ReadMe no DC-ROM do Fireworks para para ficar a par das informaes mais recentes.

Para instalar o Fireworks:

1 I

2 S

NaC

N3 S

O

4 Q

Execu

A Mmes

Se teexec

Se aentrsupp

Exibi

Em Durentetrab

Usuparacon

Como a

Exisrpino ainfoduo

nserir o CD do Fireworks na unidade de CD-ROM do computador.

eguir um destes procedimentos:

o Windows, o programa de instalao do Fireworks se inicia, automaticamente. Se isso no contecer, escolher Iniciar > Executar. Clicar em Procurar e escolher o arquivo Setup.exe no D do Fireworks. Clicar em OK na caixa de dilogo Executar.

o Macintosh, clicar duas vezes no cone Instalador do Fireworks.

eguir as instrues da tela.

programa de instalao solicita a digitao das informaes necessrias.

uando solicitado, reiniciar o computador.

o do Fireworks em sistemas conectados em rede

acromedia utiliza deteco de licena de rede para impedir que cpias do Fireworks com o mo nmero de srie sejam executadas em vrios sistemas conectados por uma rede local.

ntar iniciar o Fireworks e houver um nmero maior de usurios do que o definido pela licena utando o Fireworks na mesma rede, aparecer um alerta de restrio de licena.

char que no deveria receber esta mensadem ou se desejar obter licenas adicionais para o produto, e em contato com o Suporte Tcnico da Macromedia em http://www.macromedia.com/br/ort/email/cs/.

o de um arquivo instalado com Fireworks

algum momento pode ser necessrio exibir ou acessar os arquivos instalados com o Fireworks. ante a instalao, o Fireworks coloca os arquivos em vrios locais no sistema. importante nder onde esses arquivos residem e por qu. Para mais informaes, consultar Como alhar com arquivos de configurao na pgina 427.

rios de Macintosh devem prestar ateno especial ao novo formato que o Fireworks utiliza armazenar o aplicativo e seus arquivos de configurao padro. Para mais informaes, sultar Exibio do contedo do pacote (somente Macintosh) na pgina 431.

prender o Fireworks

tem vrios recursos para aprender a trabalhar com o Fireworks, inclusive um manual de incio do impresso (Guia de introduo do Fireworks MX), o sistema de ajuda que pode ser iniciado plicativo, uma verso PDF da documentao completa do Fireworks e vrios recursos rmativos na Internet.

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 dinrece

O Alo a um

GuiaFire

O doconsite

O siFiredicaFire

O graplicum

Extedo FusanExtehttp

Registr

ParaFire

Ao emominfowww

Para

E EGuia de introduo 9

mico; com apenas um clique no boto possvel obter as atualizaes e informaes mais ntes sobre o Fireworks, diretamente da Macromedia.

plicativo Fireworks possui vrias caixas de dilogo e dicas de ferramentas, criadas para auxili-utilizar o programa. As dicas de ferramentas aparecem quando o ponteiro ficar parado sobre elemento da interface de usurio.

de introduo do Fireworks MX inclui informaes de viso geral sobre os recusos bsicos do works.

cumento Utilizao do Fireworks MX em PDF um documento pesquisvel e imprimvel, que tm a documentao completa do Fireworks. O PDF est disponvel no CD de instalao e no da Macromedia na Web em http://www.macromedia.com/br/.

te da Macromedia na Internet atualizado regularmente com as ltimas informaes sobre o works, alm de apresentar recomendaes de usurios especializados, tpicos avanados, exemplos, s e novidades. Consultar o site da Macromedia na Web para saber das ltimas notcias sobre o works e como obter o mximo do programa no site http://www.macromedia.com/br/support/.

upo de discusso Fireworks proporciona um intercmbio estimulante para usurios do ativo, representantes de suporte tcnico e para a equipe de desenvolvimento do Fireworks. Usar leitor de grupo de notcias e ir para news://forums.macromedia.com/macromedia.fireworks.

nding Fireworks MX inclui informaes sobre escrita em JavaScript para automatizar as tarefas ireworks. Todos os comandos ou configuraes no Fireworks podem ser controlados docomandos JavaScript especiais que o Fireworks pode interpretar. A verso PDF do nding Fireworks MX est disponvel no CD de instalao e no site da Macromedia na Web em ://www.macromedia.com/support/fireworks/extend.html.

o do Fireworks

obter suporte adicional da Macromedia, importante registrar a cpia do Macromedia works, pela Internet ou por correio.

fetuar o registro, o usurio ser colocado na lista de prioridade para receber notcias do ento sobre atualizaes e novos produtos da Macromedia. E receber e-mails contendo

rmaes sobre atualizaes do produto e novidades que aparecerem nos sites .macromedia.com e www-euro.macromedia.com.

registrar sua cpia do Fireworks, seguir um destes procedimentos:

scolher Ajuda > Registro on-line e preencher o formulrio eletrnico.

scolher Ajuda > Registro por correio, imprimir o formulrio e enviar para o endereo indicado.

Intro10

O que h de novo no Fireworks Os 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 aplilos aFireno F

Recurs

Grapropaplimel

Os areconeceparano epain

O InusudocuInspexib

poopaapFlasUt

A edmodauto

Aprmeiajuscomduo

cativos de terceiros facilita trabalhar com vrios formatos de arquivos no Fireworks e envi- outros aplicativos tranqilamente enquanto estiver trabalhando. Tambm nova no works a capacidade para criar comandos JavaScript com o Macromedia Flash, que aparecem ireworks MX como painis ou caixas de dilogo.

os fceis de usar

as a um ambiente de trabalho intuitivo e confortvel que inclui um Inspetor de riedades e ferramentas que funcionam de forma profissional o Fireworks MX um

cativo fcil de aprender e de incio operacional rpido. O Fireworks MX tem nova aparncia, hor organizada e em consonncia com outros aplicativos no Macromedia MX Studio.

primoramentos do gerenciamento de painis incluem a capacidade de agrupar painis e lher os grupos de modo que apenas a barra de ttulo do grupo fique visvel, at que seja ssrio usar os painis. Pode-se encaixar os grupos de painis em uma rea de encaixe de painel organizar o espao de trabalho ou arrastar grupos ou painis individuais em qualquer lugar spao de trabalho. Para mais informaes, consultar Organizao de grupos de painis e is na pgina 87.

spetor de propriedades um painel dinmico cheio de opes que mudam medida que o rio trabalha. Abrir um documento, e o Inspetor de propriedades exibir as propriedades do mento como a cor e o tamanho da tela. Escolher uma ferramenta do painel Ferramentas, e o etor de propriedades exibir as opes da ferramenta. Selecionar um objeto vetorial, e ele ir as informaes de trao e preenchimento.

ssvel alterar essas e outras opes inclusive Efeitos ao vivo, modos de mesclagem e cidade diretamente do Inspetor de propriedades, em vez de clicar para abrir ou ativar painel s painel. O Inspetor de propriedades, familiar aos usurios do Macromedia Dreamweaver e h reduz o nmero de painis no espao de trabalho. Para mais informaes, consultar ilizao do Inspetor de propriedades na pgina 85.

io vetorial e de bitmap no-modal elimina a necessidade de manter-se atualizado nos os vetoriais e de bitmap. Escolher uma ferramenta ou selecionar um tipo de objeto determina maticamente se devero ser criados e editados bitmaps, vetores ou texto.

imoramentos da edio de bitmap proporcionam capacidades intuitivas para criar bitmaps por o de recortar ou copiar e colar, para mover selees de moldura entre bitmaps e para efetuar o te fino de imagens com um novo grupo de ferramentas de retoque de imagens. Alm disso, os andos de seleo comuns esto organizados em um novo menu Seleo.

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 teBast poreale papgi

O zoamptext

A coreceinte

Expestildoc

Painvnctrabo dodoc

O coencoseu

Cacclienaparness

Recurs

O Fquemaiproc

O AativoinfoGuia de introduo 11

xto na tela permite integrar visualmente texto e grficos sem a utilizao do Editor de texto. a escolher a ferramenta Texto, clicar na tela e comear a digitar. No Inspetor de propriedades, ssvel definir os atributos de texto para a ferramenta Texto antes de iniciar a digitao ou de ar o texto existente e format-lo. O Fireworks MX tem uma gama de novos controles de texto rgrafo para formatar texto. Para mais informaes, consultar Utilizao de texto na na 169.

om varivel permite arrastar a ferramenta Ampliar para determinar o valor preciso da liao. Aps arrastar para ampliar o documento, o valor da ampliao ser exibido na caixa de

o Definir ampliao na parte inferior do documento.

mpatibilidade com Windows XP e Macintosh OS X beneficia-se de sistemas operacionais mais ntes. O Fireworks MX totalmente "carbonizado" para suportar todas as melhorias da rface de usurio do SO X.

ortao de XHTML permite exportar, atualizar e usar o Roundtrip XHTML nos mesmos os que o Fireworks oferece para HTML. possvel integrar totalmente (roundtrip) umentos legados que tenham sido convertidos em XHTML no Dreamweaver MX.

el Resultados, um novo recurso no Fireworks MX, Dreamweaver MX e Flash MX, um ulo atualizvel para o contedo da Web, localizado de forma conveniente no espao de alho do Fireworks. Quando estiver on-line, o usurio poder clicar no boto Atualizar e fazer wnload de informaes de referncia recentes da Macromedia ou fazer pesquisa on-line de

umentao em bancos de dados, como de notas tcnicas.

rretor ortogrfico pesquisa palavras incorretas em todos os blocos de texto do documento. Ao ntrar a palavra que no reconhea, ele oferece sugestes para corrigi-la ou permite adicion-la ao

dicionrio.

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

os de aumento de capacidade

ireworks MX apresenta uma srie de novos recursos poderosos de criatividade e automao os designers iniciantes da Web acharo fceis de usar e que agradaro aos desenvolvedores s experientes. Esses recursos fazem com que o Fireworks seja um elemento essencial do esso de design e desenvolvimento da Web desde a concepo at a integrao.

ssistente de grficos controlado por dados permite atribuir variveis a texto, imagens, pontos s e fatias, para gerar, em seguida, vrios documentos baseados no original, cada um contendo

rmaes exclusivas obtidas em um arquivo de banco de dados delimitado por vrgula ou XML.

Intro12

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 relamencdiPara

A edfacilde patuaocor

Recurs

Nopossaberutili

CommaiautoJavamaiinsta

SupinteusucomcomJane

Os carraadicMo

O reFirefatiarolloduo

o ao objeto de acionamento, assim como a posio de submenus em relao ao item do u de acionamento ou ao menu pop-up principal. O Fireworks gera, automaticamente, o go JavaScript; os menus exportados so totalmente compatveis com o Dreamweaver MX. mais informaes, consultar Criao de menus pop-up na pgina 298.

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

os de fluxo de trabalho aberto

necessrio ficar limitado ao fluxo de trabalho de outra pessoa. Com o Fireworks MX, vel integrar a produo grfica ao processo de desenvolvimento com um fluxo de trabalho to e eficiente, que reconhece e oferece suporte aos formatos de arquivo, aplicativos e padres zados.

andos JavaScript com interface SWF colocam a criao de comandos JavaScript em um nvel s elevado. Os desenvolvedores podem criar e executar comandos complexos para estender e matizar o Fireworks MX por meio da combinao da API de extensibilidade do Fireworks Script com interfaces desenvolvidas no Flash MX usando componentes e ActionScript. Para s informaes, consultar Extending Fireworks MX, disponvel como documento PDF no CD de lao e no site http://www.macromedia.com/support/fireworks/extend.html.

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

ontroles de layout da tabela de fatias permitem definir e otimizar layouts da tabela de fatias stando as guias de fatia. O Fireworks redimensiona, automaticamente, as fatias anexadas, ionando e excluindo fatias conforme necessrio. Para mais informaes, consultar vimentao de guias de fatia para editar fatias na pgina 267.

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

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 tno Fcon

A inde cjaneGuia de introduo 13

abelas Iniciar e Editar funcionam no arquivo original no Fireworks; as tabelas so atualizadas rontPage sem perder as alteraes de cdigo feitas no FrontPage. Para mais informaes,

sultar Exportao de HTML do Fireworks para o FrontPage na pgina 393.

tegrao com Macromedia Sitespring aplica as melhores prticas na produo e gerenciamento lientes no espao de trabalho do Fireworks MX. Basta escolher Janela > Sitespring para abrir a la Sitespring. Para mais informaes, consultar a documentao do Sitespring.

Intro14 duo

CAPTULO 1Tutorial de princpios bsicos

do projeto grfico

EsteMaclde

Se jprinpgi

O queNesprop

C E C E C I A C C C E

O queEmbrecubenhabtrab15

tutorial ir orient-lo nas tarefas bsicas para execuo de um projeto grfico com o romedia Fireworks MX. Voc ter experincia prtica usando o aplicativo grfico da Web,

r no seu segmento, e aprender os conceitos bsicos de um projeto grfico no caminho.

estiver familiarizado com projetos grficos no Fireworks, talvez deseje ir para Tutorial de cpios bsicos do projeto da Web na pgina 43, onde aprender tudo sobre como projetar nas da Web com o Fireworks.

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

pia da pasta Tutorials

xibio do arquivo concludo

riao e salva de um novo documento

xplorao do ambiente de trabalho do Fireworks

riao e edio de um objeto vetorial

mportao de bitmap e seleo de pixels

dio e edio de efeitos ao vivo

omo trabalhar com camada e objeto

riao e edio de mscara

riao e edio de um texto

xportao do documento

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

Cap16

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 A

ExibiExib

1 I

2 NT

Ncein

3 S

Nd

NJ

CriaAgo

1 N

Atulo 1

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

o do arquivo concludoir o arquivo do tutorial concludo para verificar a aparncia do projeto aps a concluso.

niciar o navegador da Web.

o disco rgido, navegar at a pasta Tutorials, copiada no espao de trabalho, e procurar utorial1/Complete.

ota: Algumas verses do Microsoft Windows ocultam, por padro, as extenses dos tipos de arquivos onhecidos. Se essa configurao no tiver sido alterada, ento os arquivos existentes na pasta Complete no xibiro as extenses. Ao manipular grficos da Web, prefervel visualizar as extenses dos arquivos. Para formaes sobre como exibir novamente as extenses de arquivos, consultar a Ajuda do Windows.

elecionar o arquivo final.htm e arrast-lo para uma janela aberta do navegador.

este tutorial, usar o Fireworks para desenhar e exportar uma cpia desta propaganda de aluguel e carros clssicos.

ota: A pasta Complete tambm inclui o documento do Fireworks a partir do qual ser gerado este arquivo PEG. Para exibir o documento, clicar duas vezes em final.png.

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

o Fireworks, selecionar Arquivo > Novo.

caixa de dilogo Novo Documento aberta.

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.

4 Selecionar Arquivo > Salvar como.

A

5 P

6 N

7 S(

8 C

Aaop

Quaselec

NotaalteralterTutorial de princpios bsicos do projeto grfico 17

caixa de dilogo Salvar como (Windows) ou Salvar (Macintosh) aberta.

rocurar a pasta Tutorials/Tutorial1 no espao de trabalho.

omear o arquivo Vintage.

elecionar a opo Adicionar extenso de nome de arquivo, caso isso ainda no tenha sido feito apenas Macintosh).

licar em Salvar.

barra de ttulos exibe o novo nome do arquivo com a extenso PNG. PNG o formato de rquivo nativo do Fireworks. A arquivo PNG o arquivo de origem; onde voc realizar todo seu trabalho no Fireworks. No final deste tutorial, aprender como exportar seu documento ara outro formato para us-lo na Web.

ndo estiver concluindo o tutorial, lembrar-se de salvar seu trabalho com freqncia ionando Arquivo > Salvar.

: Na concluso do tutorial, talvez ache til desfazer uma alterao feita. O Fireworks pode desfazer vrias das aes recentes, dependendo do nmero de etapas de desfazer definido em Preferncias. Para desfazer a ao mais recente, selecionar Editar > Desfazer.

Cap18

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

NE

Na

Nsp

Nvcod

Opctulo 1

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

o topo da tela est uma barra de menus. A maior parte dos comandos do Fireworks pode ser cessando a partir da barra de menus.

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

a base da janela est o Inspetor de propriedades. Se o Inspetor de propriedades no estiver isvel, selecionar Janela > Propriedades. O Inspetor de propriedades exibe as propriedades de ada objeto ou ferramenta selecionada. possvel alterar essas propriedades. Se no houver bjetos ou ferramentas selecionadas, o Inspetor de propriedades exibir as propriedades do ocumento.

Inspetor de propriedades exibe duas ou quatro fileiras de propriedades. Se o Inspetor de ropriedades estiver na metade da altura, ou seja, exibindo apenas duas fileiras, ser possvel licar na seta expansora no canto inferior direito para visualizar todas as propriedades.

Seta expansora na metade da altura

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 um item 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.

CriaCom

Umso vocconaum

Ao cvari

Enqo FivetoTutorial de princpios bsicos do projeto grfico 19

o e edio de um objeto vetorial o Fireworks, pode-se criar e editar dois tipos de grficos: objetos vetoriais e imagens bitmap.

objeto vetorial uma descrio matemtica de uma forma geomtrica. Os traados vetoriais definidos por pontos. Os traados vetoriais no apresentam degradao na qualidade quando os aumenta ou os dimensiona para mais ou para menos. A folha da ilustrao abaixo um

junto de objetos vetoriais. Observar o grau de suavidade das bordas da folha mesmo quando se enta o objeto.

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

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

Cap20

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 N

A

3 D

Ao

4 Nblu

5 Avtulo 1

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

janela pop-up Cor de preenchimento ser aberta.

igitar 333366 na caixa de texto no topo da janela e, em seguida, pressionar Enter.

caixa Cor de preenchimento alterada para um tom de azul escuro de modo a refletir sua po de cor.

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

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

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.

7 Selecionar a ferramenta Ponteiro na seo Selecionar do painel Ferramentas.

8 Arrastar o retngulo para que fique posicionado na parte inferior da tela, conforme mostrado a

9 Sqn

Defini

Aquprop

1 Cd

2 Du

3 CTutorial de princpios bsicos do projeto grfico 21

baixo. Usar as teclas de seta para obter um posicionamento exato.

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

o de propriedades do objeto

i, editar o segundo retngulo criado alterando seu tamanho, posio e cor no Inspetor de riedades.

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

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

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

Cap22

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.

Sp

5 Ss

Aa

ImporA se

Importa

Voc

1 Sp

2 Stulo 1

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

elecionar a ferramenta Ponteiro e clicar em qualquer lugar fora do retngulo para cancelar a eleo.

s propriedades alteram no Inspetor de propriedades. Como no h objetos selecionados, gora as propriedades do documento so visualizadas em vez das propriedades do objeto.

tao de bitmap e seleo de pixelsguir, importar uma imagem bitmap e criar uma seleo flutuante com os pixels.

o de imagem

modificar a imagem de um automvel clssico. Primeiro, necessrio importar a imagem.

elecionar Arquivo > Importar e navegar at a pasta Tutorials no espao de trabalho. Procurar a asta Tutorial1/Assets.

elecionar car.jpg e clicar em Abrir.

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

A

4 C

Criao

A secol

1 S

2 C

As

3 CF

Aufo

4 NTutorial de princpios bsicos do projeto grfico 23

imagem aparece selecionada na tela.

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

de seleo de pixels

guir, voc selecionar os pixels que compem o carro na imagem importada e ir copi-los e -los como um novo objeto.

elecionar a ferramenta Zoom na seo Exibir do painel Ferramentas.

licar uma vez na imagem.

exibio ampliada para 150%. O aumento permite melhor visualizao do objeto elecionado e oferece um controle mais apurado sobre a seleo.

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

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

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

Ferramenta Zoom

Cap24

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 Cqc

U

7 S

A

8 S

A

9 Sc

10 Cetulo 1

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

ma borda de moldura aparecer em volta dos pixels selecionados.

elecionar Editar > Copiar.

seleo copiada na rea de transferncia.

elecionar Editar > Colar.

imagem do carro colada no documento como um novo objeto bitmap.

elecionar a ferramenta Ponteiro e clicar duas vezes em qualquer lugar fora do bitmap para ancelar a seleo.

licar no menu pop-up Definir ampliao, na base da janela do documento, e retornar xibio100%.

Adio e edio de efeitos ao vivo A 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 N

3 S

A

4 S

ApoTutorial de princpios bsicos do projeto grfico 25

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

elecionar Ajustar cor > Matiz/Saturao no menu pop-up Efeitos.

caixa de dilogo Matiz/Saturao exibida.

elecionar a opo Colorir e clicar em OK.

imagem fica colorida na tela e o efeito adicionado lista de Efeitos ao vivo no Inspetor de ropriedades. Os efeitos ao vivo so editveis; sempre possvel adicion-los lista, exclu-los u edit-los.

Boto Excluir efeitos

Boto Adicionar efeitos

Cap26

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 Para adicionar um outro Efeito ao vivo, clicar novamente no boto Adicionar efeitos.

8 S

OE

ComoAs cformCam

ComempAlm

Nesnomde e

Mai

Mescla

Agotonstulo 1

elecionar Embaar > Embaamento maior no menu pop-up Efeitos.

s pixels do bitmap selecionado ficaram embaados e o novo efeito adicionado lista de feitos ao vivo no Inspetor de propriedades.

trabalhar com camada e objetoamadas dividem um documento do Fireworks em planos distintos. Um documento pode ser ado por vrias camadas e cada uma delas pode conter vrios objetos. No Fireworks, o painel adas relaciona as camadas e os objetos contidos em cada camada.

a utilizao do painel Camadas, possvel nomear, ocultar, mostrar e alterar a ordem de ilhamento das camadas e objetos, bem como mesclar bitmaps e aplicar mscaras de bitmap. disso, pode adicionar e excluir camadas com o painel Camadas.

ta parte do tutorial, usar o painel Camadas para mesclar as duas imagens bitmaps. Depois, ear os objetos no seu documento. Alm disso, usar o painel Camadas para alterar a ordem

mpilhamento dos objetos.

s adiante no tutorial, ir usar o painel Camadas para aplicar uma mscara imagem mesclada.

gem de bitmaps

ra que aplicou efeitos ao vivo imagem de fundo, ir mescl-la com a imagem do carro em de cinza para criar um nico bitmap.

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

2 C

3 Cs

4 S

N

Nmimd

Seta expansoraTutorial de princpios bsicos do projeto grfico 27

licar na miniatura da imagem do carro em tons de cinza no painel Camadas.

om a imagem do carro selecionada, clicar no cone do menu pop-up Opes na parte direita uperior do painel Camadas.

elecionar Mesclar para baixo.

o painel Camadas, os dois objetos bitmap so mesclados em um bitmap.

o Inspetor de propriedades no h mais efeitos na lista de Efeitos ao vivo. Isto porque esclar para baixo combina os pixels de cada bitmap e os renderiza de modo no editvel como agens separadas. Os efeitos ao vivo aplicados a um objeto ou bitmap no so mais editveis

epois que uma mesclagem para baixo for executada em outro bitmap.

cone do menu pop-up Opes

Cap28

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 D

O

3 Nm

D

4 D

O

5 DIntatulo 1

igitar Classic Car na caixa de texto e pressionar Enter.

novo nome aplicado ao objeto bitmap.

a janela do documento, selecionar o retngulo cinza que circunda o documento. Se estiver uito difcil a visualizao na tela, selecion-lo no painel Camadas.

esta vez, nomear um objeto usando o Inspetor de propriedades.

igitar Border na caixa Nome do objeto do Inspetor de propriedades e pressionar Enter.

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

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

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 Clicar na miniatura do retngulo azul do painel Camadas para selecion-la.

2 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.

Dus

3 S

Oeo

4 VaTutorial de princpios bsicos do projeto grfico 29

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

oltar o boto do mouse.

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

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

Cap30

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.

Aplica

Primmosocu

Almno f

1 C

2 C

Ume

Edio

Agode d

1 Cpfetulo 1

o de mscara

eiro, aplicar uma mscara de bitmap branca e vazia, imagem do carro. A mscara branca tra um objeto ou uma imagem selecionada, enquanto os pixels pretos em um mscara ltam a imagem ou o objeto selecionado.

disso, ir pintar a mscara para fazer com que a imagem do carro parea estar desaparecendo undo.

om a ferramenta Ponteiro, selecionar a imagem bitmap.

licar no boto Adicionar mscara na base do painel Camadas.

ma mscara transparente e vazia ser adicionada imagem selecionada. Para verificar se a scara foi adicionada, observar a miniatura da mscara no painel Camadas. O realce amarelo

m volta da miniatura da mscara indica que ela est selecionada.

da mscara

ra, voc vai dar imagem bitmap uma transparncia aparente introduzindo um preenchimento grad na mscara.

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

Miniatura da mscara

Objeto da mscara

2 Clicar na caixa Cor de preenchimento no Inspetor de propriedades.

A janela pop-up Editar dgrad aberta.

3 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.

4 Aa

5 C

6 Ns

7 S

Acp

Inclinao da corTutorial de princpios bsicos do projeto grfico 31

rrastar o exemplo de cores (branca) da esquerda para a direita, cerca de 1/4 do caminho, para justar o dgrad.

licar fora da janela pop-up Editar dgrad para fech-la.

a tela, arrastar o ponteiro Dgrad pela imagem bitmap, como mostrado na ilustrao a eguir. 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.

oltar o boto do mouse.

mscara modificada com o preenchimento de dgrad criado. A mscara afeta a imagem do arro conferindo a ela uma aparncia de transparncia em dgrad. A miniatura da mscara no ainel Camadas exibe o preenchimento de dgrad aplicado.

Exemplos de cor

Cap32

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

Criao

Prim

1 Sja

Od

2 N

S D C

p

Aetulo 1

o texto do corpo.

do texto de ttulo

eiro criar o texto do ttulo para a propaganda de aluguel de carro.

elecionar a ferramenta Texto na seo Vetor do painel Ferramentas e mover o ponteiro sobre a nela do documento.

ponteiro alterado para uma forma de I e o Inspetor de propriedades exibe as propriedades o texto.

o Inspetor de propriedades, executar um destes procedimentos:

elecionar Times New Roman no menu pop-up Fonte.

igitar 85 como o tamanho da fonte.

licar na caixa Cor de preenchimento. O ponteiro alterado para um conta-gotas. Clicar no onteiro conta-gotas no retngulo azul da tela.

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

Fonte

Tamanho

Cor do preenchimento

Botes de estilo

Botes de alinhamento

Entrelinhamento

Escala horizontal

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.

4 D

A

5 C

OOd

6 Sil

7 C

8 N

9 CCTutorial de princpios bsicos do projeto grfico 33

igitar Vintage no bloco de texto.

largura do bloco de texto expandida durante a digitao.

licar uma vez fora do bloco de texto para aplicar a entrada do texto.

bloco de texto permanece selecionado e a ferramenta Texto ainda a ferramenta selecionada. crculo vazado no bloco de texto no est mais visvel. Esse indicador somente est visvel

urante a insero ou edio de texto.

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

licar fora do bloco de texto para cancelar a seleo e escolher de novo a ferramenta Texto.

o Inspetor de propriedades, escolher Arial como fonte e 12 como o tamanho da fonte.

licar novamente na tela, em algum lugar sob o bloco de texto recm-criado e digitar LASSIC RENTALS em caixa alta.

Indicador de dimensionamento automtico

Cap34

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 C

Criao

Em

1 S

2 Ap

Atefida

3 D

Ittulo 1

licar fora do bloco de texto para cancelar a seleo.

do texto do corpo

seguida, criar dois blocos de texto que compem o texto do corpo desta propaganda.

elecionar a ferramenta Texto.

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

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

igitar o texto a seguir sem inserir nenhuma quebra de linha durante a digitao:

ndulge yourself by traveling in a Vintage classic automobile, with a chauffeur to whisk you o any destination.

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

O

4 Se

5 Nc

6 C

U

7 D

SE

D

8 S

TodtextrealquaTutorial de princpios bsicos do projeto grfico 35

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

elecionar a ferramenta Ponteiro e clicar fora do bloco de texto para cancelar a seleo. Depois, scolher de novo a ferramenta Texto.

o Inspetor de propriedades, clicar na caixa Cor de preenchimento e escolher o branco como a or do texto.

licar no canto inferior esquerdo da tela.

m novo bloco de texto ser exibido no topo do retngulo azul.

igitar o texto a seguir em caixa alta sem inserir quebras de linha:

PORTS - LUXURY - CONVERTIBLE - LIMOUSINE - ANTIQUE - NEO-CLASSIC - XOTIC - ROADSTER

ica: Se estiver exibindo o tutorial on-line, basta simplesmente copiar e colar o texto acima.

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

o texto criado no Fireworks pode ser editado da mesma forma que em um processador de os. Para editar texto, basta clicar duas vezes em um bloco de texto com a ferramenta Ponteiro, ar o texto a ser alterado e digitar em cima dele. Ou, clicar com o ponteiro em forma de I em

lquer parte do bloco de texto para introduzir o novo texto.

Cap36

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:

Snd

Essu

Dted

D

OrU

3 As

4 S

5 N

C Ctulo 1

elecionar Suavizar serrilhado no menu pop-up Nvel de suavizao de serrilhado, caso esse ainda o esteja selecionado. A suavizao de serrilhado suaviza as bordas do texto para que os caracteres o texto apaream mais limpos e mais legveis.

m geral, as fontes serif, como Times New Roman, tm melhor aparncia se a opo Suavizar errilhado estiver definida com um tamanho superior a 45 pontos. Da mesma forma, as fontes ans serif, como Arial, tm melhor aparncia se a opo Suavizar serrilhado estiver definida com m tamanho superior a 32 pontos.

ica: O termo serif se refere a linhas mnimas (muitas vezes chamadas de ps) anexadas aos caracteres do xto de fontes como Times New Roman. A fonte Arial considerada uma fonte sans serif porque os caracteres

o texto no contm serifs.

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

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

rrastar o bloco de texto Vintage para que fique posicionado como mostrado na ilustrao a eguir.

elecionar o bloco de texto Classic Rentals.

o Inspetor de propriedades, executar um destes procedimentos:

licar na caixa Cor de preenchimento, digitar FF6600 como o valor da cor e pressionar Enter.

licar no boto Negrito.

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 S

8 N

D S C S D D

eap

9 AflTutorial de princpios bsicos do projeto grfico 37

elecionar o bloco de texto Mate.

o Inspetor de propriedades, executar um destes procedimentos:

efinir o tamanho da fonte como 13.

elecionar preto como a cor do texto.

licar no boto Alinhamento direita.

elecionar Ondular suavizao de serrilhado no menu pop-up Nvel de suavizao de serrilhado.

efinir a opo Escala horizontal como 88%.

efinir a opo Entrelinhamento como 150% e pressionar Enter. O entrelinhamento define o spao entre as linhas do texto. O entrelinhamento normal de texto 100%. Qualquer opo cima de 100% aumentar o espao entre as linhas e qualquer fator abaixo mover as linhas ara ficarem mais prximas.

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

Cap38

10 Selecionar o bloco de texto na base do documento.

11 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 de

serrilhado.

Definir a opo Escala horizontal como 75% e pressionar Enter. 12 Reposicionar o bloco de texto se necessrio.

Adicion

pousan

1 S

2 CA

A

3 D

U

4 C

ExporNesbitmpara

Otimiza

Antotimqua

1 E

S S

otulo 1

ar uma sombra ao texto

ssvel aplicar efeitos ao vivo ao texto. Aqui, ir adicionar uma sombra ao texto Vintage do os controles de Efeitos ao vivo no Inspetor de propriedades.

elecionar o bloco de texto Vintage.

licar no boto Adicionar efeitos no Inspetor de propriedades. Selecionar Sombra e brilho > plicar sombra no menu pop-up Efeitos.

s opes para o novo efeito aparecem em uma janela pop-up.

igitar 5 em Distncia e 60% em Opacidade. Clicar fora da janela pop-up para fech-la.

m efeito de sombra adicionado ao bloco de texto Vintage.

licar em uma rea vazia da janela do documento para cancelar a seleo do bloco de texto.

tao do documentota fase, voc criou um objeto vetorial e editou suas propriedades, importou uma imagem ap e fez modificaes nos pixels, alm de ter criado e formatado texto. Agora, est pronto otimizar e exportar o documento.

o do grfico

es de exportar qualquer documento do Fireworks, sempre necessrio otimiz-lo. A izao assegura que um grfico seja exportado com o melhor equilbrio de compresso e

lidade possvel.

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

elecionar Janela > Otimizar.

e o painel estiver minimizado no lado direito da tela, clicar na seta expansora para exibir todo painel.

2 Selecionar JPEG - Melhor qualidade no menu pop-up Configuraes.

As opes no painel so alteradas para refletir a nova configurao.

E

3 C

Ac

NeTutorial de princpios bsicos do projeto grfico 39

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

licar na guia Visualizar perto do topo da janela do documento.

guia Visualizar exibe o documento na forma como ele aparecer quando exportado com as onfiguraes atuais.

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

Tamanho do arquivo

Tempo de transferncia

Cap40

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.

Oa

2 N

3 Cl

O

Ltea

4 S

5 S

Exibi

O n

1 N

Otulo 1

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

avegar at a pasta Tutorials no espao de trabalho e procurar Tutorial1/Export.

ertificar-se de que o menu pop-up Salvar como tipo (Windows) ou Salvar Como (Macintosh) Somente imagens e clicar em Salvar.

arquivo JPEG exportado para o local especificado.

embrar-se de que o arquivo PNG seu arquivo de origem ou arquivo de trabalho. Embora nha exportado o documento no formato JPEG, tambm necessrio salvar o PNG, pois,

ssim, qualquer alterao feita tambm ser refletida no arquivo de origem.

elecionar Arquivo > Salvar para salvar as alteraes no arquivo PNG.

elecionar Arquivo > Fechar.

o do documento exportado

ovo arquivo criado durante o processo de exportao est localizado na pasta especificada.

o Fireworks, selecionar Arquivo > Abrir e procurar a pasta Export.

Fireworks criou um arquivo neste local denominado vintage.jpg.

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.

Oob

Opoa

3 S

NC

4 C

O

5 S

O

AamTutorial de princpios bsicos do projeto grfico 41

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

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

elecionar Arquivo > Abrir e selecionar vintage.png na pasta Tutorial1. Clicar em Abrir.

o painel Camadas, todos os objetos esto novamente disponveis como objetos separados. ada objeto editvel e possui suas propriedades.

licar em cada objeto.

Inspetor de propriedades exibe as diversas opes para cada um dos objetos selecionados.

elecionar o texto Vintage na tela.

efeito ao vivo Aplicar sombra desse objeto de texto aparece no Inspetor de propriedades.

gora, possvel observar a vantagem de usar um arquivo PNG do Fireworks como seu rquivo de origem. Voc pode fazer alteraes em um documento e esse sempre ser editvel, esmo se escolher exportar o documento para outro formato como o JPEG.

Cap42

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 Mac

Paraprindocucomtulo 1

romedia, em http://www.macromedia.com/br/support/.

aprender como usar o Fireworks na criao de pginas da Web interativas, consultar Tutorial de cpios bsicos do projeto da Web na pgina 43. Voc usar a imagem JPEG exportada deste mento e a importar na pgina da Web. Alm disso, aprender a criar interatividade na Web o botes, rollovers e menus pop-up.

CAPTULO 2Tutorial de princpios bsicos

do projeto da Web

EsteWebgrftrein

O queNesproj

C E A I D C C C O E T

O queAntFirehabpgi

S S E E43

tutorial ir orient-lo nas tarefas bsicas para execuo de um projeto grfico e interativo para com o Macromedia Fireworks MX. Voc adquirir experincia na prtica usando o aplicativo

ico da Web, lder no seu segmento, e aprender os conceitos de um projeto de Web enquanto a.

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

pia da pasta Tutorials

xibir a pgina da Web concluda

bertura do arquivo de origem

mportao de um grfico

iviso do documento

riao de um rollover de arrastar e soltar

riao e edio de um boto para criar uma barra de navegao

riao e edio de um menu pop-up

timizao do documento

xportao de HTML

este do arquivo concludo

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

alva de um documento

eleo de um objeto

dio de uma propriedade de objeto

xibio e utilizao de um painel

Cap44

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 tpast

1 N

NsW

2 A

Exibir A sedep

1 I

2 NT

NceaW

3 S

Plo

4 M

QI

5 Me

On

6 U

7 Muc

8 Ctulo 2

iver concludo o tutorial Princpios bsicos do projeto grfico, voc j ter feito uma cpia da a Tutorials, portanto pode ignorar esta etapa.

avegar at a pasta do aplicativo Fireworks no disco rgido.

ota: Se no conseguir exibir a pasta do aplicativo Fireworks, talvez tenha acesso limitado aos arquivos do istema. possvel fazer o download dos arquivos necessrios ao tutorial no Centro de suporte Fireworks na

eb em http://www.macromedia.com/br/support/.

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

a pgina da Web concludaguir, exibir o arquivo do tutorial concludo para ver como o projeto terminado aparecer ois de export-lo como um arquivo HTML.

niciar o navegador da Web.

o disco rgido, navegar at a pasta Tutorials, copiada no espao de trabalho, e procurar utorial2/Complete.

ota: Algumas verses do Microsoft Windows ocultam, por padro, as extenses dos tipos de arquivos onhecidos. Se essa configurao no tiver sido alterada, ento os arquivos existentes na pasta Complete no xibiro as extenses. Na manipulao de grficos e pginas da Web, prefervel visualizar as extenses dos rquivos. Para informaes sobre como exibir novamente as extenses de arquivos, consultar a Ajuda do

indows.

elecionar o arquivo final.htm e arrast-lo para uma janela aberta do navegador.

ara o tutorial, voc concluir uma verso parcialmente terminada desta pgina da Global, uma cadora de carros.

over o ponteiro sobre a imagem grande Vintage.

uando o ponteiro mover sobre a imagem Vintage, uma outra imagem na pgina ser alterada. sso denominado um rollover desarticulado.

over o ponteiro pela barra de navegao no topo da pgina da Web. Os botes so alterados m funo da passagem do ponteiro sobre eles. Clicar no boto Rates para testar o link.

link leva voc pagina do Fireworks, em http://www.macromedia.com/br/, mas ser ecessrio digitar seu prprio URL para esse e outros itens ao concluir o tutorial.

sar o boto Voltar do navegador para retornar pgina final.htm.

over o ponteiro sobre a imagem Worldwide Airports. Um menu pop-up ser exibido. Fazer m rollover com o ponteiro sobre cada item do menu, inclusive sobre o primeiro item, que ontm um submenu.

licar em United States para testar o link, depois retornar pgina final.htm.

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 No Fireworks, selecionar Arquivo > Abrir.

2 N

Nota

ImporAgo

Se tvoc

1 S

SE

SA

2 S

3 C

A

4 ATutorial de princpios bsicos do projeto da Web 45

avegar at a pasta Tutorials no espao de trabalho. Procurar Tutorial2/Start e abrir global.png.

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

tao de um grficora que voc j abriu o projeto no concludo da pgina Global na Web, importar um grfico.

iver concludo o tutorial Princpios bsicos do projeto grfico do Fireworks, usar o JPEG que criou. Se no tiver executado este tutorial, existe uma imagem concluda para voc.

elecionar Arquivo > Importar e executar uma das aes a seguir:

e tiver concludo o tutorial Princpios bsicos do projeto grfico, procurar a pasta Tutorial1/xport.

e no tiver concludo o tutorial Princpios bsicos do projeto grfico, procurar a pasta Tutorial2/ssets.

elecionar vintage.jpg e clicar em Abrir.

licar em qualquer lugar da rea branca e vazia da tela.

imagem exibida, selecionada.

rrastar a imagem para que fique posicionada conforme mostra a ilustrao a seguir.

Cap46

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 otim

1 C

U

2 C

AQ

N

3 Cn

4 SI

Aatulo 2

izao para elas.

om a imagem Vintage ainda selecionada, selecionar Editar > Inserir > Fatia.

ma fatia inserida no topo da imagem. Por padro, as fatias possuem uma sobreposio verde.

licar em qualquer lugar fora da fatia para cancelar a seleo.

s guias de fatia vermelhas definem a fatia, estendendo a altura e a largura do documento. uando tiver criado a fatia, o Fireworks dividir automaticamente o restante do documento.

ota: Se voc no visualizar as guias de fatia vermelhas, selecionar Exibir > Guias de fatia.

licar com a tecla Shift no grfico Worldwide Airports e no grfico Great WEEKEND Rates o lado esquerdo do documento, para selecionar os dois ao mesmo tempo.

elecionar Editar > Inserir > Fatia. Na caixa de mensagem que exibida, selecionar Mltiplos. sso permite a insero de vrias fatias ao mesmo tempo.

s fatias so inseridas no topo de cada um dos grficos selecionados. A adio de outras fatias ltera o layout de fatias automticas no restante do documento.

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.

Og

7 AW

8 S

AaaubufaTutorial de princpios bsicos do projeto da Web 47

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

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

oltar o boto do mouse.

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

Cap48

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.

CriaDepdua

H difedesapon

1 S

Oinotulo 2

o de um rollover de arrastar e soltarois de ter fatiado seu documento, agora est na hora de adicionar interatividade. Voc ir usar

s das fatias inseridas na etapa anterior para criar um rollover de arrastar e soltar.