Você está em: Principal › Tutoriais › Fabioalmeida : Botoesxp001
BOTÕES ESTILO XP
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.