Os backgrounds fixos são um show à parte,  pois permitem que a imagem

fique parada e o texto rode ao lado dela! Disse "lado"? Sim!! LADO...

Uma regrinha básica em formatação de papéis de emails  é de que

o texto nunca passe sobre a imagem.

Por isso a imagem fica sempre do lado, ou no caso dos tops: em cima.

 

Há uma exceção quando o fundo traz uma imagem com a opacidade bem

reduzida, mas isso poderemos falar em outro tuto... risos

 

Vamos comentar aqui o back fixo com imagem à direita!!

O mais comum para os backs fixos é que suas imagens fiquem  à esquerda,

mas esse aqui será diferente!!

Ahh! E a formatação também viu?

Vamos lá?

 

Top Fixo à direita

 

 

1- Escolha uma imagem que você deixará fixa no back.

Se precisar, redimensione-a para que não ultrapasse a largura de 300 pixels.

A altura dessa imagem deve ser no máximo de 300 pixels para que ela não

fique cortada na primeira visualização do monitor que é de 800 x 600.

 

2- Abra uma nova imagem de 1024 x 550.

Lembrando que 550 é a altura para que nosso back seja visualizado

sem faltar nada na configuração de 1024 x 768.

 

3- Escolha duas cores da sua imagem,

configure seu GRADIENTE da seguinte forma:

caso você não possua a textura SQUARES, clique aqui. 

4- Preencha a imagem que você abriu de 1024 x 550 com este gradiente.

 

5- Adicione uma nova layer, coloque-a atrás e pinte o fundo.

 

6- Layers / Merge visible

 

7- Aplique DUAS VEZES o blend emboss (FM TILE TOOLS).

 

8- Vá em EFFECTS / TEXTURE EFFECTS / WEAVE:

 

 

O Weave color deve combinar com o fundo.

 

9- Blend emboss opcional.

 

10- Agora vá na layer palete e diminua a opacidade dela em (+ ou -) 30%.

 

 

11- Layers/ MERGE ALL

Nessa altura do trabalho já fizemos o fundo do back fixo,

agora precisamos colocar as imagens nos lugares certos.

 

12- Posicione seu tube na lateral direita do back,

tomando o cuidado para que ela não ultrapasse os 300 pixels de altura,

e nem ocupe muito espaço na lateral (largura)

para não comprometer a digitação do texto no email.

 

 

Vamos analisar este posicionamento?

 

** A imagem está na lateral direita,

pois nosso back será fixo e o texto correrá à esquerda dela.

 

** A altura máxima que essa imagem deve ser posicionada é de 300 pixel,

além disso vai ficar cortada na visualização de 800 x 600.

 

** A visualização de 1024 x 600 vê o back por inteiro em sua largura,

mas na altura temos que respeitar os 300 pixels para não cortar a imagem.

 

** A visualização de 1024 x 768 vê tudo, e neste caso

só precisamos adicionar algumas imagens nas laterais

para que dê harmonia e não fique tão vazio o back.

Isso vamos trabalhar daqui a seguir.

 

13- Agora vamos trabalhar a distribuição das imagens além dos 800 x 600.

No meu caso escolhi uma sapinha pra combinar com a lateral,

mas isso dependerá do seu gosto.

 

14- Abra uma nova imagem de 50 pixel de largura e "encaixe"

(através de resize, ou deform) a sua imagem dentro dela.

 

Uma dica é pegar a imagem de 50 x (altura da imagem), dar SELECT ALL.

(é conveniente que a altura não ultrapasse de 100 pixels)

Copiar a sua imagem e PAST INTO SELECTION.

Depois é só ajeitar para que ela não fique desfigurada.

 

15- Agora adicione uma nova layer

e coloque um fundo nessa imagem / MERGE ALL.

Criamos uma imagem para usar na barrinha,

que iremos fazer na lateral esquerda do back.

 

 

 

16- Caso você escolha uma imagem com fundo tipo paisagem (em jpg),

aplique um filtro nela, para que se repita na extensão vertical

sem emendas.

EFFECTS / IMAGE EFFECTS / SEAMLESS TILLING:

 

 

Pode-se escolher qualquer uma das opções: edge, corner e mirror.

(desde que esteja na direção VERTICAL)

 

O que você precisa é fazer um tile que irá se repetir na vertical,

e se sua imagem estiver bem posicionada, não será necessária

a aplicação de nenhum filtro veja:

 

17- Agora vamos ativar a ferramenta SELECTION  (custom selection)

e fazer uma seleção:

 

18- Adicione uma nova layer

 

