..: Usando blend mode : Difference:..

::Objectivo::
Mostrar uma maneira simples de se obter um interessante efeito em um texto com uso do
comando difference do painel layers.

::Novo documento::
Abra o FW - (bvio!) :-)
Tecle Ctrl + N ou selecione, Arquivo ===> Novo para abrir a caixa de dilogo "Novo
documento", conforme mostrado na figura abaixo.
Ajuste as dimenses de Canvas (palco, rea de trabalho, tela, etc...) para:
Largura: 400 pixels - Altura: 400 pixels
Cor da Tela: #000000. Tecle OK.

::Desenhe um rectngulo::
1-) Defina a cor de preenchimento vermelha;
2-) Clique na ferramenta rectngulo;
3-) Clique e arraste o cursor no palco para desenhar um rectngulo.

::O texto::
1-) Defina a cor do texto igual a cor do rectngulo: vermelha;
2-) Clique na ferramenta texto;
3-) Clique e arraste o cursor no palco para definir um rectngulo para o texto na posio entre
as duas cores, conforme mostrado abaixo e digite um texto.
Nota: Ajuste os parmetros da fonte (tipo, tamanho, negrito, espaamentos, etc..) conforme
suas preferncias.

E agora a mgica!
1-) Seleccione o texto digitado;
2-) No painel "Layers" abra o menu "Blend Mode" e;
3-) clique na opo "Difference";
O texto assume as cores opostas do fundo, conforme mostrado na figura.

::O retoque final::

Pronto! Vamos aparar as sobras.
1-) Seleccione a ferramenta Crop;
2-) Clique e arraste o cursor no palco para definir um rectngulo de corte em volta do texto;
Recorte o rectngulo definido.

::O efeito final::

Depois de recortado o rectngulo, conforme acima seu texto ficar assim:

..: Fireworks: Efeitos de relevo em textos:..

4

::Objectivo::
Apresentar uma tcnica para aplicao de efeitos de relevo em textos, com uso do Fireworks.

::Apresentao::
A proposta a de examinar passo a passo as etapas para se obter os efeitos "Relevo elevado"
e "Interiorizar relevo" em dois textos distintos.
Este tutorial supe que voc tem noes bsicas de manipulao das ferramentas do
Fireworks.

::1o. Passo::
Abra o FW - (bvio!) :-)
Tecle Ctrl + N ou seleccione, Arquivo ===> Novo para abrir a caixa de dilogo "Novo
documento", conforme mostrado na figura abaixo.
Ajuste as dimenses de Canvas (palco, rea de trabalho, tela, etc...) para:
Largura: 200 pixels
Altura: 150 pixels
Cor da Tela: Transparente.
Tecle OK.

::2o. Passo::
1-) Seleccione a ferramenta RETNGULO;
2-) desenhe um rectngulo preenchendo toda a tela (canvas). Rectngulo de 200 x 150px;
3-) com o rectngulo seleccionado, ajuste a cor de preenchimento para #999999 - slido (um
tom cinza mdio).

::3o. Passo::
1-) Seleccione a ferramenta TEXTO;
2-) defina o estilo, o tamanho a cor e o peso (negrito ou no) do texto;
3-) digite o texto na metade superior do rectngulo, mas no se preocupe com o lugar exacto
do texto agora. No fim acertamos tudo!

::4o. Passo::
O primeiro texto est na rea de trabalho do FW. Vamos ao segundo texto.
Repita os passos acima, digitando outro texto, agora na metade inferior da tela, mas no se
preocupe com o lugar exacto do texto agora. No fim acertamos tudo!
Para fazer com que este segundo texto ocupe uma extenso igual ao do primeiro texto faa o
seguinte:
6

a-) Arraste as alas do bloco de texto (em azul no desenho abaixo) at alinhar as suas bordas
esquerda e direita com o texto de cima.

b-) Clique no boto "esticado" para o texto ocupar todo o bloco de texto.

::5o. Passo::
1-) Seleccione o primeiro texto e abra o menu "Efeitos";
2-) deslize at "Chanfro e relevo" para abrir o sub-menu;
3-) clique no efeito "Relevo elevado", para abrir a caixa de dilogo dos parmetros deste
efeito.

::6o. Passo::
Na caixa de dilogo que voc acabou de abrir:
1-) ajuste as definies de relevo elevado para os parmetros mostrados na figura abaixo;
2-) mude a cor do texto para #999999.

::7o. Passo::
O primeiro texto est OK por enquanto. Vamos ao segundo texto.
Repita os passos descritos anteriormente para o primeiro texto aplicando agora o efeito
"Interiorizar relevo".

::8o. Passo::
De modo semelhante ao procedimento anterior, ajuste as definies do relevo conforme
mostrado na figura abaixo.

