Criar Web, manuais e recursos para desenvolvimento web
Manuais
Programas
FAQS
Diretório
Comunidade
  Inicio > Manuais > Tutoriais de web design
SEÇÕES
Manuais relacionados
+Tutoriais de web design
Categorias
+Design
+Guias de desenho

Índice do Manual Tutoriais de web design
+ Como fazer um gif animado com Photoshop
+ Definições de tela
+ As cores e HTML
+ Formatos gráficos para páginas web
+ Tabela com esquinas arredondadas
+ Tabela com desenho em sua base
+ Tabela com desenho em sua base II
+ Frames sem bordas
+ Barra de navegação HTML simples
+ Barra de navegação HTML
+ Setores de Photoshop
+ Listas HTML feitas com tabelas
+ Tabela melhorada com imagens para barra de navegação
+ Informe sobre o estudo Eyetrack III
+ Montar uma web a partir de uma imagem com Photoshop
+ Como criar um gif com Photoshop II
+ Fluxograma
+ Formatos de Arquivos
+ 30 dicas de Photoshop
+ Criar imagem em miniatura (thumbnail) com Photoshop
+ Efeito de texto com Photoshop
+ Links sem sublinhado
+ Fundo tipo mosaico a partir de uma imagem com Photoshop
+ Efeito de reflexo de texto em Photoshop
+ Fazer um texto que se adapta a um círculo, Photoshop CS2
+ Trabalho com ações de Photoshop. Gravar e executar uma ação
+ Lote com Photoshop para executar uma ação sobre os arquivos de um diretório
+ Mudar o tamanho de todas as imagens de uma pasta com Photoshop
+ O banner perfeito
+ Páginas fluidas

Descrição dos capítulos

Parceiros
- CSS para Web Design
- S.O.S Designers
- Slackware-Brasil
- Crie seu Web site
- Oficina da Net


Efeito de reflexo de texto em Photoshop

Criar um reflexo de um texto que está refletido na parte de baixo, utilizando Photoshop.


Veremos um pequeno tutorial sobre um efeito de reflexo de texto. Utilizamos Photoshop como programa de design gráfico.

O efeito que queremos conseguir é como um texto que aparece refletido na parte de baixo. O efeito de reflexo é muito simples de conseguir com Photoshop, duplicando a própria camada de texto e virando verticalmente, porém o veremos passo a passo.

O resultado seria parecido a este:


1) Criamos o texto com a ferramenta de texto e escrevemos o que desejarmos.


O efeito de relevo que tem esta imagem foi conseguido com um efeito de camada de Photoshop. Para chegar a isso, clicamos o menu camada - estilo de camada - Bisel e relevo. Também se pode acessar ao menu de efeitos de camada dando um clique duplo na camada onde temos o texto, na janela de camadas, e logo selecionando bisel e relevo entre todos os efeitos possíveis. Mas este efeito de relevo tampouco é muito fundamental para este tutorial.

2) Duplicamos a camada, a viramos verticalmente e a posicionamos debaixo do texto

Para duplicar a camada podemos dar com o botão direito do mouse à camada na janela de camadas e encontraremos uma opção para duplica-la. Também podemos acessar a esta opção no menu Camada - Duplicar camada.

Para vira-la verticalmente, fazemos através do menu de Edição - Transformar - Virar vertical.

Para situa-la, tomamos a ferramenta de mover, que está acima e à direita no menu de ferramentas, ao lado da ferramenta de fazer a seleção.


3) Mudamos a opacidade e fazemos uma máscara de camada

Para mudar a opacidade/transparência se pode fazer através da janela de camadas. Fazemos de uma forma um pouco mais transparente, porque os reflexos costumam ser mais tênue que os objetos reais. Uma opacidade de 50% ou 60% pode ser boa.

Agora queremos que o texto vá se esfumaçando um pouco para baixo, porque os reflexos costumam ser mais suaves na parte de baixo que na de cima. Para isto é bom fazer uma máscara de camada. Vejamos esta imagem:


Uma vez criada a máscara de camada, temos que fazer um degrade para ocultar parte da camada reflexo. Fazemos o degrade com a ferramenta correspondente, na camada que queremos ocultar parcialmente.

Com isto acabamos! Pode-se ver o efeito resultante a seguir.

Autoria e outras referências sobre este artigo

Manuais relacionados com este artigo
Dentro de Tutoriais de web design

Categorias relacionadas
Através das categorias do nosso diretório podem ser encontrados outros tipos de recursos relacionados com este artigo:
+ Entrar em Design
+ Entrar em Guias de desenho


Comentários dos visitantes
Os comentários dos visitantes são para ampliar a informação do artigo. Todos podem participar.
Acrescentar um comentário do artigo Acrescentar um comentário do artigo



Sobre nós | Copyright | Anuncie | Entrar em contato <criarweb>

Hospedado por Hostnet Hospedagem de Sites