fireworks exemplos

7/24/2019 Fireworks Exemplos

1/52

1

..: Usando blend mode : Difference:..

::Objectivo::

Mostrar uma maneira simples de se obter um interessante efeito em um texto com uso docomando differencedo painel layers.

::Novo documento::

Abra o FW - (bvio!) :-)

ecle trl " #ou selecione$ Ar%uivo &&&' #ovopara abrir a caixa de diloo *#ovodocumento*$ conforme mostrado na fiura abaixo.

A+uste as dimens,es de Canvas(palco$ rea de trabalo$ tela$ etc...) para:

arura: /00 pixels - Altura: /00 pixels

or da ela: 1000000. ecle 23.

::Desenhe um rectngulo::

4-) 5efina a cor de preencimento vermela6

7-) li%ue na ferramenta rect8nulo6

9-) li%ue e arraste o cursor no palco para desenar um rect8nulo.


2/52

2

::O texto::

4-) 5efina a cor do texto iual a cor do rect8nulo: vermela6

7-) li%ue na ferramenta texto6

9-) li%ue e arraste o cursor no palco para definir um rect8nulo para o texto na posi;o entreas duas cores$ conforme mostrado abaixo e diite um texto.Nota:A+uste os par8metros da fonte (tipo$ tamano$ nerito$ espaamentos$ etc..) conformesuas prefereleccione o texto diitado6

7-) #o painel *ayers* abra o menu *?lend Mode* e6

9-) cli%ue na op;o *5ifference*6

2 texto assume as cores opostas do fundo$ conforme mostrado na fiura.


3/52

3

::O retoque final::

@ronto! amos aparar as sobras.

4-) >eleccione a ferramenta rop6

7-) li%ue e arraste o cursor no palco para definir um rect8nulo de corte em volta do texto6

Becorte o rect8nulo definido.

::O efeito final::

5epois de recortado o rect8nulo$ conforme acima seu texto ficar assim:


4/52

4

..: Fireor!s: "feitos de relevo em textos:..


5/52

5

::Objectivo::

Apresentar uma tCcnica para aplica;o de efeitos de relevo em textos$ com uso do Fireor!s.

::#$resenta%&o::

A proposta C a de examinar passo a passo as etapas para se obter os efeitos *Belevo elevado*

e *DnterioriEar relevo*em dois textos distintos.=ste tutorial sup,e %ue voc< tem no,es bsicas de manipula;o das ferramentas doFireorGs.

::'o.(asso::


ecle trl " #ou seleccione$Ar%uivo &&&' #ovopara abrir a caixa de diloo *#ovodocumento*$ conforme mostrado na fiura abaixo.

A+uste as dimens,es de anvas (palco$ rea de trabalo$ tela$ etc...) para:arura: 700 pixels

Altura: 4H0 pixels

or da ela: ransparente.

ecle 23.

::)o.(asso::

4-) >eleccione a ferramenta B=I#JK26

7-) desene um rect8nulo preencendo toda a tela (canvas). Bect8nulo de 700 x 4H0px6

9-) com o rect8nulo seleccionado$ a+uste a cor de preencimento para 1LLLLLL - slido (umtom cinEa mCdio).


6/52

6

::*o.(asso::

4-) >eleccione a ferramenta =N26

7-) defina o estilo$ o tamano a cor e o peso (nerito ou n;o) do texto6

9-) diite o texto na metade superior do rect8nulo$ mas n;o se preocupe com o luar exactodo texto aora. #o fim acertamos tudo!

::+o.(asso::

2 primeiro texto est na rea de trabalo do FW. amos ao seundo texto.

Bepita os passos acima$ diitando outro texto$ aora na metade inferior da tela$ mas n;o sepreocupe com o luar exacto do texto aora. #o fim acertamos tudo!

@ara faEer com %ue este seundo texto ocupe uma extens;o iual ao do primeiro texto faa oseuinte:


7/52

7

a-) Arraste as alas do bloco de texto (em aEul no deseno abaixo) atC alinar as suas bordases%uerda e direita com o texto de cima.