::9o. Passo::
E para concluir vamos aos ajustes finais.
Seleccione os dois textos ao mesmo tempo;
Abra o menu Modificar ===> Alinhar ===> Distribuir alturas. Com isso voc ajusta os dois
textos na vertical.
Agora descubra voc mesmo como ajust-los na HORIZONTAL.
Dica: pelo mesmo menu "Modificar", mas se no conseguir, poste sua dvida em um frum
FW!

::O efeito final::

Se voc usou as mesmas definies deste tutorial, vai terminar com um desenho igualzinho a
este ai em baixo!

10

..: Efeito de anel em texto :..

Baseado em tutorial publicado no site Meteor Webdesign

::Objectivo::
Mostrar uma tcnica de construo de um anel decorativo em uma letra.

::Viso antecipada::
Para uma viso antecipada do efeito, veja no final desta pgina, textos decorados com o anel
na primeira letra.

::Primeiros passos::
Acompanhe as etapas 1 a 4 na figura mostrada abaixo:

1-) Construa duas elipses de cores e tamanhos diferentes;

2-) Coloque uma elipse sobre a outra;
3-) Seleccione as duas elipses v ao menu Modify => Combine Paths => Punch;
4-) A elipse menor deve ter 'furado' a maior como mostrado. Est pronto o anel.

::Seguindo em frente::
Vamos novamente acompanhar os passos da figura a seguir:

11

1-) Seleccione a elipse furada, v ao menu Modify => Transform => Skew
Aparece um rectngulo preto com quadradinhos em volta como mostrado.

Segure a tecla Shift e posicione o ponteiro do mouse que agora tem a forma de uma flexinha
redonda, no lado direito do quadrado que apareceu e gire no sentido anti-horrio.
Voc notar que o rectngulo gira aos pulos de uma amplitude igual a 15o;

2-) D 3 pulos e voc ter girado o anel 45o como mostrado;

3-) Desenhe uma letra. Eu desenhei um M de Maujor. Posicione a letra ATRS do anel
Se voc seguiu a sequncia notar que a letra ficou na frente do anel. No FW o ltimo objecto
desenhado vai sendo posicionado na frente dos demais. Para passar a letra para trs voc
dever usar o painel Layers (tecla F2 esconde/mostra o painel).

seleccione a letra e observe no painel Layers que o quadradinho (ao lado de um olho) da letra
est em destaque (normalmente na cor azul) clique, arraste para baixo e solte o quadradinho
da letra, pois ali no painel quanto mais no alto o quadradinho tanto mais frente est o
objecto que ele representa;

4-) seleccione a letra v ao menu Text => Convert to Paths ou CTRL + Shift + P. Clique sobre
a letra para conferir ela dever ficar como mostrado na figura, contorno azul cheia de
quadradinhos.

::Est quase acabar::

12

Agora voc trabalhar com dois arquivos contendo a letra e o anel.

1-) seleccione a letra e o anel e tecle Ctrl + C (copiar) em seguida tecle Ctrl + N (novo
documento). Isto faz abrir uma janela popup para as dimenses do novo palco. Aceite as
dimenses clicando OK na janela que se abriu e voc ter um palco vazio na tela.
Clique em qualquer lugar no palco e em seguida tecle Ctrl + C (colar)
Agora voc tem dois arquivos iguais mostrando a letra e o anel. Neste arquivo que voc
acabou de criar seleccione o anel e a letra e v ao menu Modify => Combine Paths =>
Intersect. Clique sobre o palco e voc ter aquelas formas mostradas no nmero 2 da figura
acima, que so as regies onde o anel interceptou a letra.
2-) Vamos apagar as formas que esto mais abaixo e esquerda, deixando somente aquelas
duas acima e direita.
Precisamos primeiro desagrupar aquela pequenas formas. seleccione as formas e v ao menu
Modify => Combine Paths => Split (ou tecle Ctrl + Shift + J). Agora sim apague, seleccione o
que restou e tecle Ctrl + C (copiar). Agora volte ao arquivo que tem a letra e o a nel e tecle
Ctrl + C (colar).

3-) Fazendo tudo isto voc obtm o que est mostrado no nmero 3 da figura acima.
4-) D um zoom onde acaba de ser 'colado' o que voc copiou e colou.
5-) O zoom aparece como neste nmero da figura. Trabalhe no zoom com a ferramenta 'lpis'
para limpar o vermelho que ficou na frente do branco.

::Usando a letra com anel::

13

A seguir uma aplicao da letra com anel que acabei de construir.

