Fireworks CS6

Fireworks CS6

Fireworks CS6

O Adobe

O Adobe Fireworks CS6 Fireworks CS6  é hoje a melhor ferramenta de crição para a Internet. é hoje a melhor ferramenta de crição para a Internet.

Muitos Web designers opta pelo Photoshop para esta finalidade. Alguns por  Muitos Web designers opta pelo Photoshop para esta finalidade. Alguns por  costume, outros por comodidade e alguns por não conhecerem a ferramenta. costume, outros por comodidade e alguns por não conhecerem a ferramenta. o

omo mo ccititaado do aantnteeririorormementnte, e, oo FireworksFireworks é umé uma a popodederorosa sa feferrarramementnta,a,

principalmente !uando utili"ada no desen#ol#imento de aplicaç$es para a

principalmente !uando utili"ada no desen#ol#imento de aplicaç$es para a WebWeb,,

co

comomo designdesign de p%gide p%ginas e nas e tratratamtamentento o e e cricriaçãação o de imagede imagens e ns e anianimaçmaç$es$es..

&rabalhando com as demais ferramentas de tratamento de imagens, como o &rabalhando com as demais ferramentas de tratamento de imagens, como o

Photoshop

Photoshop' ' feferrrramamenentatas s de de crcriaiaçãção o de de p%p%giginanass HTMLHTML, , ccoommo o oo  Adobe Adobe Dreamweaver 

Dreamweaver ' ou at' ou até mesé mesmo commo com softwaressoftwares  especiali"ados em animaç$es,  especiali"ados em animaç$es,

como o

como o Adobe  Adobe FlashFlash, podemos criar, podemos criar WebsitesWebsites pessoais, empresariais ou de pessoais, empresariais ou de

com

comércércio, io, de de uma uma forforma ma simsimpleples, s, objobjeti#eti#a a e e cocom m gragrande nde desdesen#en#oltoltura ura dede criati#idade, tanto em edição de imagens, como na produção de animaç$es. criati#idade, tanto em edição de imagens, como na produção de animaç$es. (en

(entre tre os os assassuntuntos os ababordordadoados s durdurantante e essesse e curcurso, so, cricriarearemos mos desdesde de umum simples gr%fico, com formas b%sicas e te)tos, passaremos por etapas de simples gr%fico, com formas b%sicas e te)tos, passaremos por etapas de montagem de efeitos #isuais e tratamento de imagens, até a criação de uma montagem de efeitos #isuais e tratamento de imagens, até a criação de uma p%gina

p%gina WebWeb e a produção de animaç$es. e a produção de animaç$es.

omo #oc* pode #er, o

omo #oc* pode #er, o FireworksFireworks é uma ferramenta poderosa e com m+ltiplas é uma ferramenta poderosa e com m+ltiplas

funç$es, no !ue di" respeito  criaç$es

funç$es, no !ue di" respeito  criaç$es WebWeb..

-tili"aremos o

-tili"aremos o softwaresoftware mais comum para a criação de animaç$es, o mais comum para a criação de animaç$es, o Adobe Adobe Fla

Flash sh cscs6 6 , , papara ra apaplilicacarmrmos os efefeieitotos s e)e)tratras s sosobrbre e a a ananimimaçação ão crcriaiada da pepelolo Fireworks

Fireworks, buscando apro#eitar ao m%)imo o seu aprendi"ado., buscando apro#eitar ao m%)imo o seu aprendi"ado.

Os

Os comcomputputadoadores res tratrabalbalham ham cocom m doidois s forformatmatos os de de gr%gr%ficficosos vetorial vetorial   ou de  ou de bitmap

bitmap. /ntender a diferença entre estes dois formatos é fundamental para a. /ntender a diferença entre estes dois formatos é fundamental para a

reali"ação de um bom trabalho com o

reali"ação de um bom trabalho com o Fireworks.Fireworks.

Gráficos Vetoriais

Gráficos Vetoriais

-m gr%fico #etorial pode ser tr

-m gr%fico #etorial pode ser tradu"ido como uma imagem composta de linhas eadu"ido como uma imagem composta de linhas e cur#as, !ue também possui informaç$es sobre sua cor e posição.

 Ao editar um gr%fico #etorial, #oc* mo

 Ao editar um gr%fico #etorial, #oc* modifica as propriedades dadifica as propriedades das linhas e cur#ass linhas e cur#as do objeto e, como os gr%ficos #etoriais são li#res de resolução, #oc* poder% do objeto e, como os gr%ficos #etoriais são li#res de resolução, #oc* poder% mo#er, redimensionar, mudar a forma e alterar a cor do mesmo, !ue não mo#er, redimensionar, mudar a forma e alterar a cor do mesmo, !ue não ocorrerão alteraç$es na !ualidade de

ocorrerão alteraç$es na !ualidade de sua apar*ncia.sua apar*ncia.

Gráficos de Bitmap

Gráficos de Bitmap

O

Os s ggrr%%ffiiccoos s ddee bitmapbitmap sãsão o coconsnstittitu0u0dodos s popor r popontntos os dedenonominminadadosos PielsPiels,,

organi"ados em uma grade. A pr1pria tela do computador consiste em uma organi"ados em uma grade. A pr1pria tela do computador consiste em uma grande grade de

grande grade de pixels pixels..

 Ao

 Ao contr%rio contr%rio da da composição de composição de um um gr%fico gr%fico #etorial, #etorial, oo bitmapbitmap é constitu0do por  é constitu0do por 

pontos, aos !uais são atribu0dos uma determinada cor e fi)ados sobre uma pontos, aos !uais são atribu0dos uma determinada cor e fi)ados sobre uma grade de tamanho determinado. 2uando #isuali"ados na resolução correta, os grade de tamanho determinado. 2uando #isuali"ados na resolução correta, os pontos são encai)ados como um

pontos são encai)ados como um !uebra3cabeças.!uebra3cabeças. 2uando editado, o usu%rio modifica os

