Pergunta

Eu tinha o meu site concebido através de um designer, eu tenho esta imagem a partir dele, eu quero usar o mesmo tipo de imagem para outros menus de navegação que eu quero adicionar agora, meu designer não está me fornecendo com psd`s dele .

http://i42.tinypic.com/2afc4fm.jpg text alt

Como posso saber o que efeitos de texto e fontes devo usar no photoshop para obter o mesmo tipo de resultado?

Obrigado.

Foi útil?

Solução

Esta não é uma questão de programação, mas eu acho que posso ajudá-lo.

  • Font-face: Verdana (Ordinário)
  • Tamanho da fonte: 14 / 15pt Cor: # 333333
  • Text tem um estilo de camada> bisel e emboss> Estilo: Gravar
    • Size & Soften tanto 0px
  • Texto esquerda: direção de bisel para cima
  • direito Texto: bisel direção para baixo

Eu você brincar com os ângulos de sombreamento e destaques que você deve ser capaz de replicar o efeito.

Outras dicas

Layer> Layer Style> bisel e emboss

mas isso pode ser alcançado sem uma imagem em navegadores que suportam a propriedade css text-shadow

Algo como isto

text-shadow: 0px 1px 0px #B5B5B5;

Qual a fonte satisfez minha fonte reconhecendo as necessidades até agora.

É realmente parecido com o tratamento de texto é um pouco inconsistente. Na imagem à esquerda, o efeito é um chanfro levantou que está vindo em sua direção e na direita é um efeito letter-press.

A imagem à direita é um pouco mais envolvido do ponto de vista do tratamento de texto. Quando em Photoshop, selecione a camada de texto e olhar para a parte inferior do seu menu de camadas para 'fx'. Escolha 'fx' e uma janela irá aparecer.

Selecionar sobreposição de gradiente e definir o gradiente usando branco como a cor de primeiro plano e preto como a cor de fundo (que deve padrão para isso). Trazer o baixo opacidade para cerca de 15%.

Em seguida olhar na barra lateral esquerda para soltar sombra e selecione. Escolha sobreposição em vez de normal a partir do menu suspenso e mude sua cor para branco (clicando na amostra de preto ao lado do drop-down). Todos os seus ângulos / direção deve ser de 120 graus para isso. Enquanto ainda no drop down opções definir o seu raio de 2px e seu tamanho para 3px.

Por fim, aplique uma sombra interna. Propensos a distância e e tamanho deve espelhar a da sombra dado acima.

Para o fundo guia, parece que eles estão fazendo duas coisas. Primeira aplicação de uma sobreposição de gradiente na guia e, em seguida, um efeito de iluminação leve. Na verdade, o efeito de iluminação pode ser difícil de duplicar a essa sutileza tão fazer uma de duas coisas. Crie outra camada em cima da guia e criar uma seleção a partir da guia existente (você tem que ter certeza que a primeira camada guia é rasterizada para fazer isso) e preencha com branco. Em seguida, aplique o efeito de iluminação e ajustar a opacidade da camada para obter o efeito desejado. Ou se você está um pouco artístico, você pode usar a ferramenta pincel com um preenchimento de baixo peso e opacidade para essencialmente manchar o separador no meio com branco.

Para a imagem à direita, use o mesmo processo para tratar a guia apenas mudar sua cor de preenchimento ou Gradient Overlay primeiro plano e cores de fundo e para o uso de texto uma sombra simples com distância de 2 ou 3px e 2px tamanho.

Há um bom tutorial aqui sobre efeito tipografia (rolagem para baixo um pouco para ver as instruções).

Espero que ajude.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top