Desde casi toda aplicación tenemos la opción de guardar como HTML pero desde luego el resultado es normalmente un código sucio, obsoleto y poco flexible. La aplicación online que os presento Free, Fast and Easy CSS webpages! | psd 2 CSS Online puede ser de gran ayuda para aquellos diseñadores que sí trabajan con Photoshop o GIMP pero para los que CSS, XHTML y demás código no es su especialidad.
En pocas palabras, psd2cssonline.com es un convertidor online gratuito de archivos con capas a archivos HTML. Al decir archivos con capas os adelanto el quid de esta aplicación, todo se basa en las capas, por eso además de Photoshop puedes utilizar GIMP.
Insisto en que esto es una ayuda para los iniciados en el diseño web y para proyectos relativamente sencillos, si eres un profesional seguro que harás tu trabajo de diseño en Photoshop o Fireworks y luego maquetarás la página con un editor como Dreamweaver. Por cierto si este es tu caso, ¿cuál prefieres para crear gráficos para web? ¿Photoshop o Fireworks?
En psd2cssonline.com sólo tienes que subir el archivo, máximo 4MB aunque el autor haría una excepción si contactas con él, y luego guardar la página web resultante.
El trabajo viene antes, preparar ese archivo, esas capas, se aconseja lo siguiente:
- Minimizar el número de capas, una vez creado el diseño guarda el archivo por seguridad pero combina las capas que pertenezcan al mismo elemento antes de subirlo a psd2cssonline.com
- Rasteriza todas las capas que tengan una opacidad distinta de 100% o algún modo de fusión distinto de Normal.
- Si usas GIMP, haz que las capas no tengan el mismo tamaño de la imagen, del menú contextual elige «Autocrop Layer».
Hay muchas más opciones que tendrán relación con el nombre de las capas, psd2cssonline.com va a buscar en el nombre de las capas las palabras clave:
- ‘_text’ – Text Sections
- ‘_jpg’ – JPG Image,
- ‘_link’ – Links
- ‘_linkover’ – Roll Overs to go with your links
- ‘_center’ – Centered CSS elements – even your whole page
- ‘_bkgnd’ – CSS background-image
- Mixing Naming Conventions
- Examples
De forma que si una de tus capas se llama contenido_text no será convertida en imagen, se creará un div donde deberás insertar el texto, por defecto se le aplicará la propiedad overflow por si el texto ocupa más que aparezca el scroll. Mi consejo es que hagas estos cálculos con antelación.
Las capas que se nombren _jpg resultarán en imágenes jpg en vez de PNG, el formato de imagen por defecto.
_link añadira la etiqueta <a> a esa imagen, tendrás que poner manualmente la URL del enlace.
Si tienes una capa _link puedes crear una imagen de rollover nombrándola igual pero en vez de _link pones _linkover.
_center sirve para centrar aquellas capas anidadas, por defecto al igual que el comando Guardar para web de Photoshop, psd2cssonline.com utiliza el posicionamiento absoluto pero con esta keyword puedes centrar el contenido.
_bkgnd hace que la imagen generada no sea <img> sino que forme parte del fondo de la capa mediante CSS.
Por último deciros que también permite varias palabras claves en una misma capa, por ejemplo si nombramos una capa header_jpg_bkgnd será un jpg que actuará de fondo en vez de una <img> jpg.
Vídeotutoriales:
The Gimp and layers with ‘_text’ in the name
Make Links and Buttons with your Layer Names
Image Rollovers for your Links!
hsocgx irbxqna ocetymx
xapoe cvue hfzpulv