Como Fazer um Título de Gadget para seu Template

Olá pessoal!

Hoje, irei ensinar vocês a fazer um Título de Gadget para você colocar em seu template. Bom, irei usar o Adobe Fireworks CS4 (qualquer versão serve). Primeiro, abra um novo arquivo (Ctrl + N) e coloque as dimensões de sua preferência:



Quando abrir, clique na Ferramenta de Retângulo (rectangle tool) e crie um retângulo grande o suficiente para cobrir toda a área em branco, pode ser até maior do que ela. O retângulo deve ser da sua cor de preferência. Veja:

Agora, o retângulo de fundo está criado. Faltam dois objetos para encerrarmos este tutorial, que são: O contorno e o retângulo de ondas (opcional), para criar um efeito bem bacana. 
Para fazer o contorno, iremos utilizar de novo a ferramenta de retângulo, só que iremos deixar o preenchimento transparente e aplicar cor somente nas configurações de contorno. Clique na Rectangle Tool e faça um retângulo tentando encostar em todas as extremidades da nossa área de trabalho. Depois para deixá-lo do tamanho correto, vá na caixinha lá de baixo e ajuste os tamanhos. Exemplo: Se você quiser que o contorno tenha 2 pixels de largura, diminua 2 pixels da altura e largura total das configurações que botamos lá no início (Primeira Imagem do Tutorial). 
O meu contorno terá 2 pixels de largura, então ajustei os tamanhos dele para os seguintes:


Depois dele estar com o tamanho correto, posicione-o no centro da imagem e ajuste as cores. A ideia é que ele seja mais escuro que o retângulo de fundo e tenha o preenchimento transparente. Veja como ficou o meu:


Agora ele já pode ser salvo, porém para não ficar muito simples, irei mostrar como criar o efeito de ondas. Que deverá estar entre as layers do retângulo de fundo e do retângulo de contorno. Clique na Pen Tool e clique na parte cinza perto da imagem na parte mediana esquerda, depois clique no centro da imagem e sem soltar o clique do mouse, arraste um pouco para baixo, depois solte. Então, complete dando um clique na parte de fora (mediana direita). Então feche o retângulo. Acompanhe com as imagens.
Peen Tool selecionada na imagem acima




Se não conseguiu fazer. Apague-o e tente refazer os passos. Tenho certeza de que você consegue. ;-) Finalizando, escolha uma cor mais clara que o retângulo de fundo, como as da imagens acima. E por último, clique no retângulo de contorno e aperte Ctrl + Shift +↑(setinha para cima). Se você tiver dificuldades de conseguir clicar no contorno, veja onde você deve clicar:

Esta é uma caixinha que se localiza no lado direito da sua tela. 

Com seu Título de Gadget pronto, aperte Ctrl + Shift + S para Salvar como... o seu arquivo. Então, hospede-o e cole o link no lugar do HTML Base que está escrito "LINK DO TÍTULO DE GADGET". Não esqueça de editar outras partes do HTML Base de acordo com o que fez, como o TAMANHO DA SIDEBAR, que deve ser o mesmo número da largura de seu título de gadget.

~Conrado

Nenhum comentário:

Postar um comentário