Escrevi o nome Maujor usando a mesma fonte e tamanho que usei no tutorial.
Seleccionei a letra com o anel copiei e colei em cima do M de Maujor.
Seleccionei tudo (Maujor + letra com anel) fui ao menu Modify => Flatten Selection (ou tecle
Crlt + Shift + Alt + Z unindo tudo em um bitmap nico.
Apliquei efeitos Effects => Bevel and Emboss => Raised Emboss e depois Filters => Adjust
Color => Hue/Saturation.

14

..: Efeito chocolate em textos :..

::Objectivo::
Mostrar a construo de um efeito simulando a aparncia de chocolate em textos.

::Escolha sua imagem::

Escreva o texto no qual voc pretende aplicar o efeito definindo a cor #620000 para as letras.
Eu usei para este tutorial a fonte Calligrapher tamanho 50, mas voc pode usar qualquer uma
de sua preferncia.

Com o texto selecionado, transforme-o em bitmap teclando Ctrl + Alt + Shift + Z ou use o
menu Modify Flatten Selection:

::Aplicando os efeitos::
seleccione o texto e v ao menu: Filters Eye Candy 400 LE Bevel Boss
conforme mostrado abaixo.

::Os parmetros::
A escolha no menu, abrir uma janela para voc configurar as opes para o filtro, conforme
mostrado na figura abaixo.
Observe que no topo desta existem trs abas.
Escolha a aba Lighting e ajuste os 4 parmetros conforme mostrado na figura;
15

A seguir, passe para a aba Bevel Profile e escolha Carve.

Clique OK no boto da janela e pronto, t feito o efeito chocolate no texto.
Este foi bem simples ?

::Efeito final::
O efeito final conforme mostrado abaixo:

Agora voc pode usar sua criatividade e obter variaes legais

Na primeira usei uma fonte diferente da usada no tutorial e nas duas seguintes apliquei o filtro
Drip da Alien Skin Eye Candy 5: Nature, que no default do FW, voc precisa instalar.

16

17

..: Efeito fogo :..

::Objectivo::
Mostrar uma tcnica de construo de efeito fogo.

::Viso antecipada::
Este tutorial mostra uma tcnica para se obter o efeito fogo conforme mostrado nesta
VISO ANTECIPADA.

::Novo documento::
Abra o FW
Tecle Ctrl + N ou seleccione, Arquivo ===> Novo para abrir a caixa de dilogo "Novo
documento".
Ajuste as dimenses de Canvas (palco, rea de trabalho, tela, etc...) para:
Largura: 450 pixels - Altura: 250 pixels
Cor da Tela: Preta - #000000

Tecle OK.

::A forma inicial::

Construa, ocupando a metade inferior do palco, um rectngulo com cor de preenchimento

branca e sem linha de contorno, conforme mostrado na figura abaixo.

Com o rectngulo seleccionado transforme-o em bitmap teclando Shift + Ctrl + Alt + Z ; ou

use o menu Modify ==> Flatten Selection ;

::Aplicando o primeiro efeito - Smudge Tool::

seleccione o rectngulo e escolha a ferramenta Smudge tool ajustando os parmetros Size,

Edge, Shape e Pressure conforme mostrado

18

Com a ferramenta escolhida arraste sobre a parte superior do rectngulo branco para cima em
direco ao palco preto e para os lados.

Pratique um pouco e voc conseguir facilmente obter as "lnguas de fogo" em cima do

rectngulo branco . Construa algumas poucas destas lnguas espaadas uma da outra.

Altere o valor Size da ferramenta para 25 e construa mais algumas lnguas espaadas.
Altere novamente o valor Size da ferramenta agora para 15 e construa mais algumas lnguas.

Voc ir perceber que para cada valor Size vai obter "linguas" menores.

Pratique um pouco e procure acertar o aspecto das "lnguas" o mais prximo possvel do real.

No fim voc obter algo talvez at melhor do que eu obtive e mostro a seguir:

::Aplicando o segundo efeito - Hue/Saturation::

seleccione o rectngulo e abra o menu: Filters (Alt + i) ==> Adjust Color ==>
Hue/Saturation;
Ajuste os parmetros do efeito conforme mostrado na figura e tecle OK

19

::Duplicando o layer criado::

Siga a numerao na figura
1-) Clique no triangulozinho do painel Layer para abrir um menu suspenso.
No menu que se abre escolha Duplicate Layer...
2-) Marque Before current layer (antes do layer atual)
3-) Tecle OK
4-) Observe que foi criada uma cpia do Layer 1 'em cima' (antes dele) chamada Layer 2

::Aplicando o terceiro efeito - Hue/Saturation no Layer 2::

seleccione o Layer 2 (Basta clicar em cima dele no painel Layers);

20

Abra o menu: Filters (Alt + i) ==> Adjust Color ==> Hue/Saturation;

Ajuste os parmetros do efeito conforme mostrado na figura e tecle OK.

::Aplicando o quarto efeito - Color::

seleccione o Layer 2;
Abra o menu suspenso, indicado pela seta vermelha na figura, do painel Layer e escolha Color
para o Layer 2.

::Finalizando::
Escolha a ferramenta Crop e recorte como mostrado a seguir.

Nota: Quanto maior sua habilidade na manipulao da ferramenta Smudge Tool tanto mais real
ser o resultado final do efeito.
Pois, como voc deve ter notado foi com esta ferramenta que criamos as labaredas do fogo.