b-) li%ue no bot;o *esticado*para o texto ocupar todo o bloco de texto.

::,o.(asso::

4-) >eleccione o primeiro texto e abra o menu *=feitos*6

7-) desliEe atC *anfro e relevo*para abrir o sub-menu69-) cli%ue no efeito*Belevo elevado*$ para abrir a caixa de diloo dos par8metros desteefeito.


8/52

8

::-o.(asso::

#a caixa de diloo %ue voc< acabou de abrir:

4-) a+uste as defini,es de relevo elevado para os par8metros mostrados na fiura abaixo6

7-) mude a cor do texto para 1LLLLLL.

::o.(asso::

2 primeiro texto est 23 por en%uanto. amos ao seundo texto.

Bepita os passos descritos anteriormente para o primeiro texto aplicando aora o efeito*DnterioriEar relevo*.


9/52

9

::/o.(asso::

5e modo semelante ao procedimento anterior$ a+uste as defini,es do relevo conformemostrado na fiura abaixo.

::0o.(asso::= para concluir vamos aos a+ustes finais.

>eleccione os dois textos ao mesmo tempo6

Abra o menu Modificar &&&' Alinar &&&' 5istribuir alturas. om isso voc< a+usta os doistextos na vertical.

Aora descubra voc< mesmo como a+ust-los na O2BDP2#A.

5ica: C pelo mesmo menu *Modificar*$ mas se n;o conseuir$ poste sua dQvida em um frumFW!


10/52

10

::O efeito final::

>e voc< usou as mesmas defini,es deste tutorial$ vai terminar com um deseno iualEino aeste ai em baixo!


11/52

11

..: "feito de anel em texto :..

?aseado em tutorial publicado no site Meteor Webdesin

::Objectivo::

1ostrar uma t2cnica de constru%&o de um anel decorativo em uma letra.

::3is&o anteci$ada::

@ara uma vis;o antecipada do efeito$ ve+a no final desta pina$ textos decorados com o anelna primeira letra.

::(rimeiros $assos::Acompane as etapas 4 a / na fiura mostrada abaixo:

4-) onstrua duas elipses de cores e tamanos diferentes6

7-) olo%ue uma elipse sobre a outra6

9-) >eleccione as duas elipses v ao menu Modify &' ombine @ats &' @unc6

/-) A elipse menor deve ter RfuradoR a maior como mostrado. =st pronto o anel.

::4eguindo em frente::

amos novamente acompanar os passos da fiura a seuir:
http://meteorwebdesign.net/http://www.maujor.com/fw/textoanel.php#effinalhttp://www.maujor.com/fw/textoanel.php#effinalhttp://meteorwebdesign.net/


12/52

12

4-) >eleccione a elipse furada$ v ao menu Modify &' ransform &' >Ge

Aparece um rect8nulo preto com %uadradinos em volta como mostrado.

4egure a tecla>ifte posicione o ponteiro do mouse %ue aora tem a forma de uma flexina

redonda$ no lado direito do %uadrado %ue apareceu e ire no sentido anti-orrio.

oc< notar %ue o rect8nulo ira aos pulos de uma amplitude iual a 4Ho6

7-) 5< 9 pulos e voc< ter irado o anel /Ho

como mostrado6

9-) 5esene uma letra. =u desenei um 1de Mau+or. @osicione a letra #5674do anel

>e voc< seuiu a se%u


13/52

13

Aora voc< trabalar com dois ar%uivos contendo a letra e o anel.

4-) seleccione a letra e o anel e tecle trl " (copiar)em seuida tecle trl " # (novodocumento). Dsto faE abrir uma +anela popup para as dimens,es do novo palco. Aceite asdimens,es clicando 23 na +anela %ue se abriu e voc< ter um palco vaEio na tela.

li%ue em %ual%uer luar no palco e em seuida tecle trl " (colar)Aora voc< tem dois ar%uivos iuais mostrando a letra e o anel. #este ar%uivo %ue vocplit (ou tecle trl " >ift " U). Aora sim apaue$ seleccione o

