Um efeito grunge dá à tipografia e aos layouts um aspeto rugoso e não convencional, perfeito para designs modernos e criativos. Com o Photoshop, pode realizar facilmente este estilo utilizando texturas, máscaras e pincéis. Neste tutorial, vou mostrar-lhe passo a passo como dar à tipografia e aos layouts um autêntico aspeto grunge - desde subtilmente desgastado a intenso e caótico. Deixe a sua criatividade correr solta e dê aos seus designs uma dose extra de carácter!

1. o clássico: texto grunge com um aspeto urbano e sujo

O efeito grunge clássico é um texto intercalado com elementos sujos que dão ao texto o típico aspeto rasgado e sujo. Para criar este efeito, é necessária uma imagem que contenha as "estruturas de sujidade" para o texto.

Efeito grunge para tipografia e apresentação

Passo 1: Criar um novo documento

Em primeiro lugar, abro um novo documento utilizando o atalho Ctrl+N no tamanho 1200 x 800 pixels. O fundo é branco.

Efeito grunge para tipografia e apresentação

Passo 2: Colocar o texto

Utilizando a ferramenta de texto, desenho uma moldura de texto e escrevo as letras PSD a preto, utilizando um exército de 400 pontos.

Efeito grunge para tipografia e apresentação

Passo 3: Rodar o texto

O texto é sempre mais dinâmico quando está ligeiramente rodado. Por isso, movo o ponteiro do rato para os pontos de canto até o ponteiro do rato mudar para uma seta dupla. Agora posso rodar o texto. Escolho um ângulo entre 3 e 7 por cento.

Efeito grunge para tipografia e apresentação

Passo 4: Abrir uma imagem com um fundo estruturado

Abro uma imagem com estruturas rígidas e lineares que posso incorporar no meu texto como partículas grunge. As condições iniciais desta imagem determinam a estrutura de partículas que o efeito de sujidade terá no texto.

A minha escolha recai sobre uma imagem de uma árvore. Nesta imagem, tenho duas estruturas diferentes: por um lado, reentrâncias lineares na casca do coração da árvore para obter um efeito de dureza e, por outro lado, caraterísticas manchadas na casca "normal" da árvore.

Fonte da imagem: azaliya - Fotolia.com.

Se a imagem tiver sido colocada como um objeto inteligente no documento que já está aberto, posso convertê-la numa camada normal clicando com o botão direito do rato no objeto inteligente no painel Camadas>Rasterizar camada. Isto é importante porque, caso contrário, a minha correção de imagem subsequente não funcionará.

Efeito grunge para tipografia e apresentação

Passo 5: Aplicar o limite de correção de imagem

Posso filtrar os meus itens de sujidade desejados para o efeito grunge através do menu Imagem>Correcções>Limiar.

A correção de imagem Limiar converte todos os pixels da camada para preto e branco. Com o seletor de valor de limiar, posso utilizar a sensibilidade para controlar o ponto em que a separação em preto e branco deve ocorrer. Deslizo o seletor do valor de limiar de 128 para a esquerda, em direção a 1. Na pré-visualização, já consigo ver quando o efeito pode ser apropriado. Deixo o seletor em 96 e confirmo com OK.

Efeito grunge para tipografia e apresentação



Nota: Nem todas as imagens apresentam partículas de sujidade adequadas para efeitos grunge após a aplicação da correção do valor limiar. Nestes casos, basta tentar a correção de limiar com imagens diferentes até que uma imagem produza os resultados desejados.

Passo 6: Selecionar a gama de cores

Posso selecionar os meus pixels pretos na imagem através do menu Seleção>Gama de cores. Selecciono uma tolerância elevada e clico com a pipeta num campo preto da imagem. Depois confirmo com OK.

Efeito grunge para tipografia e apresentação

Passo 7: Partículas de sujidade numa camada separada

Utilizando Ctrl+C e Ctrl+V, copio os pixels pretos selecionados e colo-os numa nova camada.

Efeito grunge para tipografia e apresentação

Posso duplicar esta camada e colá-la na minha camada principal se as partículas de sujidade tiverem sido separadas num documento separado. Se já tiver separado as partículas de sujidade na camada principal, posso apagar todas as outras camadas da imagem.

Efeito grunge para tipografia e apresentação

Passo 8: Definir a sobreposição de cores

Nas opções de preenchimento da camada de partículas de sujidade, posso definir uma sobreposição de cor no tom de cor do fundo.