21

..: Botes com chanfro externo :..

::Objectivo::
Mostrar o uso do efeito "chanfro externo" e suas 28 opes em rectngulos, para construir
botes.

::Novo documento::
Abra o FW - (bvio!) :-)
Tecle Ctrl + N ou seleccione, Arquivo ===> Novo para abrir a caixa de dilogo "Novo
documento", conforme mostrado na figura abaixo.

Ajuste as dimenses de Canvas (palco, rea de trabalho, tela, etc...) para:

Largura: 200 pixels - Altura: 150 pixels

Cor da Tela: Transparente. Tecle OK.

::O rectngulo::

Com o palco para construo do novo documento na tela, vamos comear desenhando um
rectngulo nas dimenses do boto a construir.

1-) Clique no cone da ferramenta "Retngulos e Elpses";

2-) No menu que se abre, clique em "Ferramenta Retngulo Arredondado"

22

Observe a figura abaixo:

1-) Com a aco descrita no item anterior o ponteiro do mouse transforma-se em uma
"cruzinha", pronto para desenhar o rectngulo pela aco de arrastar e soltar.

Desenhe um rectngulo sem se preocupar com as dimenses!;

2-) Com o rectngulo desenhado e seleccionado, ajuste a cor do preenchimento para sua cor
escolhida. Neste tutorial usei a cor #999999;

3-) Mantenha o rectngulo seleccionado e nas janelinhas W (largura) e H (altura) digite as

dimenses do rectngulo;

4-) Escolha o raio de arredondamento dos cantos do rectngulo.

::O menu do chanfro::

1-) seleccione o rectngulo (clique em cima dele). "Aparece" um contorno em linha azul com
bolinhas nos cantos conforme mostrado na figura;

2-) Clique em cima do sinalzinho + de Efeitos para abrir o menu dos chanfros;

3-) Deslize o mouse at "Chanfro e relevo" e no sub-menu que se abre clique e

m 4-) "Chanfro externo";
23

::Aplicao do chanfro::
Com a aco descrita no item anterior abre-se um caixinha de dilogo para aplicao de
chanfros;

1-) Por default ser aplicado no nosso rectngulo um chanfro.

2-) Escolha uma cor para o chanfro. Neste tutorial apliquei uma cor igual a cor do retngulo
#999999.

Voc pode escolher uma cor diferente.

3-) Escolha uma espessura para o chanfro;

4-) Nestas 3 janelinhas ajuste os detalhes de sombras e orientaes para o chanfro. Faa
testes variando os valores;

5-) e 6-) por default estas janelinhas devem estar com o chanfro Achatado e em Alto Relevo.
Abra estas janelinhas clicando na setinha ao lado delas.

7-) A janelinha onde esta escrito Alto relevo abre-se e voc tem mais 3 opes;

8-) A janelinha aberta com as 4 opes possveis.

24

::Mais opes::
1-) seleccione o rectngulo;

2-) Clique na setinha e janelinha onde est escrito Achatado abre-se e voc tem mais 6
opes;

3-) A janelinha aberta com as 7 opes possveis.

::Os 28 botes::

Voc pode ento combinar cada uma das 4 opes de uma janelinha com as 7 opes da
outra;

Com isso voc obtm 7 x 4 = 28 tipos de botes, mostrados abaixo.

25

::Nota final::

Mostrei neste tutorial a tcnica bsica para construo de botes com chanfro externo.
Mas, isto no tudo.

D asas a sua criatividade e ao dominar esta tcnica, altere e combine cores, faa
preenchimentos degrad, construa "rollovers" usando 2 tipos de botes, etc...etc...

As possibilidades so ilimitadas para voc criar interessantes botes com esta simples e fcil
tcnica de criao, usando as 28 opes do chanfro externo.

26

..: Efeito metlico cromado :..

::Objectivo::
Mostrar uma tcnica de construo de efeito cromado em superfcie metlica.

::Viso antecipada::
Este tutorial mostra a tcnica se obter o efeito cromado conforme mostrado nesta
VISO ANTECIPADA.

::Novo documento::
Abra o FW
Tecle Ctrl + N ou selecione, Arquivo ===> Novo para abrir a caixa de dilogo "Novo
documento", conforme mostrado na figura abaixo.

Ajuste as dimenses de Canvas (palco, rea de trabalho, tela, etc...) para:

Largura: 200 pixels - Altura: 200 pixels
Cor da Tela: #CCFFCC.
Tecle OK.

::A forma inicial::

Vamos construir nosso efeito cromado em um rectngulo de 150px x 150 px com cantos
arredondados.

Assim, desenhe no palco um rectngulo com cantos arredondados, cor de preenchimento

branca e sem linha de contorno, conforme mostrado na figura abaixo.

::Aplicando o primeiro efeito - Inner Bevel::