2uando editado, o usu%rio modifica os pixels pixels em #e" das cur#as e linhas, como em #e" das cur#as e linhas, como

nno o ggr%r%fificco o ##etetororiaial. l. (e(essssa a mamaneneirira, a, oos s ggr%r%fificcos os dede bitmapbitmap  tornam3se  tornam3se

dependentes de resolução, e o aumento do gr%fico pode fa"er com !ue as dependentes de resolução, e o aumento do gr%fico pode fa"er com !ue as bor

bordas e das e corcores fi!uees fi!uem m altalteraeradasdas, , poipois s os mesmoos mesmoss  pixels pixels  são redistribu0dos  são redistribu0dos

dentro da no#a grade. dentro da no#a grade.

4ale destacar ainda, !ue a e)ibição de um

4ale destacar ainda, !ue a e)ibição de um bitmapbitmap atra#és de um dispositi#o de atra#és de um dispositi#o de

resolução menor !ue a do gr%fico, também degrada a !ualidade de sua resolução menor !ue a do gr%fico, também degrada a !ualidade de sua imagem.

Inicinado o Fireworks CS6

Inicinado o Fireworks CS6

Pa

Para inicra iniciaiar r oo Fireworks CS6 Fireworks CS6 , , clcli!i!ue no ue no bobotãtãoo !"iciar !"iciar , d, daa Barra de TarefasBarra de Tarefas,,

es

escocolhlha a a a opopçãçãoo Todos os pro#ramasTodos os pro#ramas,,  Adobe  Adobe Master Master Collectio" Collectio" CS6CS6 ee

selecione

5anela do

$arra de Me"%  nesta %rea estão locali"ados todos os menus de comandos, os

!uais são respons%#eis por arma"enar a maior parte dos recursos dispon0#eis no programa.

Pai"el de Ferrame"tas possui os principais bot$es e ferramentas de criação e

edição de desenhos.

Paletas de Co"trole janelas suspensas com recursos para configurar efeitos,

formatar objetos, etc.

!"spetor de Propriedades é a paleta onde serão e)ibidas as propriedades de

cada objeto, ferramenta selecionada ou documento.

Iniciando um novo documento

 Atra#és da tela de apresentação é poss0#el abrir um ar!ui#o e)istente ou criar  um no#o como na imagem abai)o

6a opção Criar "ovo, cli!uem em Documento do Fireworks 7P&' 8.

om a opção selecionada escolha com o mouse Lar#%ra e defina os seguintes

#alores

&emos agora, a janela do documento e)ibindo a no#a tela, onde serão criadas e editadas as imagens.

Salvando o arquivo

Para sal#ar o documento em branco, cli!ue no menu  Ar(%ivo, da barra de menus do Fireworks e selecione a opção Salvar .

 Ao surgir a

 Ao surgir a caixa de diálogocaixa de diálogo Salvar comoSalvar como, selecione o botão, selecione o botão drop-down Salvar drop-downSalvar  em

/

/m m sesegguuidida, a, o o nonomeme carta) carta) , , dedefinfinidido o papara ra o o arar!u!ui#i#o, o, jujuntntamamenente te cocom m aa

e)tensão

e)tensão p"#  p"#  de ar!ui#os padrão do de ar!ui#os padrão do FireworksFireworks, é e)ibido na, é e)ibido na barra de títulobarra de título do do

programa e na guia de t0tul

programa e na guia de t0tulo da janela do documento.o da janela do documento.

Abrindo o arquivo

Abrindo o arquivo

li!ue no menu

 Ao surgir a

 Ao surgir a caixa de diálogocaixa de diálogo Abrir  Abrir , ati#e o botão, ati#e o botão drop-downdrop-down do do*ami"ar *ami"ar  e e

procure sua pasta. procure sua pasta.

9elecione, com um cli!ue, o ar!ui#o

li!ue no botão

li!ue no botão Abrir  Abrir  para abrir o ar!ui#o no para abrir o ar!ui#o no FireworksFireworks..

ainel de Ferramentas

ainel de Ferramentas

O Pai"el de Ferrame"tas encontra3se no canto es!uerdo da %rea de trabalho

do Fireworks.

9e as ferramentas não aparecerem, atra#és do menu +a"ela e selecionando a

opção Ferrame"tas é poss0#el #*3las no#amente.

/stão subdi#ididas em : grupos, de acordo com sua aplicação Selecio"ar , $itmap, ,etor ! Web! Cores e *ibir . 9ão elas

2uando selecionamos uma ferramenta, no painel, algumas opç$es da mesma são oferecidas para escolha em Propriedades.

Propriedades com a ferramenta 'radie"te selecionada

ropriedades

O Propriedades é um painel sens0#el ao conte)to !ue e)ibe as propriedades

da seleção atual, opç$es de ferramenta atual ou propriedades do documento. Por padrão, locali"a3se na parte inferior da %rea de trabalho do Fireworks.

Possui uma seta expansora em sua parte inferior direita, a !ual determina sua

Para ocultar o !"spetor de propriedades  ou #isuali"%3lo, #oc* de#e clicar 

sobre o t0tulo da paleta

/ssa mesma regra #ale também para as Paletas de co"trole, locali"adas no

canto direito da janela do Fireworks.

4oc* pode ainda ocultar todas as paletas simultaneamente, clicando na seta da barra #ertical !ue di#ide a %rea de trabalho do Fireworks CS6 

Formas vetoriais

Primeiramente, criaremos um objeto #etorial no documento. 9elecione a forma

-et"#%lo na ferramenta Formas, locali"ada na categoria ,etor  do Pai"el de /errame"tas

li!ue sobre o botão de cor do pree"chime"to, locali"ado no !"spetor de  propriedades e selecione a cor a"ul 01111CC , ou simplesmente digite esse

n+mero no campo referente  cor

/m seguida, note !ue, sobre a tela, o cursor toma a forma de uma cru". li!ue pr1)imo do canto inferior es!uerdo do documento e, com o botão pressionado, arraste3o até o canto inferior direito, dando ao objeto a forma de um ret;ngulo, como mostra a figura abai)o

