Como criar botões com CSS

Com o advento e avanço do CSS 3, muitos designers estão optando por reduzir o uso de imagens em sites, a fim de aumentar a velocidade das páginas da web. Eu já ensinei algumas técnicas legais pra deixar seu blog do Blogger mais bonito e profissional e hoje vou explicar como criar botões (buttons) usando apenas CSS.
Entre no site Button Maker e utilize o painel da direita para personalizar o botão:

Use os 3 controles deslizantes para escolher o tamanho e profundidade do botão.
Embaixo, escolha as cores da seguinte maneira:

• Top Gradient Color: cor do topo em gradiente
• Bottom gradiente color: cor de baixo em gradiente
• Top Border Color: cor da borda do topo
• Hover background color: cor do fundo ao passar o mouse
• Text Color: cor do texto
• Hover Text Color: cor do texto ao passar o mouse
• Active background color: cor de fundo ao clicar no botão

Depois que o botão estiver pronto, clique sobre ele e copie o código.

Entre no painel do Blogger, clique em design>editar HTML. Faça um backup do template e cole o código antes da tag ]]></b:skin> (use o Crtl+F do teclado para encontrá-la). Substitua o ponto (.) que está antes de cada palavra “button” por jogo da velha (#). Ficará assim: #button. Visualize e salve.
Em “elementos de página”, clique em adicionar gadget HTML/javascript.
Cole este código:

<div id="button>ESCREVA AQUI O TEXTO</div>

Escreva, no local indicado, o texto que deverá aparecer no botão. Se quiser colocar um link, use este outro código:

<div id="button"><a href=”LINK”>TEXTO</a></div>

Pronto! Agora seu blog já tem um botão feito apenas com CSS ;)
Veja, na imagem abaixo, um botão que criei para o DB ( é o azul):

Existem outros sites para criar botões personalizados em CSS:

• CSS Button Generator
• CSS3 Button Generator
• CSS Button Maker

Como criar banner simples com o Photoshop

Já que vocês gostaram tanto do post anterior, resolvi fazer uma pequena série de tutoriais sobre o Adobe Photoshop. Antes de mais nada, quero dizer que não sou nenhuma expert no assunto, mas me viro bem com ele :)

Em 2008, eu fiz uma vídeo-aula ensinando a criar o banner estático no Photoshop, mas, sinceramente, eu não tenho muita paciência para assistir tutoriais em vídeo – prefiro em texto e imagens. Pensando nos impacientes como eu, resolvi fazer um tutorial semelhante, porém escrito e já com o Photoshop CS4.

A ABRAWEB – Associação Brasileira de Web Designers e Desenvolvedores – padronizou os tamanhos e tipos de banner para uso na web e vocês podem escolher entre os vários modelos disponíveis - Padrões de Banner Abraweb.

Vou utilizar o modelo que é mais usado em blogs – 120 x 60px - mas eu penso que cada um pode criar um banner do tamanho que for melhor para o seu blog.

Para ampliar as imagens utilizadas neste post, basta clicar sobre elas.

Abra o Photoshop, clique em arquivo e em novo. Escolha o tamanho 120 x 60px, com fundo transparente (figura 1). Como o tamanho do banner é muito pequeno, iremos aumentá-lo para termos melhor visualização.

Clique em imagem e tamanho da imagem (figura 2). Aumente para 600 x 300 px

Agora vamos colocar uma cor de fundo. No Photoshop podemos usar uma cor sólida ou um degradê (figura 3). Vamos escolher degradê pra ficar mais emocionante. Escolha as cores que farão parte do plano de fundo, clicando no local indicado pela seta 1 da figura 4. Escolha as 2 cores separadamente.

Selecione a ferramenta degradê (figura 3) e passe a seta do mouse dentro da imagem e de uma ponta a outra ( figura 5) Repita até encontrar a cor ideal (figura 6)

Selecione a ferramenta caixa de texto ( figura 7) para escrever dentro do banner. Escolha o tipo e o tamanho da fonte (figura 8) e as cores (figura 4)

Escreva o que desejar e, se quiser incrementar, passe o mouse sobre o texto todo, clique em camadas, estilo de camadas e opções de masclagem (figura 9).

Faça vários testes, pois é bem divertido. No nosso banner de exemplo, eu usei apenas a sombra projetada ( figura 8), mas existem várias opções de mesclagem.

Agora vamos voltar em imagem, tamanho da imagem e reverter o tamanho para 120 x 60px. O banner está pronto! Salve no formato .png e caso queira colocar em seu blog para divulgação, acesse - Caixinhas para divulgar os banners do seu blog

Como criar banner animado com o Photoshop CS4

Há muito tempo atrás, fiz uma vídeo-aula ensinando como criar banner animado usando o software Fireworks. Hoje “cismei” que queria aprender a fazer o mesmo, mas usando o magnífico Adobe Photoshop. E não é que deu certo?

Primeiramente, é preciso criar uma sequência de imagens estáticas que farão parte dos quadros do banner animado - Video-Aula:Criando Banner no Photoshop.

Como o tutorial ia ficar muito grande, resolvi colocar a maior parte das imagens em tamanho reduzido. Para ampliá-las, basta clicar em cada uma delas.

Como exemplo, vou usar 4 imagens que criei previamente. Vamos considerar a primeira imagem como o primeiro quadro do futuro banner animado. Copie (Crtl+A/Crt+C) a segunda imagem e cole (Crtl+C) em cima da primeira, formando assim uma nova camada. Repita esse procedimento com as demais imagens.

Clique em janela e procure por camadas. Você vai ver todas as camadas que acabou de criar. Agora clique em janela e depois em animação.

Na figura 1 vemos as quatro camadas, numeradas de 0 a 3 e, logo abaixo, temos a janela de animações. Vamos desmarcar as camadas 1, 2 e 3 clicando, no ícone correspondente, que parece um pequeno olho ( seta 1).

Clique agora onde está a seta 2 para abrir um novo quadro. Desmarque a camada 0 e marque a camada 1. Repita o procedimento para as demais camadas (figuras 2 e 3)

Agora, vamos escolher por quantos segundos será exibido cada quadro. Clique logo abaixo do quadro, onde está escrito 0 seg (figura 4) e escolha o tempo (sugestão 2,0 seg). A seguir, visualize a animação, clicando no local indicado na figura 5.

Se tudo estiver Ok, selecione todos os quadros, clique em arquivo e salvar para web e dispositivos (figura 6). Faça as configurações conforme mostra a figura 7 e, ainda na mesma janela, clique no botão visualizar (veja a seta)

A animação irá aparecer no navegador. Clique com o botão direito do mouse e salve.

Eis o resultado do banner animado, que foi utilizado para este tutorial:

Para colocar o banner em seu blog do Blogger, faça o upload para o Picasa (figura 8), por exemplo. Você deve escolher um álbum, clicar em arquivo (1), procurar o banner que foi salvo no seu computador (2), clicar em abrir (3) e depois em iniciar upload. Ao término, o banner animado irá aparecer no seu álbum do Picasa. Clique sobre ele para ampliar e copie o endereço/url da imagem (figura 9).

Abra o gadget html/javascript e cole o seguinte código, com as modificações

<a href="endereço do site"><img src="endereço da imagem" /></a>

Depois é só salvar e pronto – o banner animado estará visível no blog ;)