Texto Entalhado

[Bruno Augusto 417]

Boas,

 

Mais um problema dificílimo... pra mim, claro. :lol:

 

Gostaria de escrever um texto entalhado e pelos tutoriais que pesquisei, tudo não passa de um truque de sombras.

 

Eu fiz com base nesse vídeo e até que ficou legal... com as cores do tutorial ou sem o fundo <_<

 

Quando coloquei a imagem gerada sobre o meu fundo, em gradiente invertido a partir dessa outra dúvida (a qual eu muito sem educação esqueci de agradecer), ficou super esquisito.

 

Esquisito porque como o meu topo, do site é em tons fortes eu tentei fazer o texto branco:

 

Daí eu voltei alguns passos, para fazer igualzinho ao vídeo, isto é, num tom de cinza e ficou pior ainda:

 

E pra complicar ainda mais, eu quis colocar parte do logotipo por cima de um elemento com um background com noise (leve, mas presente).

 

Sendo assim, duas coisas:

 

Primeiro: Em o método do vídeo não sendo o melhor, como fazer então?

 

Segundo: Qual a combinação de cor mais adequada eu deveria usar?

 

Um detalhe pequenino. Esse tom rubro será UMA das variações do layout. Eu terei outros "sabores" em outras cores a gosto do visitante.

[WilliansS 73]

Bruno.

 

Nâo cheguei a ver o vídeo, más quando se fala de entalhe, tem um detalhe bem importânte que deve ser levado em conta. Pensa comigo, o que você entende por entalhar? A grosso modo eu diria: Bom pega uma ferramenta adequada e entalhe uma superfície, ai vem o detalhe, se você entalhar madeira, você verá madeira no entalhe, se você entalhar um melão você vai ver melão no entalhe. Deste modo, seria improvável entalhar uma superfície vermelha e ver uma branca ou cinza, ela necessáriamente deve ter um tom mais escuro da mesma cor da superfície. Ou a mesma vai passar a sensação que possui 2 camadas, Segue abaixo um exemplo.

 

O Efeito em si é bem simples, apesar de seu gradiente não ser adequado* para simular um entalhe (ja te explico pq), eu usei ele mesmo, para você ver como fica no exemplo:

 

 

*Seu gradiente não é adequado por que ele vem de cima para baixo com uma cor mais escura, e para que o entalhe tenha um toque mais realista o adequado é um to claro acima e escuro abaixo, passando a sensação de brilho, que por sua vez gera a sombra interna no entalhe.

 

Vamos ao efeito:

É bem simples como você disse.

 

1. Abra o fundo que você quer usar.

2. Escreva o texto com a fonte desejada.

3. Selecione a cor predominante em seu fundo e deixe o texto com alguns tons mais escuros que a cor da superfície.

4. Vá para layer>styles>dropshadow e mecha nas seguintes propriedades:

 

Inner Shadow:

Opacity = 58%

Angle = 90º

Distance = 4

Choke = 0

Size = 0

 

O Restante deixa como está. Pronto, você deve ver algo semelhante ao que eu mostrei na minha imagem.

 

Existem várias maneiras e efeitos adicionais que você pode criar para aumentar a realidade de seu entalhe, no meu exemplo acima, adiconei um brilho nas bordas para simular luz.

 

--

 

Detalhe importânte: (muito importânte)

Essas dicas que eu mostrei, aplican-se à fundos com poucas variações de cores, caso você queira simular um entalhe em uma superficie amadeirada ou com um desenho nela, você precisa subistituir o passo 3 pelo seguinte:

 

3. Com a tecla CTRL pressionada, clique sobre o thumb da layer do texto, você verá uma seleção com o formato do texto sendo criada. Feito isso, selecione a layer do background e precione CTRL+J, assim você cria uma imagem usando o "desenho" da imagem de seu back. Exclua a layer do texo, posicione a layer criada com o CTRL+J acima de todas e com o atalho CTRL+U ajuste o campo "LIGHTNESS" para -50%.

 

Esse passo 3 ta bem confuso, a intenção é só mostrar como fazer caso seu fundo possua desenhos ou imagens, acompanhe o resultado de uma simulação:

 

 

Se ficar com dúvidas ainda, não hesite em perguntar.

 

