Fireworks CS6

Fireworks CS6

O Adobe Fireworks CS6  é  é hoje a melhor ferramenta de crição para a Internet. Muitos Web designers opta pelo Photoshop para esta finalidade. Alguns por  costume, outros por comodidade e alguns por não conhecerem a ferramenta. omo omo cita itado ante nterior riorme ment nte, e, o Fireworks é uma uma pode podero rosa sa ferra ferrame ment nta, a, principalmente !uando utili"ada no desen#ol#imento de aplicaç$es para a Web, como como design de p%ginas p%ginas e tratam tratament ento o e criaçã criação o de imagens imagens e animaç animaç$es $es.. &rabalhando com as demais ferramentas de tratamento de imagens, como o ferram amen enta tass de cria criaçã ção o de p%gi p%gina nass HTML, como o  Adobe Photoshop' ferr até mesmo mesmo com softwares  especiali"ados em animaç$es, Dreamweaver ' ou até como o  Adobe Flash, podemos criar Websites pessoais, empresariais ou de comérc comércio, io, de uma forma forma simple simples, s, objeti# objeti#a a e com com grande grande desen# desen#olt oltura ura de criati#idade, tanto em edição de imagens, como na produção de animaç$es. (entre (entre os assunt assuntos os abord abordado adoss durant durante e esse esse curso, curso, criare criaremos mos desde desde um 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 p%gina Web e a produção de animaç$es. omo #oc* pode #er, o Fireworks é uma ferramenta poderosa e com m+ltiplas funç$es, no !ue di" respeito  criaç$es Web. -tili"aremos o software mais comum para a criação de animaç$es, o  Adobe para apli aplica carm rmos os efei efeito toss e)tra e)trass sobr sobre e a anim animaç ação ão cria criada da pelo pelo Flash Flash cs6  cs6 , para Fireworks, buscando apro#eitar ao m%)imo o seu aprendi"ado. Os comput computado adores res trabal trabalham ham com com dois dois format formatos os de gr%fic gr%ficos os vetorial   ou de bitmap. /ntender a diferença entre estes dois formatos é fundamental para a reali"ação de um bom trabalho com o Fireworks.

Gráficos Vetoriais -m gr%fico #etorial pode ser tradu"ido tr adu"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* modifica modifica as propriedades das das linhas e cur#as 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 ocorrerão alteraç$es na !ualidade de sua apar*ncia.

Gráficos de Bitmap Os gr%ficos de bitmap são são cons constit titu0 u0do doss por por pont pontos os deno denomin minad ados os Piels, organi"ados em uma grade. A pr1pria tela do computador consiste em uma grande grade de  pixels.  Ao contr%rio da composição de um gr%fico #etorial, o bitmap é constitu0do por  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 pontos são encai)ados como um !uebra3cabeças. 2uando editado, o usu%rio modifica os  pixels em #e" das cur#as e linhas, como no gr%fi r%ficco #etor etoria ial. l. (ess (essa a mane maneir ira, a, os gr%fi r%ficcos de bitmap  tornam3se dependentes de resolução, e o aumento do gr%fico pode fa"er com !ue as bordas bordas e cores cores fi!uem fi!uem altera alteradas das,, pois pois os mesmos mesmos  pixels  são redistribu0dos dentro da no#a grade. 4ale destacar ainda, !ue a e)ibição de um bitmap atra#és de um dispositi#o de resolução menor !ue a do gr%fico, também degrada a !ualidade de sua imagem.

Inicinado o Fireworks CS6 Para Para inicia iniciarr o Fireworks CS6 , cli! cli!ue ue no botã botão o !"iciar , da da Barra de Tarefas, esco escolh lha a a opçã opção o Todos os pro#ramas ,  Adobe Master Collectio" CS6 e selecione Adobe Fireworks Fireworks CS6 .

5anela do Fireworks CS6  aberta  aberta com seus principais componentes

$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 caixa de diálogo Salvar como, selecione o botão drop-down Salvar  em e procure sua pasta.

/m seg seguida, ida, o nome nome carta) , defin definid ido o para para o ar!u ar!ui# i#o, o, junt juntam amen ente te com com a e)tensão p"#  de  de ar!ui#os padrão do Fireworks, é e)ibido na barra de título do programa e na guia de t0tulo t0tul o da janela do documento.

Abrindo o arquivo li!ue no menu  Ar(%ivo do Fireworks e selecione a opção  Abrir .

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

9elecione, com um cli!ue, o ar!ui#o carta).p"# .

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

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 #isuali"ação no espaço de trabalho, #ariando entre inteira e meia altura.

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.

/m seguida, atribua o #alor 231  para ele

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

(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   7 vertical 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

Portanto, 578 9 51 : 3;8 .

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 utili"ar as setas do teclado para reali"ar o ajuste !ue achar necess%rio, ou

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.

Alterando a %rdem dos %b'etos na Camada

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 781, no indicador do canto inferior direito da tela do documento

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 mantém as e)tremidades do corte de seleção sem alteraçãoEsua#i"ação.

•

!"te"so<

•

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

série de linhas retas. •

Di/%sorie"taBo, TraBo, Pree"chime"tos e TraBados . 4ejamos alguns e)emplos adicionais

%rienta89o do teesultado

reenc:imentos e =eéguas é poss0#el #isuali"%3la deno#o, ou atra#és das teclas de atalho @Ctrl K@ Alt K@- . >éguas sendo e)ibidas

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 recurso é chamado de 'rades e sua ati#ação d%3se por meio do menu *ibir .

/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 Web.

$