%ue restou e tecle trl " (copiar). Aora volte ao ar%uivo %ue tem a letra e o a nel e tecletrl " (colar).

9-) FaEendo tudo isto voc< obtCm o %ue est mostrado no nQmero 9 da fiura acima.

/-) 5< um Eoom onde acaba de ser RcoladoR o %ue voc< copiou e colou.

H-) 2 Eoom aparece como neste nQmero da fiura. rabale no Eoom com a ferramenta RlpisR

para limpar o vermelo %ue ficou na frente do branco.

::Usando a letra com anel::


14/52

14

A seuir uma aplica;o da letra com anel %ue acabei de construir.

=screvi o nome Mau+or usando a mesma fonte e tamano %ue usei no tutorial.

>eleccionei a letra com o anel copiei e colei em cima do M de Mau+or.

>eleccionei tudo (Mau+or " letra com anel) fui ao menu Modify &' Flatten >election (ou teclerlt " >ift " Alt " Punindo tudo em um bitmap Qnico.

Apli%uei efeitos =ffects &' ?evel and =mboss &' Baised =mboss e depois Filters &' Ad+ustolor &' OueS>aturation.


15/52

15

..: "feito chocolate em textos :..

::Objectivo::

Mostrar a constru;o de um efeito simulando a aparelection:

::#$licando os efeitos::

seleccione o texto e v ao menu: Filters =ye andy /00 = ?evel ?ossconforme mostrado abaixo.

::Os $armetros::

A escola no menu$ abrir uma +anela para voc< confiurar as op,es para o filtro$ conformemostrado na fiura abaixo.

2bserve %ue no topo desta existem tr


16/52

16

A seuir$ passe para a aba ?evel @rofilee escola arve.

li%ue 23 no bot;o da +anela e pronto$ t feito o efeito cocolate no texto.

=ste foi bem simples X

::"feito final::

2 efeito final C conforme mostrado abaixo:

Aora voc< pode usar sua criatividade e obter varia,es leais

#a primeira usei uma fonte diferente da usada no tutorial e nas duas seuintes apli%uei o filtro5ripdaAlien >Gin =ye andy H: #ature$ %ue n;o C defaultdo FW$ voc< precisa instalar.


17/52

17


18/52

18

..: "feito fogo :..

::Objectivo::

Mostrar uma tCcnica de constru;o de efeito foo.


=ste tutorial mostra uma tCcnica para se obter o efeito foo conforme mostrado nesta

D>Y2 A#=D@A5A.

::Novo documento::

Abra o FW

ecle trl " #ou seleccione$ Ar%uivo &&&' #ovopara abrir a caixa de diloo *#ovo

documento*.


arura: /H0 pixels - Altura: 7H0 pixels

or da ela: @reta - 1000000

ecle 23.

::# forma inicial::

onstrua$ ocupando a metade inferior do palco$ um rect8nulo com cor de preencimentobranca e sem lina de contorno$ conforme mostrado na fiura abaixo.

om o rect8nulo seleccionado transforme-o em bitmap teclando >ift " trl " Alt " P 6ouuse o menu Modify &&' Flatten >election 6

::#$licando o $rimeiro efeito 9 4mudge 5ool::

seleccione o rect8nulo e escola a ferramenta >mude tool a+ustando os par8metros >iEe$=de$ >ape e @ressure conforme mostrado
http://i79.photobucket.com/albums/j152/maujor/fw/fogo7.jpghttp://i79.photobucket.com/albums/j152/maujor/fw/fogo7.jpg


19/52

19

om a ferramenta escolida arraste sobre a parte superior do rect8nulo branco para cima emdirec;o ao palco preto e para os lados.

@rati%ue um pouco e voc< conseuir facilmente obter as *lZnuas de foo* em cima dorect8nulo branco . onstrua alumas poucas destas lZnuas espaadas uma da outra.

Altere o valor >iEeda ferramenta para 7He construa mais alumas lZnuas espaadas.

Altere novamente o valor >iEeda ferramenta aora para 4He construa mais alumas lZnuas.

oc< ir perceber %ue para cada valor >iEevai obter *linuas* menores.

@rati%ue um pouco e procure acertar o aspecto das *lZnuas* o mais prximo possZvel do real.

#o fim voc< obter alo talveE atC melor do %ue eu obtive e mostro a seuir:

::#$licando o segundo efeito 9 ue;4aturation::

seleccione o rect8nulo e abra o menu: Filters (Alt " i) &&' Ad+ust olor &&'OueS>aturation6

A+uste os par8metros do efeito conforme mostrado na fiura e tecle 23


20/52

20

::Du$licando o laia a numera;o na fiura

4-) li%ue no trianuloEino do painel ayer para abrir um menu suspenso.

#o menu %ue se abre escola 5uplicate ayer...

7-) Mar%ue ?efore current layer(antes do layer atual)

