Línguas

Top Navigation

Texto Incrível em Estilo Video-Game no Photoshop

julho 20, 2009 from abduzeedo's blog

Seguindo a minha série de tutorias com efeito Retro, vou mostrar a você como criar um efeito de texto no Photoshop baseado no clip DVNO do Justice e é claro, algumas telas de abertura de 8 e 16 bits video game. Nós vamos brincar basicamente com alguns filtros básicos como Gaussian Blur, e também com Blend Modes para os efeitos de luz.

Passo 1

Crie um novo documento no Photoshop, eu usei 1920x1200 pixels. Preencha então a background layer com marrom escuro. Usei o #100c03 para a cor.

Amazing Video-Game Text Style in Photoshop

Passo 2

Com a Horizontal Type Tool (T) adicione o texto que quiser em 2 ou mais linhas. Seria bom as palavras terminarem com E ou F, mais tarde você vai entender porque.

Amazing Video-Game Text Style in Photoshop

Passo 3

Duplique a layer e vá até Layer>Layer Styles>Stroke. Use 4 pixels e white. Vá então até Layer>Layer Style>Create Layer. Uma nova layer será criada, mas conterá toda a palavra, então pressionando Command (MAC)/Control (PC), clique no texto original para criar uma seleção marquee. Depois disso apenas garanta que selecionou a stroke layer e delete a seleção marquee.

Amazing Video-Game Text Style in Photoshop

Passo 4

Agrupe a stroke layer e a word layer, elas estarão dentro de uma pasta. Troque então o Blend Mode da pasta para Color Dodge. Mova também a stroke layer para cima e para a direita para que elas não fiquem alinhadas, isso vai criar um bom efeito de profundidade. Depois disso vá até Fillter>Blur>Gaussian Blur. Para o Stroke use 1.6 para Radius.

Amazing Video-Game Text Style in Photoshop

Passo 5

Agora, para a palavra sem stroke, vá até Filter>Blur>Gaussian Blur. Use 5.0 para radius. Vá até Layer>Layer Style>Inner Shadow. Use Color Dodge para Blend Mode, -40º para Angle, 20 pixels para Distance, 30% para Choke e 75 pixels para Radius. Você também precisa trocar o Fill da layer para 0%, assim você verá apenas a sombra interna.

Amazing Video-Game Text Style in Photoshop

Passo 6

Agora, para cada text layer, o stroke e a inner shadow (sombra interna) um, vá até Edit>Transform>Warp. Para o Warp selecione Bulge, então apenas mova a alça para reduzir o tamanho do efeito bulge.

Amazing Video-Game Text Style in Photoshop

Passo 7

Com a Rectangle Tool (U), dentro da pasta com o Color Dodge, crie algumas linhas começando na margem das letras Es e Ls. Garanta o uso de branco para a cor. Depois disso vá até Filter>Blur>Gaussian Blur. Use 0.8 para radius. Vá então até Layer>Layer Styles>Outer Glow, use 75% para Opacity e um amarelo claro na cor. Para Size use 10 pixels e para Range 50%.

Amazing Video-Game Text Style in Photoshop

Passo 8

Adicione outra layer dentro da pasta Color Dodge e com a Brush Tool (B), escolha um brush pequeno e suave, pinte alguns pontos de luz como se a luz estivesse se movendo através das linhas.

Amazing Video-Game Text Style in Photoshop

Passo 9

Adicione outra layer, desta vez não dentro da pasta Color Dodge, troque então o Blend Mode para Screen e vá até Layer>Layer Style>Color Overlay. Use blur para cor e Multiply para Blend Mode.

Amazing Video-Game Text Style in Photoshop

Passo 10

 

Vá até Layer>Layer Mask>Reveal All. Com a Brush Tool (B), use um brush grande e suave com branco para cor, comece a pintar na mask layer para que as nuvens azuis comecem a aparecer. Deixe-as visíveis apenas no centro. Reduza também o tamanho do brush e inverta as cores para apagar as partes que estão sobre as linhas e o texto, ou o azul vai afetar o efeito da luz.

Amazing Video-Game Text Style in Photoshop

Passo 11

Adicione alguns flares usando Brushes ou stock images.

Amazing Video-Game Text Style in Photoshop

Passo 12

Se quiser adicionar uma cena no espaço, você pode fazê-la desde o início, que já fiz várias vezes em tutoriais passados ou podemos usar uma stock photo. Usei uma do Shutterstock, se quiser usá-la, clique aqui.

Apenas a posicione na frente das outras layers e troque o Blend Mode para Screen. Com a Eraser Tool (E), delete a luz central da cena do espaço. Use a imagem abaixo como referência.

Amazing Video-Game Text Style in Photoshop

Passo 13

