BOTÕES ESTILO XP

 

Olá galera! Tudo bem com vocês?

 

Ensinarei neste artigo criar os tão famosos botões no estilo XP. O processo é simples, basta acompanhar os passos a seguir:

 

1) Crie um novo documento de 400 x 400 pixels. Trabalhar com o palco maior evitará surpresas desagradáveis com o tamanho dos objetos futuramente.

 

 

2) Suas configurações devem ficar da seguinte forma:

 

 

3) Com o documento em branco aberto, selecione a ferramenta Elipse.

 

 

4) Vamos criar agora a base do botão. Crie um círculo de aproximadamente 80 x 80 pixels.

 

Dica: Para fazer um círculo perfeito pressione a tecla Shift enquanto está fazendo-o.

 

5) Caso não tenha acertado o tamanho logo de início, vá até a barra de propriedades e faça os ajustes. Como disse em minha apresentação, a barra de propriedades é de imensa importância e utilidade.

 

 

6) Selecione agora o círculo com a ferramenta Selecionar secundário (mouse branco).

 

 

7) Vá até a barra de propriedades e selecione no campo Categoria de preenchimento a opção Linear.

 

 

8) Definimos nosso círculo para trabalhar com um efeito de degrade. Dê um clique no balde de tinta, localizado a esquerda do campo que definimos acima.

 

 

9) Selecione as cores que desejar. Neste artigo vou utilizar dois tons de laranja. Para selecionar a cor desejada, basta clicar no ponteiro. Veja na imagem a seguir:

 

 

10) Após ter selecionado as cores desejadas, selecione o ponteiro preto.

 

Dica: Você pode acessar este ponteiro de forma mais fácil. Basta pressionar a letra v.

 

11) Coloque o eixo da cor na posição vertical e o ponto final no centro. Veja como deve ficar:

12) Vamos agora fazer algumas cópias deste círculo. Utilizem o método mais comum da informática, o famoso Ctrl+C e Ctrl+V. Faça 04 cópias idênticas do círculo, lembrando que não se pode redefinir o tamanho do objeto.

 

 

13) Selecione o primeiro círculo para editá-lo. O objetivo agora é voltar o posicionamento do eixo da cor para horizontal e modificar a opacidade da segunda cor para zero. Para isso, você irá primeiramente selecionar o círculo com o ponteiro seta preta. Após isso acesse a opção Linear, fazendo com que abra a tela para seleção de cores. Por fim defina a opacidade como zero. Veja:

 

 

14) Repita o processo para os outros 2 círculos duplicados, mudando apenas o eixo e a direção.

 

 

15) Feito isso, una todos os círculos acima do círculo principal. Deve ficar da seguinte maneira:

 

 

Dica: para colocar todos os círculos no mesmo posicionamento, trabalhe utilizando as coordenadas X e Y da barra de propriedade.

 

 

16) Com o ponteiro preto, acesso o menu Modificar, Agruparou simplesmente o atalho Ctrl+G para agruparmos todos os círculos.

 

17) Vamos aplicar um efeito para dar uma aparência legal ao botão. Com o grupo selecione a opção Efeitos na barra de propriedades, escolhendo a opção Sombra e brilho, Aplicar sombra.

 

 

18) Tome cuidado da maneira que aplicará esta sombra, pois o intuito dela é apenas complementar o efeito. Temos que ter cautela neste momento. Segue uma sugestão de configuração:

 

 

19) Para incrementar ainda mais nosso botão, aplique o efeito Sombra e brilho, Brilho interno. Acesse o mesmo menu anterior mudando apenas no momento da opção final (Brilho interno ao invés de Aplicar sombra). Veja:

 

 

20) Confira como está nosso botão até o presente momento:

 

21) Chegou a hora de criar o brilho. Vale a ressalva de que aplicar este efeito exige um pouco mais de concentração. Mude o ponteiro para o ponteiro branco.

 

22) Desagrupe os círculos. Para isso acesso o menu Modificar, Desagrupar ou Ctrl+Shift+G caso prefira o atalho.

 

23) Selecione uma das camadas e dê Ctrl+C e Ctrl+V para criar outro círculo.

 

24) Pegue este círculo duplicado e vamos alterar suas cores e opacidade. Do lado esquerdo e direito modifique para a cor branco e mude a opacidade do lado direito para zero.

 

 

25) Diminua o tamanho do círculo criado e em seguida selecione o ponteiro branco e pegue o ponto inferior do círculo arrastando-o para cima.

 

 

26) Posicione o círculo que acabamos de trabalhar em cima do grupo. Veja como deve ficar:

 

 

27) Insira agora os nomes que quer atribuir ao botão. Veja como fica botões XP com outras cores:

 

 

Muito bem galera, concluímos que criar botões com estilo XP não é complicado, pelo contrário, é bastante simples, exigindo apenas um pouco de concentração.

 

Com criatividade e uma ferramenta tão fenomenal como o Macromedia Fireworks se vai longe.

 

Até a próxima!

 

Um cordial abraço a todos,

Fábio Almeida