Nesse artigo veremos como criar um menu para site usando o efeito Rollovar (sobreposiĂ§Ă£o) no Corel Draw.
1º Passo
Crie um arquivo com o seguinte tamanho: 778 x 80 pixels. Agora Crie um retĂ¢ngulo com a mesma medida.
Para criar um retĂ¢ngulo do mesmo tamanho do palco, basta vocĂª selecionar a ferramenta RetĂ¢ngulo e dar um duplo clique sobre o palco.
2º Passo
Preencha o retĂ¢ngulo com uma com uma cor sĂ³lida ou uma textura. Selecione o retĂ¢ngulo e clique na ferramenta Preenchimento de Textura (para preencher com uma textura) ou apenas clique na cor desejada na paleta de cores com o botĂ£o esquerdo do mouse, para obter um preenchimento sĂ³lido.
![](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uEJcsjAcgmh1dvneYeEl1W3akD_-Fi1Tka1IEot_7U3Oo8_JFUqwISBQX1RDjssfbZgnSNY-ZMp06VNEzd2zQOLcpP6T0jT5CP2Z45ptLVOhcrNTSOeyqLEjzX1R0zmr88k0qt1eo85Dva1WngnW998gbUdyc=s0-d)
3º Passo
Depois de terminado o triĂ¢ngulo, criaremos agora os links.
Utilizando a ferramenta Texto, crie os seguintes itens para o menu: Home, Perfil, PortfĂ³lio e Contato.
NĂ£o escreva todos os textos em um mesmo parĂ¡grafo.
![](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_spdpCBBmyxOXHY3ReH540-iM53yJzJux549T5MNeXmQTFCuYH-uOhF8ZhfjGXmAOxqWbiycluy26JqxIz2Ikma30g6KjRtlk3VuCLkXBNdKk_1yg0F50kCe62ipIEK0tDXYTRv17ML-QhmQIvQWQck3Qx5uwc=s0-d)
4º Passo
A partir de agora criaremos o efeito rollover (sobreposiĂ§Ă£o).
Com a ferramenta SeleĂ§Ă£o ativada, clique sobre o item HOME.
VĂ¡ em menu Efeitos > Efeitos de AtivaĂ§Ă£o > Criar Efeitos de AtivaĂ§Ă£o. VĂ¡ novamente em menu Efeitos > Efeitos de AtivaĂ§Ă£o > Editar Efeitos de AtivaĂ§Ă£o, em, seguida abrirĂ¡ uma janela com propriedades da internet, como a mostrada abaixo.
![](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_tWcBBbGDZIhVv0wNiQZPtL5EwdgwUAlqPCP24iiik2b19fNU1X6WEGwdoKQM1dDk5_-lYaCKqKlHbMkWlyOPJeK7_gxZFSLLpqA94AMPJgH87BNSiCn4JPuD0yYTwdrUmMp-LqYKK0iqsaWKKvacre3GwDGw=s0-d)
É possĂvel utilizar tambĂ©m as propriedades que aparecem logo abaixo do palco, conforme mostra figura a seguir, ao invĂ©s de utilizar a barra de ferramentas Internet, mostrada na figura acima.
![](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_v38AJLHqTsUIUvaiT-4w3Uep8KScNSyZTBI2uOVkBgAox7vQhWIq40vhr24Xxav8cF4aFOYOywjehZx9r_e1bODbqzqIjqrHoxaM67IcAJqJXmQmhTdbTTBvlhDwegvpSp2rxKhecXLJXGtmEIX4FgPooG8-ld=s0-d)
Explicando as abas
NORMAL: essa aba Ă© responsĂ¡vel pela configuraĂ§Ă£o no link em situaĂ§Ă£o normal, sem receber nenhuma aĂ§Ă£o do mouse.
SOBRE: as configurações feitas nessa aba serĂ£o vistas quando o mouse estiver sobre o link.
CLICADO: as configurações dessa aba acontecerĂ£o quando o link for clicado.
5º Passo
Note que a aba NORMAL estĂ¡ selecionada, a configuraĂ§Ă£o que voe der ao texto nessa aba serĂ¡ a configuraĂ§Ă£o que ele terĂ¡ quando nĂ£o estiver sofrendo ações do mouse, como clique, passar sobre o texto...
Deixe a configuraĂ§Ă£o da aba normal como estĂ¡. Clique na aba SOBRE e aplique a configuraĂ§Ă£o desejada. No caso do artigo, apenas alterei a cor da fonte para vermelho.
![](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uVSqmixlUzdUf5H11nvMq9nrxBK_Z9_QiNX-rcG8EZ01DpIrn9nPo_VdnC3qbicg6mMB8MgyeJFHTAaiyN16xReJRg1povw02rvaIERWlokEvc9tfxSwBkM8Nyu3DQY_LHL2zBSi52yJ8JXvKAV55BMUiVUuA=s0-d)
6º Passo
Clique na aba CLICADO e altere as propriedades de acordo com o seu desejo. Apliquei a cor verde.
![](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_urvQLnsAZnxkALdpBPN-o_cJWosfgmJ9mq2lZV0WkXgmzJOfS4ArH2MdpTAdeqCcAO_mC02uetWI1URBmwY3nQNRjaz5AR2-zTLMvHRyc4ab00hF20yRkq9COutNVloCrVIKYyzwYVpFpmGWn25dAimwngkYQ=s0-d)
Para colocar um link no item do menu, clique com o botĂ£o direito do mouse sobre ele e vĂ¡ em propriedades. Uma janela como a da figura abaixo se abrirĂ¡, aĂ basta colocar o endereço da URL que vocĂª quiser.
![](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uo5jT9eOxzXrP0v7qgf2DsUjb2MDnS3NcG7P1MaIT60qnmBl2ATItqzM7Vn9husWWxfnRzlVzs8VDphrCKNvG9qSugmKALWz1tXHLLd1x-U1Jsri2B7waO7_TCJGhobJjKZiSUP3mUqgOTIadh5M_ktgbhgA=s0-d)
Depois de ter configurado os efeitos, clique em Concluir EdiĂ§Ă£o de Objeto, ao lado da aba NORMAL.
![](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_tNUuz0ruDMhDbcjHFwG0zkzngPS4LtoTRKcGtDkgAKN-D0EPKki_yUccSMadUlheQrtqvvAPN0DbVEE27NHWeDfxt5a0GguuCiPx6VYut8OPr1dbkVVTIlh0A5rgpSIdG5NAOTVR5KVnTO2uwFspO2xp_mMA=s0-d)
Agora repita os passos de 4 a 6 para os outros itens do menu.
Para ver o efeito funcionando dentro mesmo da Ă¡rea de trabalho do Corel, clique no botĂ£o visualizar ao vivo, na barra de ferramenta da Internet, como mostrado abaixo.
![](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_v1JBpjV4OMGuqTlI-pDJSOWyu-GwGeUtDCPietj5ktdM4N5GsfJ8Iwbwq1ePMBkb0axX4m0q2DDEjIGpmtKKM8VduTNFEnnQNWnbE1y3Lh49abZ0BLDdPQJk8SuIg-enZzdECfpvRRTJkz7bbnQbbns9I-xwz8bg=s0-d)
7º Passo
A partir daqui iremos seguir os passos para publicar o trabalho para web.
Para isso, faça o seguinte: Arquivo / Publicar na Web / Flash Incorporado em HTML . Salve como menutopo e clique em OK.
Uma nova janela se abrirĂ¡, nela, ative a guia HTML.
![](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_tQ3xYfdskfckocipWN-qHYHfzu7dvvYClWW_2rO3dtJoq6CCL_mYgP330YoCUZV7LkrDJtRd0QRTTE25GGP4B_7SzrvIGfpflQjEA6-jgax7G5Gb0JV5Kso0SUYkYbokcfQXw57NyNOoiaVOkXMcgYEQ=s0-d)
Altere as propriedades Largura para 778px e Altura para 80px. Em seguida clique em OK.
Para visualizar o efeito no seu navegador de internet, clique no botĂ£o Visualizar... dessa mesma janela, antes de clicar em OK.
Bem pessoal, chegamos ao final de mais um artigo. Tenho certeza que vocĂªs gostaram de mais uma dica para criar peças para a web atravĂ©s do Corel Draw.
O importante nĂ£o Ă© fazer igual ao artigo, mas que atravĂ©s dos passos e mĂ©todos explicados vocĂªs criem o melhor que puderem, com o mĂ¡ximo de criatividade e profissionalismo.
AtĂ© a prĂ³xima
1º Passo
Crie um arquivo com o seguinte tamanho: 778 x 80 pixels. Agora Crie um retĂ¢ngulo com a mesma medida.
Para criar um retĂ¢ngulo do mesmo tamanho do palco, basta vocĂª selecionar a ferramenta RetĂ¢ngulo e dar um duplo clique sobre o palco.
2º Passo
Preencha o retĂ¢ngulo com uma com uma cor sĂ³lida ou uma textura. Selecione o retĂ¢ngulo e clique na ferramenta Preenchimento de Textura (para preencher com uma textura) ou apenas clique na cor desejada na paleta de cores com o botĂ£o esquerdo do mouse, para obter um preenchimento sĂ³lido.
3º Passo
Depois de terminado o triĂ¢ngulo, criaremos agora os links.
Utilizando a ferramenta Texto, crie os seguintes itens para o menu: Home, Perfil, PortfĂ³lio e Contato.
NĂ£o escreva todos os textos em um mesmo parĂ¡grafo.
4º Passo
A partir de agora criaremos o efeito rollover (sobreposiĂ§Ă£o).
Com a ferramenta SeleĂ§Ă£o ativada, clique sobre o item HOME.
VĂ¡ em menu Efeitos > Efeitos de AtivaĂ§Ă£o > Criar Efeitos de AtivaĂ§Ă£o. VĂ¡ novamente em menu Efeitos > Efeitos de AtivaĂ§Ă£o > Editar Efeitos de AtivaĂ§Ă£o, em, seguida abrirĂ¡ uma janela com propriedades da internet, como a mostrada abaixo.
É possĂvel utilizar tambĂ©m as propriedades que aparecem logo abaixo do palco, conforme mostra figura a seguir, ao invĂ©s de utilizar a barra de ferramentas Internet, mostrada na figura acima.
Explicando as abas
NORMAL: essa aba Ă© responsĂ¡vel pela configuraĂ§Ă£o no link em situaĂ§Ă£o normal, sem receber nenhuma aĂ§Ă£o do mouse.
SOBRE: as configurações feitas nessa aba serĂ£o vistas quando o mouse estiver sobre o link.
CLICADO: as configurações dessa aba acontecerĂ£o quando o link for clicado.
5º Passo
Note que a aba NORMAL estĂ¡ selecionada, a configuraĂ§Ă£o que voe der ao texto nessa aba serĂ¡ a configuraĂ§Ă£o que ele terĂ¡ quando nĂ£o estiver sofrendo ações do mouse, como clique, passar sobre o texto...
Deixe a configuraĂ§Ă£o da aba normal como estĂ¡. Clique na aba SOBRE e aplique a configuraĂ§Ă£o desejada. No caso do artigo, apenas alterei a cor da fonte para vermelho.
6º Passo
Clique na aba CLICADO e altere as propriedades de acordo com o seu desejo. Apliquei a cor verde.
Para colocar um link no item do menu, clique com o botĂ£o direito do mouse sobre ele e vĂ¡ em propriedades. Uma janela como a da figura abaixo se abrirĂ¡, aĂ basta colocar o endereço da URL que vocĂª quiser.
Depois de ter configurado os efeitos, clique em Concluir EdiĂ§Ă£o de Objeto, ao lado da aba NORMAL.
Agora repita os passos de 4 a 6 para os outros itens do menu.
Para ver o efeito funcionando dentro mesmo da Ă¡rea de trabalho do Corel, clique no botĂ£o visualizar ao vivo, na barra de ferramenta da Internet, como mostrado abaixo.
7º Passo
A partir daqui iremos seguir os passos para publicar o trabalho para web.
Para isso, faça o seguinte: Arquivo / Publicar na Web / Flash Incorporado em HTML . Salve como menutopo e clique em OK.
Uma nova janela se abrirĂ¡, nela, ative a guia HTML.
Altere as propriedades Largura para 778px e Altura para 80px. Em seguida clique em OK.
Para visualizar o efeito no seu navegador de internet, clique no botĂ£o Visualizar... dessa mesma janela, antes de clicar em OK.
Bem pessoal, chegamos ao final de mais um artigo. Tenho certeza que vocĂªs gostaram de mais uma dica para criar peças para a web atravĂ©s do Corel Draw.
O importante nĂ£o Ă© fazer igual ao artigo, mas que atravĂ©s dos passos e mĂ©todos explicados vocĂªs criem o melhor que puderem, com o mĂ¡ximo de criatividade e profissionalismo.
AtĂ© a prĂ³xima
0 ComentĂ¡rios
Deixe seu comentĂ¡rio sobre o artigo a cima fique Ă¡ vontade, seu comentĂ¡rio Ă© muito importante !