Quinta-feira, 09 de outubro de 2003 às 01h59

Construção web no Corel - Botões

Faltam -1 dias! Inscreva-se agora! O maior encontro de profissionais web da américa latina.

Olá pessoal! Obrigado pelos e-mails sobre a primeira parte sobre como criar um site a partir do Corel Draw. Quero avisar que acho que estive com problemas no ramek@pop.com.br. Caso eu tenha deixado de responder algum e-mail, me reenvie por favor.

Vamos lá!

01. Para quem não viu a matéria anterior, é necessário ter em seu computador o logotipo pronto, pois iremos usar uma parte dele sem que tenhamos que desenhar novamente. Clique aqui para baixar o logotipo prontinho em extensão .cdr.

02. Para criar o botão é muito simples. Selecione o retângulo na caixa de ferramentas e desenhe na sua área de trabalho um retângulo. Não se preocupe com o tamanho, definiremos no passo seguinte.

03. Na barra de propriedades defina a seguinte medida: 218x13pixels.

04. Clique na cor verde na caixa de cores. E, para tirar o contorno, clique com o lado direito em cima da cor verde novamente. Na realidade você não estará tirando o contorno e sim pintando de verde.

05. Ative novamente a ferramenta retângulo e desenhe o mesmo do tamanho de 164x15 pixels.
Pinte da cor amarelo e com contorno amarelo.

06. Agora posicione-os como na imagem abaixo:

07. Lembra do logotipo que criamos? Vamos aproveitar aquelas duas luas pequenas da cor verde.

08. Estando com eles na sua mesma área de trabalho, vamos montá-lo para concluirmos o botão.

09. Selecione uma lua de cada vez e na barra de propriedades coloque as seguintes medidas: 20x31pixels. Depois selecione a outra lua verde e coloque a mesma medida.

10. Agora precisamos espelhar qualquer um dos dois objetos. Selecione qualquer uma das luas verdes e clique na barra de propriedades em Espelhar.

11. Ficará desta forma. Veja a imagem abaixo:

12. Agora posicione até que fique igual a imagem abaixo:

13. Se você reparar no exemplo do nosso site (matéria anterior), ele tem uma sombra em preto. Pode criar uma sombra com o botão sombra projetada. Mas não é essa a idéia. Vamos fazer de outra forma. Selecione com a ferramenta seta branca os dois objetos e vá ao Menu Organizar/Agrupar.

14. Feito isso, pinte o logo agrupado de preto na caixa de cores.

15. Porque pintamos de preto? Porque faremos este logo como se fosse uma sombra.
Então, com o logotipo ainda selecionado, duplique o mesmo. Ative o Menu Editar / Duplicar.

16. Após ter duplicado o logotipo, pinte de verde na caixa de cores.

17. Pronto agora é só posicionar o logotipo verde em cima do logotipo preto. Caso aconteça de ficar por debaixo do logotipo preto. Use a tecla de atalho: SHIFT + PAGEUP no teclado (para cima) ou SHIFT + PAGEDOWN (para baixo). Ou ative o menu Organizar / Ordernar / Para Frente.

18. Feito isso, posicione para que fique aparecendo apenas um pouco da parte do logotipo preto. Como na imagem abaixo:

19. Selecione todo o logotipo e mande agrupar para que possamos arrastá-lo todo de uma vez para onde você quiser na sua área de trabalho. Posicione em cima do botão como mostra a figura abaixo:

20. Agora ative a ferramenta Texto na caixa de ferramentas e digite: Quem Somos. Defina como fonte: Bank Gothic MD BT e tamanho 3. Caso não possua esta fonte. Coloque Arial.

21. Pronto! Nosso primeiro botão está concluído. Para fazer o restante, selecione todos os objetos e mande duplicar no Menu Editar / Duplicar.

22. Clique na Ferramenta Texto e clique em cima do texto: Quem Somos. Delete para ir apagando o texto QUEM SOMOS, assim você pode aproveitar a fonte e o mesmo tamanho. E escreva: Educação Infantil.

23. Para continuar é só ir duplicando os botões e trocando o texto.

Beleza então! Agora já temos todos os botões prontos juntamente com a criação do logotipo da aula passada. Semana que vem iremos fazer a parte superior juntamente com o endereço.
Lembrando que é importante que todo o desenvolvimento do projeto do site seja feito no mesmo arquivo da primeira aula, pois já está definido o tamanho da área do site.

Para quem não sabe ainda, estaremos realizando um congresso em São Paulo. CONGRESSO DE TECNOLOGIAS PARA INTERNET. Só vai ter fera neste congresso e eu estarei por lá assistindo. E quero que todos vocês compareçam neste congresso para trocarmos figurinhas pessoalmente. Para saber mais clique aqui.

Nenhum comentário até agora

Cancelar resposta

Qual a sua opinião?

Faça login abaixo ou cadastre-se rapidamente.


Sobre o Autor
Alex Falcão é formado em Processamento de Dados pelo Objetivo e TI pela Faculdade Radial, é Instrutor da Microlins (Unidade Socorro) e também escreve para as Revista Webdesign e Silk & Sign.

2001 - iMasters FFPA Informática Ltda - Todos os direitos reservados.