Maquetar PSD con CSS

[kain_raziel]

Que tal bueno mi duda es algo grande y si alguien del foro me pudiese ayudar se los agradecería bastante.

Primero que nada tengo diseños realizados en Photshop, el meollo de todo esto es que quisiera maquetar mi diseño que anteriormente he hecho en photoshop, y según tengo entendido eso lo realizo con css el problema es que no tengo mucha noción de como realizar dicho proceso aquí pongo un ejemplo de un diseño que he realizado en photoshop.



No se que tan difícil sea que alguien me oriente al respecto y de antemano muchas gracias por prestarle atención a este post.

[ContactarNET]

Te paso a comentar, para maquetar tendrias que tener conocimientos en HTML y CSS relativamente altos, no es una tarea dificil una vez que ya lo sabes usar y tenes tus trucos, pero al empezar se te puede complicar un poco con el tema de los flotantes, etc.

Podrias hacer algun curso en internet hay muchisima informacion, tambien hay un videotutorial de 16 videos , que te explica como pasar de psd a XHTML, que tengo entendido es muy bueno, quizas con eso puedas orientarte un poco.

si lo que quieres es darle vida a esa interface, nesecitas tambien tener conocimientos en php, ya que es un sistema de usuarios.

pd: y agregarle un boton de login XD jaja

Saludos,
Gabriel.

[mdk]

Como ya te ha dicho ContactarNET si no tienes conocimientos de HTML y CSS primero de todo, te recomiendo que veas este enlace y cuando termines con ese, empezar con este otro de CSS más avanzado, creo que con ellos, tendrás las suficiente información, para empezar a maquetar tu dibujo hecho en Photoshop.

Una vez tengas los conocimientos, te explico cómo lo haría yo. Primero pondría la imagen de fondo que tienes, a continuación crearía una capa con el recuadro de la contraseña, y luego con varias capas más, dentro de esta, pondría la descripción y los casilleros de usuario y contraseña. Las letras que tienes en la imagen, las metería dentro de capas, y no lo cargaría demasiado de imágenes. Pero cada uno tiene su forma de maquetar.

Saludos.

[kain_raziel]

Iniciado por ContactarNET

Te paso a comentar, para maquetar tendrias que tener conocimientos en HTML y CSS relativamente altos, no es una tarea dificil una vez que ya lo sabes usar y tenes tus trucos, pero al empezar se te puede complicar un poco con el tema de los flotantes, etc.

Podrias hacer algun curso en internet hay muchisima informacion, tambien hay un videotutorial de 16 videos , que te explica como pasar de psd a XHTML, que tengo entendido es muy bueno, quizas con eso puedas orientarte un poco.

si lo que quieres es darle vida a esa interface, nesecitas tambien tener conocimientos en php, ya que es un sistema de usuarios.

pd: y agregarle un boton de login XD jaja

Saludos,
Gabriel.

grax grax por la respuesta, y con respecto a conocimientos de html y css, lo único que se me complica es el css aun no lo he usado de manera formal por así decirlo de ahí en fuera tanto lenguajes de programación html, php y eso ya tengo bastante noción de lo que puedo realizar con ellos.

Si me puedes ayudar con el enlace de esos vídeos que me comentas = me ayudaría mucho yo se que tengo que chutarme unos cuantos manuales.

PD: Si es verdad se me olvido el botón jaja.

[kain_raziel]

Iniciado por mdk

Como ya te ha dicho ContactarNET si no tienes conocimientos de HTML y CSS primero de todo, te recomiendo que veas este enlace y cuando termines con ese, empezar con este otro de CSS más avanzado, creo que con ellos, tendrás las suficiente información, para empezar a maquetar tu dibujo hecho en Photoshop.

Una vez tengas los conocimientos, te explico cómo lo haría yo. Primero pondría la imagen de fondo que tienes, a continuación crearía una capa con el recuadro de la contraseña, y luego con varias capas más, dentro de esta, pondría la descripción y los casilleros de usuario y contraseña. Las letras que tienes en la imagen, las metería dentro de capas, y no lo cargaría demasiado de imágenes. Pero cada uno tiene su forma de maquetar.

Saludos.

Grax = me leeré los dos para entender un poco mas sobre el CSS