V"#$%

9elecione a ferramenta de seleção Po"teiro 

< poss0#el saber !uando o objeto est% selecionado pelos pontos de seleção de cor a"ul em seus cantos, como também, por ad!uirirem um contorno dessa mesma cor.

#efinindo lar&ura e altura do ob'eto

om o cursor sobre o objeto retângulo, mantenha o botão es!uerdo do mouse

pressionado e arraste3o até a borda inferior da tela do documento, como mostra a figura abai)o

=e#e o cursor do mouse até o campo (  e d* dois cli!ues sobre ele para

selecion%3lo.

Obser#e agora, !ue o objeto retângulo e)ibe a largura de 231 piels, !ue foi

estipulada de acordo com a largura determinada inicialmente para a criação do documento. Obser#e também, !ue pela situação do objeto no documento, ele ultrapassa seu limite #isual

li!ue sobre o campo da posição 4  e atribua3lhe o #alor 1  7zero8 para centr%3lo

corretamente no documento.

4oc* também pode clicar sobre o ret;ngulo e arrast%3lo para a es!uerda para ajust%3lo ao documento.

>et;ngulo ajustado hori"ontalmente a partir do ponto ?1 ? da borda es!uerda do

(efiniremos agora, a altura do nosso objeto ret;ngulo selecione a opção A e

atribua3lhe o #alor 51 .

&ecle @*"ter .

Obser#e pelos pontos de controle a"uis, como o ret;ngulo aumentou seu tamanho, agora no sentido #ertical

 Assim como ajustado anteriormente, cli!ue sobre o objeto e arraste3o para !ue sua borda inferior acompanhe a do documento.

Para ajust%3lo alterando a posição   7vertical 8, #ale destacar !ue a posição ?1 ?

e!ui#ale  borda superior do objeto.

-m c%lculo simples seria subtrair a altura do objeto do #alor da altura do documento.

Por e)emplo obser#e !ue o #alor da altura do documento e!ui#ale a 578  Piels

 A altura do ret;ngulo determinada anteriormente foi de 51 Piels

rie outro >et;ngulo um segundo objeto #etorial.

6o botão cor de preenchimento da barra de ferramentas propriedades selecione a opção de preenchimento transparente, fa"endo com !ue esse ret;ngulo atue como uma borda no documento.

&ro!ue a cor de traço para um tom de #erde claro.

/m seguida selecione a cai)a de largura do traço e altere seu #alor para B. 6o#a apar*ncia do objeto

/m seguida defina os seguintes #alores da largura, altura e coordemnadas do objeto )* +,-.* /01 2*  3*

-Bitmap

O Fireworks pode trabalhar com objetos vetoriais e de bitmap em um mesmo

documento.

Para trabalhar com esse tipo de imagens é necess%rio importar .

(epois de selecionada a imagem o cursor se transforma em um ponteiro de inserção e possui a forma representati#a do canto superior es!uerdo da figura. aso a figura não tenha ficado alinhada corretamente com os cantos do documento, além do recurso de clicar e arrastar do mouse, #oc* pode também

ainda, atra#és das coordenadas 4< 0 e < 0 , j% !ue a altura da imagem possui

os mesmos 578 Piels da tela do documento.

Camadas

ada objeto de um documento reside em uma camada diferente. A Paleta de controle amadas permite a manipulação dessas camadas e objetos.

9  &0tulo da paleta amadas' 9 amada !'

9  Objeto >et;ngulo'

onforme #ão sendo criados, os objetos seguem a ordem de bai)o, !ue

representa o +ltimo objeto da camada ou a +ltima subcamada do documento, para cima.

9  Objeto sendo #isuali"ado na camada' 9  6ome do ob"eto#camada

Para #isuali"ar as paletas de controle, basta clicar no botão ,is%ali)ar=>c%ltar  Paletas, no canto direito da janela do Adobe Fireworks CS6 .

o Fireworks organi"a as camadas como se fossem pastas e subpastas. 6a

pr%tica, o efeito é o mesmo, ser#indo apenas para uma melhor organi"ação das camadas !uando necess%rio, ou seja, !uando hou#er uma comple)idade e um grande n+mero de objetos para compor o documento.

Selecionando a camada

Para selecionar uma camada basta clicar sobre ela, obser#e !ue se a camada selecionada for a +ltima, ter% uma parte oculta sob os outros objetos, os pontos de seleção indicam e simboli"am a presença e o posicionamento do objeto no documento.

Alterando o nome do ob'eto

li!ue sobre a camada !ue deseja alterar o nome, na guia propriedades, habilite com um cli!ue a cai)a do nome do objeto. (igite o nome desejado e tecle @/nter para confirmar.

Perceba !ue o nome na camada j% é modificado.

Outra forma de renomear o objeto é dando um duplo cli!ue sobre ela na paleta Camadas.

Para alterar a ordem das camadas, basta clicar sobre o objeto e manter o botão esquerdo do mouse  pressionado, arrastar sem soltar o botão esquerdo do mouse  para cima ou para baixo, de modo que seu desenho fique como o de cima.

Exemplo: para deixar igual a imagem abaixo, posicione a camada da borda verde por primeiro, logo em seguida posicione a imagem em bitmap por segundo e por fim posicione a faixa azul deixando-a por ltimo. Perceba que como a borda verde ficou por primeiro na  paleta das camadas_{, ela aparece a frente da imagem bitmap.}

%cultando4Visuali5ando Camada

Para dei)ar de #isuali"ar determinada camada, basta clicar no s0mbolo do olho,  frente do objeto Borda Verde Obser#e !ue !uando clicamos no olho, o objeto não é mais #isuali"ado, mas continua no documento 

Ferramenta 7oom

Os efeitos ao #i#o do Fireworks CS6  são melhorias !ue podem ser aplicadas

