Visualização x barra de rolagem

 

Quando comecei a fazer um estudo mais aprofundado a respeito de medidas de tops, e backs fixos dentro das várias configurações de monitor, estava tentando mostrar com mais precisão, as medidas que devem ser abertas em seus respectivos trabalhos, para que sejam visíveis em todas as configurações.

 

Estava fazendo uma pesquisa na net ainda hoje a respeito de uma série de TV chamada "LOST"  e procurei por downloads. Você deve estar pensando no que tem a ver a série com o que estamos falando aqui. Mas tem sim! Vou explicar...

Entrei na página de download e vejam o que achei:

 

Bom, creio que agora você está começando a entender porque estou tocando neste assunto de "lost"... risos

 

De acordo com a imagem acima, você tem duas opções de download para o papel de parede: 1024 x 768 e 800 x 600.

 

Se temos que escolher opções para o papel de parede, é porque existe diferença em sua visualização!

O que acontece se eu baixar o papel de 800 x 600?

Como tenho minha configuração de monitor nesta resolução, então não terei nenhum problema de visualização.

Veja:

 

 

Mas se alguém usar o meu pc e mudar a configuração para 1024 x 768?

como ficará meu papel de parede?

Assim:

 

 

Porque estou dando esse exemplo acima?

Para reforçar nosso estudo e mostrar que não é apenas o psp ou papéis de carta de emails que temos que tomar estes cuidados!

Temos os papéis de parede, as visualizações dos sites na net que começam a tirar o padrão de melhor visualizado em 800 x 600 para os 1024 x 768. Tanto que alguns "joguinhos onlines" só são vistos integralmente, se estiverem na opção maior de visualização.

 

Voltando... como nos papéis oferecidos nos sites existem opções de downloads, concluimos que: ou fica bom em uma posição, ou fica bom em outra.

 

O que tentamos nessa nossa discussão é que o papel de email fique bom nas duas posições.

 

Comparando o papel de parede (desktop) com os papéis de email, podemos perceber que no caso do papel de parede, ele ocupa a área total do monitor, mas o papel de carta tem a sua visualização diminuída pelo que está à sua volta:

 

 

Vejamos o que contribui para diminuir este espaço:

 

 

 

Separei grosseiramente em áreas, para termos uma idéia do que faz com que diminua o tamanho da visualização que está contornada da cor de maravilha.

 

ÁREA 1:

**Aumenta se o email possuir 1 anexo.

**Aumenta mais se possuir vários anexos, pois podem aumentar as linhas.

**Aumenta se você enviar seu email com cópia.

**Aumenta dependendo do número de destinatários, se não forem ocultos.

 

Enfim, aumentando a área 1, diminuimos a visualização do email.

 

Área 2:

** Barra de STATUS do outlook.

** Barra de tarefa do windows.

 

Se tirarmos a barra de status, ou colocarmos a barra de tarefa no auto-hide, a visualização da área do email é maior!

 

 

Bom...

Então chegamos à conclusão que devemos pensar em tudo isso quando estamos trabalhando em um back fixo ou top?

 

Não é necessária tanta conta.. risos

 

Por isso colocamos as imagens em posições que fiquem boas tanto para o caso mínimo de visualização, quanto no máximo. Separando em áreas para que as imagens não fiquem cortadas, ou faltando nos 800 x 600 e 1024 x 768.

 

Mas eis que estudando essas visualizações, encontrei um outro vilão neste caso:

 

A BARRA DE ROLAGEM!!!

 

Quando preparei o papel que usei de exemplo aqui para determinar as áreas, depois de pronto e formatado, descobri um corte da imagem lateral direita.

 

 

Quando preparei o back fixo formatado à direita, com uma pequena faixa à esquerda que só seria vista em 1024, também ficou um corte:

 

 

Por causa de quem??

Da barra de rolagem!

 

Se ela fica fixa na lateral direita do email.

Se a área de visualização é de 1024.

Se estou fazendo um papel que deve ser visto tanto do lado direito, quando no esquerdo que é na configuração de 1024 pixels de largura.

Então tenho que DESCONTAR a largura da barrinha na medida que tenho que abrir?

 

 

Bom.

O assunto é um tanto polêmico, pois se ficarmos mexendo muito nas medidas, principalmente se diminuirmos essa área retirando a largura da barrinha, corremos o risco de deixar espaços vazios ou faltando.

 

Creio que a nossa intenção é acima de tudo fixar medidas que possamos trabalhar com "folga" as imagens dentro delas.

Estamos sim, aprendendo a estipular limites para agradar as duas configurações de vídeo.

 