Para criar as linhas eu criei um pattern, é bem fácil, abra um novo documento com 100x4 pixels e crie uma linha preta com 2 pixels de altura e uma linha branca abaixo da preta, também com 2 pixels de altura. Agora vá até Edit>Define Pattern. Pronto.

De volta ao documento, crie uma nova layer acima das outras e com a Paint Bucket Tool (G), selecione Pattern para cor e use o patter que acabamos de criar. Depois disso vá até Filter>Blur>Gaussian Blur. Use 1 ou 2 pixels para Radius. A última coisa a fazer é trocar o Blend Mode para Color Dodge.

Amazing Video-Game Text Style in Photoshop

Passo 14

Com a Horizontal Type Tool (T) digite "Press Start" usando uma fonte pixel. A que usei foi a Bylinear. Agora apenas adicione uma sombra usando layer styles.

Depois disso, pressione Command+Option+Shift+E em um Mac ou Control+Alt+Shit+E em um PC. Esse comando vai criar uma nova layer com todas as outras layers merged. Vá até Filter>Blur>Gaussian Blur e use 10 pixels para Radius.

Amazing Video-Game Text Style in Photoshop

Passo 15

Troque o Blend Mode da Blurry layer para Screen e vá até Layer>Layer Mask>Hide all. Novamente com a Brush Tool (B), com um brush médio e suave (medium size soft brush) e a cor branca, pinte sobre os flares e os pontos de luz. Pinte também um pouco sobre a palavra, onde tiver mais luz. Isso vai dar um brilho na imagem.

Amazing Video-Game Text Style in Photoshop

Passo 16

Agora vamos adicionar uma textura. Eu usei uma textura de papel antigo que achei no Shutterstock. Você pode fazer o download dela aqui ou pode usar outra que tenha.

Posicione a imagem no documento e troque a Opacity para 80% e o Blend Mode para Multiply.

Amazing Video-Game Text Style in Photoshop

Conclusão

O efeito está pronto! E repito que o importante aqui é brincar com os filtros básicos e os blend modes. Claro que você pode adicionar mais elementos ou tentar cores e ângulos diferentes. A idéia aqui foi mostrar quais elementos e efeitos dão um visual anos 80 para a imagem, ou um visualvideo-game, como Streets of Rage, meu favorito de todos. Claro que a cena do espaço não combina nesse caso.

Amazing Video-Game Text Style in Photoshop
Clique na imagem para um preview completo

Outro Exemplo

É por isso que prefiro a versão sem o background do espaço, é mais simples e podemos levar a atenção do usuário para o efeito de luz da palavra ao invés da cena do espaço. Novamente, a decisão é sua, basta tentar. Espero que tenham gostado do tutorial e que ele possa ser útil para você.

Amazing Video-Game Text Style in Photoshop
Click on the image for full preview

Download do Arquivo Photoshop

Clique aqui para fazer o download do arquivoPhotoshop usado nesse tutorial.

Editado por GisMullr

Sobre o autor

Abduzeedo is a blog about design. There are all sorts of articles for those who want to look for inspiration. Also you will find very useful tutorials for the most used applications out there, with a special selection of Photoshop Tutorials and Illustrator Tutorials. You can get in follow us via Twitter at @abduzeedo

Sponsored Links:

More articles about:

Comments and Reactions

Featured Tutorial

Crie um Ícone Câmera no Fireworks
Crie um Ícone Câmera no Fireworks
Algumas semanas atrás resolvi criar um ícone de uma câmera. Geralmente eu faria isso no Illustrator ou Photoshop, no entanto, como uso bastante o Fireworks, resolvi criar o ícone com ele. O legal do Fireworks é que você tem as 'vector features' encontradas no Illustrator com 'bitmaps features' do Photoshop, especialmente layer style filters. Então neste tutorial vou mostrar para vocês como criar um ícone de uma câmera no Fireworks.

Try this Wallpaper

Wallpaper da Semana #76 - Matt Venhuizen
Wallpaper da Semana #76 - Matt Venhuizen
O wallpaper dessa semana é um design muito legal criado por Matt Venhuizen, um graphic e web designer de Ontário, Canada. Matt gerencia um studio de design chamado Venhuizen Studios. Ele enviou essa sugestão de wallpaper via email e você também pode fazer isso, fique a vontade ;) Para mais informações visite o perfil de Matt no Behance e fique antenado pois o novo website do Venhuizen Studios estará pronto em breve.

Book Suggestion

Sugestão de Livro: The Lean Startup
Sugestão de Livro: The Lean Startup
A série semanal de sugestão de livros já é um sucesso no Abduzeedo.com e hoje estamos começando a postar a série aqui no Abduzeedo Brasil também, esperamos que gostem. O livro sugerido nessa semana é um livro de leitura obrigatória na minha opinião, é o livro The Lean Startup: How Today's Entrepreneurs Use Continuous Innovation to Create Radically Successful Businesses de Eric Ries.