aos objetos #etoriais, imagens de bitmap e te)to. hanfros e rele#o, sombras e brilhos, correção de cor e graus de desfo!ue são alguns dos efeitos ao #i#o poss0#eis. (epois de aplicados, é permitido ainda, alterar suas opç$es, reorgani"ar a sua ordem e testar a combinação com outros efeitos, bem como e)clui3los.

Para trabalhar com a ferramenta ?oom, inicialmente ter% !ue abrir um bitmap.

Ceito isso, selecione a ferramenta ?oom, obser#e !ue o cursor transforma3se

em uma pe!uena lupa, com um sinal de @. Para aumentar a #isuali"ação da

imagem d* um cli!ue com o botão es!uerdo do mouse sobre o documento.

/m seguida, obser#e !ue a #isuali"ação mostra

, no indicador do

Ferramenta sele89o

Cerramentas de seleção do grupo =aço.

&rabalhando com a =aço Poligonal. 2uando selecionada o cursor toma forma do laço pol0gono.

6a barra de ferramentas Propriedades, na opção Borda  temos D tipos de

opç$es

• !"te"so< mantém as e)tremidades do corte de seleção sem

alteraçãoEsua#i"ação.

• S%avi)aBo< permite !ue desenhe uma seleção de pi)els usando uma

série de linhas retas.

• Di/%so<  oferece uma sua#i"ação arredondada nas e)tremidades da

seleção de pi)els, arredondando3as.

Para trabalhar com a ferramenta é necess%rio posicionar o cursor sobre um ponto inicial, !ue recebe o s0mbolo de um !uadrado ao lado do cursor.om

cli!ues seguidos, #% contornando toda a parte do p%ssaro #isuali"ada acima do galho. Ao se apro)imar do ponto de partida, o cursor #olta a e)ibir um !uadrado ao lado, indicando o ponto de chegada.

Para selecionar partes da figura onde tem outro objeto sobre, de#e3se pressionar a tecla @Shi/t , no momento de inicio e fim da seleção.

V"#$%

Para colocar uma imagem em outra camada, basta estar com a mesma !ue !ueira em outra selecionada, clicar no menu *ditar Copiar . /m seguida

selecione no#amente o menu *ditar Colar . Obser#ação tem !ue estar com a

imagem selecionadaF

2uando a imagem bitmap, é colada, ela fica sobre a camada original. Obser#e

Adicionando filtro em tempo real ou escol:endo uma

predefini89o

/sse efeito é interessante pois, o filtro adicionado fica sobre o fundo da imagem selecionado com alguma ferramenta de seleção.

Para adicionar o efeito, cli!ue no !"spetor de propriedades.

Para ajuste de cor, cli!ue em  A%ste de cor  e selecione a opção Mati)=Sat%raBo.

9urgir% a cai)a de di%ologo H%e=Sat%ratio", onde #oc* definir% !uais os

poss0#eis #alores para a alteração da cor. li!ue sobre Colori)e, para ter uma

pré3#isuali"ação da cor final.

Obser#e !ue o p%ssaro não sofre alteraç$es de cor por estar numa camada separada, e por ter sido colado anteriormente encontra3se sobre a!uela !ue est% sofrendo o efeito.

Para fa"er alteraç$es no efeito, basta clicar sobre ele na lista !ue aparece na

;áscaras

 As m%scaras mostram ou ocultam partes de um objeto ou imagem. Possibilitam #%rios tipos de efeitos criati#os, como uma janela ene#oada ou até a utili"ação de seus pr1prios tons de transpar*ncia para afetar a #isibilidade.

O objeto de m%scara pode ser #etorial ou de bitmap e sua aplicação resulta também em uma m%scara #etorial ou de bitmap, respecti#amente. < poss0#el ainda, utili"ar #%rios objetos li#res ou agrupados para o mesmo fim.

Para adicionar uma m%scara cli!ue sobre o botão  Adicio"ar mEscara,

MEscara inserida sobre o objeto.

< interessante adicionar algum efeito  essa m%scara. 9e fosse usar um efeito

gradiente, para fa"*3lo, primeiramente selecione a camada !ue apresenta a

imagem bitmap, em seguida adicione o efeito gradiente  imagem.

< preciso mesclar a camada !ue contém o efeito e a m%scara com a camada !ue contém s1 a imagem bitmap, para isso selecione a figura bitmap, cli!ue

sobre o bot$o de op%&es da paleta Camadas, locali"ada no canto direito da barra de titulo da mesma.

Pode surgir uma caixa de diálogo notificando !ue a operação ser% feita com

uma camada !ue contém uma m%scara, e essa mesma também ser% mesclada na imagem, impossibilitando, a partir disso, alteraç$es sobre ela. li!ue no botão >  para e)ecutar a mesclagem.

Obser#e !ue agora, o $itmap, j% mesclado, #oltou a ser uma +nica imagem,

/)emplo de imagem com efeito gradiente em uma mEscara

Ferramenta te<to

O Fireworks disponibili"a recursos a#ançados para criação e edição de te)tos,

permitindo !ue o usuário utili"e fontes em diferentes tamanhos e cores.

 A edição de um te)to pode ser feita a !ual!uer momento, inclusi#e ap1s a importação de te)tos edit%#eis de outros aplicati#os para o Fireworks.

 A ferramenta teto fica locali"ada na categoria ,etor  do  pai"el de /errame"tas.

O cursor passa a representar uma forma caligr%fica, como mostra a figura abai)o.

Blocos de =e<tos

&odo te)to inserido e um documento do CireGorHs é e)ibido no interior de um bloco de te)to. /ste bloco de te)to é representado por um ret;ngulo com alças !ue permitem redimensionar sua largura e altura.

Os blocos de te)to podem ser de dois tipos diferentes com largura fi)a, ou com redimensionamento autom%tico.

Dime"sio"ame"to a%tomEtico /)pande3se hori"ontalmente conforme o

usu%rio segue digitando seu te)to. &ambém se redimensiona no caso de remoção do mesmo ou de parte dele. 9ão criados por padrão, !uando se clica na tela. /sse tipo de bloco de te)to possui o canto superior direito #a"ado e arredondado.

