Coluna Fireworks – Userbars
Introdução
Olá comunidade
MXStudio! Esse é o meu primeiro artigo. Nesse artigo você irá aprender a fazer as userbars, que são aquelas “barrinhas”
que ?falam? um pouco sobre vocês, do que vocês gostam, do que vocês não gostam,
e assim por diante
Pré-requisitos
O tutorial foi desenvolvido no Macromedia Fireworks 8 mas é compatível com qualquer versão do software Macromedia Fireworks.
Segue abaixo os arquivos necessários para o tutorial
Objetivos
Criaremos
uma userbars, para as pessoas lhe conhecer melhor.
Criando uma userbars
1) Crie um
novo arquivo de 350 x 19:
2) Faça um
retângulo de 350 x 19, para fazer isso, faça assim:
Ou vá em <
Window > < Align > e aperte nesses botões:
3 ) Vá em <texture>,
no painel properties, e ponha assim:
4) Vamos pegar
o símbolo de algum time, de alguma coisa, marca, logo ou qualquer outra coisa,
que você quiser, eu peguei do MXStudio.
5) Tire o
fundo, com a ferramenta Magic Wand Tool ( W ).
 Eu usei essas
configurações:
6) Agora, ponha
a logo, e mude o tamanho, gire, faça varias coisas com ela, com essas
ferramentas :
7) Veja depois
de feito:
 Vamos mudar
a cor de fundo, escolha uma dessas opções :
Eu escolhi
Linear
9) Escolha a
cor, que você quiser, veja as que eu escolhi:
Usei opacidade
50, na primeira cor e 100 na segunda
10) Agora,
vamos escrever, com a fonte: Visitor TT1 BRK, que está para download, lá em
cima, eu escrevi, MXStudio Fan, use o texto nessas configurações:
 Mas claro, que
você poderá mudar a cor.
11) Com o texto
selecionado, aperte
12) Aperte Alt
+ Clique do mouse ( Botão esquerdo ) em cima da layer do texto.
13) Agora, vá
em < Select > < Border > e deixe assim:
14) Agora,
pegue o balde de tinta, deixe a tolerância em 20. Pode ser qualquer outra cor.
15) Agora
pinte, não se esqueça de pintar dentro dos espaços, que as letras deixam.
16) Agora,
pegue a sombra ( eu chamo assim ), ela está para download, lá em cima, mas se
você quiser faça a sua. Não esqueça de deixar a opacidade dela em 40. E o seu
posicionamento, assim:
17) Vamos,
colocar a layer do texto acima da sombra. Para isso é só carregar, a layer do
texto para cima da sombra.
18) Agora,
vamos criar uma borda, para isso, crie um retângulo, do tamanho do documento,
como você aprendeu no passo 2). Eu gosto de usar, uma borda preta por fora, e
uma branca por dentro, veja:
Para fazer esse
tipo de borda, você vai ter que fazer, um retângulo do tamanho do fundo ( o
preto ), depois fazer um retângulo com a borda branca, mas dai com dois pixels a
menos. Veja:
Retângulo
preto:
Retângulo
branco:
Ou você, faz
apenas um retângulo preto.
 Está pronta
nossa userbars, mas agora eu vou ensinar para vocês como a logo, por exemplo
ir como fundo.
1) Pegue essa
sua userbars pronta e exclua a logo
Obs: Você
também pode começar tudo de novo.
2) Agora
selecione o retângulo, e vá em:
3) Agora, desça
até você ver < Other..> clique ali.
4) Irá abrir
uma janela, escolha a sua imagem.
5) Agora, mude
o tamanho, gire, faça o que você achar melhor, use esses “quadradinhos”.
6) Depois de
alguns ajustes, veja como ficou:
Agora, vamos fazer outra userbars,
veja vou usar essa imagem:
O que você acha
que essa imagem vai dar? Nada? Errado, ela vai dar uma coisa abstrata muito
bonita.
Vamos a partir,
do 4ª passo. Não se esqueça que estou falando, da userbars que tem o fundo.
1) Abra essa
imagem, e veja o que você vai ter.
2) Agora vamos
mudar, um pouco, colocar só um pouco para baixo, ver passo 5.
3) Ponha os “risquinhos”,
indo em texture, passo 3, só que do tutorial da primeira userbars, o lá de cima.
4) Ponha uma
borda, escreva e ponha a sombra:
Achei meio
claro, então tirei um pouco o brilho:
Mudei a cor da
letra, indo em < Commands > < Batch commands > < Invert Selection Color > e fui
em < Filters > < Adjust Color > < Brightness/ Contrast …> E deixei assim:
Agora, veja
como está:
Userbars animada
Aprendendo a fazer
uma userbars animada:
1) Pegue uma userbars pronta.
Peguei essa, porque falta
algumas letras, e é isso que eu quero animar
2) Agora, abra o painel frames and
history, para isso vá em < window > < Frames > ou aperte Shift + F2
3) Agora, crie um novo frame.
4) Nesse novo frame, copie o
primeiro e acrescente a letra ” x “, não se esqueça de deixar centralizado,
dependendo da userbars, você vai ter que digitar o número, exemplo:
Aqui não vai ser 0 e 0 e sim -9 e
-8, veja isso no seu 1° frame e depois copie isso para o 2° frame e assim por
diante.
5) Agora, crie um novo frame e
acrescente a letra ” s “, e assim por diante, não se esquecendo do que foi
falando anteriormente.
6) Depois de ter acrescentado todas
as letras, para mim deu 8 frames, ponha a velocidade que você quer, veja como o
meu ficou:
7) Agora, está na hora de salvar,
para isso vá em < Window > < Optimize > ou aperte F6. Deixe assim:
Veja o resultado final:
Vimos nesta coluna como
fazer uma userbars. É sempre bom, os outros saberem do que vocês
gostam, não gostam e etc. Aqui está uma sugestão para vocês colocarem
nas suas assinaturas em fóruns.
Espero que vocês tenham gostado desta coluna e até a próxima.
Autor: João Castro – jpcastrobr – Colunista de Fireworks do MXStudio
Qualquer dúvida envie um email para
jpcastrobr@yahoo.com.br ou acesse o nosso fórum.
|
Escrito por joaocastro
on maio 21, 2006. Arquivado em Fireworks.
Você pode seguir as respostas a esse artigo pelo RSS 2.0.
Você pode deixar respostas para esse artigo
Últimos Comentários