no , , , ,

Tutorial: Efeito de texto web 2.0

Preview Descrição: Efeito glossy com reflexo muito usado em logos web 2.0.

  • [message]
    • ##check##AVISO: Efeito de texto web 2.0

      • Caso você esteja usando o Photoshop em Português coloque o mouse sobre o nome do recurso que está sendo utilizado e veja a tradução em Português. Os recursos que possuem tradução estão marcados em vermelho no texto.
        Se você tiver dúvidas sobre o uso de alguma ferramenta visite o PS Help! para saber como utilizar a ferramenta desejada.
        Alguns tutoriais não possuem a opção de download das imagens, caso queira utilizar uma imagem em alta resolução para acompanhar o tutorial visite o PS Downloads e escolha um dos sites indicados para download de imagens em alta resolução.
        Em caso de dúvidas e sugestões utilize a área de comentários logo abaixo. Obrigado 🙂

tutoriais photoshop

01. Pressione Ctrl+N para criar um novo documento e defina os valores abaixo.

Efeito de texto web 2.0

02. Escolha a cor #c7d9ff e pressione a Alt+Backspace (a tecla acima do Enter) ou pressione a letra G do teclado para selecionar a Paint Bucket Tool e clique no documento para preencher a layer com a cor escolhida, pressione a letra D do teclado para resetar as cores de Foreground e Background para preto e branco, pressione a letra T do teclado para selecionar a Horizontal Type Tool e escreva uma palavra qualquer, vá em Layer> Layer Style> Gradient Overlay e defina os valores abaixo.

Efeito de texto web 2.0

03. Agora vá em Layer> Layer Style> Outer Glow e defina os valores abaixo.

Efeito de texto web 2.0

04. Sua palavra já deve estar como a da foto abaixo.

Efeito de texto web 2.0

05. Pressione Ctrl+Shift+Alt+N para criar uma nova layer, com a tecla Ctrl pressionada clique sobre a miniatura da layer de texto na paleta de layers para ativar a selecção ao redor do texto criado, agora vá em Select> Modify> Contract, defina o valor de 1 pixel e pressione Ok, pressione a letra M do teclado para selecionar a Rectangular Marquee Tool e com a tecla Alt pressionada crie uma seleção da metade para baixo das letras afim de retirar a seleção nesta área, ficaremos apenas com a seleção da parte superior das letras.

Efeito de texto web 2.0

06. pressione a letra D do teclado para resetar as cores de Foreground e Background para preto e branco, pressione a letra X do teclado para alternar as cores, sua cor de Foreground deve ser a branca, pressione a letra G do teclado para selecionar a Gradient Tool e clique no gradiente de amostra que existe na barra de opções da ferramenta, escolha o segundo gradiente que vai do branco para o transparente e pressione Ok.

Efeito de texto web 2.0

07. Clique na layer que criamos e com a tecla Shift pressionada clique no topo e arraste até a base da seleção para criar um gradiente como na foto abaixo, pressione Ctrl+D para retirar a seleção.

Efeito de texto web 2.0

08. Agora clique na layer Background e vá em Layer> Hide Layers, clique na layer que estiver no topo da paleta de layers e pressione Ctrl+Shift+Alt+E para mesclar todas as layers em uma nova layer, vá em Edit> Transform> Flip Vertical e mova a cópia da layer para a parte de baixo do texto, clique novamente na layer Background e vá em Layer> Show Layers.

Efeito de texto web 2.0

09. Clique na layer copiada e defina a opacidade em 30%, pressione a letra E do teclado para selecionar a Eraser Tool e defina os valores abaixo.

Efeito de texto web 2.0

10. Passe na parte de baixo do efeito para criar o reflexo da palavra, ao final seu efeito estará como o da imagem abaixo.

Efeito de texto web 2.0

site de origem: http://designinn-sg.blogspot.com/2008/05/glossy-text.html

Escrito por André Sugai

Publicitário, Photoshopista, criador do Tutoriais Photoshop, venceu o prêmio iBest na categoria tecnologia em 2008 e dois prêmios de criatividade da Adobe. Ex-colaborador do Tech Tudo (http://Globo.com), iMasters (UOL) e Revista Photoshop Creative.

$ s Comentários

Deixe uma resposta
  1. issu ae os futuros designers precisam saber montar icones e texto em web 2.0 parabens

  2. Mto bom saber, eu ainda não entendi direto esse negocio de “web 2.0” mas mto interessante o tuto ^^

  3. Olá, gostaria de elogiar o seu trabalalho. Meus parabéns, já ajudou muito. *–*

  4. Também gostaria de saber o nome da fonte usada !

    se for possivel … 🙂

  5. Aew quando eu seleciona o gradiente para pintar a parte superior da fonte ele fala que nao tem como, e quando preciona Ctrl + a layer da fonte nao abre a opcao modify.

    Alguem sabe o que pode ser?

  6. amigo gosto muito dos seus tuto mais esse do texto no PowerPoint 2007 conseguimos fazer ele bem simples, tem alguns recursos do PowerPoint pouco explorado que a galera não conhece até para criação de programas ele é bom.

    Mais o seu tuto resumindo os tutorias encontrado aqui no site de vocês é show de bola.

    blz!

  7. quando chega na parte 5. não dá pra ir mais pois o MODIFY fica inclicável 🙁
    e agora ?

  8. Sei que as postagens aqui estão bem antigas, mas vou contribuir mesmo assim.
    Para quem queria saber o nome da fonte, abaixo está o link para Download dela :

    ultradownloads.uol.com.br/download-fonte/VAG-Rounded-BT/baixar-gratis.html

    VAG Rounded BT é o nome dela.
    Bom uso 🙂

  9. Uma alternativa ao passo 09, é aplicar um Gradient Overlay na layer com o reflexo indo da cor do background ao transparente.

    img10.imageshack.us/img10/1548/altpasso09web20.png

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

quatro + 13 =

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.

Skatiens, andando de skate de uma forma bem diferente.

Inspiração, Cartazes de Rock: Creed.