Foros del Web » Creando para Internet » HTML »

Aporte, Como pasar de PSD a CSS

Estas en el tema de Aporte, Como pasar de PSD a CSS en el foro de HTML en Foros del Web. Pasar archivos PSD a CSS Como diseñador siempre he buscado una forma de dejar las benditas tablas que tanto trabajo nos da a los que ...
  #1 (permalink)  
Antiguo 18/12/2008, 11:48
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.458
Antigüedad: 15 años, 8 meses
Puntos: 53
Información Aporte, Como pasar de PSD a CSS

Pasar archivos PSD a CSS

Como diseñador siempre he buscado una forma de dejar las benditas tablas que tanto trabajo nos da a los que no somos programadores y utilizamos photoshop para maquetear el contenido y así pasarlo a dreamweaver. Obviamente, este nos genera una tabla única con un monton de <td> y el estorbo de
Código HTML:
 <td><img src="images/spacer.gif" width="75" height="1" alt=""></td>
    <td><img src="images/spacer.gif" width="184" height="1" alt=""></td>
    <td><img src="images/spacer.gif" width="11" height="1" alt=""></td>
    <td><img src="images/spacer.gif" width="4" height="1" alt=""></td>
    <td><img src="images/spacer.gif" width="202" height="1" alt=""></td> 
Por todo lado, pues bien, que te parece si pasamos esos archivos psd a divs y css? Como?
Directo de Photoshop... no es una belleza… Yo lo he hecho con Photoshop CS3, no se si se puede con versiones anteriores. Asi que vamos al grano:

Herramientas:

Photoshop CS3 – Dreamweaver CS3

1. Primero, carga tu diseño de photoshop como siempre (o create uno).
2. Corta el diseño como siempre lo has hecho ( selecciona la herramienta de corte (“k”) y crea los slices. Si deseas orden, recuerda que cada slice es nombrado por photoshop con el nombre del documento más una extención, ejm: index_01.gif, index_02.gif, asi que si lo deseas puedes cambiarle ese nombre a cada imagen para tener un orden de diseño.
3. Listo todo esto, le damos “save for web” (ctrl + alt + shift + s ), como siempre para preparar el diseño para dreamweaver. Una vez ahi y con todo seleccionado por defecto le damos “save”.
4. Ahora si, aqui viene el chiste, en la ventana que abre vienen abajo las opciones de selección:
File name: aqui el nombre del archivo que se genera
Save as type: HTML and images (*.html)
Settings: Other
Slices: All slices

Settings es la que hace la magia aqui. Al seleccionar others nos habre una nueva ventana de opciones. Ahi vamos a seleccionar en:
Settings: Custom
En la opción de abajo: slices, esto nos pone abajo de ella un par de opciones a seleccionar, “generate table” “generate CSS”, adivinen... Exacto, marcamos generate CSS, en referenced le ponemos by ID. Le damos ok y Liiiiistoooo, nos quedo hermoso.

Vallan a ver su código desde dreamweaver y veran todo el documento esta lleno de css y divs.

5. Ahora algo superimportante, abierto el documento en dreamweaver nos vamos a file – convert – XHTML 1.0 Transitional y que creen, nuestro documento es valido para la W3C.

Suerte con sus diseños.

gVenom

aqui el word si lo quieren
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #2 (permalink)  
Antiguo 18/12/2008, 12:12
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 17 años, 5 meses
Puntos: 122
Respuesta: Aporte, Como pasar de PSD a CSS

Como tu dijiste, un documento lleno de CSS y divs que es igual de malo que las tablas... Lamento decepcionarte, pero no hay como hacerlo a mano.
De cualquier modo, imagino que a mas de uno le servirá la info.

Saludos.
__________________
twitter: @imbuzu
  #3 (permalink)  
Antiguo 18/12/2008, 13:29
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.458
Antigüedad: 15 años, 8 meses
Puntos: 53
De acuerdo Respuesta: Aporte, Como pasar de PSD a CSS

Cita:
Iniciado por buzu Ver Mensaje
Como tu dijiste, un documento lleno de CSS y divs que es igual de malo que las tablas... Lamento decepcionarte, pero no hay como hacerlo a mano.
De cualquier modo, imagino que a mas de uno le servirá la info.

Saludos.
Como todo, nada es perfecto, solo Cristo. Ya que lo mencionas se me olvidaba, sería bueno que tomen el código css y lo pasen a una hoja css, para luego incluirla en el archivo. Y desde luego, afinen el código a su gusto y necesidades...
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #4 (permalink)  
Antiguo 18/12/2008, 15:49
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 17 años, 5 meses
Puntos: 122
Respuesta: Aporte, Como pasar de PSD a CSS

Me gustaría preguntarte en que te basas para decir que Cristo es perfecto, pero ese no es el punto de este tema ni de este foro.

La recomendación que haces es muy buena. Convendría que quienes siguen tu mini tutorial tambien sigan esa recomendación.
__________________
twitter: @imbuzu
  #5 (permalink)  
Antiguo 18/12/2008, 23:56
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.725
Antigüedad: 22 años, 1 mes
Puntos: 998
Respuesta: Aporte, Como pasar de PSD a CSS

lamento decirte que todo lo que sea pasaje automático, es "desastroso" en mayor o menor medida.
Te explico porqué: el html es, por definición, un lenguaje de marcas (HyperText Markup Language). Como tal, el objetivo de las marcas es describir su contenido (osea, indican información sobre el tipo de información que estan marcando),... el problema es que los programas automáticos no pueden determinar la semántica de la información, y por lo tanto el html resultante es, necesariamente, malo.

Te cuento una anécdota de mi trabajo diario, que es justamente pasar psds a css... el otro dia estuve con mi ayudante hablando y discutiendo por 10 minutos para definir si determinada parte del contenido debía estar marcada con un DL o no. Ese tipo de decisiones solo las pueden hacer humanos... y es más , hay veces que la semántica es subjetiva, porque depende de lo que queramos transmitir.

Es tan malo diseñar con tablas, como tener un menu marcado a base de divs (un menu es una lista de enlaces, por lo que debe de usarse LI)

Cita:
Y desde luego, afinen el código a su gusto y necesidades...
mi experiencia me dice que la gran mayoría de las veces (por no decir todas), es mucho más dificil "afinar" el código, que crearlo a mano desde 0.
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -

Última edición por webosiris; 19/12/2008 a las 00:06
  #6 (permalink)  
Antiguo 19/12/2008, 08:00
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.458
Antigüedad: 15 años, 8 meses
Puntos: 53
Respuesta: Aporte, Como pasar de PSD a CSS

Mmmm, ya veo. Bueno a mi me facilita mucho el trabajo, porque ahora solo estoy yo diseñando, y son muchos clientes a los que hay que construirles todo el site, a base de un psd, y haciendolo a pie todo, no termino nunca. Aparte que como menciono, no soy programador ni un experto en HTML y menos _CSS. Pero se agradecen las criticas constructivas.
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #7 (permalink)  
Antiguo 19/12/2008, 21:19
 
Fecha de Ingreso: diciembre-2008
Ubicación: Cordoba
Mensajes: 127
Antigüedad: 15 años, 3 meses
Puntos: 17
Respuesta: Aporte, Como pasar de PSD a CSS

es que confundes muchas cosas hmtl y css no es programacion
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:00.