Forte abraço mano e bom FDS ai.

Att,

 

Willians

[Bruno Augusto 417]

Desculpa a demora pra responder. Estava doente... de novo <_<

 

Bem o gradiente sozinho ficou bonito, mas inflexível para se fazer qualquer coisa com ele, daí eu coloquei como cor de fundo uma das cores das etapas de transição geradas, para não ficar nem muito claro, nem muito escuro.

 

Aproveitei e subi ele para que não ficasse mais sobre o fundo com noise.

 

Deu nisso:

 

Não sei você, mas eu achei horrível. Incrível como algumas coisas ficam melhores na cabeça do que na tela. :lol:

 

Daí eu tentei a segunda dica, com algum fundo. Como eu não tenho um fundo, tentei usar o próprio gradiente e deu nisso:

 

Duas vezes horrível

 

Alguma sugestão, mesmo que completamente fora do escopo do tópico?

[tzp 24]

a reposta do Willians foi muito boa, mas a parte 3. Selecione a cor predominante em seu fundo e deixe o texto com alguns tons mais escuros que a cor da superfície, nao deixa o texto flexível pra um fundo diferente.

 

1- escreva o texto quanto maior as letras melhor fica o efeito.

2-deixe o texto na cor branca no blend mode deixe em multiply.

 

agora crie os estilos sao os mesmo pasos deo tutorial do video quase

 

1- color overlay, preto 50% multiply

2-o inner shadow em vez de vim por cima coloca em baixo

3-agora vem a parte que faz toda diferença, usa o inner glow pra criar a sombra deixei o blending mode em normal com a cor preta, e escolha o melhor tamanho pra tipo de fonte que você ta usando

4- mesmas coisas do video

 

eu testei e fico assim, como eu sempre acho que tudo que faco fica uma droga nao sei se fico bom

 

o link pro style ta aqui

talvez tenha que fazer uns ajustes no tamanho do inner glow e inner shadow e etc

[Bruno Augusto 417]

Desse jeito, ficou assim:

 

Mas que conste nos autos do processo que, pra variar, eu não consegui reproduzir e acabei usando o ASL pronto :pinch:

 

Não ficou de todo ruim, mas também não ficou aquela coisa que se diga "Minha nossa, que obra prima".

 

Mas tem um probleminha: Não posso exportar com fundo transparente, deixando só o texto e, assim, poder controlar o posicionamento livremente no HTML :huh:

 

É assim mesmo? Qualquer posicionamento que eu venha a querer fazer serei "obrigado" a abrir o PS e mover as camas de texto?

[tzp 24]

sou ruim explicando as coisas nao te culpo

 

eu ja imaginava que você ia querer usar isso em um site, o photoshop ta fazendo texto fica transparente pq o multiply deixa as cores claras transparente e o como texto e branco o prenchimento dele desaparece, mas quando você salva o imagem nao tem como ela fica com mulipley

 

entao pra resolver você tem que tirar toda a opacidade de preenchimento se tirar so a opacidade os efeitos vao sumir

 

eu tirei o drop shadow por nao fica bom depois no html o efeito

o color overlay troquei de 50% pra 25% com o fundo tava muito escuro nao dava pra ve direito as sombras ele ta bem nao e mais mulipley ta em normal

o seu texto o inner glow ainda ta muito grande por isso o efeito fico meio estranho e ta bam o inner shadow tem que fica menor

depois de troca tudo isso basta salvar em png 24 que vai ter a transparencia que você que

 

eu fiz o código pra mostra pra você como fica

 

o efeito ia fica bem melhor com uma fonte igual que o Willians uso

navegadores muito antigos nao suporta png transparente acho que o IE7 nao suporta nao lembro bem, nao e nada que deve se preocupar muito

[KhaosDoctor 242]

Bruno o problema é que seu fundo já é muito escuro, tente dar um Gradiente radial mais claro e fazer o que o Willians falou, o que não está te deixando terminar o trabalho é o seu gradiente no fundo porque você seleciona uma cor escure e ela fica quase toda preta, faça o entalhe primeiro no estilo do Willians e depois mexa nos levels para alterar a cor geral.

[Bruno Augusto 417]

@tzp: Entendi sua explicação e olha, no Photoshop ficou até que bonito:

 

