Pasar diseño PSD a CSS(plantilla HTML)

[ciisteado]

Hola a todos:

Mi problema es muy sencillo de explicar aunque no sé qué tan complicado sea resolverlo y es que necesito pasar el diseño PSD a un formato HTML para poderlo implementar en un sitio web...

¿Alguien tiene idea de cómo hacerlo? les agradeceré bastante si me brindan algunos tips para realizar esta conversión.

Saludos a todos!

[Lopezito]

Iniciado por ciisteado

Hola a todos:

Mi problema es muy sencillo de explicar aunque no sé qué tan complicado sea resolverlo y es que necesito pasar el diseño PSD a un formato HTML para poderlo implementar en un sitio web...

¿Alguien tiene idea de cómo hacerlo? les agradeceré bastante si me brindan algunos tips para realizar esta conversión.

Saludos a todos!

Supongo que debes ir a exporta para webs o algo así en photoshop
Saludos.

[andresdzphp]

Primero que todo tienes que saber como exportar las imágenes desde photoshop, si es va a ser una imagen de fondo, degradado o de contenido. Sacar sólo lo que vas a necesitar.

Luego en el html empiezas a escribir el contenido de tu página sin usar diseño, eso es trabajo de CSS y respetando siempre la semántica, si es un párrafo va en un párrafo <p></p> etc. Después encierras tu contenido en bloques con div... Contenedor, La cabecera, el contenido, el menú si tiene, el pie.

Cuando todo esto este listo pasas a CSS, y empiezas con los estilos de composición... Altos y anchos de los div, centrado, tamaño final del contenedor, si flotan debes colocarlos.

Cuando tengas la estructura lista, pasas a hacer los estilos generales, siempre empezando de arriba hacía abajo y de izquierda a derecha. Empiezas con los estilos del body como puede ser tipo de letra general, tamaño de letra y color de texto y color de fondo. Luego las cabeceras h1 h2 h3 los links... Luego la cabecera y vas ajustando todo como un rompecabezas.

Cómo punto final debes usar un reseteo de los estilos que trae por defecto el navegador para que no tengas problemas luego y tu diseño salga como tu lo esperas. Creo que es más fácil decirlo que hacerlo pero así me enseñaron a pasar los diseños de photoshop y fireworks.

Te dejo un reset: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

[Alucine]