seleccione o rectngulo que voc construiu e abra o menu Effects:+, localizado na parte direita
inferior logo abaixo do palco e mostrado na figura;

27

1-) No menu que se abre escolha: Bevel and Emboss ==> Inner bevel;
2-) Ajuste os parmetros do efeito conforme mostrado na figura;
3-) Voc obter o primeiro efeito no rectngulo, como mostrado.

::Aplicando o segundo efeito - Curves::

seleccione o rectngulo e abra o menu Effects:+, outra vez;

No menu que se abre escolha: Adjust Color ==> Curves;
Ajuste os parmetros do efeito conforme mostrado na figura;
Clique e arraste os pontos da curva para as posies mostradas;
Voc obter o segundo efeito aplicado no rectngulo, como mostrado.

28

::Aplicando o terceiro efeito - Curves::

seleccione o rectngulo e abra o menu Effects:+, outra vez;
No menu que se abre escolha: Adjust Color ==> Curves;
Ajuste os parmetros do efeito conforme mostrado na figura;
Clique e arraste os pontos da curva para as posies mostradas;
Voc obter o terceiro efeito aplicado no rectngulo, como mostrado.

::Aplicando o quarto efeito - Inner Shadow::

seleccione o rectngulo e abra o menu Effects:+, outra vez;

29

No menu que se abre escolha: Shadow and Glow ==> Inner Shadow;
Ajuste os parmetros do efeito conforme mostrado na figura;
Voc obter o quarto efeito aplicado no rectngulo, como mostrado.

::Aplicando o quinto efeito - Drop Shadow::

seleccione o rectngulo e abra o menu Effects:+, outra vez;
No menu que se abre escolha: Shadow and Glow ==> Drop Shadow;
Ajuste os parmetros do efeito conforme mostrado na figura;
Voc obter o quarto efeito aplicado no rectngulo, como mostrado.

::O Texto::

Finalmente para concluir o trabalho vamos escrever o texto.

Usei fonte Arial Black, negrito de 30 px na cor #CCCCCC (cinza claro).

escreva o texto e aplique Effects => Bevel and Emboss => Inner Bevel
Auste os parmetros do efeito conforme mostrado e pronto!
Est terminado o efeito cromado metlico.
30

31

..: Construo de menu pop-up - Parte 1 :..

::Introduo::
Menu pop-up um elemento de interface muito usado para solucionar o problema de
acomodar uma grande quantidade de links de navegao em um espao reduzido.
Neste tipo de navegao o desenvolvedor tem a possibilidade de projectar uma barra de
navegao horizontal com submenus.
Neste tutorial mostrarei como construir uma barra de navegao horizontal para abrigar um,
dois ou mais nveis de navegao, abrindo na vertical.
Os subnveis opcionalmente podem ser projectados para abrir na horizontal.
Usarei o Fireworks para gerar o HTML e o respectivo javascript para funcionamento do menu e
mostrarei como exportar para uma pgina web.

::Uma viso antecipada::

Desenvolverei o tutorial construindo uma barra de navegao com 4 links que abrem um
subnvel nos links Link - 1 e Link - 2, trs subnveis no Link - 3 e nenhum subnvel no Link - 4.
A seguir um screenshot da barra com os subnveis do Link - 3 abertos:

Complementarmente voc poder ver nesta pgina, o menu em aco.

Indo pgina, passe o mouse sobre os links que esto todos activos.

::As caractersticas da barra::

Construirei uma barra de navegao com as seguintes caractersticas:
Quatro links chamados de Link -1, Link -2, Link -3 e Link - 4;
O Link - 1 com um subnvel contendo 5 links:
o Link - 1.1
o Link - 1.2
o Link - 1.3
32

o Link - 1.4
o Link - 1.5
O Link - 2 um subnvel contendo 3 links:
o Link - 2.1
o Link - 2.2
o Link - 2.3
O Link - 3 com trs subnveis contendo no primeiro sub-nvel 5 links, no segundo
subnvel 3 link e no terceiro subnvel 2 links (ver figura acima):
o Link - 3.1
o Link - 3.2
o Link - 3.3
o Link - 3.4
Link - 3.4.1
Link - 3.4.2
Link - 3.4.2.1
Link - 3.4.2.2
Link - 3.4.3
Link - 3.4.4
o Link - 3.5
o Link - 3.6
O Link - 4 sem subnveis (um link para contacto, por exemplo)
As formas para construo do menu conforme mostrado abaixo:

Links escritos com fonte Arial, tamanho 11, negrito e cor #cc3300;

Quatro rectngulos de 80 x 15px com fundo #eeeeee (cinza claro) e sem bordas, para
os links;
33


Um rectngulo de 480 x 17px com fundo na cor #eeeeee (cinza claro) e bordas de 1px
na cor #cccccc (cinza escuro);

