Hola, intentando mejorar un poco la calidad de los posts voy a hacer un pequeño aporte con un tutorial.
Seguramente a mas de uno le ha pasado de descargar free templates y encontrarse, entre otros, con archivos PSD.
Hasta el día de hoy me preguntaba: "Pára que mier** quiero un PSD si solo sirve para abrirlo con Photoshop ?"
Pues hace un par de horas encontre la respuesta, y creanme que resulta bastante útil. Por qué? porque a partir de un screenshot por ejemplo van a poder crear su template con CSS y HTML y evitar usar las molestas tablas que para la Web 2.0 ya no van más. Bienvenido W3C...
Así comienza nuestra aventura (?):
El truco es sencillo, ayuda a un diseñador que no es un programador experto a convertir un layout en un acomodo en CSS usando DIVs. Lo que ahorras es no usar las tablas que suelen ser truculentas y cuyo codigo es mayor. Ganas en orden, en aplicar estandares de la web y en usar menos código.
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 y Generar 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.
Fuente: http://sdgestudio.wordpress.com/2008/01/12/breve-tutorial-como-pasar-de-psd-a-css-en-minutos/
Espero que les sea útil, Salu2.-
Seguramente a mas de uno le ha pasado de descargar free templates y encontrarse, entre otros, con archivos PSD.
Hasta el día de hoy me preguntaba: "Pára que mier** quiero un PSD si solo sirve para abrirlo con Photoshop ?"
Pues hace un par de horas encontre la respuesta, y creanme que resulta bastante útil. Por qué? porque a partir de un screenshot por ejemplo van a poder crear su template con CSS y HTML y evitar usar las molestas tablas que para la Web 2.0 ya no van más. Bienvenido W3C...
Así comienza nuestra aventura (?):
El truco es sencillo, ayuda a un diseñador que no es un programador experto a convertir un layout en un acomodo en CSS usando DIVs. Lo que ahorras es no usar las tablas que suelen ser truculentas y cuyo codigo es mayor. Ganas en orden, en aplicar estandares de la web y en usar menos código.
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 y Generar 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.
Fuente: http://sdgestudio.wordpress.com/2008/01/12/breve-tutorial-como-pasar-de-psd-a-css-en-minutos/
Espero que les sea útil, Salu2.-