Mas no site ficou diferente e, acredito que seja justamente pelo ponto que você mencionou:

 

Dá prafazer ficar igual sem a necessidade de exportar a imagem com o fundo?

 

Porque no Photoshop, se eu agarrar as duas layers e movimentar livremente pela área de desenho eu consigo ver a alternância de cores nas palavras quando elas ficam sobre a parte mais clara ou mais escura da imagem.

 

E é isso que procuro no efeito, pois no site, poderei controlar o posicionamento com margin sem me preocupar em estragar o gradiente do fundo.

 

Estamos quase lá galera. Go! Go! Go! :grin:

[Elektra 102]

Bruno, uma consideração.

 

Tem certeza que é isso que deseja? Um fundo pesado (cor e noise) e um efeito de texto pesado (fonte, tamanho e entalhe)?

 

Não gostei não! :pinch:

 

 

Nem ao menos vi o restante da página, mas apenas isso vira um chumbo.

 

 

Para um um gradiente semelhante ao que deseja, uma fonte alta, clara e leve, além de outros detalhes suavizantes pode oferecer um visual mais atraente. Pense nisso.

 

 

Abs

[Bruno Augusto 417]

Na verdade Elektra, eu sou tão criativo quanto um joão-de-barro, que sempre monta uma casinha pequena, redonda feita de barro e cuspe.

 

Olhando como um todo, o layout não ficou a oitava maravilha do mundo, mas também não ficou horroroso.

 

Já ouviu aquela máxima "Quanto melhor programador, pior será o designer". Então...

[Elektra 102]

Não repare o comentário Bruno, mas há detalhes que podem valorizar toda sua dedicação, na codificação 'expert' quanto obter um layout harmonioso.

 

Como mencionei, não vi o resultado, mas tenho certeza que está fazendo o melhor.

 

 

:thumbsup:

[Anderson Coutinho 7]

É bem simples , basta aplicar inner shadow e drop shadow , olha o tutorial que fiz para você:

 

1º Depois de criar o texto você vai em inner shadow e configura exatamente como está aqui:

 

 

2º Você precisa deixar o efeito em uma camada separada se não da mer...

 

 

3º Você aplica um drop shadow e coloca as seguintes configurações:

 

 

Resultado final:

 

 

 

Se redimensionar a o tamanho da imagem deixando-a menor , o efeito fica melhor

[Bruno Augusto 417]

Ficou bacana, mas e pra deixar o entalhe um pouquinho mais fundo?

[FK. 0]

Acho que o problema é que como o WillianS falou - que inclusive acabei aprendendo com isso, o texto deve ser um pouco mais escuro que a superfície. É por esse motivo que o texto não irá contrastar muito (num fundo escuro), dificultando sua leitura, e reduzindo sua identificação diante do layout.

 

Talvez o ideal seria um fundo mais claro, com o texto mais escuro como entalhe, e consequentemente, contrastando, como o que o WillianS postou.

Ou ainda, ao invez de usar entalhe, simplesmente usar um texto normal que contraste o fundo. Um exemplo é o logo do iMasters fóruns com texto branco sombreado e com fundo ciano escuro (eu acho).

 

---

 

Acho que não é errado o fundo escuro e o texto escuro, mas acredito que não irá contrastar muito.

[WilliansS 73]

Acho que o problema é que como o WillianS falou - que inclusive acabei aprendendo com isso, o texto deve ser um pouco mais escuro que a superfície. É por esse motivo que o texto não irá contrastar muito (num fundo escuro), dificultando sua leitura, e reduzindo sua identificação diante do layout.

 

Talvez o ideal seria um fundo mais claro, com o texto mais escuro como entalhe, e consequentemente, contrastando, como o que o WillianS postou.

Ou ainda, ao invez de usar entalhe, simplesmente usar um texto normal que contraste o fundo. Um exemplo é o logo do iMasters fóruns com texto branco sombreado e com fundo ciano escuro (eu acho).

 

---

 

Acho que não é errado o fundo escuro e o texto escuro, mas acredito que não irá contrastar muito.

 

Concordo plenameente maninho.

Só da pra conseguir um efeito desses com um fundo mais escuro =)... Parabens pela explanação!