A ARTE DE GUACIRA SAMPAIO ROCHA 2008

Swap Images ( no Dreamweaver4 )

mais um botão maluco!


"passe o mouse sobre a imagem"

 

Você vai precisar do Paint Shop Pro7 instalado em sua máquina, além do Dreamweaver4

Siga os passos:

1
Aproveite a imagem que usou no tutorial 05 = "Halo colorido". Abra essa imagem e crie uma "New layer" sobre a anterior. Você guardou um cópia dessa imagem pronta no formato nativo do Paint Shop Pro ( ".psp" ), não guardou? Se não guardou, que pena! Você terá de refazer todo o seu trabalho se não quiser perder em resolução de imagem... Mas se guardou, siga agora o próximo passo.

2
Abra a imagem original (o gato, em nosso exemplo) que gerou o tutorial 05, "Copy" e "Paste as new selection" (estando na layer recém criada) exatamente sobre o gato (figura central, sem o halo) cuidando para que as duas imagens fiquem exatamente uma sobre a outra - para conseguir um resultado perfeito, use a ferramenta "Zoom" e amplie uma das partes superiores da imagem várias vezes, facilitando assim a sobreposição da outra no lugar exato, pixel sobre pixel. Veja a imagem:

 

3
Retorne o seu trabalho para uma visualização normal. Na layers palette, desabilite a visualização da layer do gato com o halo colorido. Crie uma nova layer e arraste-a para baixo do gato sem halo (recém colado), e preencha com a mesma cor, ou textura que usou como plano de fundo para o gato com halo.

4
Você terá agora, visível, um gato sem halo sobre o mesmo fundo do anterior. E terá também, invisível, a layer do gato com halo colorido.

5
Deixe exatamente como está, e clique em "File/Export/JPEG Optimizer". Salve seu trabalho, com um nome diferente do anterior, ambos na mesma pasta.

6
Resumindo: você tem duas imagens guardadas na mesma pasta - uma com um sombreado colorido e outra, idêntica, mas sem nenhum sombreado.


No Dreamweaver

1
Insira a imagem sem o halo no local desejado. Selecione a imagem e, em Properties, defina um nome para ela. Exemplo: cat.

2
Em Behaviors, clique no botão "+" para abrir o menu de comportamentos, e clique sobre "Swap Images".

3
Na janela que se abrir, já com o nome da imagem, que acabou de definir, selecionado, clique em "Browse" no campo "Set source to:" para encontrar a imagem do gato sombreado, que será usada na troca de imagens.

4
Selecione "Preload Images" e "Restore image on mouse out". OK. Defina para a sua página a mesma cor de fundo das imagens (ou a mesma textura), se quiser obter um efeito semelhante ao que é apresentado em nosso exercício. Abaixo um exemplo com menor definição de sombra:

 


"passe o mouse sobre a imagem"


Visualize sua página no navegador (tecle F12) para testar o efeito.
Mãos à obra e...


Divirta-se!

Guacira Sampaio Rocha
direitos reservados
anteriorpróximo

Voltar voltar para tutoriais

home
galeria
arte virtual
scripts
Página 2
links
imagens digitais
guest book



premios

A ARTE DE GUACIRA SAMPAIO ROCHA 2008