Seja não deixando a imagem passar o limite de 770 pixels na largura para ser visto na configuração de 800. Ou seja colocando outra imagem a partir de 850 pixels para que possa ser visto somente na configuração 1024. Cuidando também da altura, para que não ultrapasse os 300, na configuração de 600. E recolocando mais abaixo para ser visto na configuração de 768.

 

Calma... calma!!

Todos esses limites já estudamos em tutoriais anteriores de visualização!

Agora estou basicamente falando da barra de rolagem!

 

E temos que acrescentar mais um ítem em nossos estudos:

 

A barra de rolagem do email.

 

Medi aqui e ela possui 20 pixels de largura, não sei se isso depende do tamanho do monitor. O que uso é de 17 polegadas. Não saberia dizer se em monitores maiores ou menores essa medida é diferente.

 

Mas vamos trabalhar com nossa barrinha em 20 pixels de largura, pra ter segurança nesta medida. Se alguém fizer testes em monitores de tamanhos diferentes, por favor envie-me as medidas.

 

 

Agora vamos usar este valor para trabalhar a imagem num top bem simples sem precisar diminuir áreas:

 

 

1- ABRA UMA NOVA IMAGEM DE 1024 X 300

 

2- Pinte com uma das cores do seu tube essa imagem.

 

3- A outra cor use para colocar no efeito: EFECTS / TEXTURE EFFECTS / BLINDS:

 

4- Aplique novamente o mesmo efeito acima, deixando marcada a opção HORIZONTAL.

 

5- Aplique seu tube na lateral esquerda do top, e o drop shadow nele.

 

6- Agora vamos cuidar da BARRINHA DE ENFEITE  da extremidade oposta, que só será vista por quem possui configuração de 1024 pixels:

 

6a- Abra uma nova imagem de 100 largura x 300 altura.

 

6b- Aplique o mesmo efeito dos passos 3 e 4, só que inverta as cores.

 

6c- Aplique o efeito EFFECTS / IMAGE EFFECTS / PAGE CURL:

 

 

6d- Agora coloque nesta barrinha um tube a seu gosto, MERGE VISIBLE.

eis a nossa barrinha de enfeite:

 

 

6e- Copie esta barrinha e coloque-a (paste as new layer) na lateral direita de seu top.

opss... opss... É agora que vai entrar o desconto da barra de rolagem!!!

 

 

O top é bastante simples, o detalhe é essa barrinha de enfeite criada exatamente para exemplificar o "desconto" que devemos dar na lateral oposta à posição de formatação no outlook.

 

Como assim?

"lateral oposta à posição de formatação no outlook"?

 

Consiste no seguinte:

Se a posição  de formatação no outlook é à esquerda:

O desconto para a barra de rolagem deve ser à direita (como vimos acima).

 

Se a posição de formatação no outlook é à direita:

O desconto para a barra de rolagem deve ser à esquerda (lateral oposta).

 

O importante, é termos a consciência de que não apenas em barrinhas como fiz acima, mas também na colocação das imagens muito encostadas nesta extremidade oposta.

 

7- Vamos finalizar o top?

 

8- CANVAS SIZE:

 

 

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

 

10- Na layer do top, aplique o drop shadow ou algum efeito que você queira.

 

11- Merge all, assine, e formate o seu top!

 

Não esqueça de conferir se a sua barrinha não está cortada!

Envie para você mesmo o seu top como teste.

Depois vá em painel de controle, mude a configuração do vídeo para 1024 x 768.

Ao receber seu email, abra-o maximizando (tendo a máxima visualização).

 

Analise o top depois de formatado, enviado e visualizado na configuração de 1024:

 

 

Perceba que a barrinha de enfeite terminou 20 pixels antes do top terminar. Nestes 20 pixels está encaixada a barra de rolagem, evitando o corte na barrinha de enfeite.

 

 

Agora vamos "simular" o top sem o desconto da barra de rolagem

 

 

Sem o desconto de 20 pixels:

Agora formatado, enviado e visualizado na configuração de 1024:

 

Repare que sem o desconto de 20 pixels o ursinho ficou cortado

 

com o desconto de 20 pixels:

 

 

 

Agora a comparação sem desconto e com desconto de 20 pixels:

 

 

 

Na primeira imagem o ursinho ficou cortado, e é isso que deve acontecer com toda imagem encostada na lateral sem o desconto da barrinha.

 

Na segunda imagem dei o desconto de 20 pixels e a barrinha de enfeite ficou inteira, sem cortar o ursinho na lateral.

 

 

