LOGIN:

iMasters | Por uma internet mais criativa e dinâmica

Feeds

Quinta-feira, 28/08/2003 - 01:59 - Por Alex Falcão
Seções relacionadas:

Efeito rollover no Corel Draw

Nesta semana estaremos falando sobre o programa mais conhecido do Corel Suite, que é o Corel Draw. Primeiramente uma breve introdução:

O CorelDRAW é um aplicativo de design gráfico intuitivo que proporciona aos designers uma experiência de trabalho mais agradável.

O que vou ensinar aqui neste artigo talvez não dê certo em seu micro quando você for publicar para web. Tentei durante duas semanas publicar e o efeito não funcionava para Web.

A idéia não é ensinar a desenhar um botão ou até mesmo um layout, mas sim como fazer o efeito de sobrepor.

Obs: No final do tutorial encontrei a solução para fazer funcionar na web.

01. Primeiramente vamos definir na barra de propriedades as seguintes medidas

02. Depois de um duplo clique na ferramenta retângulo que se encontra na caixa de ferramentas.

Obs: Quando você dá um duplo clique, cria-se o objeto exatamente do tamanho do palco que você criou e aparece uns quadradinhos preto nas extremidades.

03. Agora vamos dar um preenchimento de textura ao nosso objeto. Na caixa de ferramentas pressione o botão do mouse em cima do botão Ferramenta Preenchimento na caixa de ferramentas e selecione depois Caixa de diálogo preenchimento de textura.

Na janela que se abre selecione Exemplos / Aerógrafo.

04. Agora vamos dar um efeito muito interessante e que particularmente é o que mais gosto no Corel Draw. Ferramenta Transparência Interativa.

Então na caixa de ferramentas ative o botão que esta abaixo da Ferramenta Texto.

Não mencionei o nome da ferramenta pois tem vários e como não sei qual é que esta selecionado em seu computador dei como referência que esta situado abaixo da ferramento texto. Feito isso você selecionará a ferramenta transparência interativa.

05. Após ter selecionado a ferramenta transparência interativa - Leve o mouse para o lado esquerdo do seu objeto e arraste até o final do lado direito.

06. Ficará desta forma:

07. Se você quiser deixar mais claro arraste o ponteciometro totalmente para a esquerda. Criando assim uma transparência bem suave.


Imagem mais suave

08. Bom, mas se você quiser deixar sumir mais gradativamente. Arraste o quadrado preto um pouco para a esquerda.

Ficará desta forma:

09. Foi somente uma sugestão arrastar o quadrado para a esquerda, então volte ele para sua posição como estava anteriormente.

10. Ative a ferramenta Texto e digite no seu palco: www.imasters.com.br e repita o procedimento de ferramenta transparência interativa. Só que ao invés de fazer da direita pra esquerda, vamos fazer ao contrário. Da esquerda para a direita.

11. Agora vamos criar nossos links. Ative a ferramenta texto novamente e digite: Quem Somos - Portifólio - Colunistas. Com fonte Arial e tamanho 3.

Obs: Não escreva os links num parágrafo só. Faça o seguinte: Escreva Quem Somos e coloque arial e fonte 12.
Depois selecione novamente a ferramenta Texto e escreva Portifólio e assim sucessivamente.

12. Agora vamos dar o efeito de sobreposição(Rollover).

Clique na ferramenta Seta Branca(Ferramenta de Seleção) que se encontra na caixa de ferramenta e selecione Quem Somos primeiramente.

13. Clique no menu Efeitos / Efeitos de Ativação / Criar Efeito de Ativação

14. Com o texto ainda selecionado retorne novamete ao menu Efeitos / Efeitos de Ativação / Editar Efeito de Ativação.

Obs: Repare que abrirá uma janela de propriedades da internet.

15. Quando você executa este passo aparece uma janela de propriedades da internet

Obs: Nós podemos usar as propriedades desta barra que se abriu ou usar as opções que se encontra logo abaixo do seu palco. Repare que na parte inferior da sua tela aparece: finalizar edição de efeito ativação - NORMAL - SOBRE e etc...

16. Então vamos fazer o seguinte: Repare que o NORMAL esta selecionado. Clique no SOBRE e ative na caixa de cores a cor azul (como exemplo).

Obs: O SOBRE significa que ao passar o mouse ele trocar para a cor azul.

17. Agora ative a opção CLICADO. E escolha a cor Vermelha na caixa de cores.

18. Agora clique em Finalizar edição de efeito de ativação.

19. Depois é so fazer os mesmo procedimentos para os textos: Portifólio e Colunistas.

E para ver o efeito funcionar ative o botão visualizar ao vivo efeitos de ativação.

20. Até este momento ele funcionará tranquilamente. O problema é quando mandamos publicar para web.

Ops !! Acho que consegui. Finalmente descobri o problema. Quando eu mandava publicar na Web - Flash incorporado em HTML e mandava visualizar a imagem final ela ficava muito pequena.

Então percebi que há um campo em que temos que colocar o tamanho original da imagem, que no caso é de 778x80.