!"dicador de Lar#%ra Fia locos de te)to de largura fi)a permitem controlar 

sua largura com !uebra de linha. 9ão criados por padrão, !uando arrastamos o cursor no documento com a ferramenta Teto selecionada. Possuem um

!uadrado #a"ado no canto superior direito.

Para alterar um bloco de te)to de dimensionamento autom%tico para largura fi)a ou #ice3#ersa, com o mesmo ati#o, basta dar um duplo cli!ue sobre o canto #a"ado.

2uando se insere um te)to, automaticamente é criada uma no#a camada e essa camada fica com o nome !ue #oc* digitou na cai)a de te)to.

6a imagem acima o te)to inserido foi Ambient.

Camada com o nome !ue foi inserido o te)to

&ambém é poss0#el aplicar efeitos em te)tos.

om o te)to selecionado basta clicar em */eitos, no botão de > e adicionar o

 Ainda e)istem opç$es para >rie"taBo, TraBo, Pree"chime"tos e TraBados.

4ejamos alguns e)emplos adicionais %rienta89o do te<to

-m bloco de te)to pode ser orientado hori"ontal ou #erticalmente, conforme seleção atra#és do botão locali"ado no !"spetor de propriedades. Por padrão,

o mesmo é orientado hori"ontalmente, da es'uerda para a direita, como

Pode ser definido também hori"ontalmente da direita para a es'uerda

FA(=A I;AG$;

4erticalmente da es'uerda para a direita

/ #erticalmente da direita para a es'uerda

< poss0#el ainda, atribuir um estilo ou te)tura para o te)to selecionado. asta utili"ar, as di#ersas opç$es no painel da guia *stilos, locali"ado na paleta  Ativa. 4eja abai)o, alguns e)emplos poss0#eis de

$stilos de =e<to Criativo

>essaltando !ue o mesmo ainda oferece di#ersas possibilidades de combinaç$es atra#és do !"spetor de propriedades.

Os efeitos sublinhados referem3se aos itens mostrados no campo */eitos. <

poss0#el sua (tiva%$o#Desativa%$o com um cli!ue sobre o 0cone indicado na

figura acima.

Convertendo te<to em tra8ado

objeto, com todas as ferramentas de edição #etorial dispon0#eis. 6o entanto, ele perde suas propriedades de ?Teto?.

Para obter esse efeito, selecione a ferramenta Li"ha  na categoria ,etor  do  painel de ferramentas. =embrando !ue j% tem !ue estar criada a cai)a de te)to.

Para fa"er uma linha semelhante a da imagem abai)o, faça uma linha clicando, arrastando o cursor e soltando o botão do mouse)

9elecione a ferramenta Po"teiro, na categoria Seletar   e selecione com um

om a tecla @Shi/t  pressionada, cli!ue também sobre a linha, selecionando

os dois objetos simultaneamente. Para finali"ar, cli!ue no menu Teto e

Para mudar a orientação do te)to, cli!ue sobre o menu Teto e selecione uma

>esultado

reenc:imentos e =e<turas de Vetores

O usu%rio pode definir as ferramentas de desenho #etoriais e de bitmap, preenchimentos e te)turas di#ersas para traços e formas' entre elas o

-et"#%lo, *lipse e PolG#o"o. 4ejamos os diferentes tipos de Pree"chime"tos e Tet%ras.

reenc:imento S?lido

-m preenchimento s1lido representa uma cor s1lida !ue ocupa o interior de um objeto.

Obser#e a estrela na imagem abai)o, j% com o preenchimento da cor. Para colorir um objeto basta criar um e no painel de ferramentas, na categoria cor 

selecionar uma cor de seu gosto.

Pree"chime"to Padro

< poss0#el também, preencher um objeto com um gr%fico de bitmap

padroni"ado pelo Fireworks, !ue oferece di#ersas opç$es prontas para este

fim.

Para utili"%3lo basta criar um objeto na %rea do documento, e com o mesmo selecionado, clicar sobre o botão de preenchimento e selecionar no#amente a opção Pree"chime"to Padro.

 Atra#és do botão Cate#orias é poss0#el alterar o tipo de preenchimento.

 Atra#és dos pontos de ajuste #isual, é poss0#el !ue se mude a #isuali"ação da imagem, alterando3se a posição dos pi)els 4ertical e Jori"ontalmente.

6o e)emplo abai)o um ret;ngulo com o preenchimento padrão definido

Para utili"ar essa opção basta clicar sobre o ponto central, !ue tem a forma arredondada, e arraste3o para o canto inferior es!uerdo da tela, como mostra a figura abai)o

9e clicar sobre o ponto de ajuste hori"ontal e arrast%3lo para o canto superior  direito, obser#endo a mudança na imagem

reenc:imento adr9o ersonali5ado

&ambém é poss0#el utili"ar um preenchimento Padro Perso"ali)ado,

escolhendo uma imagem P&' , '!F , +P*' , $MP ou T!FF , para preencher um

determinado espaço.

om algum objeto criado no documento, cli!ue sobre o botão de preenchimento no !"spetor de propriedades e no drop-down &ome de  pree"chime"to.

9er% aberta a cai)a de di%logo Locate File para !ue possa ser locali"ado o

ar!ui#o de imagem desejado. Atra#és do campo *ami"ar   ser% selecionado

local de seu computador !ue deseja abrir a imagem.

Pree"chime"to De#rad

 Atra#és do preenchimento degrad* é poss0#el colocar preenchimentos em

@&uas! Guias e Grades

O  Adobe Fireworks, assim como outros editores gr%ficos, permitem a

utili"ação de réguas, guias e grades para obter uma melhor precisão no posicionamento de trabalhos gr%ficos. Cacilita um melhor manejo das ferramentas de desenho e possibilita alinhar objetos s guias e grades.

tili5ando a r&ua

 As réguas são muito +teis para au)iliar a medição, organi"ação e planejamento do la+out  de seu trabalho. omo o Fireworks CS6  é um software com fins de

tratamento de imagens para a Web, onde os gr%ficos são medidos em pixels,

