como pasar de PSD a CSS en minutos

Paso 1: Abrir tu diseño en photoshop

Paso 2: Definir los cortes ( slices )

Aqui es importante cortar los elementos que usaras en tu web usando la herramienta “slices” (shortcut K) Con ella dibujamos los cortes que queremos que photoshop haga.

Paso 3: Hacer click en el tag de cada corte y ponerle un nombre significativo

Esto ayudara a que puedas entender de mejor manera el codigo una ves convertido a CSS. Trata de ponerle nombres que recuerdes a todos los elementos del diseño.

Paso 4: Repite la operación con todos los cortes

De esta manera nos aseguramos de obtener un codigo que puedes comprender mejor. Si eres programador estaras mas familiarizado con los leguajes de programacion. Pero si eres diseñador como yo, es mas facil si desde un principio utilizamos maneras para comprender el codigo mas facilmente. Al final de cuentas uno como diseñador web termina aprendiendo un poco de todos los codigos y lenguajes mas usados. :p

Paso 5: “Save for web & Devices”

Ya que tengas todo listo, haz click en FILE y en Save for Web & Devices y ahi seleccionas todas las SLICES o cortes y haces click en SAVE.

Paso 6: Settings : Custom

Se abrira una pantalla donde te pregunta donde quieres grabar. ANTES de hacer el Save, haces click en la parte baja del dialogo y en Settings seleccionas CUSTOM.

Paso 7: Seleccionar “generar CSS”

Navegas por las pantallas seleccionando 2 cosas: Exportar como (X)HTML yGenerar CSS ( por ID ). Esto en lugar de generar un codigo con tablas html generara un codigo usando las CSS.

Paso 8: Abrir la página y ver el Código. Listo!!!

Despues de que grabaste revisas tu carpeta y ahi habra un archivo HTML y su respectiva carpeta con las imágenes. Ya sera un trabajo posterior el acomodar a tu gusto y refinar el CSS generado. Esta es una solucióón muy rapida para hacer un armado de imagenes usando solo el photoshop. También es un excelente inicio para aquellos que quieren aprender de que se trata el CSS.