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