esta também é a unidade de medida da régua, independentemente da utili"ada para a criação do documento.

9e a régua não esti#er sendo e)ibida, atra#és do menu /)ibir, na opção >éguas é poss0#el #isuali"%3la deno#o, ou atra#és das teclas de atalho @Ctrl K@ Alt K@- .

licando sobre as réguas e arrastando o cursor sobre a imagem, surgem as linhas3guias, !ue de#erão ser arrastadas conforme a necessidade do usu%rio.

V"#$%

Grades

 Além das réguas e guias, e)iste também um recurso muito interessante no au)0lio  composição de imagens e demais gr%ficos no Fireworks CS6 . /ste

/m um projeto gr%fico para a Web, uma imagem precisa ter duas

caracter0sticas principais atrati#idade e le#e"a. Para isso, necessitamos otimi"%3la.

 A Otimi"ação permite !ue a imagem seja gerada com o melhor e!uil0brio entre !ualidade e compressão, no formato !ue melhor se ade!ue s necessidades do projeto.

%timi5ando uma ima&em

Paleta >timi)ar .

 A paleta >timi)ar  e)ibe automaticamente a melhor opção para a e)portação do

ar!ui#o. A figura abai)o e)ibe na paleta, o formato +P*' , para o !ual o ar!ui#o

ser% e)portado com I5 de !ualidade, relati#a ao ar!ui#o original P&' . O

documento e)ibe também, em sua Barra de ,tatus ,is%ali)ar  atra#és da guia ,

o tamanho com !ue o ar!ui#o ser% sal#o nessas condiç$es e o tempo !ue le#ar% para ser descarregado pelo na#egador de um usu%rio atra#és de uma cone)ão de 86 $PS  7!0. B+tes /or ,egundo8. =embrando !ue essa

informação le#a em consideração o fato de a imagem poder ser utili"ada para a

$<portando a ima&em

Para e)portar um ar!ui#o, selecione com um cli!ue, uma das janelas não modificadas e !ue permanecem no formato +P*'  com a porcentagem de I5

para a !ualidade a ser e)portada na imagem.

Para concluir a e)portação da imagem, cli!ue no botão *portar .

Intera&indo com a )eb

 Além de criar e editar imagens graficamente, como #isto até o presente momento, o Fireworks pode concluir documentos interati#os para a Web 7rede

mundial de computadores8.

O programa gera automaticamente, todo o HTML e +avascript   necess%rios

para a aplicação desen#ol#ida.

6as pr1)imas liç$es, aprenderemos a utili"ar esse aspecto do  Adobe Fireworks CS6 , compreendendo toda a #ersatilidade deste poderoso software.

Fatias

Fatias são blocos b%sicos de construção para uma p%gina HTML. O fatiamento

corta um documento do Fireworks em pedaços menores e e)porta cada fatia

indi#idualmente. om essa di#isão, o usu%rio ir% #isuali"ar a p%gina conforme as fatias são carregadas e remontadas pelo na#egador. 9endo assim, ele não precisa aguardar o carregamento da p%gina inteira, antes de #isuali"%3la, acelerando o processo.

 Além disso, essa propriedade na construção de uma p%gina Web possui ainda

tr*s outras grandes #antagens

>timi)aBo permite otimi"ar cada fatia indi#idual, com o uso do formato de

as imagens sejam descarregadas com maior rapide" pelo na#egador, sem perder a !ualidade.

!"teratividade criando %reas de resposta  presença do cursor do mouse.  At%ali)aBo permite atuali"ar com facilidade, partes de uma p%gina !ue sofre

modificaç$es fre!Lentes em alguns setores, sem !ue seja necess%ria a atuali"ação ou modificação da mesma por inteiro.

Para agrupar duas ou mais imagens, transformando3as em um +nico bitmap,

antes de#e3se selecionar os objetos !ue serão en#ol#idos. Atra#és da ferramenta Po"teiro, clica3se sobre os objetos e com a tecla @Shi/t . Ap1s,

clica3se com o botão direito do mouse, sobre os objetos selecionados e

escolhe3se no menu suspenso a opção A#r%par .

Paleta amadas com os objetos agrupados.

Fatiando a ima&em

Para fatiar uma imagem basta clica no menu *ditar da barra de menus, e

selecionar o comando !"serir  e clicar na opção atia 1egular  ou /oligonal .

Por padrão, a imagem fatiada recebe uma sobreposição de cor verde.

Para selecionar #%rios objetos no documento, basta pressionar a tecla @Shi/t .

9e aparecer uma cai)a de di%logo informando !ue m+ltiplos itens foram selecionados e !ue se deseja criar m+ltiplas fatias. li!ue no botão M%ltiple

para resposta afirmati#a.

=embrando !ue também pode3se usar a ferramenta Fatia, locali"ada na

categoria Fatia Poli#o"al Web do /ainel de erramentas, para selecionar uma

fatia.

 As guias de uma fatia definem o per0metro e a posição dela. /las se estendem

além dos objetos de fatia e definem como o restante do documento ser% di#idido na e)portação, abrangendo o m%)imo poss0#el da p%gina dentro das fatias, agili"ando o carregamento da mesma pelo na#egador. < poss0#el também alterar o formato de um objeto de fatia retangular e ajustar as demais fatias ao documento, arrastando suas guias. < imposs0#el redimensionar  objetos de fatia não retangulares atra#és da mo#imentação das guias.

Para trabalhar com as fatias basta posicionar o cursor do mouse sobre uma

das fatias, até !ue o cursor transforme3se em um ponteiro de movimento de guia, arrastando3a até o in0cio da guia da fatia acima.

V"#$%

6a paleta Camada da Web, onde comporta todas as fatias definidas no

documento. Portanto não de#e ser mo#ida.

ontos Ativos e ;apeamento de Ima&ens

Os Designers da Web utili"am algumas #e"es um recurso chamado Po"tos  Ativos, !ue tornam interati#as pe!uenas partes de um gr%fico interati#o maior.