Com isso concluímos que é melhor posicionar nossas imagens corretamente do que mudarmos suas medidas. Para agradar a todas as configurações, visualizações e formatações basta ter em mente as áreas mínimas e máximas a serem trabalhadas.

 

Recapitulando:

 

TOPS

 

Á ESQUERDA:

Abra a imagem com 1024 pixels de largura e altura máxima de 300 pixels.

Posicione em primeiro momento as figuras dentro da área de  0 até 770 (começando da esquerda para direita) com altura de 300 pixels, e estará agradando a configuração de 800 x 300. (formatado posição à esquerda)

Acrescente mais imagens depois dos 850 e até 1000 pixels, não deixando as figuras encostarem na lateral oposta, a fim de descontarmos o espaço da barra de rolagem (20 pixels).

 

À DIREITA:

Abra a imagem com 1024 pixels de largura e altura máxima de 300 pixels.

Posicione em primeiro momento as figuras dentro da área de 1024 até 250 (começando da direita para a esquerda) com altura de 300 pixels, e estará agradando a configuração de 800 x 300. (formatado posição à direita).

Acrescente mais imagens depois dos 200 e até 20 pixels, não deixando as figuras encostarem na lateral oposta, a fim de descontarmos o espaço da barra de rolagem (20 pixels).

 

CENTRALIZADOS:

Abra a imagem até 780 pixels de largura e altura máxima de 300 pixels.

Posicione suas imagens da maneira que você desejar!

Já que o top será centralizado, será visualizado em qualquer configuração por igual.

 

CENTRALIZADOS DE 1024:

Abra a imagem de 1024 pixels de largura e altura máxima de 300 pixels.

Posicione suas imagens de acordo com a proposta de formatação: no centro!

Ocupe a área que compreende de 120 até 770 pixels para que seja visualizado em 800 x 600 sem cortes. À partir de 770 e antes de 120, a preocupação será com a visualização de 1024 de largura.

 

Em todos os casos acima vai existir a barra de rolagem, sempre na lateral direita.

 

Lembrando que esse top tem o objetivo único de exemplificar o uso do recuo para as imagens laterais opostas a formatação do email. Portanto o efeito é bastante simples.

 

 

Nota:

 

Aqui deixo mais uma contribuição para este estudo das configurações de monitor enfocando a visualização dos papéis de carta formatados. Cada tipo de trabalho, sejam tops, backgrounds que se repetem, backgrounds fixos, posicionados à direita, ou à esquerda, todos eles merecem um estudo particular e esmiuçado. A cada estudo, novos itens, novas descobertas ou mesmo antigos conhecimentos sendo colocados em prática.

Há muitos que posicionam suas imagens naturalmente, como se já conhecessem tudo a respeito e o fazem de forma correta e sem cortes! Outros que ainda precisam de alguma dica ou um empurrãozinho! risos

Espero estar ajudando de alguma forma para que esse conhecimento seja de todos, natural ou através de leitura...

Se algum item estiver em desacordo, ou algum erro for encontrado, peço que me informem para que possa consertar e passar esse estudo a limpo.

Como estou estudando o assunto, também sou passível de erros, que terei humildade em admití-los e acertá-los.

 

*** Em tempo: recebi uma colaboração de minha amiga Brisinha (brisinha2001) a respeito da configuração das medidas da barra de rolagem:

 

 

Trata-se do lugar onde podemos escolher o tamanho (largura) da barra de rolagem.

 

Fica nas propriedades do vídeo, aparência / avançados, e tem várias opções para os ícones, cores das janelas, espaçamento entre os ícones, etc. (meu windows está em inglês):

 

 

Como podemos ver acima, cada um escolhe a seu gosto a aparência do seu ambiente de trabalho no computador. O padrão da barra de rolagem que está configurado aqui é de 17 pixels. Mas não podemos trabalhar com o menor valor, e sim com o maior. Creio que de 20 até no máximo 24 pixels sejam valores bons para dar o desconto da barra de rolagem. Melhor sobrar do que faltar! risos

 

 

Hoje, amanhã e sempre: Deus abençoe a todos nós!

 

beijinhos

brisa

 

 

Tutorial  criado e escrito  em 07 de julho de 2005.  É protegido por lei de Copyright® e não poderá ser copiado,

retirado do seu lugar, traduzido ou utilizado em listas de discussão sem o consentimento prévio de sua autora,

brisa (Naide).  email-me brisa_unica@yahoo.com.br

Agradeço a colaboração da brisinha (brisinha2001@yahoo.com.br) que tão gentilmente compartilhou conosco sua informação.

 

 

 

 

Gentilmente autorizado para publicação no Caderninho