Atenção: Este tutorial foi originalmente escrito por mim no fórum Webly.

LetterPress é uma técnica de impressão onde o texto (e algumas imagens) são impressos em relevo. Não sei bem o nome da técnica aqui no Brasil, mas deve ser algo relacionado a “relevo”.

Andei fazendo algumas pesquisas sobre tendencias para o webdesign e encontrei um artigo interessante da Smashing Magazine intitulado “Web Design Trends For 2009″ onde o primeiro item do artigo era justamente a tendencia ao uso da técnica LetterPress.

Sem mais enrolação vou demonstrar o efeito e ensinar como fazer. É simples, rapido, indolor e de extremo bom gosto (”extremo bom gosto” é coisa de critico de moda… estou me estranhando).

Do Smashing Magazine retirei alguns exemplos do bom uso da técnica:

Além desses exemplos é notável que a Adobe utilizou a mesma técnica na Splash Screen de seus produtos. Selecionei os três que mais uso para demonstrar:

OK agora vamos a parte prática:

• Criarei um novo documento em branco nas dimensões de 500px por 300px (deve estar de bom tamanho).

• Segundo passo é definir um bom background. Farei um degradê amarelo para tentar reproduzir as cores do próprio Fireworks. Para isso crio um quadrado na mesma dimensão do documento e aplico o degradê.

• O alvo do efeito será um texto qualquer. Escrevo meu nome e escolho uma cor cinza escura.

• Feito isso é chegada a hora da mágica. Em filtros escolha a opção Inner Shadow como na figura e a partir das configurações padrões mude apenas a distância da sombra para um valor onde a mesma não fique demais aparente. No meu caso mudei para 3, mas irá variar de acordo com o tamanho do alvo. Veja onde está o Inner Shadow e como ficou até agora:

Resultado até agora:

• Para finalizar, aplique o filtro Drop Shadow e altere sua cor para BRANCO (#FFFFFF). Também deve ajustar as outras configurações a fim de maior realismo. No meu caso deixei a distancia em 1 , o Gloss em 2 e a opacidade em 90%.

• O resultado final é esse:

O efeito é bem simples mas é refinado.

Gostaram?