Reproduzindo botões

Windows Vista

Esse é um dos vários botões do novo sistema operacional da Microsoft, Windows Vista. Veremos à seguir como faze-lo passo à passo. Lembrando que os tamanhos não precisam ser os mesmos descritos aqui, basta os objetos terem a mesma proporção.

1 - Com um novo documento aberto crie um círculo de 81×79px
(pixels), para seu contorno utilize a cor #43647C e preenha-o com o
seguinte gradiente:



2 - Adicione dois “Inner Shadow” ao círculo com as configurações abaixo:



* Para aplicar o Inner Shaddow selecione o objeto, em
suas propriedades, clique no “+” ao lado de Filters (Effects na versão
7.0), aponte “Shadow and Glow” e então “Inner Shadow”.

3 - Duplique o círculo (ctrl+shift+d),
retire desse novo círculo os inner shadows aplicados e defina o
contorno para transparente. Diminua 2px de sua largura (W), 2 de sua
altura (H) e o posicione ao meio do círculo maior.



4 - Adicione ao círculo diminuido no passo anterior um inner shadow com as seguintes configurações:



* Não se esqueça de marcar a opção knock out, é de extrema importância.

5 - Duplique o círculo usado no passo anterior e modifique o inner shadow do vetor surgido na duplicação para:



6 - Com a “Line tool” (N) desenhe a seguinte seta:



7 - Selecione as três linhas criadas vá ao menu
“Modify” (Localizado na barra superior do programa), aponte “Alter
Patch” e selecione “Expand Stroke…”. Aparecerá uma caixa de
configuração, nela coloque as seguintes configurações:



8 - Com as linhas já expandidas agrupe-as com a
função “Union” (Modify -> Combine Patchs -> Union), agora, nesse
novo vetor, defina o traçado (stroke) para: cor: #1B2172; tamanho: 1;
tipo: 1 pixel soft. Defina seu preenchimento para branco e o centralize
no círculo.



9 - Duplique o círculo utilizado no passo 4 ou o
utilizado no passo 5 (o que importa é que ele seja 2px de altura e 2px
de largura menor que o círculo maior e que esteja centralizado à ele).
Retire o “Inner shadow”, coloque-o acima de todas as camadas, e
modifique-o com a pen tool () e a subselection tool () até ele ficar da seguinte forma:



* Para saber mais sobre a pen tool e a subselection tool colsulte a coluna “Vector - Parte 1“

10 - Defina o preenchimento desse vetor para um
gradiente de branco para transparente (60%), em seguida defina a
transparência da camada para 65% e aplique o efeito “Gaussian Blur” com
valor de 0.5.



* Para aplicar o Gaussian Blur selecione o objeto, em
suas propriedades, clique no “+” ao lado de Filters (Effects na versão
7.0), aponte “Blur” e então “Gaussian Blur”.

11 - Duplique o primeiro círculo criado (o maior),
aplique nele a função “numeric transform” localizada em “Modify ->
transform” com as propiedades à seguir:



12 - Mova a camada em que o efeito foi aplicado para
baixo de todas, retire dela todos os efeitos (filters; effects) e
traçado (deixe-o transparente). Aplique ao círculo um gradiente linear
da seguinte maneira:



13 - Duplique o vetor utilizado no passo anterior e acione-o um “Inner Shadow” com as configurações abaixo:



Pronto! Você acabou de reproduzir um dos botões do Windows Vista!
Player do iTunes

Agora iremos reproduzir o botão “Pause” do player iTunes da Apple, os outros botões do player possuem a mesma formação.

1 - Crie um círculo de 31×31px, adicione à ele um preenchimento gradiente radial de branco para cinza:



2 - Adicione ao círculo um “Inner Shadow” com as configurações:



3 - Adicione agora um “Drop shadow” ao mesmo círculo:



* Para aplicar o Drop Shaddow selecione o objeto, em
suas propriedades, clique no “+” ao lado de Filters (Effects na versão
7.0), aponte “Shadow and Glow” e então “Drop Shadow”.

4 - Duplique o círculo, na forma que surgiu retire
todos os efeitos aplicados (inner shadow e drop shadow), defina o
preenchimento para sólido de cor branca e o edite com a pen tool () e a subselection tool () para ficar da seguinte forma:



5 - Modifique o modo de suavização do vetor editado no passo anterior para “Feather - 1″ (Propriedades -> Edge).



6 - Agora é só fazer o símbulo de “Pause”, para os
outros botões do player (play, stop, next…) é só mudar esse símbolo.
Para faze-lo crie dois retângulos, um do lado do outro e à eles
adicione um “Drop Shadow”.



Prontinho, vc acaba de reproduzir mais um botão pertencente ao “Hall da fama”!
Mac Button

Esse é um dos botões do Sistema operacional da Apple, Macntosh, o encotramos em botões como OK e cancelar.

1 - Crie um “Rounded Rectangle” ()
de 74×26px, para os que usam a versão 8.0 o arredondamento vale 10
(para editar no painel “Auto Shape Properties”, para os que usam
versões anteriores use os quadrados amarelos no retângulo para
arredonda-lo como na imagem à seguir. Para preenchimento use um
gradiente radial:



2 - Adicione o seguinte “Inner Shadow” ao rounded rectangle:



3 - Crie a seguinte forma sob o vetor utilizado nos passos anteriores:



4 - Atribua à ela: cor: Branca; edge: feather - 1; transparência: 40.

5 - Como no passo anterior, faça outra forma sob o vetor mais abaixo:



6 - Atribua à essa nova forma: preenchimento: gradiente radial; edge: feather - 2.



7 - Escreva algo no botão, nesse exemplo escrevi “MX Studio” com a fonte Tahoma, 11px, no anti-alias.

8 - Agrupe tudo e aplique o efeito Drop Shadow:



Pronto! Um botão mac com seu próprio texto!