Trs divisores dos links na cor #ffffff (branca), - mostrados sobre o retngulo maior.

::Preparando o palco::
Abra o FW, tecle Ctrl + N ou selecione, Arquivo ===> Novo para abrir a caixa de dilogo
"Novo documento";

Ajuste as dimenses de Canvas (palco, rea de trabalho, tela, etc...) para:

Largura: 600 pixels - Altura: 400 pixels
Cor da Tela: #FFFFFF (cor branca).
Tecle OK.

Vamos colocar um grid (uma grade) no palco para facilitar a construo das formas.
Veja na figura abaixo:

1.

Menu View => Grid => Edit Grid. Esta escolha coloca no palco a caixa de dilogo Edit
Grid conforme mostrada na figura;

2.

Ajuste os parmetros conforme mostrado:

o

Color: #000000 (cor preta);

Marque Show grid (mostrar o grid);

Marque Snap to grid (fixar ao grid - isto faz com que os vrtices de uma forma
sejam 'atraidos' ou 'fixados' aos pontos de cruzamento do grid);

Defina um grid com 80px de largura por 15px de altura (as dimenses dos
rectngulos para para os links);

3.

34

Tecle OK.

Agora h no palco uma grade de 80 x 15px.

Se voc nunca trabalhou com Grid tente o seguinte para treinar, antes de prosseguir:
Tecle Ctrl + Alt + G para 'desligar' o grid, tecle outra vez para 'ligar'.
D um zoom de 200%, pegue a ferramenta rectngulo e desenhe alguns rectngulos para
sentir como fcil colocar os vrtices sobre os pontos de interseo do grid.
Isto devido ao 'Snap to Grid'. Tecle Ctrl + Alt + Shift + G para 'ligar' e 'desligar' o Snap to
Grid.

Terminando de treinar confira se o 'Snap to grid' est ligado.

::Construindo os links e as fatias (slices)::

Observe a sequncia na figura abaixo e acompanhe os 5 passos descritos a seguir:

35

1.Construa 4 (quatro) retngulos de 80 x 15px sem bordas e com a cor do fundo

#eeeeee, um ao lado do outro sobre o grid;
2.Escreva o nome dos links com fonte Arial, tamanho 11, negrito e cor #cc3300 e
posicione sobre os retngulos. Por enquanto esconda os textos dos links, para no
atrapalhar, indo ao painel layers (a tecla F2 mostra/esconde o painel) e desligando o
olho dos textos;
3.Clique sobre cada um dos quatro retngulos com a tecla Shift pressionada, para
selecionar os 4 ao mesmo tempo.
4.V ao menu Edit => Insert => Slice ou tecle Alt + Shift + U . Vai aparecer uma janela
popup;
5.Pressione o boto Multiple na janela que se abriu, ou tecle a letra M;
6.So criadas 4 fatias (verde com um crculo) sobre os 4 retngulos como mostrado na
figura.

36

::Construindo o contedo do subnvel do Link - 1::

Acompanhe as etapas 1 a 4 na figura mostrada abaixo:

37

1. Clique no palco, fora das fatias para sumir os crculo das fatias. Clique no rectngulo
do Link - 1 para aparecer o crculo da sua fatia. Clique sobre o crculo para aparecer
um menu e escolha Add Pop-up menu (adicionar um menu pop-up). Isto far aparecer
a janela 'Pop-up Menu Editor'.
2. Clique no retngulo logo abaixo de 'Text' e digite o nome do primeiro link;
3. Faa o mesmo no retngulo logo abaixo de 'Link' digitando o endereo do link, repita
para o retngulo abaixo de 'Target' escolhendo onde abrir o link;
4. Repita os passos acima para os demais links do subnvel.

::Definindo a aparncia do submenu do Link - 1::

Acompanhe na figura mostrada abaixo:

Tendo concludo a etapa anterior clique na aba 'Appearance' do Editor aberto;

Aqui voc define a aparncia dos links do subnvel.
Faa algumas marcaes nas caixas do painel e veja na prtica o que acontece na tela branca
mostrada na parte inferior do painel.
Quando estiver satisfeito tecle Next ou clique na aba 'Advanced'. (No se preocupe com
detalhes agora pois voc poder editar e modificar tudo, ou partel.)

38

::Mais definies de aparncia do submenu do Link - 1::

Acompanhe a figura mostrada abaixo:

Aqui voc define mais itens de aparncia colocando bordas e cores e estabelecendo a largura
do submenu.

Novamente faa algumas marcaes nas caixas do painel e veja na prtica o que acontece na
tela branca mostrada na parte inferior do painel.

Quando estiver satisfeito tecle Next ou clique na aba 'Position'. (No se preocupe com detalhes
agora pois voc poder editar e modificar tudo, ou parte, se no ficar legal.)

::Definindo o posicionamento do submenu do Link - 1::

Acompanhe a figura mostrada abaixo:

39

