Tutorial: Efeito de texto web 2.0

COMPARTILHE:

Efeito glossy com reflexo muito usado em logos 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

COMENTÁRIOS

BLOGGER: 10
  1. Renan Menendes - Dragon - Designer9 de dezembro de 2008 13:18:00 BRST

    issu ae os futuros designers precisam saber montar icones e texto em web 2.0 parabens

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

    ResponderExcluir
  3. mto bom.. ql é o nome da fonte usada??

    ResponderExcluir
  4. Olá, gostaria de elogiar o seu trabalalho. Meus parabéns, já ajudou muito. *--*

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

    se for possivel ... :)

    ResponderExcluir
  6. 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?

    ResponderExcluir
  7. 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!

    ResponderExcluir
  8. quando chega na parte 5. não dá pra ir mais pois o MODIFY fica inclicável :(
    e agora ?

    ResponderExcluir
  9. 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 :

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

    VAG Rounded BT é o nome dela.
    Bom uso :)

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

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

    ResponderExcluir

Nome

.ai,71,.asl,1,.eps,24,.indd,1,.jpg,20,.png,40,.psd,594,.sketch,2,.svg,7,2006,90,2007,352,2008,942,2009,1780,2010,1822,2011,1825,2012,1764,2013,240,2014,559,2015,1195,2016,518,2017,748,2018,700,2019,412,2am,1,2axion,1,360,4,abril,378,abstrato,223,acer,1,actions,151,adobe,32,adobe experience house,1,adobe max,1,agosto,532,ajax,1,allan portilho,1,animação,39,aritana,1,arte,27,artistas do photoshop,1079,axis,5,backgrounds,1,basekit,1,básico,68,benq,9,bethesda,4,bgs,123,bmx,1,booombox,2,brasilmegaarena,2,brushes,107,bug,1,bunker,1,campus party,1,capcom,1,cartazes de cinema,117,cartazes de rock,203,cinemark,1,codemasters,1,com2us,3,concurso cultural,1,css3,1,curta,6,de(ath)sign,236,designbunkertp,1,dezembro,642,dica ninja,99,dificuldade 1,38,dificuldade 2,389,dificuldade 3,948,dificuldade 4,332,dificuldade 5,56,distortions,4,divulgação,1,diy,32,dji,1,dlink,1,documentário,105,dollarphotoclub,37,download,1780,edição de vídeo,3,efeito,1076,esportes,11,fastcom,3,ferramentas online,1,fevereiro,492,filme,3,flipbook,1,flow motion,1,fontes,569,fotolia,13,fotoshistoricas,39,fotosqueabalaramomundo,75,gamebau,1,games,214,gamevil,1,gastore,1,gifart,27,gomidia,1,goPro,1,gradientes,7,greenk,1,guest post,5,historia da foto,22,hitbox,1,hopi-hari,1,hoplon,19,html5,3,hype,2,hyperlapse,5,hyperx,31,ícones,96,idc,2,imagem,1,infográfico,1,inspiração,34,janeiro,480,julho,494,junho,393,kingston,15,kinship,2,layer style,43,lbee,1,leitores,1,levelup,15,lightpainting,1,lista,2,live-stream,2,magic the gathering,1,maio,336,março,466,matéria,591,maurício de souza produções,1,melhordasemana,17,mestres da pintura,35,meutimao,1,mob2b,1,mockup,39,música,48,natal,1,novembro,698,off,1,off-topic,517,outubro,745,palestra,7,parkour,1,patern,46,pdf,2,pérolas do instagram,1,photoshop básico,1,Photoshop CC,2,photoshop express,1,photoshop week,1,pixel show,1,plugin,4,png,1,positivo,16,post pago,2,prezi,1,printi,2,project ten,2,psd,2,psdownloads,1,pshelp,1,pszuero,2,purgatorium 90,1,rawar,2,razer,36,relink,157,responsivo,2,retoque de imagem,111,rixty,3,saga,12,selecaoTP,44,setembro,520,shapes,2,showreel,7,skate,59,skillab,1,smyowl,6,sony,1,speedart,3,speedpaint,8,splashscreen,1,stop-motion,9,tectoy,4,template,4,teste,1,texto,272,textura,137,tilt-shift,3,timelapse,21,tipografia,3,tp,2,tunning virtual,14,tutorial,2210,tutorial builder,2,tutorial player,2,ubisoft,71,udemy,1,ui,16,unboxing,1,vaio,1,vice,64,vídeo,706,vídeo aula,474,video mapping,3,wallpaper,1,warspear,1,wbgames,1,web,25,webfont,1,wix,3,xma,5,
ltr
item
::Tutoriais Photoshop::: Tutorial: Efeito de texto web 2.0
Tutorial: Efeito de texto web 2.0
Efeito glossy com reflexo muito usado em logos web 2.0.
https://www.andresugai.org/Tutoriais/12.2008/T07/imagem10.jpg
::Tutoriais Photoshop::
https://www.tutoriaisphotoshop.net/2008/12/efeito-de-texto-web-20.html
https://www.tutoriaisphotoshop.net/
https://www.tutoriaisphotoshop.net/
https://www.tutoriaisphotoshop.net/2008/12/efeito-de-texto-web-20.html
true
34833248
UTF-8
Ver todos os Posts Não encontramos nenhum post VEJA TODOS Leia Mais Responder Cancelar Resposta Deletar Por Home PÁGINAS POSTS Veja Todos RECOMENDAMOS TAMBÉM LABEL ARQUIVO SEARCH TODOS OS POSTS Não encontramos nenhum post relacionado com sua busca Voltar para a Home Domingo Segunda Terça Quarta Quinta Sexta Sábado Dom Seg Ter Qua Qui Sex Sáb Janeiro Fevereiro Março Abril Maio Junho Julho Agosto Setembro Outubro Novembro Dezembro Jan Fev Mar Abr Maio Jun Jul Ago Set Out Nov Dez agora 1 minuto atrás $$1$$ minutes ago 1 hora atrás $$1$$ hours ago Ontem $$1$$ days ago $$1$$ weeks ago mais de 5 semanas atrás Seguidores Seguir THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copie todo código Selecione todo código Todos os códigos copiados para o clipboard Não foi possível copiar todo código / textos, pro favor pressione [CTRL]+[C] (ou CMD+C no Mac) para copiar