9-) ecle 23

/-) 2bserve %ue foi criada uma cpia do ayer 4 Rem cimaR (antes dele) camada ayer 7

::#$licando o terceiro efeito 9 ue;4aturation no =a


21/52

21

Abra o menu: Filters (Alt " i) &&' Ad+ust olor &&' OueS>aturation6

A+uste os par8metros do efeito conforme mostrado na fiura e tecle 23.

::#$licando o quarto efeito 9 Color::

seleccione o ayer 76

Abra o menu suspenso$ indicado pela seta vermela na fiura$ do painel ayer e escola olorpara o ayer 7.

::Finali>ando::

=scola a ferramenta rope recorte como mostrado a seuir.

#ota: [uanto maior sua abilidade na manipula;o da ferramenta >mude ooltanto mais real

ser o resultado final do efeito.@ois$ como voc< deve ter notado foi com esta ferramenta %ue criamos as labaredas do foo.


22/52

22

..: ?ot@es com chanfro externo :..

::Objectivo::

Mostrar o uso do efeito *canfro externo* e suas 7\ op,es em rect8nulos$ para construir

bot,es.

::Novo documento::


ecle trl " #ou seleccione$ Ar%uivo &&&' #ovopara abrir a caixa de diloo *#ovodocumento*$ conforme mostrado na fiura abaixo.


arura: 700 pixels - Altura: 4H0 pixels

or da ela: ransparente. ecle 23.

::O rectngulo::

om o palco para constru;o do novo documento na tela$ vamos comear desenando umrect8nulo nas dimens,es do bot;o a construir.

4-) li%ue no Zcone da ferramenta *Bet8nulos e =lZpses*6

7-) #o menu %ue se abre$ cli%ue em *Ferramenta Bet8nulo Arredondado*


23/52

23

2bserve a fiura abaixo:

4-) om a ac;o descrita no item anterior o ponteiro do mouse transforma-se em uma*cruEina*$ pronto para desenar o rect8nulo pela ac;o de arrastar e soltar.

5esene um rect8nulo sem se preocupar com as dimens,es!6

7-) om o rect8nulo desenado e seleccionado$ a+uste a cor do preencimento para sua corescolida. #este tutorial usei a cor A000000B

9-) Mantena o rect8nulo seleccionado e nas +anelinas W (larura)e O (altura)diite asdimens,es do rect8nulo6

/-) =scola o raio de arredondamento dos cantos do rect8nulo.

::O menu do chanfro::

4-) seleccione o rect8nulo (cli%ue em cima dele). *Aparece* um contorno em lina aEul combolinas nos cantos conforme mostrado na fiura6

7-) li%ue em cima do sinalEino de =feitospara abrir o menu dos canfros6

9-) 5esliEe o mouse atC *anfro e relevo*e no sub-menu %ue se abre cli%ue e

m /-) *anfro externo*6


24/52

24

::#$lica%&o do chanfro::

om a ac;o descrita no item anterior abre-se um caixina de diloo para aplica;o decanfros6

4-) @or default ser aplicado no nosso rect8nulo um canfro.

7-) =scola uma cor para o canfro. #este tutorial apli%uei uma cor iual a cor do ret8nuloA000000.

oc< pode escoler uma cor diferente.

