[Tutorial] Como criar um efeito de profundidade

por Fogomax Qui 21 Mar 2013, 22:13

Já vi esse efeito em muitos sites, especialmente em fontes (textos) que dão um "tchan".
Tal efeito é feito por puro CSS, somente uma linha ser exato.
Mas o efeito pode ser facilmente reproduzido no PhotoShop e outros programar de edição de imagens.
Previa:
[Tutorial] Como criar um efeito de profundidade Imagemdhm

[Tutorial] Como criar um efeito de profundidade Imagemdhm

O efeito é extremante simples. Antes de fazê-lo, uma observação: O background não precisa ser um gradiente.

Bom, crie um gradiente simples e adicione sua tipografia em cima dele.
Em seguida, clique duas vezes nela e adicione o "Drop Shadow":
- Blend Mode: Normal
- Opacity: 100%
- Angle: 120
- Distance: 1px
- Size: 0px
Imagem para esclarecer melhor:
[Tutorial] Como criar um efeito de profundidade Configzm

[Tutorial] Como criar um efeito de profundidade Configzm

Agora, a parte mais importante: a cor.
Ela deve ser sempre uma cor mais clara que a parte mais escura do gradiente, precisa ser da mesma cor ou mais clara que a cor mais clara do gradiente também.
Eu recomendo deixá-la mais clara que a cor mais clara do gradiente, pois se você colocar a tipografia muito encima não vai mostrar o efeito.
E pronto, o efeito está pronto! ^^
Podemos usar o efeito também em botões, mas não exagere no tamanho do mesmo, porque tem vezes que o efeito não sai como o desejado.
Exemplo com botões:
[Tutorial] Como criar um efeito de profundidade Botoed

[Tutorial] Como criar um efeito de profundidade Botoed

Eu usei esse efeito no meu site, em um menu:
[Tutorial] Como criar um efeito de profundidade Menuzl

É só isso, boa sorte com seus projetos ^^

por Storm™ Qui 21 Mar 2013, 22:17

[/b]N[/b]ão e um efeito de Profundidade Muito Complexo mais tem valor é um Pouco admirável.

por Fogomax Qui 21 Mar 2013, 22:21

Storm™ escreveu:
[/b]N[/b]ão e um efeito de Profundidade Muito Complexo mais tem valor é um Pouco admirável.

Sim, é muito simples mas dá um toque de superioridade se você usar esse efeito em certos trabalhos (como sites). Vou colocar no tópico um exemplo melhor, que eu mesmo usei em meu site.

por Conteúdo patrocinado

[Tutorial] Como criar um efeito de profundidade

[Tutorial] Como criar um efeito de profundidade

Re: [Tutorial] Como criar um efeito de profundidade

Re: [Tutorial] Como criar um efeito de profundidade

Re: [Tutorial] Como criar um efeito de profundidade