Webly: Letterpress - Efeito De Relevo - Webly

Ir para

IMPORTANTE: Todos os tutoriais postados neste fórum irão automaticamente para o portal Webly. Contribua você também e faça parte da equipe de colaboradores que fazem a evolução da web. Obrigado.
Página 1 de 1

Letterpress - Efeito De Relevo Efeito parecido com o feito por impressoras de pressão. Avaliar tópico: ***** 1 Votos

#1 Membro offline   PXzin Ícone

  • Spiderman?
  • Ícone
  • Grupo: Coordenadores
  • Posts: 1324
  • Cadastrado: 03-janeiro 07
  • Localização:Sorocaba SP

Postou 06 fevereiro 2009 - 06:03

Olá, revivendo a categoria de tutoriais para Fireworks para alegria da galera.

Tutorial Letterpress

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).

Exemplos

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



Imagem

Imagem

Imagem

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:

Imagem


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ê.
Imagem
  • O alvo do efeito será um texto qualquer. Escrevo meu nome e escolho uma cor cinza escura.
Imagem
  • 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:
Imagem

Resultado até agora:
Imagem
  • 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%.
Imagem

  • O resultado final é esse:
Imagem



O efeito é bem simples mas é refinado.

Gostaram?

Postei no meu Blog também!
Reformulando...
0

#2 Membro offline   Micox Ícone

  • Comunidade de desenvolvedores
  • Ícone
  • Grupo: Administradores
  • Posts: 5511
  • Cadastrado: 03-julho 06
  • Localização:Goiânia-GO
  • Interesses:Webly e elmicox.blogspot.com

Postou 06 fevereiro 2009 - 10:36

Muito bom.
valeus.net/mwords - Links automáticos p/ o MercadoLivre em seu texto

Ajude, responda: mesmo que não saiba exatamente a resposta, seu pitaco pode dar uma luz no problema do outro.
Não respondo dúvidas por MP / Email / MSN e afins. O fórum está aqui pra isto.

elmicox.blogspot.com
0

#3 Membro offline   DPLF Ícone

  • DPLF
  • Ícone
  • Grupo: Membro Amigo
  • Posts: 372
  • Cadastrado: 21-setembro 07
  • Sexo:Male
  • Localização:Manaus / AM
  • Interesses:Em linguagens novas como PHP, scripts, melhorar o meu aproveitamento no DW, Flash e outros softwares que possam ajudar-me a desenvolver meus SITES. Como fuçador do Photoshop também gostaria de aprender mais sobre ele.

Postou 12 fevereiro 2009 - 09:28

Olá gente;

Vivendo e aprendendo, estou gostando cada vez mais aqui do Fórum, se era apaixonante quando entrei, agora então não consigo deixar de olhar cada post e ir aprendendo, qualquer hora eu vou postar algo como tutorial também, afinal não sei muito, mas um poquito de um pouco eu sei!

Grandes e fortes abraços à todos;

DPLF
[size="1"]Só sei o pouco que sei, o resto vou atrás para aprender. Quem sabe se eu aprender eu possa um dia ensinar também![/size][url="http://www.webmanaus.com"]
[/url]
[url="http://www.webmanaus.com"][size="1"]www.webmanaus.com
[/size][/url][url="http://www.webmastersanddesigners.com"][size="1"]www.webmastersanddesigners.com[/url][/size]

0

#4 Membro offline   KeyMaster Ícone

  • Ícone
  • Grupo: Membro Amigo
  • Posts: 185
  • Cadastrado: 18-outubro 08
  • Localização:Pedro Osório, RS
  • Interesses:Administração, Webdesign, Programação, Marketing, música. Esqueci de citar Administração

Postou 12 fevereiro 2009 - 11:37

Muito bacana, parabéns!

No Photoshop, no Blending Options, tem o Bevel que é específico para isto, não?
Lula, Lula, beijomeliga

http://www.eualexandre.com.br
0

#5 Membro offline   AdrianoRJ Ícone

  • Ícone
  • Grupo: Membro Amigo
  • Posts: 370
  • Cadastrado: 29-junho 07
  • Localização:Rio de Janeiro

Postou 13 fevereiro 2009 - 12:08

Bem legal...
Já é uma idéia para eu poder aplicar em algumas das minhas montagens...
:thumbsup:

Irwin acabe de salvar Mandy, então o Billy pergunta:
-Como e que o Irwin ficou assim tão legal?
Puro Osso: -É que o amor faz as pessoas fazerem coisas idiotas.
Billy: - Eu amo tudo!
Puro Osso: -Isso explica muita coisa....
---------
Filosofia de Billy:
"...podemos escolher amigos ... e tirar melecas ... mas não podemos tirar melecas do amigo, você tem que deixar eles serem quem são ... e tirarem sozinhos..."
0

#6 Membro offline   PXzin Ícone

  • Spiderman?
  • Ícone
  • Grupo: Coordenadores
  • Posts: 1324
  • Cadastrado: 03-janeiro 07
  • Localização:Sorocaba SP

Postou 13 fevereiro 2009 - 07:56

Ver postKeyMaster, em 13/02/2009 - 00:37, disse:

Muito bacana, parabéns!

No Photoshop, no Blending Options, tem o Bevel que é específico para isto, não?


pesquisarei...
(é que sou o cara Fireworks, nem me achego muito em Photoshop)
Reformulando...
0

#7 Membro offline   David Cruvinel Ícone

  • Alguma Coisa!
  • Ícone
  • Grupo: Coordenadores
  • Posts: 1976
  • Cadastrado: 25-agosto 06
  • Localização:Guaxupé - MG

Postou 18 fevereiro 2009 - 11:11

bacana, parabéns!
Portal Onde tem Festa - Divulgação e Cobertura de Eventos
www.ondetemfesta.com.br

DEC WebSites - Desenvolvimento de WebSites
www.decwebsites.com.br
0

#8 Membro offline   DCouto Ícone

  • Ícone
  • Grupo: Membros
  • Posts: 7
  • Cadastrado: 05-novembro 08

Postou 19 fevereiro 2009 - 05:10

Ótimo tutorial,

Também não utilizo o Fireworks a muito tempo, mas com o Photoshop o processo pode ser feito exatamente da mesma forma que o resultado será o mesmo.
Como o @KeyMaster citou, você pode utilizar o Bevel and Emboss para um efeito semelhante, apesar de que eu acho mais simples utilizar os sombreamentos mesmo.

Parabéns. ;)
0

Página 1 de 1


Resposta rápida

  

1 usuário(s) está(ão) lendo este tópico
0 membro(s), 1 visitante(s) e 0 membros anônimo(s)