Efeito de sombreamento em fotos

Hoje vou explicar dois mtodos de fazer um efeito de sombreamento em fotos. Um

mtodo atravs da ferramenta sombreamento do CorelDRAW e outro mtodo
atravs do cdigo direto do CSS (Cascading Style Sheets) do HTML 5.

1 - Qual a vantagem do sombreamento?

1.1 Esttica
O sombreamento de foto d uma impresso bonita imagem e repassa um aspecto
de segundo plano no ambiente em que a foto est inserida, harmonizando todo
layout.
1.2 Tamanho do arquivo
O sombreamento no acarreta aumento de tamanho da imagem em kb, o que
tambm se configura numa vantagem, principalmente para dispositivos mveis.
1.3 Compatibilidade
Aliado a essas vantagens, o sombreamento de imagens compatvel com a maior
parte dos navegadores web, exceto os to queridos Internet Explorer 6, 7 e 8. Para
os navegadores incompatveis, possvel usar fallbacks para contornar esse
problema.

2 - Fazendo sombreamento de fotos pelo Corel Draw

O CorelDRAW famoso pelas diversas ferramentas para design grfico e com o
advento da internet ele se tornou uma excelente ferramenta de apoio na construo
dos layouts. Hoje em dia possvel criar layouts inteiros no CorelDraw.
Especificamente para o tema que estamos abordando, o CorelDRAW possui uma
ferramenta exclusiva para esse fim. Para realizar o sombreamento pelo Corel
devemos seguir os seguintes passos:
1. vamos importar a foto para rea de trabalho do programa, para isso basta
apertar Ctrl + I no teclado e selecionar a foto
2. inserir uma figura geomtrica qualquer na cor branca e no mesmo tamanho
da foto importada
3.

selecionar a ferramenta de sombreamento no canto esquerdo do Corel

4. clicar no centro da figura geomtrica, segurar com boto esquerdo do mouse

e realizar um leve arraste para baixo. Aps esse procedimento j ser
possvel visualizar o sombreamento na figura geomtrica

5. Posteriormente s enviar a figura geomtrica para o fundo, apertando Ctrl

+ PgDown no teclado
6.

J percebemos que o efeito est pronto, ento s apertar Ctrl + E no

teclado para exportar a imagem no formato JPG ou PNG.

7. FOTO

3 - Utilizando o CSS
Agora vou explicar um segundo mtodo de se fazer sombreamento em uma foto
para fins de design web que atravs d folha de estilos em cascata, mais
conhecida como CSS. A vantagem de utilizar o CSS para esse fim que um
mtodo mais rpido e que no exige conhecimento elevado na rea de design,
apenas na rea de programao. A desvantagem que alguns navegadores mais
antigos, principalmente o Internet Explorer, no reconhecem alguns atributos de
sombreamento implementados via CSS, mesmo assim o sombreamento via CSS
ainda o mais utilizado pelos webdesigners.
Para realizar o procedimento via CSS devemos:
1. linkar a nossa pgina HTML folha de estilos, lembrando que atributos inline
no so mais recomendveis pela W3C, portanto devemos colocar o CSS
num arquivo separado.
2. Criar uma div e inserir uma foto dentro dessa div

<div
class="clientes_paginas">
<a href='http://www.fcseglimp.com.br' target="_blank">
<img src='images/site12.jpg' alt='Cliente Webdesign em Foco: Fc
Segurana e Limpeza'><br>
<strong>FC</strong><br>
fcseglimp.com.br
</a>
</div>
3. Implementar o sombreamento usando o cdigo abaixo:
4. .clientes_paginas
5.
6. {
7.
8. position: relative;
9.
10.
float: left;
11.
12.
width: 96%;

13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34. }

padding: 2%;
display: block;
margin-top: 40px;
margin-right: 3%;
background-color: #FFF;
box-shadow: 0 10px 40px #999999;
margin-bottom: 20px;
text-align: center;
height: 370px;
line-height: 30px;

35.Pronto! Nosso sombreamento de foto via CSS est pronto.

FOTO

4 - Qual dos dois mtodos melhor?

Apesar do sombreamento realizado pelo CorelDraw exigir conhecimento maior do
webesigner, ele no implica em aumento no tamanho da imagem e gera um belo
efeito esttico na imagem. O sombreamento via CSS tambm apresenta um efeito
satisfatrio e no deixa em nada a desejar. A vantagem principal que eu destacaria
em fazer o sombreamento pelo CorelDraw que com ele eliminamos a possibilidade
de incompatibilidade com navegadores antigos, isso porque atravs desse mtodo,
o sombreamento far parte da imagem, ao contrrio do CSS em que ele ser um
elemento HTML. Considerando que hoje menos de 10% das pessoas utiliza o
navegador Internet Explorer ou um navegador desatualizado, essa que poderia ser
uma grande vantagem do CorelDraw acaba por equiparar os dois processos.

5 - Concluso
Seja atravs do CorelDraw ou pela codificao do CSS, o sombreamento de imagens
bonito e demonstra um aspecto de cuidado com o design das fotos, devido a isso
eu recomendo e aconselho a utilizao do sombreamento nas imagens do seu site.

6 - Vdeo-aula
Na vdeo aula baixo, demonstrarei a maneira de utilizar os dois mtodos de
sombreamento citados. Espero que gostem!

vdeo