Como Fazer um Rodapé com Gradiente de Transparência

O tutorial de hoje será de rodapé. O toque diferencial que eu vou dar nele será um efeito de gradiente de transparência, ou seja, ele vai sumindo para um dos lados. Vamos começar!


Abra o FireWorks e ponha um tamanho de 982 pixels por 200 pixels (altura de sua preferência).

Então, antes de começar com as ferramentas, deixe o fundo da página transparente. Veja:

Clique no quadradinho branco, depois selecione a cor transparente ou coloque o hexadecimal: #FFFFFF. Agora faremos uma terminação para a sidebar, que deixa bem mais apresentável. Mais ou menos como no tutorial de cabeçalho solto ao corpo. Para isso, insira a imagem da sidebar de seu template.

Então, posicione a sidebar na parte de cima da imagem e vá alinhando todos os componentes. Por fim, faça um retângulo com a cor branca e o contorno igual ao das partes de sua sidebar.

Deixe igual à imagem acima. Agora é hora de montar nosso retângulo transparente. Primeiro faça uma retângulo com a cor do contorno do seu template. No caso, o azul mais escuro. Assim:

Agora faça um retângulo um pouco menor que esse. Não esqueça de tirar o contorno dos dois após fazê-los.

Aplique a cor clara (padrão) do seu template no retângulo menor. Depois vá alterando o tamanho dele para que pareça que o retângulo de baixo é o seu contorno.

Agora selecione os retângulos e selecione gradiente linear na cor. Faça isso nos dois. 

Agora clique somente em um dos retângulos e deixe-o com as mesmas cores no gradiente. Faça isso nos dois. 

Clique nas imagens para ampliá-las

Selecione os retângulos pela janela de Layers para não haver confusão quando eles tiverem com a mesma cor. ;-)

Agora, você irá mexer nessa linha preta, que diz a direção do gradiente. Arraste a bolinha dela para o lado mediano esquerdo e depois a parte quadrada para o lado mediano direito. Assim:

Clique na imagem para ampliá-la

Faça isso nos dois retângulos. Depois, vá na parte de escolha da cor e tire a opacidade de um dos lados. Depois selecione o outro retângulo e tire a opacidade desse mesmo lado. Assim:

Retângulo menor

Retângulo maior

Veja como está até agora:

Para terminar, basta adicionar as palavras e imagens que você quiser. Fica legal adicionar uma textura para o retângulo claro. O meu ficou assim:

~Conrado