-m ponto ati#o é um ponto de controle !ue define a %rea de mapeamento sobre um gr%fico da p%gina #inculado uma 213.

-m mapa de imagem nada mais é do !ue um gr%fico sobre o !ual foi definido um ou mais pontos ati#os. /les são ideais para #incular a %rea de uma imagem

a outras p%ginas da Web, não sendo necess%rio realçar a!uelas %reas ou

produ"ir efeitos de 1ollover  7t1pico !ue ser% #isto a seguir8, em resposta 

mo#imentação ou ação do mouse.

Para definir pontos ati#os sobre uma image, de#e3se ir até o menu *ditar ,

posicionar o mouse sobre o comando !"serir  e clicar na opção Hotspot .

  Atra#és desse comando é poss0#el contornar s1 a pessoaN na imagem, atra#és da cai)a !"spetor de Propriedades, clicando na opção Forma e

Para criar um linH na imagem atra#és desta seleção, basta clicar no#amente no mapa de seleção sobre a imagem, tomando o cuidado de não selecionar a fatia

!ue est% abai)o. li!ue sobre o mapa da imagem ou selecione3a dentro da camanda Web Camada, na paleta Camadas denominada Hotspot .

Para finali"ar, ati#ar o campo =inH do Inspetor de Propriedades e digitar o endereço !ue desejamos !ue !uando o usu%rio clicar, ele seja direcionado.

V"#$%

@ollover 

é um recurso muito utili"ado por Designers da Web, !ue consiste na e)ibição

de um objeto com a imagem trocada e acionada pela atual, !uando o cursor do

mouse passar sobre ela atra#és de um na#egador. O acionador é sempre um

objeto da Web, como um ponto ati#o, um botão ou uma fatia, como é o nosso

2uando um usu%rio seleciona uma fatia, aparece um c0rculo com um ret0culo em seu centro. A ela damos o nome de AlBa de comportame"to.

/)istem dois tipos de -ollovers

Simples troca uma imagem da Mold%ra atual 778 por outra diretamente abai)o

dela locali"ada na Mold%ra 3 .

Desartic%lado Possibilita a construção de -ollovers mais comple)os,

trocando imagens em fatias diferentes utili"ando di#ersas 4olduras.

aleta $stados

 A guia Camada  contém as Mold%ras !ue comp$em o projeto. Obser#e !ue

atualmente h% apenas uma moldura no documento amada !, !ue representa

todos os objetos e fatias criadas até o momento.

9e a paleta J%adros e HistKria não esteja sendo #isuali"ada, ati#e o menu +a"ela e cli!ue no comando *stados.

om o Adobe Fireworks CS6  é poss0#el criar uma série de bot$es e menus  pop-up em +avaScript , mesmo não tendo nenhum conhecimento da

linguagem, pois o pr1prio Fireworks  encarrega3se de gerar todo o c1digo

necess%rio.

ot$es são considerados tipos especiais de s0mbolos. /lementos de na#egação para uma p%gina da Web são criados atra#és dos lin5s de ação e

do *ditor de boto e)istentes no programa. (entre suas principais

caracter0sticas, estão possibilitar !ue se crie um botão partindo do "ero, con#erter um objeto em botão ou importar um j% e)istente. Isso facilita muito o trabalho de !uem est% desen#ol#endo o projeto.

Para criar um s0mbolo basta selecionar o bitmap, clicar no menu Modi/icar , e

ati#ar o comando SGmbolo e clicar na opção Co"verter em SGmbolo. 9em

Me"%s pop9%p

9ão a!ueles !ue se e)ibem, por e)emplo, um na#egador em resposta a um mo#imento do cursor do mouse sobre um botão. /sses itens podem ter 

#0nculos com endereços eletrnicos ou até com uma determinada p%gina no

site. < poss0#el criar submenus em menus pop-up para tantos n0#eis !uanto os

desejados.

6o Fireworks CS6  e)iste também um *ditor de me"%s pop9%p, !ue é uma

cai)a de di%logo com guias !ue orientam o usu%rio no processo de criação, assim como no *ditor de boto.

 As guias para controle das caracter0sticas de um menu  pop-up possuem as

seguintes funç$es

Co"tedo  contém as opç$es !ue determinam a estrutura b%sica do menu, tal

como te)to, #0nculo de ->= e destino para cada item.

 Apar"cia ontém opç$es !ue determinam a apar*ncia dos estados Acima e

9obre, de cada célula do menu, assim como sua orientação #ertical ou hori"ontal.

 Ava"Bada ontém as opç$es !ue determinam dimensão, preenchimento e

espaçamento da célula, suas bordas, seu tempo de espera e o recuo do te)to.

PosiBo ontém opç$es !ue determinam o posicionamento do menu e

submenus, assim como a posição do primeiro em relação  fatia, e a posição do segundo em relação ao primeiro, e assim sucessi#amente, incluindo opç$es como ao fundo, no canto superior direito, no inferior direito e no topo.

(ependendo do design !ue se deseja obter com o menu pop-up, nem todas as

guias ou opç$es poderão ser usadas no *ditor de me"% pop9%p. 9uas

configuraç$es permitem alteraç$es a !ual!uer momento, mas é necess%rio ao menos, uma opção na guia Co"tedo, para criar um menu !ue seja

#isuali"ado atra#és do na#egador.

Para adicionar cli!ue no menu *ditar , posicione o cursor sobre o comando Me"% Pop9%p e clicar na opção Adicio"ar Me"% Pop9%p.

Barra de ave&a89o

 A principal caracter0stica !ue determina uma $arra de "ave#aBo  é a sua

perman*ncia consistente em todo o site, oferecendo uma na#egação direta

para o usu%rio, independentemente da p%gina em !ue #oc* se encontre.

Para utili"ar uma $arra de &ave#aBo, tem !ue con#erter o objeto em

s0mbolo, ati#ando a opção boto.

$<portando em formato .=;(

Para e)portar, primeiro tem !ue #isuali"ar o documento, sem eguida clicar em

O formato de e)portação +P'  trabalha com milhares de cores e o formato '!F 