19- Use a pattern que você fez com a imagem de 50 pixel de largura

para preencher esta seleção.

 

 

20- Select none

 

21- Apliquei nesta barrinha o INNER BEVEL / METTALIC (opcional).

 

22- Drop shadow na tonalidade verde (combinando com o fundo).

 

23- Agora vamos aos "finalmentes":

 

 

** A barrinha na lateral só será vista por configuração de 1024 de largura.

 

** O sapinho na parte inferior do email

só será visto na configuração de 768 de altura.

 

** Quem tem monitor configurado em 800 x 600

verá o top com seus seus detalhes mínimos.

 

** Quem tem a configuração maior que é de 1024 x 768

verá a totalidade do back, sem cortes.

 

FORMATANDO NO OUTLOOK:

 

Agora vamos a sua formatação no OUTLOOK:

Posição de formatação: DIREITA (RIGHT).

Para que o back se posicione do lado onde ele será visto.

 

Outro passo importante: MARGEM!

Aqui o cuidado maior é para a margem superior (TOP MARGIN).

Como coloquei um pequeno texto: "É o seguinte...",

então a margem deve começar depois dele.

Aqui foi colocado em 40 pixels.

 

A margem lateral, deixo o mínimo de 25 pixels.

Pode-se deixar 40 pixels também para tirar o texto da barrinha,

pois quem tem configuração em 1024 pixels começará a escrever

perto da barrinha lateral que fizemos a esquerda.

 

 

Depois de acertar margem, fonte, nome do back, agora vamos editá-lo

no front page para colocar o script e fixá-lo.

 

Antes do "OK", clique em EDIT:

 

Ao clicar em EDIT, seu back será aberto no FRONT PAGE.

 

Já no FRONT PAGE, clique na aba HTML:

 

Coloque exatamente no local indicado pela seta, a linha de script abaixo:

 

Importante: CLIQUE EM SALVAR!!

Feche o front page, depois dê OK no outlook.

E está fixo o seu papel.

 

Este tutorial tem o objetivo de comentar a respeito dos backs fixos,

sua formatação, visualização e principalmente: sua confecção no PSP!

Caso você tenha dúvidas, sugestões, críticas e elogios serão todos bem

vindos! Se descobriu algum erro, algum ponto a se desenvolver mais, é

só me escrever e conversaremos a respeito.

É importante falar sobre o assunto, pois só dessa forma poderemos

aprender e compreender!

 

 

 

A distribuição de imagens, tomando cuidado com todas as configurações

é uma forma de mostrar a nossa maturidade na formatação de papéis de carta.

Colocando-nos na "vanguarda" deste tipo de estudo.

Creio que em toda a  internet poucos falam sobre este assunto

e poucos detém esse tipo de conhecimento.

Estamos sendo pioneiras e porque não dizer:

as primeiras a abordar essa técnica?

 

Isso nos orgulha porque procuramos evoluir e acompanhar as mudanças,

estaremos juntos com elas quando os monitores estiverem com maiores

opções de configurações.

Estaremos acompanhando sem dificuldades, pois a base já desenvolvemos!

 

Fico feliz por estar sendo uma das primeiras pessoas

a fazer um estudo mais avançado a respeito disso.

Durante esse estudo pude fazer descobertas que antes desconhecia.

Cometer erros, para em seguida corrigí-los.

Tudo isso porque o psp vai além de um programa gráfico que cria

emails bonitos, e esse além é para que os papéis fiquem também agradáveis

para todas visualizações.

 

Até agora, abríamos um tutorial e as medidas eram solicitadas e não

questionávamos de onde elas poderiam ter vindo, ou de que tipo de

conclusão chegou-se até elas.

As pessoas que estipularam 1024 como regra na largura do back,

estudaram também essas medidas para que pudéssemos aprender a

formatar os backs de forma correta.

Mas pouco questionamos a respeito do "porquê" dessa medida!

Estamos fazendo isso agora, inclusive aprendendo porque na maioria

das vezes pedia-se para abrir uma imagem de 1024 x 300 para um

background! Alguém já fez este estudo anteriormente e deixou-as

como padrão, agora estamos entendendo as razões delas.

Espero estar ajudando para que esse objetivo seja cumprido.

 

Agora vamos aos testes com as visualizações depois do envio:

 

800 x 600

 

1024 x 768

 

 

 

Nas duas visualizações o papel ficou por inteiro e sem imagens cortadas.

 

Que Deus esteja sempre orientando nossos caminhos!

Que Ele abençoe a todos nós!

beijinhos

brisa