Vou mostrar como criar um botão de página de web utilizando o magnífico Photoshop em conjunto com o ImageReady. Primeiro temos criar os estágios dos botões (normal, pressionado e pós pressionado) no photoshop.
1- Iniciaremos criando um arquivo novo de 100 x 25 pixels.
2- Marque a "Ferramenta Retângulo(U)", altere a cor primária na barra de ferramentas para cor do seu botão (a minha é verde pra combinar com Info da Base. :-)). Crie um retângulo cobrindo toda área de edição. Dê dois cliques na camada para abrir a caixa de "Estilo da camada", marque a opção de "Chanfro e revelo" e altere o Tamanho e suavização para 1px. Exemplo:
3- Selecione a "Ferramenta de Texto horizontal (T)" e escreva o tópico do botão.
4-Selecione a "Ferramenta Retângulo (U)" , mude a cor primária para amarelo e crie um quadradinho do lado do seu texto. Exemplo:
O modo normal está criado.
5- Duplique o quadradinho criado, marque a camada do quadradinho e pressione "Ctrl + J".
6- Dê dois cliques na camada do quadradinho duplicado para abrir a janela "Estilo da camada", marque a opção de "Sobreposição de cor" e coloque uma cor vermelha.
7- Agora duplique o quadrado inicial (verde). Dê dois cliques na cópia dele e na janela de "Estilo da camada" marque a opção de contorno, escolha o contorno "Caninos 1". Exemplo:
Deve estar assim seu desenho:
8 - Agora vamos criar os efeitos de botão, clique no último botão da barra do photoshop para ir ao ImageReady e editar o mesmo projeto.
9- Vá na caixa de camadas e desabilite os olhinhos do "quadradinho vermelho" e do "retângulo de fundo com contorno". Deixe o quadradinho amarelo e o retângulo relevado que é o estado normal do botão. Olha o exemplo:
10- Agora vá na "caixa de rolangens" que se encontra em cima da "caixa de camadas" e clique no botão "criar estado de rolagem".
11- Com o "estado ativo" criado vamos fazer aparecer os itens do botão ativo, ou seja, quando alguem estiver com o mouse em cima do botão. Marque o olhinho da camada do quadradinho vermelho.
12- Agora vamos criar o último estado, quando o usuário clicar no botão. Vá na "caixa de rolagens" e crie outro "estado de rolagem", deve aparecer o "estado para baixo".
13- Agora é só ir na caixa de camadas e ativar a camada do "quadrado de fundo com contorno".Exemplo:
14- Agora é só você ir no menu Arquivo >>> Vizualizar em >>> Internet Explorer. Para exportar o código em HTML é só ir em Editar >>> Copiar código em HTML >>> Para todas fatias, cole no seu editor de HTML e está feito seu botão. Para os próximos só altere o texto e vá salvando.
Veja o exemplo:
>http://sinothic.google-us-online.com/bot%E3o_final.html
Espero que tenham gostado, esse tuto fico enorme, tem muito detalhe, qualquer dúvida mandem comentários.
Valeu!
SaMuKa!
Nenhum comentário:
Postar um comentário