T05 Tabela Glow - formatação adian

    

T05 Tabela Glow

Com esse tutorial vamos aprender a usar o script de efeito glow sobre a tabela.

Primeiramente crie o background. Você pode optar por um de sua preferência ou seguir o tutorial sugerido.  Lembrando que como a tabela fica à direita da área da mensagem, fica mais interessante se usar um back com imagem à esquerda.

 

° Escolha duas cores ton-sur-ton e coloque no foreground e no background.
º Nova imagem transparente de 400 x 400 preencha com a cor clara.
° Nova layer, coloque a cor mais escura no foreground ative a ferramenta Air Brush configurada assim:

  

e pinte toda a layer o mais uniformemente possível.

Merge visible.
° Effects/Artistic Effects/Halftone

° Effects/Image effects/Seamless tile/default
º Abra nova layer de 1024 x 400 e preencha com essa pattern

Motivo lateral

º Tire a visibilidade da layer do back. Nova layer. Coloque a pattern no background e a cor mais escura no foreground.
Ative a ferramenta preset shape e escolha um do seu agrado (sem muitos detalhes) e trace configurado assim:

  

° Lembrete: A imagem lateral não deve ultrapassar 340 px na horizontal.

º Com a Magic Hand selecione a parte transparente, Selections/Invert > Nova layer > Effects/ 3D Cutout.

º Mantenha a seleção > Gaussian blur 10
° Nova layer, repita o Cutout com valores negativos. Gaussian blur 10
°Una as layer da figura lateral, aplique Drop shadow. Volte a visibilidade da layer do fundo e merge all.

Outros exemplos:

Vamos usar o processo de substituição de código e depois complementá-lo.

1 - Abra uma nova mensagem.
2 - Clique na abinha "Origem"
3 - Delete todo o código existente e cole em seu lugar o código abaixo:

Tabela com Efeito Glow

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=windows-1252"><BASE
href=file://E:\Stats\Scrolls\LeftScrolls-BgStrip\GlowMessageboxLeftScroll\><!------------------------------------------------------------
Glow Messagebox Left Scroll
Script written by DorothyIrene

MATERIALS REQUIRED
An image at least 1400 px in width, seamless vertically,
A midi or wav,
--------------------------------------------------------------->
<STYLE type=text/css>BODY {
BORDER-RIGHT: #000000 8px ridge; BACKGROUND-POSITION: left top; BORDER-TOP: #000000 8px ridge; BACKGROUND-ATTACHMENT: scroll; BORDER-LEFT: #000000 8px ridge; SCROLLBAR-ARROW-COLOR: #000000; BORDER-BOTTOM: #000000 8px ridge; BACKGROUND-REPEAT: repeat; SCROLLBAR-BASE-COLOR: #ffffff; BACKGROUND-COLOR: #ffffff
}
IMG.pn1 {
Z-INDEX: 5; LEFT: -1800px; POSITION: absolute; TOP: -1800px
}
DIV.pn2 {
BORDER-RIGHT: #000000 5px inset; BORDER-TOP: #000000 5px outset; LEFT: -1800px; BORDER-LEFT: #000000 5px outset; WIDTH: 10px; BORDER-BOTTOM: #000000 5px inset; POSITION: absolute; TOP: -1800px; HEIGHT: 10px
}
DIV.bz1 {
BORDER-RIGHT: #000000 5px double; PADDING-RIGHT: 10px; BORDER-TOP: #000000 5px double; PADDING-LEFT: 10px; FONT-SIZE: 14pt; LEFT: 10px; VISIBILITY: hidden; PADDING-BOTTOM: 10px; OVERFLOW: auto; BORDER-LEFT: #000000 5px double; WIDTH: 70%; COLOR: #000000; SCROLLBAR-ARROW-COLOR: #000000; PADDING-TOP: 10px; BORDER-BOTTOM: #000000 5px double; FONT-FAMILY: papyrus; SCROLLBAR-BASE-COLOR: #ffffff; POSITION: absolute; TOP: 10px; HEIGHT: 70%; BACKGROUND-COLOR: #ffffff; TEXT-ALIGN: center
}
</STYLE>
<!--image - make width at least 1400px to cater for larger screens-->
<META content="MSHTML 6.00.6000.16481" name=GENERATOR></HEAD>
<BODY bgColor=#ffffff
background=""
scroll=auto>
<DIV><FONT face="Trebuchet MS" color=#000080></FONT>&nbsp;</DIV>
<DIV>&nbsp;</DIV><!--midi or wav--><!--messagebox--><!--adjust leftpos in the Changes & User Settings section in the VB Script below-->
<DIV class=pn2 id=mz2 style="Z-INDEX: -1"></DIV>
<DIV class=bz1 id=mz1>
<DIV>&nbsp;</DIV>
<DIV>Texto aqui</DIV>
<DIV>&nbsp;</DIV>
<SCRIPT language=VBScript>
option explicit
setLocale("en-au")
dim dz, ez, docw, doch, c, d, mzw, sp, backW, bw, gc, gs, leftps
dz=""
ez=" "
c=0
d=0