21. Vá até ao menu Arquivo / Publicar na Web / Flash Incorporado em HTML. Você salva como (menusuperior) e clique em OK. Irá abrir uma janela.

22. Nesta janela ative a Guia HTML.

23. Nesta mesma janela na opção Tamanho da Imagem - Defina largura como: 788 e Altura como: 80 e clique em Visualizar ou em OK.

24. Há ! Esqueci de mencionar uma coisa: No passo número 15. Você pode já colocar a URL.

25. Pronto ! Veja o efeito final clicando aqui.

Todos os artigos de Alex Falcão

10 comentários publicados

  • 1. Muito SHow

    Terça-feira, 23/11/2004, por Newton Wagner

    Muito massa. Alex, consegui fazer e ficou muito rox. Xau, abração e vlw


    Parabéns pela materia

    Responder comentário

  • 2. matéria

    Domingo, 28/11/2004, por Reinaldo Santos

    cara essa sua matéria sobre rollover é muito show mas no meu corel 10 num tem a opção Efeito de Ativação no menu Efeito. Se souber o porquê me mande resposta

    Responder comentário

  • 3. Com links não funciona

    Quarta-feira, 22/12/2004, por André Luis dos Santos

    Caro André,
    Utilizo o corel 12 e consegui fazer o efeito mas no momento em que coloquei os links; não funcionou mais o efeito, por que?

    Responder comentário

  • 4. Colocando a url

    Quarta-feira, 26/01/2005, por Americo Nery

    Eu consegui fazer tudo bem direito, adorei, n sabia como construir isso no corel dessa maneira... Levava muioto mais tempo, só não consegui colocar as urls nos links. Poderia me explicar como faço?
    Bjs

    Responder comentário

  • 5. Legal

    Domingo, 13/03/2005, por Manoel Divino

    Gostei bastante dessa matéria, Parabéns

    Responder comentário

  • 6. ( Deu tudo certo, mas no final... )

    Quarta-feira, 21/12/2005, por Adriana Marques

    Não consegui abrir o link.
    Eu coloquei na parte URL o link que deveria abrir quando o arquivo estivesse pronto (inclusive adicionei um texto para quando for clicar)
    Fui nos meus arquivos e abri o que eu salvei pra web, cliquei no link que criei antes e não abriu o site.
    QQ eu faço?

    Responder comentário

  • 7. Dúvida

    Domingo, 25/12/2005, por Fabio João da Rosa

    Ficou legal esse efeito.....parabéns

    Mas queria saber pq quando se salva em html fica uma esécie de chanfro no banner editado!!

    Valeu!!

    Responder comentário

  • 8. Link com problema

    Segunda-feira, 15/01/2007, por Paulo Gustavo

    Quando termino tudo, exporto em flash incorporado em HTML, quando vo olha ta tudo blz, os efeitos certin, e tals, mas quando clicko no que era pra ser um link, naum acontece nada, eh como se eu naum tivesse encaminahdo para URL nenhuma. O q eu faço, por favor, to precisando disso urgentementee!!

    Responder comentário

  • 9. url's

    Sexta-feira, 14/09/2007, por michel marchelli

    fiz tudo certo, só não consegui ativar os links, eles não vão.

    Responder comentário

  • 10. Como ativar os links

    Quinta-feira, 15/11/2007, por Nelson Schneider Monteiro

    Utilizo as ultimas versões do corel e flash. Parece que para que o link abra é preciso autorizar o link no sistema de segurança do Flash na internet. Quando se clica pela 1ª vez no link aparece uma mensagem e tem o botão settings, vc será redirecionado para o site do flash, click em edit e digite o endereço do link que deseja e depois em add. Pronto o link está funcionando

    Responder comentário

Poste um comentário


Os textos publicados neste espaço são de responsabilidade única de seus autores (colunistas e leitores) e podem não expressar necessariamente a opinião do iMasters.

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.


Indique para um amigo

captcha

TI SHOP Produtos iMasters

  • Lançamento: CD-ROM Treinamento Aplicado de SQL - Lançamento! Treinamento Aplicado de SQL - Aprenda a trabalhar com SQL com bancos de dados Oracle e SQL Server. São mais de 100 tópicos explicados por Mauro Pichilliani, um articulistas mais lidos do iMasters. Aproveite! Apenas R$ 69,90 no TI SHOP.
  • Lançamento: Livro iMasters "O Encontro de 2 Mundos"- Este livro conta com 56 crônicas de profissionais mais admirados e influentes do mercado brasileiro de Internet. Aproveite o preço especial para leitores do iMasters. Apenas R$ 40,00 e envio imediato!
  • DVD Curso Completo de Photoshop - Do conceito à finalização Lançamento! Curso Completo de Photoshop, em DVD, com mais de 230 aulas dividas em 4 módulos: conceito, básico, avançado e finalização. Apenas R$ 69,50 no TI SHOP - Frete com 50% de desconto
  • DVD Javascript Starter - Curso Completo Com mais de 9 horas de vídeo-aulas, é um curso completo sobre Javascript. Ideal para quem deseja aprender a linguagem. Apenas R$ 64,90 no TI SHOP - Frete com 50% de desconto!

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