Ver Mensaje Individual
  #1 (permalink)  
Antiguo 18/12/2008, 11:48
Avatar de gVenom
gVenom
 
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.458
Antigüedad: 15 años, 9 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