9-) =scola uma espessura para o canfro6

/-) #estas 9 +anelinas a+uste os detales de sombras e orienta,es para o canfro. Faatestes variando os valores6

H-) e V-) por default estas +anelinas devem estar com o canfro Acatadoe em Alto Belevo.

Abra estas +anelinas clicando na setina ao lado delas.

]-) A +anelina onde esta escrito Alto relevo abre-se e voc< tem mais 9 op,es6

\-) A +anelina aberta com as / op,es possZveis.


25/52

25

::1ais o$%@es::

4-) seleccione o rect8nulo6

7-) li%ue na setina e +anelina onde est escrito Acatadoabre-se e voc< tem mais Vop,es6

9-) A +anelina aberta com as ] op,es possZveis.

::Os )/ bot@es::

oc< pode ent;o combinar cada uma das / op,es de uma +anelina com as ] op,es daoutra6

om isso voc< obtCm ] x / & 7\ tipos de bot,es$ mostrados abaixo.


26/52

26

::Nota final::

Mostrei neste tutorial a tCcnica bsica para constru;o de bot,es com canfro externo.

Mas$ isto n;o C tudo.

5< asas a sua criatividade e ao dominar esta tCcnica$ altere e combine cores$ faapreencimentos derad


27/52

27

..: "feito met8lico cromado :..

::Objectivo::

Mostrar uma tCcnica de constru;o de efeito cromado em superfZcie metlica.


=ste tutorial mostra a tCcnica se obter o efeito cromado conforme mostrado nesta

D>Y2 A#=D@A5A.

::Novo documento::

Abra o FW

ecle trl " #ou selecione$ Ar%uivo &&&' #ovopara abrir a caixa de diloo *#ovo

documento*$ conforme mostrado na fiura abaixo.


arura: 700 pixels - Altura: 700 pixels

or da ela: 1FF.

ecle 23.

::# forma inicial::amos construir nosso efeito cromado em um rect8nulo de 4H0px x 4H0 px com cantosarredondados.

Assim$ desene no palco um rect8nulo com cantos arredondados$ cor de preencimentobranca e sem lina de contorno$ conforme mostrado na fiura abaixo.

::#$licando o $rimeiro efeito 9 nner ?evel::

seleccione o rect8nulo %ue voc< construiu e abra o menu =ffects:"$ localiEado na parte direitainferior loo abaixo do palco e mostrado na fiura6
http://i79.photobucket.com/albums/j152/maujor/fw/cromo8.gifhttp://i79.photobucket.com/albums/j152/maujor/fw/cromo8.gif


28/52

28

4-) #o menu %ue se abre escola: ?evel and =mboss &&' Dnner bevel6

7-) A+uste os par8metros do efeito conforme mostrado na fiura6

9-) oc< obter o primeiro efeito no rect8nulo$ como mostrado.

::#$licando o segundo efeito 9 Curves::

seleccione o rect8nulo e abra o menu =ffects:"$ outra veE6

#o menu %ue se abre escola: Ad+ust olor &&' urves6

A+uste os par8metros do efeito conforme mostrado na fiura6

li%ue e arraste os pontos da curva para as posi,es mostradas6

oc< obter o seundo efeito aplicado no rect8nulo$ como mostrado.


29/52

29

::#$licando o terceiro efeito 9 Curves::


#o menu %ue se abre escola: Ad+ust olor &&' urves6


li%ue e arraste os pontos da curva para as posi,es mostradas6

oc< obter o terceiro efeito aplicado no rect8nulo$ como mostrado.

::#$licando o quarto efeito 9 nner 4hado::



30/52

30

#o menu %ue se abre escola: >ado and Jlo &&' Dnner >ado6


oc< obter o %uarto efeito aplicado no rect8nulo$ como mostrado.

::#$licando o quinto efeito 9 Dro$ 4hado::


#o menu %ue se abre escola: >ado and Jlo &&' 5rop >ado6


oc< obter o %uarto efeito aplicado no rect8nulo$ como mostrado.

::O 5exto::

Finalmente para concluir o trabalo vamos escrever o texto.