'-----------------------------------------------------------
'<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
'-----------------------------------------------------------
'Script written by DorothyIrene
'© DorothyIrene Designs May 2005
'You are welcome to use this script but
'please do not remove these credits
'This script is encoded and can be traced
'----------------------------------------------------------
'<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
'----------------------------------------------------------

'===============================================
'========= changes and user settings section =========

'place your ticker message between the quotes
window.status=dz&ez&"MENSAGEM DE RODAPÉ"

'messagebox spacer
sp=40

'messagebox outer background width
backW=1

'set glow colour and strength
gc="#c0c0c0"
gs=12

'left position of messagebox
leftps=390

'======end of changes and user settings section ======
'===============================================

mz1.style.filter="progid:DXImageTransform.Microsoft.Glow(color="&gc&", strength="&gs&")"
mz2.style.filter="progid:DXImageTransform.Microsoft.Glow(color="&gc&", strength="&gs&")"

sub window_onLoad()
docw=document.body.clientWidth
doch=document.body.clientHeight
bw=5
mz1.style.borderWidth=bw&"px"
mz2.style.borderWidth=bw&"px"

if docw<=(leftps+sp*2+bw*4+gs*6+backW*2) or doch<=(sp*2+bw*4+gs*6+backW*2) then
mz1.style.visibility="hidden"
mz2.style.visibility="hidden"
else
mz1.style.left=leftps+sp+gs*3+backW
mz1.style.width=docw-(leftps+sp*2+bw*4+gs*6+backW*2)
mz1.style.top=sp+gs*3+backW
mz1.style.height=doch-(sp*2+bw*4+gs*6+backW*2)
mz1.style.visibility="visible"

mz2.style.left=leftps+sp
mz2.style.width=docw-(leftps+sp*2+gs*2)
mz2.style.top=sp
mz2.style.height=doch-(sp*2+gs*2)
mz2.style.visibility="visible"
end if
z15
end sub

window.setInterval "scrollit",64

sub scrollit()
c=c+1
document.body.style.backgroundPosition=d&" "&-c
end sub

sub z15()
'important do not remove this
end sub

sub window_onResize
window_onLoad
end sub

</SCRIPT>
</DIV></BODY></HTML>

5 - Vá na abinha Editar e insira o Background utilizando Formatar/Plano de fundo/ Imagem.
6 - Agora vamos colorir as bordas do email, as bordas da tabela, e barra de rolagem, pois todos esses códigos já constam do script.

Localize o código das bordas do email e da barra de rolagem. 

Os códigos que estão em verde correspondem à borda do email e os que estão em rosa são os da barra de rolagem. Substitua-os pelos códigos das cores que preferir, mas tomando o cuidado de escolher cores que combinem com seu background. Em azul a largura das bordas e em laranja o estilo.