Efeito grunge para tipografia e apresentação



Isto cria o melhor efeito. O efeito grunge clássico está agora completo. Nos passos seguintes, gostaria de vos dar algumas dicas para o processamento posterior.

Passo 9: Máscara de recorte para o texto

Como a sobreposição de cores da camada de partículas de sujidade é baseada no fundo, não posso simplesmente selecionar um fundo diferente. Por isso, o ideal é dar à minha camada de partículas de sujidade uma máscara de recorte para a camada de texto. Faço-o com o atalho Ctrl+Alt+G ou com Alt e clico entre as duas camadas.

Desta forma, o efeito só funciona na área do texto.

Efeito grunge para tipografia e apresentação

Passo 10: Desfoque gaussiano

Se o efeito ainda parecer demasiado duro, posso arredondá-lo um pouco aplicando a desfocagem gaussiana com um raio mínimo de 0,3 pixéis à camada das partículas de sujidade. Isto torna as partículas de sujidade mais agradáveis à vista.

Efeito grunge para tipografia e apresentação

Passo 11: Criar uma moldura à volta do texto e da máscara de camada

Utilizando a ferramenta Forma personalizada, selecciono a moldura 7 das predefinições padrão e desenho-a à volta do texto. A camada é colocada acima da camada de texto e é-lhe dada a mesma tonalidade de cor que o texto.

O efeito grunge também deve funcionar na moldura. Por um lado, posso simplesmente duplicar a camada de partículas de sujidade com Ctrl+J e atribuí-la à camada da moldura como uma máscara de recorte.

Efeito grunge para tipografia e apresentação

Por outro lado, também posso simplesmente adicionar todos os elementos do texto e da moldura como uma máscara de camada.

Para o fazer, anulo a máscara de recorte com o atalho Ctrl+Alt+G e elimino a camada de partículas de sujidade previamente duplicada.

Selecciono o texto com Ctrl e clico na miniatura da camada de texto e adiciono a seleção como uma máscara de camada com a camada de partículas de sujidade activada, clicando no símbolo de adicionar máscara de camada.

Efeito grunge para tipografia e apresentação

Para a camada de moldura, selecciono o conteúdo da camada premindo Ctrl e clicando na máscara de vetor. Em seguida, clico na máscara de camada da camada de partículas de sujidade e preencho a seleção com a cor branca.

Efeito grunge para tipografia e apresentação



A vantagem de utilizar a máscara de camada é que não tenho de criar uma nova máscara de recorte com uma camada de partículas de sujidade sempre que adiciono mais texto ou elementos de forma. Isto significa que posso manter as partículas de sujidade centralizadas numa camada e simplesmente incluir o conteúdo da nova camada na máscara de camada.

Outra vantagem: se as opções de preenchimento estiverem activadas, é possível que o estilo de camada específico esteja acima da máscara de recorte na hierarquia e, por isso, seja apresentado na totalidade. Por isso, em caso de dúvida, deve ser sempre efectuado um cálculo alterando o método de preenchimento.

Passo 12: Otimizar a máscara de camada

Ao selecionar pixels utilizando Ctrl e clicando nas miniaturas no painel de controlo da camada, pode por vezes acontecer que pequenos contornos permaneçam após a seleção.

Efeito grunge para tipografia e apresentação

Por isso, selecciono o conteúdo da máscara com Ctrl, clico na máscara de camada e abro a caixa de diálogo Melhorar contorno com o atalho Ctrl+Alt+R. Aí, movo a margem para +100 por cento. A seleção é minimamente alargada.

Efeito grunge para tipografia e apresentação

Em alternativa, também posso simplesmente ir ao menu Seleção>Alterar seleção>Estender com um valor de 1 pixel.

Preencho a seleção alargada com cor branca dentro da máscara de camada. O pequeno contorno desapareceu.

Efeito grunge para tipografia e apresentação

Passo 13: Opcionalmente, ajuste as partículas de sujidade

Liberto a cadeia de ligação entre a máscara de camada e a camada. Isto significa que a máscara de camada permanece sempre nesta posição enquanto posso mover o conteúdo da camada.

Isto permite-me ver quais as partículas de sujidade que mais gosto na respectiva posição e mover a vista, se necessário.

Efeito grunge para tipografia e apresentação

O meu efeito grunge clássico está terminado - nesta imagem, com uma sobreposição de cor vermelha num fundo preto.