apenas com 67 , no m%)imo. Isso nos le#a a concluir !ue, se o trabalho é uma

imagem comple)a, como a utili"ada acima, de#emos usar um formato !ue tenha suporte  !uantidade de cores suficiente para supri3la.

Porém, o formato '!F  possui algumas opç$es !ue conseguem suprir essa falta

de cor até um certo limite, interligando as cores e)istentes e adaptando3as de forma a redu"ir a falha, !uando poss0#el, oferecendo um tamanho de ar!ui#o menor, o !ue é interessante !uando se trata de Web.

 Alisame"to  /ssa opção funciona sua#i"ando todo o +P' , redu"indo também

o tamanho do ar!ui#o. 4ai do ni#el 1  78/9 normal 8 até o ;  78/9 sem defini%$o nítida de detal:es8. < uma opção !ue, para a Web, não gera um resultado

=embrando !ue no campo *portar , da cai)a de di%logo *portar , tem !ue

clicar no botão drop3doGn e escolher a opção HTML a"d !ma#es.

Aten89oF

e)portação, fi!uem na mesma pasta. 9ão necess%rios para a completa #isuali"ação do mesmo atra#és do Browser)

Anima8Des

9ão ilus$es de mo#imentos, criadas atra#és de símbolos e de alteração das

propriedades do gr%fico. ada uma de suas aç$es são arma"enadas em uma

moldura, de nome *stados e, !uando todos os *stados são reprodu"idos em

uma se!L*ncia, elas são obtidas.

 Assim como os símbolos, foram tratados nas liç$es anteriores, onde produ"iam

propriedades em gr%ficos de bot$es e rollovers, também agem em !ual!uer 

objeto criado ou importado. A possibilidade de se ter #%rios s0mbolos em um mesmo ar!ui#o, permite !ue cada um deles possua uma animação diferente. (essa forma, mesmo não sendo obrigat1ria na produção de gr%ficos animados, a utili"ação de s0mbolos de animação, possibilitam uma maior comple)idade em sua criação como um todo.

-m SGmbolo de a"imaBo pode ser !ual!uer objeto criado ou importado.

 Assim como j% dito anteriormente, em um +nico filme de animação é poss0#el ter #%rios objetos atuando juntos, cada um em seu papel, sendo um símbolo

diferente de outro e com suas propriedades de animação espec0ficas para a sua atuação. /ntre elas, podemos citar ocorr*ncias do tipo mover , encol:er  ou apagar . -ma animação não precisa, necessariamente, ser produ"ida por 

objetos transformados em s0mbolos, porém, a utili"ação deste recurso possibilita uma criação de ar!ui#os menores em seu tamanho final, detalhe importante !uando se trabalha com animaç$es, principalmente !uando direcionadas para a Web, onde o tempo de carregamento e tamanho de

p%ginas são important0ssimos para promo#er um acesso agrad%#el ao usu%rio final.

Para tranformar um objeto em animação, basta clicar no menu Modi/i(%e e,

Como salvar uma fi&ura animada em formato GIF

 Atra#és do menu Ar(%ivo, basta selecionar o Assiste"te de *portaBo.

aso uma cai)a de di%logo apareça, cli!ue em continuar.

/m seguida, no decorrer do assistente, mantenha a opção '!F a"imado

selecionado e cli!ue no botão Co"ti"%ar .

Por final, basta s1 escolher o local 7pasta8 a ser sal#ada.

4isuali"e seu conte+do atra#és do Wi"dows *plorer  e e)ecute o ar!ui#o pelo !"ter"et *plorer , clicando com o botão direito do mouse sobre o mesmo e

selecionando o item !"ter"et *plorer , na opção Abrir com.

=rabal:ando com o Adobe Flas: rofessional CS6

O Adobe Flash Pro/essio"al CS6 é o software mais utili"ado no mundo para

aplicação e produção de animaç$es gr%ficas para a Web. om ele, também é

poss0#el importar ar!ui#os e sal#%3los em seguida, com suas propriedades, o !ue o dei)a bem menor do !ue se fosse e)portado em formato SWF 7Flash8,

pelo pr1prio Fireworks, também poss0#el.

Mas, nossa meta nesta lição não ser% apenas a importação do ar!ui#o em formato '!F , para sua posterior e)portação em SWF  7Flash8 e sim a aplicação

de recursos e)tras, não poss0#eis ao Fireworks, oferecendo a #oc* uma

e)peri*ncia muito interessante da utili"ação deste e)traordin%rio software,

Para utili"%3lo, cli!ue em !"iciar , Todos os pro#ramas e, em  Adobe,

selecione o programa Adobe Flash Pro/essio"al CS6 .

Para criar um no#o documento, cli!ue no menu  Ar(%ivo, cli!ue na opção &ovo, para criar um no#o documento.

6a cai)a de di%logo &ovo Doc%me"to, certifi!ue3se de !ue estar% criando um

 Ap1s criado, para redefinir o tamanho do documento cli!ue no botão

Propriedades de Co"/i#%raBo do Ar(%ivo do Flash, na parte =ateral

6a cai)a de di%logo Co"/i#%raBes do Ar(%ivo, digite os #alores em desta!ue

na figura abai)o e finali"e clicando em > .

O #alor de 56  fps 7/rames por se#%"do8 para a opção Taa de (%adros

 justifica uma ta)a de !uadros 7*stados8 coerente para !ue a animação resulte

em mo#imentos sua#es, pois ta)as bai)as apresentam mo#imentos muito r%pidos e pouco percept0#eis, assim como altas ta)as em mo#imentos mais lentos.

Para trabalhar com algum documento criado no Fireworks, basta selecionar o

menu Ar(%ivo e, na opção !mportar , cli!ue em !mportar para o palco.

 Ap1s importado, todos os s0mbolos e objetos, antes presentes e #isuali"ados no Fireworks, agora tornaram3se apenas imagens $itmaps, dispostas e