web a partir de plantilla psd

[Baldur]

Hola! Soy programador en VisualBasic, C, PHP, HTML...pero malísimo en diseño gráfico...xD
El caso es que ayer pasandome por una web de PSD´s, me encontré con un artículo llamado: Web 2.0 Layout Free PSD.
Me descargué el psd y es una completa plantilla para hacer una web.
Pero claro, ahí me entró la curiosidad, ya que yo nunca he usado este tipo de cosas.

Y por eso os pregunto: ¿Como se hace una web a partir una plantilla PSD?
[URL="http://psdfreebee.com/web-20-layout-free-psd/"]Web 2.0 Layout Free PSDURL]
Se hace la estructura con tablas en HTLM y luego se colocan "cachos" de imagen de la plantilla??

Me gustaría informarme acerca de este tipo de métodos...de como se hace una web a partir de una plantilla como esa...

Muchas gracias por la ayuda!
Un Saludo y Gracias!

[Anya82]

hmm... dificil de explicar para mi, pero hare el intento.

Ya que tienes tu diseño en PSD, lo que tienes que hacer, es planear como se estructurara. Que partes seran imagenes, y cuales seran codigo. Como los colores de fondo, por ejemplo, o el texto, etc.

Despues, utilizando lineas guia y reglas de Photoshop, vas trazando tu esquema guia para poder cortar imagenes.

Cuando tengas esa estructura, utiliza el Slice Tool, que es una herramienta con un iconito de una navaja o exacto. Con ella, vas trazando los cuadros de las imagenes que necesitaras, apoyandote con tus lineas guia.

Una vez que tengas cortado todo tu diseño, te vas a File>Save for Web o File>Save Optimize as...
Ahi, puedes elegir imagen por imagen, y definirles que tipo seran (Gif, jpg, png, etc), asi como la calidad que tendran acorde a su tipo.

Guardas esas imagenes, y en la ventana que te aparecera para nombrar tus imagenes, en la parte de abajo, te pide elegir si quieres:

A) guardar solo HTML
Te guardara unica y exclusivamente las tablas formadas acorde a los cortes que hiciste con el Slice Tool

B) guardar solo IMAGENES
Te guardara unica y exclusivamente las imagenes cortadas segun tu uso del Slice Tool.

C) guardar IMAGENES yHTML
Te guardara tanto las tablas como sus imagenes acomodades segun tu uso del Slice Tool.


En el folder/carpeta que tu les indicaste para guardar tus imagenes, todas las nombrara igual, pero con el numero de corte (el numerito que aparece en un pequeño cuadro en cada imagen que cortaste) por ejemplo: pagina_01, pagina_02,.... pagina_n


Estoy en mi trabajo ahora, asi que no puedo dedicarle mas tiempo o hacer un tutorial con imagenes. Pero espero que te ayude en algo esto que te respondo.

Mucha suerte, y espero que otras personas tambien puedan ayudarte y/o complementar lo que publiqué.

[Baldur]

muchas gracias por la info!

[roc2107]

También si quieres ahorrarte todo ese proceso puedes mandar tu archivo a http://www.psdahtml.com/ y ellos te mandan el html bien armado.

Saludos

[apisdev]

Oigan ese servicio de PSD a HTMl se ve interesante, pero creoq ue crear una web aprtir de un Archivo PSD en cuestión de práctica y conocimineto del codigo html yc omo dicen Anya82 hay que pensar en laestructura de la web, definir los bloques principales. cabecera menu, contenido central, barras laterales pie de pagina, luego debemos determinar que partes serán imagenes como bordes redondeados, marcos o textos muy elaborados como el titulo, logo, tutilos del a página que deseen poner con efectos es mejor hacerlso como gráficos, para la parte donde se ponen los contenidos es mejor usar un color o imagen de fondo desde nustro PSD y eltexto debe ser texto de HTML los botones podemos sacarlos tambein desde nuestro diseño en PSD. Yo a veces comparo el trabajo de hacer un diseño desde un PSD como un trabajo artesanal por que puedes optimizar mucho para que tu html sea liviano y siempre en lo posible 100% igual al diseño del PSD.

Practica y mas practica es lo que recomiendo.

saludos