<STYLE type=text/css>BODY {
BORDER-RIGHT: #000000 8px ridge; BACKGROUND-POSITION: left top; BORDER-TOP: #000000 8px ridge; BACKGROUND-ATTACHMENT: scroll; BORDER-LEFT: #000000 8px ridge; SCROLLBAR-ARROW-COLOR: #000000; BORDER-BOTTOM: #000000 8px ridge; BACKGROUND-REPEAT: repeat; SCROLLBAR-BASE-COLOR: #ffffff; BACKGROUND-COLOR: #ffffff

Agora vamos colorir as bordas das Tabelas.

Localize os trechos abaixo e troque os códigos das cores.
Sugiro que troque os que estão em verde pelo mesmo que usou para a borda do email. Os em azul a largura e os em laranja o estilo das bordas das tabelas.
Os códigos que estão em rosa, são os da barra de rolagem da caixa de texto e o em roxo pela cor do fundo da tabela. Sugiro que use o mesmo para os dois.
Os códigos em azul são respectivamente a cor e o nome da fonte. Para trocar a fonte basta alterar o nome dela. Lembrando que sempre é necessário usar as fontes originais do Windows.

DIV.pn2 {
BORDER-RIGHT: #000000 5px inset; BORDER-TOP: #000000 5px outset; LEFT: -1800px; BORDER-LEFT: #000000 5px outset; WIDTH: 10px; BORDER-BOTTOM: #000000 5px inset; POSITION: absolute; TOP: -1800px; HEIGHT: 10px
}
DIV.bz1 {
BORDER-RIGHT: #000000 5px double; PADDING-RIGHT: 10px; BORDER-TOP: #000000 5px double; PADDING-LEFT: 10px; FONT-SIZE: 14pt; LEFT: 10px; VISIBILITY: hidden; PADDING-BOTTOM: 10px; OVERFLOW: auto; BORDER-LEFT: #000000 5px double; WIDTH: 70%; COLOR: #000000; SCROLLBAR-ARROW-COLOR: #000000; PADDING-TOP: 10px; BORDER-BOTTOM: #000000 5px double; FONT-FAMILY: papyrus; SCROLLBAR-BASE-COLOR: #ffffff; POSITION: absolute; TOP: 10px; HEIGHT: 70%; BACKGROUND-COLOR: #ffffff; TEXT-ALIGN: center

Escreva sua mensagem de rodapé no local indicado.
Agora localize o trecho abaixo e vamos ver as alterações que você pode fazer nesse script:

'messagebox spacer
sp=40

'messagebox outer background width
backW=1

'set glow colour and strength
gc="#c0c0c0"
gs=12

'left position of messagebox
leftps=390

O valor em azul determina a distância entre a tabela e a margem direita da borda da mensagem.
O código em rosa determina a cor do efeito e o valor em verde a largura do efeito.
O valor em roxo determina a distância entre a tabela e a margem esquerda da mensagem.

7 - Colado o script, complementado e feita as alterações necessárias cheque o efeito na abinha "Visualizar":
7 - Checado e tudo certinho ,Volte a abinha "Editar" e complete a formatação com:
Uma  música

Um texto






T05 - Envie para o grupo um e-mail formatado como foi ensinado nesse tutorial.
Ele deverá conter:
Script com o efeito glow na tabela
Background com imagem lateral
Texto
Música
Assinatura (opcional)




Não esqueça, por favor:
Colocar no assunto: seu nome ou nick - T05 - Efeito Glow na Tabela
No corpo do e-mail coloque o endereço correspondente a esse tutorial como hiperlink numa imagem pequena ou palavra.
Verificar o peso de sua mensagem.
Não esqueça do anti-banner

Copyright© 2002/2007 Dama Da Noite * Todos os direitos reservados*

Esse  tutorial foi criado por Esmê, em junho de 2007, especialmente para o Grupo PSP Brasil. 

É expressamente proibida, por lei, a divulgação desta página em outro site ou qualquer outro modo de veiculação sem a autorização expressa da autora ou dos detentores de copyright do texto, da formatação e dos demais elementos que compõem a página. 

Direitos Autorais protegidos pela Lei 9.610 de 19/02/1998.