Jump to content


Photo

Botões Mac (aqua)


  • Faça o login para participar
16 replies to this topic

#1 daniel.cheida

daniel.cheida

    Turista

  • Usuários
  • 32 posts
  • Sexo:Não informado
  • Interesses:Em primeiro lugar as garotas hehe depois Futebol, Academia, Música, Aeromodelismo... Adoro tudo o que faço... <br>ah... quase esqueci, também curto ASP, Paint Shop Pro, Fireworks, Flash, Photoshop, Strata 3D...

Posted 27/11/2003, 21:18

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:
Posted Image

Passo 2 - Inner Shadow
Aplique ao retângulo o efeito shadow and glow -> inner shadow, configure conforme indica a imagem abaixo:
Posted Image
este deverá ser o resultado:
Posted Image

Passo 3 - Drop Shadow
Aplique ao retângulo o efeito shadow and glow -> drop shadow, configure conforme indica a imagem abaixo:
Posted Image
este deverá ser o resultado:
Posted Image

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:
Posted Image

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

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:
Posted Image

FlwZ :blink:

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

<% web = www.jecas.com.br %>
<% name = Daniel Cheida de Oliveira %>
My mind's so far away...

#2 _mcl_

_mcl_

    Mestre

  • Usuários
  • 609 posts
  • Sexo:Masculino
  • Localidade:Ipatinga / MG

Posted 28/11/2003, 23:19

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

#3 SlimShady

SlimShady

    OBS: Reflita

  • Usuários
  • 233 posts
  • Sexo:Não informado
  • Interesses:Edição de imagens, layouts e sites...

Posted 28/11/2003, 23:29

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... :D

flwz, slim... :yes:
Caio Mora ( (e)studios AQUA )
www.estudios-aqua.com

#4 daniel.cheida

daniel.cheida

    Turista

  • Usuários
  • 32 posts
  • Sexo:Não informado
  • Interesses:Em primeiro lugar as garotas hehe depois Futebol, Academia, Música, Aeromodelismo... Adoro tudo o que faço... <br>ah... quase esqueci, também curto ASP, Paint Shop Pro, Fireworks, Flash, Photoshop, Strata 3D...

Posted 29/11/2003, 00:54

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 :blink:
<% web = www.jecas.com.br %>
<% name = Daniel Cheida de Oliveira %>
My mind's so far away...

#5 _mcl_

_mcl_

    Mestre

  • Usuários
  • 609 posts
  • Sexo:Masculino
  • Localidade:Ipatinga / MG

Posted 29/11/2003, 12:41

Desde que fique legal qualquer jeito serve! ;)
Posted Image Posted Image Posted Image Posted Image

#6 Vip10

Vip10

    Turista

  • Usuários
  • 42 posts
  • Sexo:Masculino
  • Localidade:RJ
  • Interesses:Design, tecnologia, multimídia, gadgets, carros, audio.

Posted 05/12/2003, 03:49

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?
Um abraço
Fábio
Blog:
www.fabiodutra.com.br

#7 daniel.cheida

daniel.cheida

    Turista

  • Usuários
  • 32 posts
  • Sexo:Não informado
  • Interesses:Em primeiro lugar as garotas hehe depois Futebol, Academia, Música, Aeromodelismo... Adoro tudo o que faço... <br>ah... quase esqueci, também curto ASP, Paint Shop Pro, Fireworks, Flash, Photoshop, Strata 3D...

Posted 05/12/2003, 18:19

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 :blink:
<% web = www.jecas.com.br %>
<% name = Daniel Cheida de Oliveira %>
My mind's so far away...

#8 soamazing

soamazing

    Até hoje e sempre

  • Usuários
  • 235 posts
  • Sexo:Feminino
  • Localidade:UPMASTERS.COM
  • Interesses:Boyz II Men, TLC, Destiny's Child, Mariah Carey
    Porpurina, programação, web design.
    Dreamweaver, Fireworks, Adobe.
    Namoro, Sexo, e nada de drogas

Posted 05/12/2003, 20:28

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

Parabens belo tuto ;)
[NAME] JAQUELINE BENEDICTO
[OCCUPATION] Administradora
[SITES] UpMasters - LinksBR - BlogsBR
[COMPANY] HostClassic - All Domínios
[FÓRUM] UPFÓRUM

#9 SlimShady

SlimShady

    OBS: Reflita

  • Usuários
  • 233 posts
  • Sexo:Não informado
  • Interesses:Edição de imagens, layouts e sites...

Posted 05/12/2003, 22:05

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... :yes:
Caio Mora ( (e)studios AQUA )
www.estudios-aqua.com

#10 Vip10

Vip10

    Turista

  • Usuários
  • 42 posts
  • Sexo:Masculino
  • Localidade:RJ
  • Interesses:Design, tecnologia, multimídia, gadgets, carros, audio.

Posted 06/12/2003, 04:21

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 :blink:

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é?
Um abraço
Fábio
Blog:
www.fabiodutra.com.br

#11 Vip10

Vip10

    Turista

  • Usuários
  • 42 posts
  • Sexo:Masculino
  • Localidade:RJ
  • Interesses:Design, tecnologia, multimídia, gadgets, carros, audio.

Posted 06/12/2003, 04:41

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?
Um abraço
Fábio
Blog:
www.fabiodutra.com.br

#12 Lord Spy

Lord Spy

    Normal

  • Usuários
  • 91 posts
  • Sexo:Não informado

Posted 06/12/2003, 11:36

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 (y)

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


#13 SlimShady

SlimShady

    OBS: Reflita

  • Usuários
  • 233 posts
  • Sexo:Não informado
  • Interesses:Edição de imagens, layouts e sites...

Posted 06/12/2003, 12:20

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... :yes:
Caio Mora ( (e)studios AQUA )
www.estudios-aqua.com

#14 SlimShady

SlimShady

    OBS: Reflita

  • Usuários
  • 233 posts
  • Sexo:Não informado
  • Interesses:Edição de imagens, layouts e sites...

Posted 06/12/2003, 12:25

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


Caio Mora ( (e)studios AQUA )
www.estudios-aqua.com

#15 Aquibrasil

Aquibrasil
  • Visitantes

Posted 21/02/2004, 20:57

Valeu maninho esse é o melhor tuto que eu ví nos últimos tempos!




2 user(s) are reading this topic

0 membro(s), 2 visitante(s) e 0 membros anônimo(s)

IPB Skin By Virteq