Diseño web en Photoshop, ¿CSS fiables?
5 seguidores
Me explico ya que en el titulo no he estado muy inspirado.
Estoy ahora muy metido en una web que tiene que llevar los estilos de texto de las css muy controlados, los interlineados, espaciados, grosores, tamaños.... y tengo la sensación de que las opciones de photoshop no son muy fiables a la hora de pasarlo a css.
Hago un ejemplo.
En photoshop tengo un cuerpo 12px de Lucida Grande con un espaciado -10 y un interlineado de 20. ¿como se traduce esto a css?
Para ver los estilos de texto casi siempre utilizao csstype.com pero ya os digo que cuando pongo un -1 de espaciado ¿a que equivale en la paleta de photosohp?
gracias!
bute
Gracias mambrú
Usuario desconocido
En cuanto a tamaños, es igual CSS que photoshop. Interletrados, a ojo.
No sé porqué la gente se complica tanto... porque a mi me parece que lo explicas bien clarito.
bute
matMac y Mambrú creo que son los que han pillado por donde voy.
Yo no pretendo ponerme a programar las css pero si pretendo darle un PSD tan mascado al maquetador que no haya problemas despues de malas interpretaciones.
Lo que dice matMac es lo que siempre hago y lo que supongo que seguiré haciendo, el ojimetro!!!
gracias a todos!
eyrwebnet
Hola de nuevo. Tienes que comprender que la Programación y El Diseño gráfico van unidos pero son distintos en sus propiedades. CSS tiene capacidad total para poder realizar cualquier proyecto, siempre que se introduzcan los valores especificos. El inconveniente es que los navegadores interpretan el CSS según sus modelos; IE tiene un modelo de uso y Mozilla otro distinto, etc.
Es tan complicado como pueda ser PhotoShop, con el añadido que una vez realizado un trabajo en CSS , tiene que ser interpretado por los navegadores que se pretenden utilizar.
Tendrás que buscar las propiedades especificas de CSS 2.1 e intentar migrar los valores que tienes a los valores de las propiedades especificas CSS para cada caso; sino, tendrías que encargarle el proyecto CSS a un Colaborador.
Saludos.
matmac Profesor Plus
Hola Bute, la verdad es que creo que CSS y Photoshop tienen algunas cosas en común pero las medidas en algunos casos no son iguales y creo que nunca lo serán, yo te recomiendo el método tradicional, Hacerlo a Ojo!!!
Usuario desconocido
A ver, si es que yo creo que no es eso lo que quiere saber, ni SEO ni na.
El tamaño de la fuente es fiable 100%.
Si quieres ver cómo va a estar renderizada una tipografía por un navegador (Safari lo hace de puta madre), ponla en formato Ninguno.
El interletrado en photoshop es una de sus carencias (o por lo menos yo no me entero mucho) respecto al tema web, porque en web trabajas en px (me da igual que lo llames ems, siempre vas a tirar con proporciones de pixels), así que eso acaba siendo más o menos a ojo.
No se me ocurre cómopasar de esos em (o px) a los interletrados del photoshop, la verdad.
Por lo demás, puedes dejar una web clavadita a su diseño en PS si te lo curras (y sabes, of course).
Usuario desconocido
Bute
A definir esto en CSS:
le pones un nombre al class para usarlo en el html por ej
.console{ font-family:"Lucida Grande";
font-size:12px; /*el tamaño que lo puedes ir variando y probando al q se adecue */
letter-spacing:-1px; /*aqui es el espaciado por caracter*/
line-height:20px} /*esto sería el interlineado del texto*/
En Photoshop hay 2 maneras del espaciado en una palabra, el tracking y el kerning, el 1ero afecta a la palabra o frase o lo q sea, y el kerning afecta individualmente a cada letra. Para usar el kerning tienes que ir seleccionando con el cursor de texto, letra por letra y aplicar kerning mas, o menos (Alt + Der o Izq), el kerning se usa gralmente para corregir el "overlap" (encimado) entre letras producido por el tracking, o sea, se usa constantemente.
En css, el equivalente seria con word-spacing: valor y letter-spacing: valor
Espero haberte ayudado.
bute
Yo tb lo he utilizado alguna vez pero lo que me refiero es como en photoshop das esos valores de espacios em
eyrwebnet
Hola. El asunto es entender que CSS es similar a PhotoShop en los aspectos de diversidad de opciones disponibles.
En PhotoShop puedes componer una imagen con un zoom determinado mediante capas superpuestas para tener un plano mas reducido e iir eliminando capas para tener una perpestiva más amplia de la misma, abarcando más horizontalidad y verticalidad. En CSS es parecido.
Puedes pasar las medidas mencionadas a "px" para disponer la imagen para posicionamiento absoluto. Pero puedes pasar las mismas medidas entre otras a porcentaje, permitiendo entonces tener la imagen fluida para resoluciones diferentes con la misma calidad en relación con las dimensiones de la imagen.
Lo que tienes que tener claro es para qué tipo de diseño quieres esa "migración" a CSS y, por ende; para qué tipo de objetivo. No todo se construye igual para todo en CSS, principalmente por los aspectos determinantes SEO.
Si quieres más información teórico y/o práctica, contacta.
Saludos.
egoexmachina
Yo uso esto:
http://www.typetester.org/
bute
me sirve Gorus pero no para esto creo. Aunque me lio un poco pero bueno.
Yo no voy a maquetar nada, pero me gusta hacer de base las cosas bien para facilitar que salgan como yo quiero finalmente.
¿como controlais vosotros eso?
gorus Plus
No es la respuesta que buscas, pero igual te viene bien este post, donde se comentaba el truco para hacer que 1em mida exactamente 10px.
Usuario desconocido
La paleta de photoshop es fiable en cuanto a tamaños, pero lo que es el interletrado....