Aqui voc define o local onde ser aberto o submenu e as coordenadas X e Y en relao ao
Link principal.
Observe no caso deste tutorial defini x = -1 para comear na borda esquerda de 1px do
primeiro link e y=17 para posicionar logo abaixo do rectngulo de 480 x 17px.
Terminado clique em 'Done' no Editor.

Para conferir seu trabalho faa o seguinte:

Lembra que logo aps digitar o texto dos 4 links voc desapareceu com eles clicando no 'olho'
do painel layers?
Pois bem, vamos traz-los de volta clicando de novo no 'olho' para eles aparecerem no palco.
Feito isto, clique no palco e tecle F12 para ver o resultado no navegador. Passe o passe sobre
o Link - 1 para conferir o submenu que voc construiu.
No se preocupe se as coisas no ficaram como esperado, pois a seguir, mostrarei como editar
e corrigir algo que tenha sado errado.

40

..: Boto Veerle :..

Neste tutorial mostro como criar um boto, com o uso do Fireworks.

::A forma inicial::

Desenhe um rectngulo com cantos arredondados nas dimenses do boto a construir e
aplique um gradiente com os parmetros mostrados na figura a seguir:

::Dividindo a forma inicial em dois::

A seguir vamos dividir a forma construda cortando-a na horizontal com a ferramenta faca.

1.seleccione a forma e pegue a ferramenta faca (windows - Shift + Y)

Pressione a tecla Shift e "corte" a forma no meio e na horizontal;

2.Largue a ferramenta faca e seleccione a parte inferior da forma. Defina as cores de

preenchimento do gradiente como mostrado;

3.Ajuste o parmetro de gradiente como mostrado;

4.seleccione a parte superior da forma e ajuste o parmetro de gradiente como

mostrado;

41

::Criando o detalhe superior::

Crie uma cpia do boto construdo, seleccione a parte superior e com a ferramenta faca corte
uma tira em cima como mostrado.
Apague tudo abaixo e fique com a tira que voc acabou de criar.
Seleccione a tira e reduza suas dimenses para 95%.

42

::Colocando sombra no boto::

Deixe a tira de lado. seleccione o boto construdo e aplique uma sombra (Drop Shadow) como
mostrado.

::Posicionando o detalhe superior::

Pegue a tira que voc construiu e coloque em cima do boto como mostrado. Aplique fundo
branco #FFFFFF e reduza a opacidade da tira para 15.

Nota: se voc deslocar a tira ela ficar por baixo do boto, ento tenha o cuidado de antes de
deslocar a tira traz-la para frente, arrastando o cone dela para a posio mais acima no
painel Layers.

Para finalizar escreva seu texto sobre o boto.

::Hue/Saturation::
Faa cpias do boto pronto e aplique Filters Hue/saturation para obter botes com cores
diferenciadas como mostrado a seguir.

43

..: Diviso de um crculo :..

::Objectivo::
Mostrar uma tcnica para dividir um crculo em um nmero qualquer de partes
iguais.

::O crculo::
Desenhe o crculo. Neste tutorial usei inicialmente um crculo de 150 x 150px
na cor verde.
O crculo desenhado com a ferramenta Elipse arrastando-a no palco
enquanto se mantm pressionada a tecla Shift.
Opcionalmente voc pode arrastar a ferramenta no palco, desenhando uma
elipse qualquer e a seguir com a elipse seleccionada ajustar no Painel
Properties (logo abaixo do palco) as dimenses em W igual a 150px e H igual a
150px.

::A estrela::
A seguir vamos desenhar uma estrela com a ferramenta Polygon. Esta
ferramenta serve para desenhar polgonos cncavos (no FW denominados de
polygon) e estrelas denominadsas Star.
Depois que voc seleccionar a ferramenta v no painel Properties e no menu
popup escolha Shape: Star - Sides: 15 (nmero de partes a dividir o crculo,
eu usei 15) - Angle:1

44

Clique e arraste no palco para desenhar uma estrela prxima ao crculo.

Ajuste no painel Properties as dimenses da estrela para 10px maior que o
cculo, no meu caso ajustei para 160 x 160px.

::Sobrepondo as formas::
Vamos a seguir colocar a estrela em cima do crculo, fazendo coincidir o centro
de ambas. Para isto, seleccionamos as duas formas e usamos o Menu Modify
Align Center Vertical e a seguiur Modify Align Center Horizontal.
Opcionalmente voc poder usar teclas de atalho para alinhar Ctrl + Alt + 2 e
a seguir
Ctrl + Alt + 5.

45

::A diviso::
Depois de sobrepor as formas e estando com elas seleccionadas vamos fazer a
diviso do crculo.
V ao Menu Modify Combine Paths Punch e a seguir
Modify Combine Paths Split e pronto t feita a diviso.
Agora voc poder escolher cada uma das divises e mudar a cor ao seu
gosto.

