16 replies to this topic

[daniel.cheida]

O tutorial original é do www.fwzone.net (em inglês), então resolvi traduzir e simplificar um pouco... Espero que gostem:

Passo 1 - Gradiente
Desenhe um retângulo e preencha com um gradiente que vai do cinza (#CCCCCC) ao branco (#FFFFFF). Ajuste o gradiente usando a seta para que fique igual ao da figura:


Passo 2 - Inner Shadow
Aplique ao retângulo o efeito shadow and glow -> inner shadow, configure conforme indica a imagem abaixo:

este deverá ser o resultado:


Passo 3 - Drop Shadow
Aplique ao retângulo o efeito shadow and glow -> drop shadow, configure conforme indica a imagem abaixo:

este deverá ser o resultado:


Passo 5 - Destaque
Desenhe um novo retângulo, com aproximadamente 80% da largura e 50% da altura do primeiro. Preencha-o com um gradiente linear (inteiro branco) que vai do alpha 100% ao 0%. Ajuste com a seta a direção do gradiente como na figura abaixo:


Passo 6 - Final
Adicione um texto com efeito drop shadow... e ai está o botão...


Ai está um exemplo de como este tutorial pode ser útil em outras formas
Um exemplo que fiz usando as técnicas deste tutorial e um pouco de criatividade:


FlwZ

Edição feita por: daniel.cheida, 02/12/2003, 20:58.

[_mcl_]

Ae, vlw pelo tuto kra, eu ja vi um assim antes!!! vlw mano

[SlimShady]

eu axu mais facil usar extensão msm....tudo bem q soh da pra fazer com retangulo...mas ai eu faço um circulo e coloco os msms efeitos...

flwz, slim...

[daniel.cheida]

axo q assim fica mais bonito do q usando extensão... e dá pra muda do jeito q vc quiser... mais cada um é cada um...

FlwZ

[_mcl_]

Desde que fique legal qualquer jeito serve!

[Vip10]

Muito legal,

alguém sabe me dizer um tutorial parecido pra deixar o botão (ou borda de uma thumb) com aquele efeito tipo de metal líquido?

[daniel.cheida]

alguém sabe me dizer um tutorial parecido pra deixar o botão (ou borda de uma thumb) com aquele efeito tipo de metal líquido?

Não entendi bem o q vc qué cara.. me mostra um exepmlo..

FlwZ

[soamazing]

A gente acho que fica bem mais bunito assim fazendo sem a extensão!!!

Parabens belo tuto

[SlimShady]

A gente acho que fica bem mais bunito assim fazendo sem a extensão!!!

Parabens belo tuto

eu axu q depende...por exemplo eu sei fazer assim, mas por atalho faço pela extensão q num eh a msma coisa...mas eu mudo completamente os efeitos, uso mascaras com ele para fazer fotos em vidros essas coisas.....axu q eh a msma coisa...soh tem q saber mexer no q a extensão faz...

o unico problema dos dois e fazer rollover com eles, qnd vc trasnforma em butaum ele agrupa os retangulos e issu tira todo o efeito...soh se transformar em bitmap(ctrl+alt+shift+z)

flwz, slim...

[Vip10]

alguém sabe me dizer um tutorial parecido pra deixar o botão (ou borda de uma thumb) com aquele efeito tipo de metal líquido?

Não entendi bem o q vc qué cara.. me mostra um exepmlo..

FlwZ

Desculpe pela explicação meio falha, metal líquido é aquele efeito de metal polido, tipo aço inox, com muito brilho e pode ser tanto dourado como prateado, mas não é um simples degradê, ele tem um brilho excepcional.

Gostaria de saber fazê-lo sem extensões, gostaria de saber fazer "na mão".

Outros efeitos que eu quero aprender:
- Aço escovado (ou alumínio escovado)
- Ferrugem

Não tenho imagens, mas pela explicação acho que dá pra enteder né?

[Vip10]

Outra coisa, não sei fazer o passo 5.

Digo o seguinte, um degradê de branco pra branco sendo que mudando o alpha, do alpha 100 pro alpha 0, onde está essa opção?

Sempre que tenho que fazer algum serviço assim (um degradê para alpha) eu crio uma outra imagem, salvo como GIF ou JPG e depois abro ela e a corto usando a ferramenta Lasso Tool, ajustando o Feather para 30 ou 50, aí ela vai ficando alpha à medida que vai se aproximando da borda onde passo o "lasso".

Dá certo, mas dá muito mais trabalho, o FW que uso é o 4, será que ele não tem essa opção?

Acho ele muito fraco em opções de alpha, outro truque que eu faço quando preciso utilizar algum Alpha, é aplicar uma textura aí ajusto o percentual dela e clico em transparent. Existe algum outro meio mais fácil?

[Lord Spy]

Nossa, muito show esse tuto hein cara!

E até então, só usava as extensões para fazê-lo hehehe, mas assim é bem facinho de fazer...sem problemas!
Valeu

Edição feita por: Lord Spy, 06/12/2003, 11:38.

[SlimShady]

Outra coisa, não sei fazer o passo 5.

Digo o seguinte, um degradê de branco pra branco sendo que mudando o alpha, do alpha 100 pro alpha 0, onde está essa opção?

Sempre que tenho que fazer algum serviço assim (um degradê para alpha) eu crio uma outra imagem, salvo como GIF ou JPG e depois abro ela e a corto usando a ferramenta Lasso Tool, ajustando o Feather para 30 ou 50, aí ela vai ficando alpha à medida que vai se aproximando da borda onde passo o "lasso".

Dá certo, mas dá muito mais trabalho, o FW que uso é o 4, será que ele não tem essa opção?

Acho ele muito fraco em opções de alpha, outro truque que eu faço quando preciso utilizar algum Alpha, é aplicar uma textura aí ajusto o percentual dela e clico em transparent. Existe algum outro meio mais fácil?

alpha ou opacidade?


flwz, slim...

[SlimShady]

Outra coisa, não sei fazer o passo 5.

Digo o seguinte, um degradê de branco pra branco sendo que mudando o alpha, do alpha 100 pro alpha 0, onde está essa opção?

Sempre que tenho que fazer algum serviço assim (um degradê para alpha) eu crio uma outra imagem, salvo como GIF ou JPG e depois abro ela e a corto usando a ferramenta Lasso Tool, ajustando o Feather para 30 ou 50, aí ela vai ficando alpha à medida que vai se aproximando da borda onde passo o "lasso".

Dá certo, mas dá muito mais trabalho, o FW que uso é o 4, será que ele não tem essa opção?

Acho ele muito fraco em opções de alpha, outro truque que eu faço quando preciso utilizar algum Alpha, é aplicar uma textura aí ajusto o percentual dela e clico em transparent. Existe algum outro meio mais fácil?

e assim cara...
seleciona o linear e qnd ta editando ele vc clica no numero 1 e vai aparecer opacity 100% esse vc deixa assim, depois clica no numero 2 e coloca opacity 0 % depois posiciona o linear....

Attached Files

•  screenfw.jpg   15.88KB   0 downloads