Ksei fonte Arial ?lacG$ nerito de 90 px na cor 1 (cinEa claro).

escreva o texto e apli%ue =ffects &' ?evel and =mboss &' Dnner ?evel

Auste os par8metros do efeito conforme mostrado e pronto!

=st terminado o efeito cromado metlico.


31/52

31


32/52

32

..: Constru%&o de menu $o$9u$ 9 (arte ' :..

::ntrodu%&o::

Menu pop-up C um elemento de interface muito usado para solucionar o problema deacomodar uma rande %uantidade de linGs de navea;o em um espao reduEido.

#este tipo de navea;o o desenvolvedor tem a possibilidade de pro+ectar uma barra denavea;o oriEontal com submenus.

#este tutorial mostrarei como construir uma barra de navea;o oriEontal para abriar um$dois ou mais nZveis de navea;o$ abrindo na vertical.

2s subnZveis opcionalmente podem ser pro+ectados para abrir na oriEontal.

Ksarei o FireorGs para erar o OM e o respectivo +avascript para funcionamento do menu emostrarei como exportar para uma pina eb.

::Uma vis&o anteci$ada::

5esenvolverei o tutorial construindo uma barra de navea;o com / linGs %ue abrem umsubnZvel nos linGs inG - 4 e inG - 7$ tr


33/52

33

o inG - 4./

o inG - 4.H

2 inG - 7um subnZvel contendo 9 linGs:

o inG - 7.4

o inG - 7.7

o inG - 7.9

2 inG - 9com tr


34/52

34

Km rect8nulo de /\0 x 4]px com fundo na cor 1eeeeee (cinEa claro) e bordas de 4pxna cor 1cccccc (cinEa escuro)6

r


35/52

35

Aora no palco uma rade de \0 x 4Hpx.

>e voc< nunca trabalou com Jrid tente o seuinte para treinar$ antes de prosseuir:

ecle trl " Alt " Jpara RdesliarR o rid$ tecle outra veE para RliarR.

5< um Eoom de 700^$ peue a ferramenta rect8nulo e desene aluns rect8nulos parasentir como C fcil colocar os vCrtices sobre os pontos de interse;o do rid.

Dsto C devido ao R>nap to JridR. ecle trl " Alt " >ift " Jpara RliarR e RdesliarR o >nap toJrid.

erminando de treinar confira se o R>nap to ridR est liado.

::Construindo os lin!s e as fatias slicesG::

2bserve a se%u


36/52

36

4.onstrua / (%uatro) ret8nulos de \0 x 4Hpx sem bordas e com a cor do fundo

1eeeeee$ um ao lado do outro sobre o rid6

7.=screva o nome dos linGs com fonte Arial$ tamano 44$ nerito e cor 1cc9900 e

posicione sobre os ret8nulos. @or en%uanto esconda os textos dos linGs$ para n;o

atrapalar$ indo ao painel layers (a teclaF7 mostraSesconde o painel) e desliando o

olo dos textos6

9.li%ue sobre cada um dos %uatro ret8nulos com a tecla >iftpressionada$ paraselecionar os / ao mesmo tempo.

/. ao menu =dit &' Dnsert &' >liceou tecle Alt " >ift " K . ai aparecer uma +anela

popup6

H.@ressione o bot;o Multiplena +anela %ue se abriu$ ou tecle a letra M6

V.>;o criadas / fatias (verde com um cZrculo) sobre os / ret8nulos como mostrado na

fiura.


37/52

37

::Construindo o conteHdo do subnEvel do =in! 9 '::

Acompane as etapas 4 a / na fiura mostrada abaixo:


38/52

38

4. li%ue no palco$ fora das fatias para sumir os cZrculo das fatias. li%ue no rect8nulo

do inG - 4 para aparecer o cZrculo da sua fatia. li%ue sobre o cZrculo para aparecer

um menu e escola Add @op-up menu (adicionar um menu pop-up). Dsto far aparecer

a +anela R@op-up Menu =ditorR.

7. li%ue no ret8nulo loo abaixo de RextR e diite o nome do primeiro linG6