Hola, yo también estoy aprendiendo y he empezado leyendo libros en la web (http://www.librosweb.es/ están muy buenos), viendo tutoriales, etc... pero éste tutorial en particular (es largo y muy completo) me ha sacado muchisimas dudas muy basicas que tenía sobre cómo pasar un diseño a css, ya que no es algo sencillo de entender si estás empezando de cero.
Aquí te lo dejo http://net.tutsplus.com/tutorials/si...-html-and-css/

Está en nglés pero como es en video no es escencial que lo sepas, vas viendo lo que hace.

Saludos!
Alucine

[ciisteado]

Iniciado por Alucine

Hola, yo también estoy aprendiendo y he empezado leyendo libros en la web (http://www.librosweb.es/ están muy buenos), viendo tutoriales, etc... pero éste tutorial en particular (es largo y muy completo) me ha sacado muchisimas dudas muy basicas que tenía sobre cómo pasar un diseño a css, ya que no es algo sencillo de entender si estás empezando de cero.
Aquí te lo dejo http://net.tutsplus.com/tutorials/si...-html-and-css/

Está en nglés pero como es en video no es escencial que lo sepas, vas viendo lo que hace.

Saludos!
Alucine

Hola Alucine gracias por tu respuesta, pero me creeras que el link esta mal ¿podrás ponerlo nuevamente?

Saludos!

[ciisteado]

Gracias a Lopezito,andresdzphp y Alucine por sus respuestas... he indagado un poco en la red y me encontré con estas 3 opciones de resolver mi problema, las comparto con todos:

Opción 1
Opción 2
Opción 3

Por supuesto si alguien tiene o sabe otra forma de resolver el problema, no duden en compartirla,

Saludos a todos!

[Alucine]

Iniciado por ciisteado

Hola Alucine gracias por tu respuesta, pero me creeras que el link esta mal ¿podrás ponerlo nuevamente?

Saludos!

uy, perdon, me parece que aun no le encuentro la vuelta a lo de los links jjaj

ahi va de nuevo a ver si anda

http://net.tutsplus.com/tutorials/si...ge-1/#comments

Ahi me voy a fijar en tus links, gracias por compartir!

[Alucine]

Iniciado por ciisteado

Gracias a Lopezito,andresdzphp y Alucine por sus respuestas... he indagado un poco en la red y me encontré con estas 3 opciones de resolver mi problema, las comparto con todos:

Opción 1
Opción 2
Opción 3

Por supuesto si alguien tiene o sabe otra forma de resolver el problema, no duden en compartirla,

Saludos a todos!

Ahí husmée tus links, un videotutorial que lo veré mas tarde, el otro muestra como exportar de photoshop las reglas css, que no sabia que podía hacerse jaja ya lo probaré. Y el otro es un software si mal no entiendo que te hace el trabajo, bueno si piensas comprar un software te dejo aqui uno que encontré que parece muy bueno, lo bajé de prueba pero la verdad que me enganché tanto estudiando como programar yo misma (que es lo que te recomiendo, porque a fin de cuentas de cualquier modo es muy útil, sino necesario, entender que sucede en el código de tu web, para solucionar problemas más rapidamente), éste es el software: http://www.medialab.com/

Mira, yo creo, en mi poco tiempo de estudio, que la clave es hacer la MAyor canitad de cosas con CSS, eso te permite más adelante modificar detalles de todas las páginas de la web mucho más rápidamente y además se carga mucho más rápido ya que utiliza cálculos matemáticos y no la carga de tantas imágenes.

Por ejemplo, si tienes que hacer un botón, lo puedes diseñar en photoshop, guardar su estado normal, hover y presionado y en el css hacer la regla para que cuando el mouse realize esas acciones se carguen esas imágenes individuales.

Formas más simples y con más css de hacer eso:

1-usas sprites css, que es una técnica con la que guardas los estados del botón en le mismo archivo (jpg o png) y en css le dices la parte de ese archivo que debe mostrar cuando el mouse realize sus acciones. Lo positivo de esta técnica es que ni bien se carga la web, se cargan esas imágenes que ya contienen todos los botones. Si utilizas archivos separados para cada estado, cuando poses el mouse sobre el boton, tardrá unos segundos en cargarse la segunda imagen y eso no queda bonito.

2- Suponinedo que tu botón sea una gradiente, en lugar de exportar todo el boton, exportas solo una línea de 1px de el mismo, que contenga esa gradiente, y en css simplemente cargas ese pequeño archivo y le dices que lo repita horizontalmente. Así estás ahorrando muchísimo peso en la carga de archivos.

3- Lo máximo de css que puedes usar: directamente no usas imágenes, sino que creas el fondo del botón indicando su color en css, y puedes agregarle borde. Para recrear gradientes y otros efectos necesitarías usar reglas de CSS3 lo cual ya es discutible, ya se está usando pero no es soportado nativamente por navegadores antiguos.

Bueno, yo creo que entender eso es la base de usar css para diseñar, tienes que tratar de convertir la máxima cantidad de elementos del diseño a css, sin exportar tantas imágenes del diseño original. Justamente eso te enseña el tutorial que te envié, tienen un muy lindo diseño y solamente exporta 3 o 4 pequeñas imágenes y lo demás lo recrea a través de reglas en css.

Espero te sirva mi experiencia, saludos!

Alucine

[ciisteado]

Espero te sirva mi experiencia, saludos!

Eso y más estimada Alucine fijate que me ha sido de mucha ayuda todos tus tips, revisando el software que me recomendaste me parece atractivo(evaluaré si mi presupuesto alcanza para adquirirlo ).

Como tal yo suponía existía alguna forma más simple que maquetar "a mano" con CSS, pero atendiendo a tus recomendaciones y otros tantos posts que he leído creo que la mejor forma de resolver este problema es precisamente armar tu template con puro CSS, ya te estaré refiriendo si me surge una duda con los estilos pues pese a que si lo he utilizado en muchos casos, no me considero un experto en el tema.

Mil gracias por tu información y de igual forma quedo de ti para cualquier comentario,

Saludos!