Efeito grunge para tipografia e apresentação

2. o efeito grunge aplicado com pincéis fixos

Como o efeito que utiliza uma camada de partículas de sujidade é bastante estático porque as partículas estão sempre dependentes de uma imagem adequada e estruturada, é aconselhável obter o efeito grunge utilizando pincéis fixos.

Qualquer pessoa pode criar rapidamente um pincel de grunge a partir de uma fotografia ou textura. É importante que o modelo a partir do qual o pincel é criado tenha conteúdo estruturado suficiente.

Passo 14: Utilizar a imagem com limiar modificado como modelo de pincel

Como a imagem da árvore já podia ser usada com as suas estruturas básicas para o efeito grunge clássico, também a posso usar para criar uma ponta de pincel.

Utilizo a ferramenta laço para selecionar uma área adequada na imagem.

Efeito grunge para tipografia e apresentação

Copio esta área com Ctrl+C e colo-a numa nova camada com Ctrl+V.

Selecciono os pixels das partículas de sujidade previamente coladas, premindo Ctrl e clicando na miniatura da camada.

No menu Editar, posso definir a predefinição do pincel.

Efeito grunge para tipografia e apresentação

Passo 15: Colocar texto

Num novo documento com um fundo de textura, desenhe uma moldura de texto e escreva a palavra Grunge com um Army Expanded de 160 pontos.

Efeito grunge para tipografia e apresentação

Passo 16: Criar uma nova camada e defini-la como uma máscara de recorte

Crio uma nova camada com Ctrl+Shift+Alt+N e defino-a com uma máscara de recorte utilizando o atalho Ctrl+Alt+G sobre a camada de texto. A máscara de recorte garante que as partículas de sujidade escovadas só são apresentadas no texto.

Efeito grunge para tipografia e apresentação

Passo 17: Pincel na pré-visualização do pincel

O pincel foi adicionado na parte inferior da pré-visualização do pincel.

Agora posso usá-lo em qualquer tamanho, cor e transparência. Para pincéis grunge, é aconselhável definir um jitter de ângulo médio nas propriedades de forma do pincel. Eu defini-o para 33%. Isto assegura que a ponta da ferramenta é rodada com cada novo clique e que não são utilizadas pontas de pincel que pareçam idênticas à primeira vista.

Efeito grunge para tipografia e apresentação

Passo 18: Pincelar

Com a minha nova predefinição de pincel, posso agora pincelar partículas de sujidade na nova camada usando branco, cinzento claro e cinzento escuro.

O efeito grunge é aplicado ao texto.

Efeito grunge para tipografia e apresentação

Passo 19: Acentuar o texto grunge

Para uma melhor visualização, desenhei uma área branca com a ferramenta retângulo (U) em branco por baixo da camada de texto com uma área de 40 por cento. Nas opções de preenchimento, também defini um contorno preto de 10 píxeis de espessura com 25% de opacidade.

Em seguida, adiciono uma sombra projetada com 75% de opacidade ao texto utilizando as opções de preenchimento.

O efeito grunge aplicado com uma ponta de pincel previamente definida está terminado.

Efeito grunge para tipografia e apresentação

Passo 20: Criar predefinições de pincel a partir de texturas

Na primeira variante, o pincel grunge foi obtido a partir das texturas de uma fotografia. Um pincel grunge também pode ser criado com a mesma rapidez a partir de uma textura. Só precisa de ser suficientemente estruturado para funcionar. Nesta textura, são necessários alguns pequenos ajustes para criar elementos grunge para uma ponta de pincel. Ocultei as camadas anteriores com o texto grunge aplicado.

A propósito, a textura é do nosso DVD duplo de texturas, que está disponível na loja PSD-Tutorials.de. A textura também está incluída neste tutorial como um ficheiro de trabalho.

Efeito grunge para tipografia e apresentação

Passo 21: Dessaturar a textura

Primeiro, dessaturamos a textura usando uma camada de ajuste Matiz/Saturação, reduzindo o seletor de saturação para -100.

Efeito grunge para tipografia e apresentação

Passo 22: Aumentar o contraste

No passo seguinte, selecciono a camada de ajuste Correção de tom e movo os dois cursores exteriores ligeiramente para o centro para aumentar o contraste da textura. Neste exemplo, os controlos deslizantes exteriores estão em 46 e 135.

Efeito grunge para tipografia e apresentação

Passo 23: Duplicar reduzido a uma camada