9. Faa o mesmo no ret8nulo loo abaixo de RinGR diitando o endereo do linG$ repita

para o ret8nulo abaixo de RaretR escolendo onde abrir o linG6

/. Bepita os passos acima para os demais linGs do subnZvel.

::Definindo a a$arIncia do submenu do =in! 9 '::

Acompane na fiura mostrada abaixo:

endo concluZdo a etapa anterior cli%ue na aba RAppearanceR do =ditor aberto6

A%ui voc< define a apar


39/52

39

::1ais defini%@es de a$arIncia do submenu do =in! 9 '::

Acompane a fiura mostrada abaixo:

A%ui voc< define mais itens de apar


40/52

40

A%ui voc< define o local onde ser aberto o submenu e as coordenadas N e _ en rela;o aoinG principal.

2bserve no caso deste tutorial defini x & -4 para comear na borda es%uerda de 4px doprimeiro linG e y&4] para posicionar loo abaixo do rect8nulo de /\0 x 4]px.

erminado cli%ue em R5oneR no =ditor.

@ara conferir seu trabalo faa o seuinte:

embra %ue loo aps diitar o texto dos / linGs voc< desapareceu com eles clicando no RoloRdo painel layersX

@ois bem$ vamos traE


41/52

41

..: ?ot&o 3eerle :..

#este tutorial mostro como criar um bot;o$ com o uso do FireorGs.

::# forma inicial::

5esene um rect8nulo com cantos arredondados nas dimens,es do bot;o a construir eapli%ue um radiente com os par8metros mostrados na fiura a seuir:

::Dividindo a forma inicial em dois::

A seuir vamos dividir a forma construZda cortando-a na oriEontal com a ferramenta faca.

