Pasar archivos PSD a CSS by ojp13483

VIEWS: 0 PAGES: 2

									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
   <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

								
To top