Pregunta

Yo tenía mi sitio diseñado por un diseñador, tengo esta imagen de ella, quiero usar el mismo tipo de imagen para otros menús de navegación que quiero añadir ahora, mi diseñador no es el suministro de mí con psd de ella.

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

¿Cómo puedo saber qué efectos de texto y las fuentes que debo usar en photoshop para lograr el mismo tipo de resultado?

Gracias.

¿Fue útil?

Solución

Esto no es una cuestión de programación, aunque creo que puedo ayudarle.

  • Font-cara: Verdana (Regular)
  • Tamaño de la fuente: 14 / 15pt color: # 333333
  • El texto tiene un estilo de capa> Bisel y Relieve> Estilo: Relieve
    • Tamaño y Suavizar tanto 0px
  • Texto izquierda: dirección bisel hacia arriba
  • Texto de la derecha: dirección del bisel hacia abajo

Te jugar con los ángulos de sombra y pone de relieve que debería ser capaz de reproducir el efecto.

Otros consejos

Capa> Estilo de capa> bisel y relieve

pero esto se puede lograr sin una imagen en los navegadores que soportan la propiedad CSS text-shadow

Algo como esto

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

¿Qué la fuente ha satisfecho mi fuente reconocer las necesidades hasta ahora.

En realidad, parece que el tratamiento de texto es un poco inconsistente. En la imagen de la izquierda es el efecto de un bisel levantado que está viniendo hacia ti y en la derecha es un efecto de carta-prensa.

La imagen de la derecha es un poco más complicado desde el punto de vista del tratamiento de texto. Cuando en Photoshop, seleccione la capa de texto y mirar hacia la parte inferior del menú de capas para 'FX'. Elija 'FX' y una ventana pop-up.

Seleccionar superposición de degradado y establecer el gradiente usando blanco como color de primer plano y el negro como color de fondo (que debe predeterminado a esto). Llevar la opacidad a 15%.

Buscar siguiente en la barra lateral izquierda a la sombra de la gota y seleccione. Elija superposición en lugar de lo normal en el menú desplegable y cambiar su color a blanco (haciendo clic en la muestra de negro junto a la lista desplegable). Toda tu ángulos / dirección debe ser de 120 grados para esto. Aunque todavía en el menú desplegable de opciones de configurar su distancia al 2px y su tamaño a 3px.

Por último, aplicar una sombra interior. Probable la distancia y tamaño y deben reflejar la de la sombra de gota dado anteriormente.

En el fondo pestaña, parece que están haciendo dos cosas. En primer lugar la aplicación de un gradiente de superposición en la ficha y luego un ligero efecto de iluminación. En realidad, el efecto de iluminación puede ser difícil de duplicar en esta sutileza también lo hacen una de dos cosas. Crear otra capa en la parte superior de la ficha y crear una selección de la pestaña existente (tiene que asegurarse de que la primera capa pestaña rasterizar para hacer esto) y llenan de color blanco. A continuación, aplicar el efecto de iluminación y ajustar la opacidad de la capa para obtener el efecto deseado. O si usted es un poco artístico puede utilizar la herramienta de pincel con un relleno de baja opacidad y el peso de detectar esencialmente la pestaña en el centro con blanco.

En la imagen de la derecha, utilizar el mismo proceso para el tratamiento de la pestaña acaba de cambiar su color de relleno o de primer plano y de fondo superposición de colores de la pendiente y para el texto usar un simple gota de sombra con la distancia o 2 3px y 2px tamaño.

Hay una buen tutorial aquí acerca efecto tipográfica (desplazarse un poco para ver la instrucción).

Espero que ayude.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top