4.seleccione a forma e peue a ferramenta faca (indos - >ift " _)

@ressione a tecla >ifte *corte* a forma no meio e na oriEontal6

7.arue a ferramenta faca e seleccione a parte inferior da forma. 5efina as cores de

preencimento do radiente como mostrado6

9.A+uste o par8metro de radiente como mostrado6

/.seleccione a parte superior da forma e a+uste o par8metro de radiente como

mostrado6


42/52

42

::Criando o detalhe su$erior::

rie uma cpia do bot;o construZdo$ seleccione a parte superior e com a ferramenta faca corteuma tira em cima como mostrado.

Apaue tudo abaixo e fi%ue com a tira %ue voc< acabou de criar.>eleccione a tira e reduEa suas dimens,es para LH^.


43/52

43

::Colocando sombra no bot&o::

5eixe a tira de lado. seleccione o bot;o construZdo e apli%ue uma sombra (5rop >ado) comomostrado.

::(osicionando o detalhe su$erior::

@eue a tira %ue voc< construiu e colo%ue em cima do bot;o como mostrado. Apli%ue fundobranco 1FFFFFFe reduEa a opacidade da tira para 4H.

Nota: se voc< deslocar a tira ela ficar por baixo do bot;o$ ent;o tena o cuidado de antes dedeslocar a tira traE


44/52

44

..: Divis&o de um cErculo :..

::Objectivo::

Mostrar uma tCcnica para dividir um cZrculo em um nQmero %ual%uer de partesiuais.

::O cErculo::

5esene o cZrculo. #este tutorial usei inicialmente um cZrculo de 4H0 x 4H0pxna cor verde.

2 cZrculo C desenado com a ferramenta =lipse arrastando-a no palco

en%uanto se mantCm pressionada a tecla >ift.

2pcionalmente voc< pode arrastar a ferramenta no palco$ desenando umaelipse %ual%uer e a seuir com a elipse seleccionada a+ustar no @ainel@roperties(loo abaixo do palco) as dimens,es em W iual a 4H0px e O iual a4H0px.

::# estrela::

A seuir vamos desenar uma estrela com a ferramenta @olyon. =staferramenta serve para desenar polZonos c`ncavos (no FW denominados depolyon) e estrelas denominadsas >tar.

5epois %ue voc< seleccionar a ferramenta v no painel @roperties e no menupopup escola >ape: >tar- >ides: 4H(nQmero de partes a dividir o cZrculo$eu usei 4H) - Anle:4


45/52

45

li%ue e arraste no palco para desenar uma estrela prxima ao cZrculo.

A+uste no painel @roperties as dimens,es da estrela para 40px maior %ue ocZculo$ no meu caso a+ustei para 4V0 x 4V0px.

::4obre$ondo as formas::

amos a seuir colocar a estrela em cima do cZrculo$ faEendo coincidir o centrode ambas. @ara isto$ seleccionamos as duas formas e usamos o Menu Modify Alin enter erticale a seuiur Modify Alin enter OoriEontal.

2pcionalmente voc< poder usar teclas de atalo para alinar trl " Alt " 7ea seuir

trl " Alt " H.


46/52

46

::# divis&o::

5epois de sobrepor as formas e estando com elas seleccionadas vamos faEer adivis;o do cZrculo.

ao Menu Modify ombine @ats @unc e a seuirModify ombine @ats >plit e pronto t feita a divis;o.

Aora voc< poder escoler cada uma das divis,es e mudar a cor ao seuosto.

::#lguns efeitos::

A seuir mostro aluns efeitos obtidos com esta tCcnica de divis;o do cZrculo.


47/52

47

..: 5exto com imagem :..

#este tutorial vou mostrar T voc


48/52

48

Feito isto ir surir loo abaixo outro drop don. li%ue e abrir uma *tira de op,es* deimaens. Bole a *tira* atC em baixo e escola *2ter(2utra)*.

Ao clicar em *2ter*$ se abrir a +anela para %ue voc< seleccione a imaem com a %ual vocobre o texto diitado$ desene um rect8nulo na cor preta e com aferramenta *scre* *sGe* distora o rect8nulo dando-le a forma de um

paraleloramo como mostrado na fiura abaixo:

=m 700H-47-04: oc< pode *pear* a ferramenta sGe assim: seleccione orect8nulo e tecle duas veEes a tecla *[*.

::Colando a m8scara::

Aora vamos colar o paraleloramo como mscara no texto:

seleccione o paraleloramo e tecle trl " Npara recort-lo do palco6

seleccione o texto %ue est no palco e menu Modify &&' @aste as MasG

oc< obter o mostrado na fiura abaixo

::Desvinculando a m8scara::

2bserve no painel *ayers* da fiura acima um sZmbolo em forma de *\* (oito)entre o texto e a mscara.

D[K= no sZmbolo e ele vai desaparecer$ desvinculando o texto da mscara6

@eue a ferramenta de selec;o seta branca e cli%ue dentro do paraleloramo%ue aora est com uma lina de contorno e sem preencimento (cor amarelaneste tutorial) para seleccion-lo e arraste para um lado e para outro paraconstatar %ue voc< pode mov


51/52

51

::Criando frames::

@osicione o paraleloramo no inZcio do texto como mostrado abaixo6

Abra o painel *Frames* >ift " F7

li%ue para abrir o menu suspenso do painel *Frames*

5uplicate Frames &&' #umber 79 &&' 23

::#nimando no $ainel Frames::

li%ue sobre Frame 7 e deslo%ue o paraleloramo uns 7 pixel para a direita6

li%ue sobre Frame 9 e deslo%ue o paraleloramo uns / pixel para a direita6

li%ue sobre Frame / e deslo%ue o paraleloramo uns V pixel para a direita6

li%ue sobre Frame H e deslo%ue o paraleloramo uns \ pixel para a direita6


52/52

repetido a opera;o atC atinir o Qltimo Frame %ue dever coincidir com aceada do paraleloramo no final do texto.

::O efeito final::

A%ui est o texto animado %ue voc< + avia visualiEado no inZcio deste

tutorial.

::Nota::

A %uantidade de Frames e o tempo de cada frame depender do tamano dotexto e da velocidade dese+ada para a anima;o.

[uanto maior o texto maior ser a %uantidade de Frames e em conse%u

fireworks exemplos

Documents