Se a textura mostrar que foi criada uma boa base para um pincel grunge, posso duplicar todas as camadas visíveis numa só. Faço-o com o atalho Ctrl+Shift+Alt+E.

Efeito grunge para tipografia e apresentação

Passo 24: Selecionar partículas de sujidade

Utilizando a ferramenta varinha mágica (W), clico numa área escura na camada resultante que deve representar o conteúdo de cor do meu pincel. A opção Smooth (Suavizar ) no menu é activada e é definida uma tolerância de 32.

Efeito grunge para tipografia e apresentação

Passo 25: Colar a área selecionada numa nova camada As áreas relevantes no pincel com o conteúdo de cor selecionado são selecionadas. Copio a seleção e colo-a numa nova camada. Posso apagar a camada anterior com a textura personalizada.

Efeito grunge para tipografia e apresentação

Passo 26: Selecionar o pincel grunge específico

Utilizando a ferramenta laço (L), posso agora selecionar facilmente o pincel de grunge desejado.

Efeito grunge para tipografia e apresentação

Copio a área selecionada com Ctrl+C e colo-a numa nova camada com Ctrl+V. Posso apagar a camada anterior com os elementos grunge previamente selecionados. Selecciono os pixels desta camada premindo Ctrl e clicando com o botão esquerdo do rato na miniatura da camada da seleção específica do grunge. Através do Menu>Editar, posso definir a área selecionada como predefinição de pincel.

Efeito grunge para tipografia e apresentação



A propósito: No PSD-Tutorials.de pode encontrar vários pincéis grunge para descarregar:

Grunge brushes for download

Passo 27: Aplicar os pincéis grunge

Tal como com a primeira predefinição de pincel, posso agora utilizar a segunda predefinição de pincel para aplicar elementos grunge.

Efeito grunge para tipografia e apresentação

3. Criar letras grunge desgastadas

As duas técnicas anteriores descrevem efeitos grunge em que foram aplicadas mais ou menos partículas de sujidade às letras.

As coisas ficam realmente grunge quando as próprias letras também recebem um aspeto desgastado. Esta técnica é baseada no deslocamento com uma matriz de deslocamento.

Passo 28: Criar uma matriz de deslocamento

Pego na textura existente e no meu pincel grunge criado anteriormente e pinto uma vez por todo o documento. (Se não tiver uma textura à mão, também pode simplesmente criar uma textura de nuvem utilizando o filtro de nuvem com as cores padrão activadas. Isto também funciona!)

Efeito grunge para tipografia e apresentação



Se a camada não for uma camada de fundo, converto-a numa usando o menu Layer>New>Background from Layer.

Guardo o ficheiro com o nome displacementmatrix.psd. A minha matriz de deslocação está pronta.

Efeito grunge para tipografia e apresentação

Passo 29: Colocar o texto

Num novo documento com o tamanho de 1200x1200 pixels, escrevo a palavra "Grunge" num Army Expanded de 160 pontos.

Converto a camada de texto num Objeto Inteligente, clicando com o botão direito do rato nopainel Camadas>Converter paraObjeto Inteligente.

Efeito grunge para tipografia e apresentação

Passo 30: Aplicar o filtro de distorção Offset

Agora o filtro Offset entra em ação. Infelizmente, a utilização do filtro Offset não é tão intuitiva como a que está habituado com outros filtros do Photoshop. No entanto, posso criar óptimos efeitos aplicando uma matriz de deslocamento, que pode ser utilizada particularmente bem para estruturas de superfície com elevações e depressões.

A matriz de deslocação distorce a imagem principal - neste caso, o meu texto - deslocando partes da imagem com base nas diferenças de brilho. Por isso, criei primeiro a matriz de deslocamento e ajustei o seu brilho em conformidade para o efeito de deslocamento.

Aplico o filtro de deslocamento com as seguintes definições:

- Deslocamento horizontal: 15

- Deslocação vertical: 3

- Botões de rádio:

  • Dimensionar para o tamanho da seleção
  • Repetir píxeis de margem

    O desvio pode ser introduzido até 100 por cento. 100 tem o efeito de um desvio de 128 pixéis. Como o efeito deve ser sobretudo lateral, o valor horizontal é superior ao valor vertical.

    Confirmo com OK.

    Efeito grunge para tipografia e apresentação



    No navegador de ficheiros que se abre, atribuo a minha matriz de deslocamento criada anteriormente ao filtro de deslocamento. É importante que a matriz de deslocamento tenha sido guardada como um documento PSD ou BMP.

    O efeito de deslocamento desfia completamente as margens do texto.

    Efeito grunge para tipografia e apresentação