::Alguns efeitos::
A seguir mostro alguns efeitos obtidos com esta tcnica de diviso do crculo.

46

..: Texto com imagem :..

Neste tutorial vou mostrar vocs como preencher um texto usando uma imagem, num efeito
bem legal e til.

Pra comear, crie um novo documento com dimenses de 400 x 100px.

Depois, usando a ferramenta text, digite um texto qualquer com fonte "Arial Black" e
"tamanho 70"

Mantenha o texto seleccionado e clique na paleta de cores.

Abaixo da paleta voc pode ver o boto "Fill Options (Opes de Preenchimento)" , como na
imagem abaixo

Clique no boto "Fill Options" e surgir a janela para as opes de preenchimento do texto. No
primeiro drop down, seleccione "Pattern (Textura)".

47

Feito isto ir surgir logo abaixo outro drop down. Clique e abrir uma "tira de opes" de
imagens. Role a "tira" at em baixo e escolha "Other (Outra)".

Ao clicar em "Other", se abrir a janela para que voc seleccione a imagem com a qual voc
deseja que o texto seja preenchido. Escolha a imagem e clique em "Abrir".

O seu texto j est preenchido com a imagem que voc seleccionou, mas ainda falta algum
ajuste para que o efeito fique bom.

Clique sobre a imagem usando a ferramenta "Pointer Toll" (seta preta).

Altere o preenchimento clicando e arrastando o ponto de ajuste e alterando o ngulo e
comprimento das linhas de ajuste para uma posio a seu gosto.
Faa alguns movimentos nos pontos de ajuste para ver como isto funciona.

Pronto, seu texto j tem um preenchimento bem interessante! Agora s voc ajustar o estilo
e tamanho da fonte, e pronto!

48

..: Animao de texto com mscara :..

Importante: Voc dever conhecer as tcnicas de animao pelo painel
"Frames" para obter este efeito.
::Objectivo::
Mostrar uma tcnica de animao de um texto com uso de mscara.

::Viso antecipada::
O efeito final da animao mostrado abaixo.

Observar:
Cor do texto: vermelha;
Cor da animao: verde;

::O texto a animar::

Abra um novo documento;
Digite no palco o texto a animar na cor de sua preferncia e aplique efeitos se
assim desejar. Neste tutorial usei um texto na cor vermelha sem efeitos;
Clone o texto digitado. Para clonar Ctrl + Shift + D
Mude a cor do clone para a cor da animao. Neste tutorial usei a cor verde;
Voc deve obter o mostrado na figura abaixo:

::A mscara::

49

Sobre o texto digitado, desenhe um rectngulo na cor preta e com a

ferramenta "screw" "skew" distora o rectngulo dando-lhe a forma de um
paralelogramo como mostrado na figura abaixo:
Em 2005-12-01: Voc pode "pegar" a ferramenta skew assim: seleccione o
rectngulo e tecle duas vezes a tecla "Q".

::Colando a mscara::
Agora vamos colar o paralelogramo como mscara no texto:
seleccione o paralelogramo e tecle Ctrl + X para recort-lo do palco;
seleccione o texto que est no palco e menu Modify ==> Paste as Mask
Voc obter o mostrado na figura abaixo

::Desvinculando a mscara::

Observe no painel "Layers" da figura acima um smbolo em forma de "8" (oito)

entre o texto e a mscara.
CLIQUE no smbolo e ele vai desaparecer, desvinculando o texto da mscara;
Pegue a ferramenta de seleco seta branca e clique dentro do paralelogramo
que agora est com uma linha de contorno e sem preenchimento (cor amarela
neste tutorial) para seleccion-lo e arraste para um lado e para outro para
constatar que voc pode mov-lo a vontade ficando o texto imvel.

50

::Criando frames::
Posicione o paralelogramo no incio do texto como mostrado abaixo;
Abra o painel "Frames" Shift + F2
Clique para abrir o menu suspenso do painel "Frames"
Duplicate Frames ==> Number 23 ==> OK

::Animando no painel Frames::

Clique sobre Frame 2 e desloque o paralelogramo uns 2 pixel para a direita;
Clique sobre Frame 3 e desloque o paralelogramo uns 4 pixel para a direita;
Clique sobre Frame 4 e desloque o paralelogramo uns 6 pixel para a direita;
Clique sobre Frame 5 e desloque o paralelogramo uns 8 pixel para a direita;

51

V repetido a operao at atingir o ltimo Frame que dever coincidir com a

chegada do paralelogramo no final do texto.

::O efeito final::

Aqui est o texto animado que voc j havia visualizado no incio deste
tutorial.

::Nota::

A quantidade de Frames e o tempo de cada frame depender do tamanho do

texto e da velocidade desejada para a animao.
Quanto maior o texto maior ser a quantidade de Frames e em consequncia,
o tamanho do arquivo crescer em Kb

http://www.maujor.com/

52