Photoshop a CSS

En este tutorial veremos como convertir un templete hecho en photoshop a una pagina web xhtml con CSS directamente desde photoshop.

Este metodo es recomendable para diseñadores que no conocen mucho de codigo. Es una manera muy sencilla de empezar y poder jugar con el codigo para aprender a modificarlo.

Empezamos con un templete basico para pagina web.  Te recomiendo veas el articulo: partes de un blog, para tener una idea de cómo debe de ser tu diseño y que partes debe de contener.

Lo primero que haremos sera determinar las diferentes partes de nuestra pagina como el banner, botones, sidebar, etc. Todas estas partes las señalamos con guias.

Seleccionamos la herramienta slice tool (herramienta de corte)

Con esta herramienta seleccionamos las partes marcadas con las guias.

Una vez que hemos realizado todos los cortes seleccionamos la herramienta slice select tool (herramienta seleccionar corte)

Con el boton derecho o con ctrl. Clic seleccionamos cada uno de los cortes.

En el menu de las opciones del corte procedemos a ponerle un nombre en particular, como por ejemplo banner.

Asi hacemos con cada uno de los cortes.

Una vez que tengas todos los nombres vas al menu file/save for web and devices (archivo/salvar para web)

Haces clic en salvar

En el menu que aparece a continuación seleccionas en formato HTML e imágenes, y en  settigs/other

A continuación te aparecera un menu donde especificaras la opciones para guardar como pagina web.

En la primer ventana seleccionas la opcion xhtml y das siguiente

Ahora selecciona generar CSS y By ID

En la siguiente ventana podras escoger el color de fondo o incluso una imagen

Por ultimo le damos ok y salvar.

El resultado sera un archivo HTML con una carpeta con imágenes.

Si abrimos el archivo HTML en la seccion superior se encuentra el codigo CSS

En la parte inferior HTML

Con unos pequeños cambios en el codigo podemos agregar texto a las secciones que determinamos para esto. Primero agrego el texto en la division correspondiente

Luego modifico la regla CSS para determinar el tipo de letra, color, color de fondo, etc.

Listo, tenemos una pagina muy basica hecha con photoshop. Esto te ayudara mucho para hacer templetes rapidos con los que luego puedas modificar a mas profundidad el codigo.

Espero les sea de utilidad.