Passo 31: Desfocar as margens desgastadas

Se o desgaste parecer demasiado salpicado, posso aplicar a desfocagem gaussiana com um raio mínimo de 0,2-0,4 pixels.

Efeito grunge para tipografia e apresentação

Passo 32: Efeitos de grunge nas margens

Agora também posso simplesmente duplicar as minhas texturas grunge do primeiro efeito para o novo documento. Isto dá-me uma bela moldura grunge para o texto grunge desgastado. Também defini uma sobreposição de cor vermelha nas opções de preenchimento da camada de texto.

Efeito grunge para tipografia e apresentação

Passo 33: Contorno branco

Para dar um pouco mais de ênfase ao texto, criei um contorno branco com um tamanho de 100 pixels na camada de texto.

Efeito grunge para tipografia e apresentação

Passo 34: Partículas de sujidade no texto

Se quiser coroar o texto grunge, duplico a camada das partículas de sujidade, dou-lhe uma cor branca e limito o efeito visível à área do texto. Para isso, selecciono o texto e adiciono a seleção da camada de partículas de sujidade duplicada como uma máscara de camada.

Efeito grunge para tipografia e apresentação

Passo 35: Variações de texto ainda possíveis

No entanto, se agora quiser um texto diferente, basta clicar na miniatura do objeto inteligente da camada de texto e alterar o meu texto no objeto inteligente original. Depois de guardar, todos os efeitos são aplicados ao novo texto. Fixe!

Efeito grunge para tipografia e apresentação

Passo 36: Transferir o efeito para o primeiro efeito grunge

Aplicando simplesmente o filtro de deslocamento ao primeiro efeito, posso transferir este efeito desgastado muito rapidamente. A matriz de deslocação continua a ser a mesma.

Efeito grunge para tipografia e apresentação

Passo 37: Solução para fundos não-monocromáticos

Neste caso, o efeito grunge refere-se a um fundo preto e pode sempre ser ajustado graças à sobreposição de cores na cor de fundo. Mas e se o fundo não for de uma só cor?

A melhor solução é simplesmente disparar o meu efeito grunge para o fundo. Ativo a camada superior com o efeito grunge. Basta criar a transparência que atravessa o fundo, o chamado recorte, definindo um recorte forte com 0% de área nas opções avançadas de preenchimento. Assim, não importa qual é o fundo.

Efeito grunge para tipografia e apresentação

O respetivo fundo transparece sempre no efeito grunge, neste caso um gradiente em tons de azul. Só é importante que o fundo também seja colocado como uma camada de fundo. (Se não for este o caso, selecione o fundo como habitualmente e, em seguida, clique em Camada>Novo>Fundo da camada no menu).

Efeito grunge para tipografia e apresentação



O que aconteceu exatamente? O entalhe causa uma espécie de ejeção de todas as camadas de suporte de transparência no documento. Todas as transparências no documento são agora cortadas, começando pela camada com a configuração de corte mais forte até à camada acima da camada de fundo. É como fazer um furo no documento, independentemente do número de camadas visíveis no documento.

As camadas de transparência são ocultadas exatamente neste ponto do texto. Como a camada de fundo não reconhece as transparências, o filtro aplicado à camada de fundo é sempre visível neste ponto. Isto significa que a camada de fundo pode ter todas as cores e brilhos possíveis. Estes tornam-se visíveis.

Efeito grunge para tipografia e apresentação



A propósito: Há também muitos tipos de letra que são facilmente adequados para efeitos grunge. Aqui está uma pequena lista:

  • Trashed
  • Calçada
  • Dirty Ames
  • Turbo Ripped
  • Neoprint M319.
  • Amante do Hawaii e Assassino do Hawaii
  • Rei e Rainha
  • Marcelle
  • Cowboys sangrentos
  • Nascimento de um herói
  • Alpaca 54
  • Uma dentada
  • Rótulo ácido
  • Doutor Atómico
  • Tom violence

    Por isso, se quiser poupar trabalho, basta utilizar tipos de letra já preparados.

    No entanto, o efeito é ainda mais fixe quando o cria você mesmo e mantém todas as opções de variação.

    Efeito grunge para tipografia e apresentação