Breve tutorial como pasar de PSD a CSS en minutos!

Truco en photoshop que recien puse en práctica hoy.

El truco es sencillo ayuda a un diseñador como yo que no es un programador experto a convertir un layout en un acomodo en CSS usando DIVs. Lo que ahorras es no usar las tablas que suelen ser truculentas y cuyo codigo es mayor. Ganas en orden, en aplicar estandares de la web y en usar menos código.

creacion_paginas_web
creacion_paginas_web

Paso 1: Abrir tu diseño en photoshop


convert psd to css tutorial

Paso 2: Definir los cortes ( slices )

Aqui es importante cortar los elementos que usaras en tu web usando la herramienta “slices” (shortcut K) Con ella dibujamos los cortes que queremos que photoshop haga.
convert psd to css tutorial

Paso 3: Hacer click en el tag de cada corte y ponerle un nombre significativo

Esto ayudara a que puedas entender de mejor manera el codigo una ves convertido a CSS. Trata de ponerle nombres que recuerdes a todos los elementos del diseño.
convert psd to css tutorial

Paso 4: Repite la operación con todos los cortes

De esta manera nos aseguramos de obtener un codigo que puedes comprender mejor. Si eres programador estaras mas familiarizado con los leguajes de programacion. Pero si eres diseñador como yo, es mas facil si desde un principio utilizamos maneras para comprender el codigo mas facilmente. Al final de cuentas uno como diseñador web termina aprendiendo un poco de todos los codigos y lenguajes mas usados. :p
convert psd to css tutorial

Paso 5: “Save for web & Devices”

Ya que tengas todo listo, haz click en FILE y en Save for Web & Devices y ahi seleccionas todas las SLICES o cortes y haces click en SAVE.
convert psd to css tutorial

Paso 6: Settings : Custom

Se abrira una pantalla donde te pregunta donde quieres grabar. ANTES de hacer el Save, haces click en la parte baja del dialogo y en Settings seleccionas CUSTOM.
convert psd to css tutorial

Paso 7: Seleccionar “generar CSS”

Navegas por las pantallas seleccionando 2 cosas: Exportar como (X)HTML y Generar CSS ( por ID ). Esto en lugar de generar un codigo con tablas html generara un codigo usando las CSS.
convert psd to css tutorial

Paso 8: Abrir la página y ver el Código. Listo!!!

Despues de que grabaste revisas tu carpeta y ahi habra un archivo HTML y su respectiva carpeta con las imágenes. Ya sera un trabajo posterior el acomodar a tu gusto y refinar el CSS generado. Esta es una solucióón muy rapida para hacer un armado de imagenes usando solo el photoshop. También es un excelente inicio para aquellos que quieren aprender de que se trata el CSS.
convert psd to css tutorial

.
Anuncios

98 comentarios sobre “Breve tutorial como pasar de PSD a CSS en minutos!

  1. Bueno, yo soy aprendiz en esto de programacion. Pero en diseño grafrico, algo me defiendo. He leìdo el tutorial, y me parece interesante, lo pondrè en practica. Muchas gracias

  2. Sinceramente los felicito, excelente su árticulo.

    Tenia tiempo buscando una solución.

    Muchas gracias!!

    Enrique Estrada

  3. ola, yevava tiempo buskando esto….

    ago todo = pero luego lo abro con el dreamweaber
    y me sale todo pa bajo… desordenado y nos e me guarda ningun archivo en las carpeta de imagenes el de los codigos no lo guarda
    saludos

  4. mmm algo debio fallar. Ya se a que te refieres: te sugiero que revises que los DIVs tengan la propiedad “float:left;” (sin las comillas).

    Esto lo puedes revisar en el CSS generado. Por eso esta “desordenado”.

  5. Tengo una duda:

    Hay alguna manera de que el texto quede como texto y no como imagen?

    Muchas gracias!!

    Un saludo

  6. SI HAY MANERA de dejar solo como texto parte de lo que pases a CSS desde phosothop.

    Lo tendrias que hacer en 3 pasos.

    1.- exportas la parte que quieres que lleve el texto. Exportas SOLO el fondo SIN texto, ese se agrega despues.
    2.- despues de exportado cambias la imagen del DIV por una propiedad CSS de “background” asi quedara de fondo.
    3.- Agregas el texto en ese DIV y le das el formato que quieras. Asi el diseño se mantiene y le puedes agregar texto.

    Voy a poner un tutorial de eso, hoy estaba grabando los video tutoriales, pero he tenido MUCHO trabajo a la brevedad posible lo subire.

    Suerte y gracias por la visita y comentario.

  7. Muchas gracias sdgestudio, por tu tiempo y esfuerzo.

    Realmente un excelente aporte, he logrado poner el texto, utilice tablas y espacios gif para que el texto quedara en el lugar correcto, aunque pasa los estandares de accesibilidad y compatibilidad, creo que debe de haber una manera mas limpia de hacerlo.

    Estaré pendiente para ver el video tutorial

    Nuevamente gracias!

  8. Muy buena explicacion, pero temgo una duda estoy montando un blog para esta pagina http://www.galaxisound.com, pero quiere personalizar lo tengo todo el diseño en psd, pero no sabria como convertirlo en un theme para wordpress, esto me puede ayudar en algo, tu me puedes par msa informacion de lo que debo hacer??, gracias

  9. Hola, me ha encantado el tutorial este que pones. Yo hace tiempo que hice un curso de html en Sun, y ha cambiado un montón el tema, ya que yo de html bien, pero todo en tablas, ahora con la maquetación en css estoy super perdida, y claro, no quiero ponerme de 0 a elaborar webs con código puro y duro. Entiendo el código y lo leo, pero prefiero pasar de diseños en psd a css directamente.
    Muchas gracias.

  10. en qué photoshop hay que hacerlo. Lo estuve probando en el CS2 y me quedé en el Paso 7: Seleccionar “generar CSS”

    está pensado para el CS3

    abrazo!

  11. muy bueno tutorial la verdad me sirvio de mucho solo tengo una preguntilla qisiera qme ayudaran al generar el psd me sale en la parte superior izqierdo ubicada mi plantilla qisiera q me ayudaran a como centrarla en el navegador en intentado de muchas formas y no me resulta en cambio si la genero en forma de tabla esta si resulta pero es mas comodo trabajar con CSS de antemano graxias por su ayuda

    respuesta:
    Podrias meter tu diseño en un DIV y llamarlo con un ID=”wrapper” y usar el codigo que a continuacion te dejo:

    #wrapper {
    width:790px;
    margin: 0px auto;
    position: relative;
    }

  12. Estaria bueno que se pueda generar el css como archivo externo, aunque se puede pasar fadsilmente desde el dw. Otro aspecto es que se pueda indicar que te pase las imagenes como background por defecto. Indicarle que te genereo (o no) el texto por detras, y lo que se ve, por delante mediante el css, o directamente el texto plano solo. He visto un plug-in, ahora no recuerdo el nombre, funcionaria (no lo prove del todo), con platillas hechas por vos, que mas o menos seguis un orden o estan +/- estructurada, pero por lo que probee no queda bien cudrado con plantillas de esas que se compran o similares.

    = depende el uso que le des, y demas cosas, si afecta mucho o poco esto, pero no estaria de mas que se incluya en una version de PS. Salu2.

  13. Interesante aporte, gracias. Talvez es recomendable para realizar los div principales del sitio a desarrollar y no todo un sitio, ya que se tornaría un poco lento en la carga.

    Saldu2.

  14. Manito mi gran problema es y ahora como puedo introdicirlo en wordpress o en bloger porq no se ccomo introducirlo por favo necestio eso

  15. Hola Q tal.. GRacias Por el Aporte un exitaso!
    subistes los tutoriales ?
    estoy interesado en eso
    te lo agradeceria! con el alma!

  16. Gran Duda, no hya forma la página que he maquetado con photoshop de centrarla en dreamweaver. Se me queda toda a la izquierda. He probado con absolutamente todo.

    Si alguien tiene la respuesta y puede ayudarme me agregue al msn y me comenta porfa:
    blasamrc@hotmail.com

  17. si se puede centrar todo, tienes que meter todo tu maquetado en un DIV y poner un CSS en el body y en el DIV que contiene todo:

    el el body aplicale un CSS asi:
    #body_css { text-align:center; }

    y en el DIV que contiene todo tu maquetado:
    #wrapper_all { width:800px; margin:0 auto; position:relative; text-align:left;}

    NOTA: lo del text align en el BODY y en el DIV es un Hack para que funcione bien en IE

    Basicamente lo que hace que se centre el contenido es el margin:0 auto; con la posicon relativa y especificando el ancho de tu documento.

  18. hola es mi primera vez,q entro aqui y me ha servido muchisimo..me interesaria saber acerca de lo preguntado de
    SI HAY MANERA de dejar solo como texto parte de lo que pases a CSS desde phosothop.Si me puedes pasar un tutorial te lo agradeceria..saludos romi de Cordoba argentina

  19. creo que lo que quieres es hacer tu diseño en photoshop, pero…. solo usar el fondo y poner el texto en HTML, es asi? lo que hay que hacer es que el fondo vaya como bakcground en el CSS y asi podras poner encima el texto y darle formato como mejor lo desees. Espero haber alcarado un poco tu duda.

  20. Esta bueno el tuto, pero queria preguntar:

    Como hago para crear los links que se van a ver dentro del sitio, o sea donde se van a ver los diferentes contenidos, hay que cargar la misma pagina con el contenido agregado cada vez que vamos a otra parte del sitio?, porque ya que no esta hecho con frames supongo que seria asi… si hay una posibilidad de hacerlo com si hubieran frames me podrian decir?.

    Gracias

  21. pues mira normalmente a una palabra le agregas un link: MENU PRINCIPAL y para agregarle un link tienes que poner un codigo HTML mas o menos asi:

    MENU PRINCIPAL

    de esta manera lo que estas haciendo es que MENU PRINCIPAL te lleve a google.com, esta es la manera como empiezas a hacer tus vinculos en tu sitio usando los nombres de los archivos que tu vas creando.

  22. uso Phtoshop CS3 para Mac. busa en FILE > Save for Web.

    Esta a la mitad del menu contextual que se despliega, esa opcion esta desde versiones anteriores. Saludos

  23. He estado buscando este articulo, que bendicion, gracias profesor por esto, lo necesitaba para optimizar mi web, pero quisiera que me ayudaras con algo, es que trabajo en fireworks y quisiera saber si se puede hacer lo mismo desde fireworks y como, te agradeceria que me respondieras prontamente

    at

    jorge rendon
    webmaster

  24. si se puede, de hecho esta funcion viene de fireworks, no tengo firefworks en mi maquina pero si recuerdo que es la misma herramienta, los slices y a la hora de exportar lo haces como CSS, espero ser de ayuda, tendras que buscarle pero no sera dificil, solo ten paciencia.

  25. Hombre muchas gracias estaba buscando justo un genial aporte como este
    de veras feliciotaciones y espero ansioso la parte donde se verá como trabajar con texto sin que quede como imagen

  26. HOLA Nc d cuando es este post pero esta muy interesante y productivo para muchos, pero lo estos haciendo y todo perfecto hasta que le doy guardar y me crea la carpeta con las imagenes perfecto!! pero no m crea en archivo html :s …solo slices…

    alguien sabe que puede estar ocurriendo? stoy muy urgido! c lo agradecria muchisimo!!

  27. Tienes que seleccionar la opcion Guardar Imagenes y HTML , esta en el menu donde das aceptar. Fijate bien y por ahi esta esa opcion. Suerte

  28. si, era eso, mil gracias!!!

    ahora solo queda el detalle de ponerle el texto a toda la web y las acciones de rollover de los botones o imagenes…

    pero te agredzco x este simple tutorial.
    aunq aun n entiendo x q los demas tutoriales son tannnn complicados si esto es una forma de hacerlo automatico.

  29. Hola.
    sigo teniendo la duda anterior. esto es CSS de que tipo.. por que al yo generarle esto a los programadores con que trabajo me comentan que no esta correctamente como para pasar a la face de programacion.

    y realmente estoy facinado con tu ayuda, pero es practicamente el unico tutorial facil, por que el resto son total-mente distintos…
    esto tiene un nombre? es CSS d capas, de tablas, de cajas… es para guiarme de alguna forma ya que estoy tratando de aprender.

    respuesta rapida: pues mira, para programar se trabaja con DIVs que tienen algun identificador ID, con esto le puedes hacer target mediante javascript, php, jquery, etc…. ya depende de lo que necesiten los programadores, lo que yo te explico es una manera basica en la cual te puedes ayudar para aprender el funcionamiento y empe<ar a ahacer tu codigo a mano y a tu gusto. recuerda que debes aprender a usar los DIVs y a posicionarlos mediante atributos como "position:relative , absolute, inherit" y con "float: left, right, clear:both" etc… lo mejor para posicionar es en cajas de DIVs

  30. pues mira, para programar se trabaja con DIVs que tienen algun identificador ID, con esto le puedes hacer target mediante javascript, php, jquery, etc…. ya depende de lo que necesiten los programadores, lo que yo te explico es una manera basica en la cual te puedes ayudar para aprender el funcionamiento y empe<ar a ahacer tu codigo a mano y a tu gusto. recuerda que debes aprender a usar los DIVs y a posicionarlos mediante atributos como "position:relative , absolute, inherit" y con "float: left, right, clear:both" etc… lo mejor para posicionar es en cajas de DIVs

  31. Aqui tambien hay un excelente tutorial para Convertir un PSD a HTML con ejemplo incluido disenoestudio blogspot.com/2010/03/convertir-un-psd-html.html

    Suerte en el proceso

  32. hola a todos, me parece un excelente tuto, ademas de valiosos comentarios que aportan. pero me gustaria saber un poco mas, son un bb en esto, se los aseguro, he seguido este tuto al pie de la letra, tratando claro de terminar en una pagina joomla. mi resultado fue catastrofico. creo que fue por la formacion de cada div, pero todo mi material como lo habia hecho muchos cortes e la psd, cada corte se puso uno debajo del otro, ya no tenia la forma de mi bonito psd, imagen debajo de imagen, no podia creerlo, ya que me tomo desde las 7 pm hasta las 4 am, realizar el tuto y empezar a darle forma en php. se que lo hice mal, es mi culpa, no se nada de esto, si alguien sabe algun tuto que me de mas capacidad para terminar mi joomla template, porque el tuto estubo super, corte mi psd y me dio un css con un html, pero despues de allí no tengo idea de lo que debo hacer. gracias por este tuto, esta geneal.

  33. puedes descargar de manera gratuita una plantilla Joomla desde mi sitio web http://sdgestudio.com/plantillas_web_gratuitas.html lo que tendras que hacer es ver como esta estructurado el CSS o las tablas que contienen el diseño de la plantilla. Tambien hay para sistema Magento, Zencart y Drupal en el caso que quieras tambien descargarlas gratis para aprender como fueron construidas.

    Si requiere paciencia y mucho analisis. Basicamente es tener conocimientos basicos de PHP y CSS para ver como arman el diseño. Suerte

  34. una pregunta, por lo que veo en tu plantilla, parece no ser necesario incluir todas las imagenes en el archivo index php, solo llamarlas desde alli a lo que esta en el css?
    tu disculpa pero como no se mucho, y estoy apenas metiendome en esto de plantillas. gracias…

  35. no es un mal recurso, incluso genera mejores codigos que muchos sitios q hay en la vuelta. aun asi creo que coincides conmigo que la mejor manera de hacerlo es a mano ya que la mayoria de los sitios que podemos desarrollar se nutren de detalles que serian imposibles de cortar para Photoshop… de todas maneras, exelente recurso para quien recien empieza.

    Saludos, y felicitaciones por el blog.

  36. una pregunta para sdgestudio o para cualquiera que sepa
    segui paso a paso el esquema de aqui, este tuto me ayudo un monton, no digo que ahora sepa demasiado, pero si creo que me puedo defender, jeje gracias a ustedes.
    ahora bien, tengo un leve problemita, lo que sucede es que las plantillas que quiero confeccionar de mi cabecita, lo deseo para montarla en joomla.
    pero el problema esta en que al editar la plantilla, lo hago con mi razonamiento, refiriendome a que si quiero un titulo de 20px lo pongo y ya, pero esto todo trabajandolo en mi casa.
    que pasa, que me he dado cuenta que por mas que le ponga detallitos no me funciona al 100%, ya que por lo menos los modulos tienen su propio estilo que no se basan en mis requerimientos, si lo dejara todo para html fuera fantastico pero para joomla no se que hacer. si pude crear un modulo buscar colocandole los mismos detallitos que tengo en mi html, pero valla, solo es uno, y aunque me quedo igual que en mi html, no asi para todo.
    mi pregunta es que puedo hacer para que todo lo que tengo en joomla posea los mismos estilos que yo implemente al crear mi plantilla.
    gracias de antemano

  37. este plugin me puede quitar el pan con el que alimentar a mis hijos… hay que renovarse.. al menos no lo convierte en una plantilla de wordpress o joomla.. eso si que lo hago yo

  38. Hola!!
    Fantástico tutorial!!!!
    Pero tengo 2 preguntas:

    1-¿hay alguna manera de que los div’s que te generan sean Div´s normales y no Div´s PA?

    2-¿finalmente hiciste el tutorial para exportar el texto y que te lo conserve como tal?

    Muchas gracias y felicidades por el tutorial!!!

  39. hola como se hace a pasar un formulario hecho en photoshop
    a dreamweaver para que funcione.
    o hacer una imagen de boton y despues hacerlo funzionar en dreamweaver
    gracias

  40. Hola a todos,
    estoy siguiendo el tutorial, con Photoshop CS5 y me genera un archivo con extensión .IROS
    El código que tiene no es legible en modo texto.

    ¿Sabeis que estoy haciendo mal?

    Gracias por anticipado

  41. Hola!

    Quisiera saber si hay algún modo de que cuando paso mis elementos de PSD a Dreamweaver, no se hagan como imágenes dentro de DIV PA o capas, sino como DIV normales…

    Gracias!!^^

  42. Si…me refiero a los DIV que se generan cuando exportas los sectores y le das a “generar CSS”, que son en posición absoluta (DIV PA).
    Quisiera que me generaran DIV en posición relativa (DIV “normales”)

  43. Ah…pensaba que había otra manera…ya había probado a hacerlo manualmente (cambiar position:absolute a position:relative en el CSS) pero no me sirve porque me altera todo el diseño original…

  44. Este articulo describe una solucion bastante apropiada para quien tiene prisa por publicar su diseño como pagina web, sin embargo, el codigo se genera automaticamente, no esta optimizado (tiene mucha basurilla) y no tiene en cuenta el caracter dinamico de los contenidos de una pagina web, con lo cual es necesario manipularlo y depurarlo posteriormente. Yo recomendaria buscar un servicio profesional de conversion a CSS. cssgangsters

  45. PUes como una alternativa tambien puedes considerar el instalar un sistema auto administrable como el Joomla y seleccionar una plantilla. De este modo pues tendras la flexibilidad de poder agregar tu y todos los que esten marcados como administradores de agregar y editar los contenidos. he aqui un ejemplo de como se ve al joomla con le diseño por defaul t que tiene: http://sdgestudio.com/joomla15/ y aqui podras encontrar algunas plantillas muy enconomicas para instalarlas en dicho sistema: http://www.sdgestudio.com/plantillas_web_joomla.html ademas he aqui un ejemplo de como se ve un sitio joomla con una plantilla: http://osc4.template-help.com/joomla_28490/ las plantillas contienen su archivos editables para que agregues tu logo, fotos y contenidos de manera profesional y facil ya que el diseño base esta listo apra que tu agregues tu informacion. suerte. Si estas en Mexico te puedo orientar en la compra de plantillas para Joomla Estudio Creativo (33) 3634 7516

  46. Muchísimas gracias por el tuto… muy útil..
    Mi preg. es la sig.
    Q parámetros poner en el css, para q la pág. generada de la manera q muestras se comporte como auto-ajustable.
    Gracias de antemano.

  47. Como hago para que mi web cn css me quede centrada en internet explorer , la hize en safari, pero en firefox se ve bien pero en explorer se ve corrida a la derecha, ayuda!!

  48. Explorer es una bassura pero hay una manera de hacerlo: en el tag del BODY usa la propiedad tex-align:center y en el DIV donde esta tu layout usa tex-align:left de esta manera centraras en Explorer el layout, recuerdad que el DIV que quieras centrar debera tener el ancho definido asi como margin:0 auto; y position:relative

    espero esto te ayude

  49. gracias por la respuesta, ahora cuando pongo una imagen como backgrund-image de un div, al ver al web en firefox y opera me muestra la imagen , pero en safari no :S

  50. Que tal esto me funciono perfectamente para los nuevos exploradores pero desafortunadamente me lo estan exigiendo para interner explorer 7 tenes alguna solución…..porfa sería de mucha ayuda y de antemano muchas gracias

  51. bueno…a ver, soy diseñadora y por lo gnral mi diseño siempre lo hago puro en vectores porq de programacion no se nada…pero este tutorial parece sencillo..Lo intentare y veremos como me va 😉 Gracias

  52. hola. bunisimo el tutorial. pero mi duda es como podria hacer para sacarlo simple en DIV. no soy muy experto. pero necesito hacer una firma con codigo css interno para poder pasarla a mail app de mac. hay alguna forma? porque creo que la imagen tiene que estar hosteada :/

  53. Muchas gracias por el post! Había oído hablar de este método pero no me había atrevido a ponerlo en práctica todavía. Con tus instrucciones está muy claro.
    Saludoss!

  54. Para un diseño sencillo trabaja bien esta tecnica, pero para diseño mas complejo no la recomiendo, a menos que sepas como corregir tu código CSS, un ejemplo es la parte de los menús deberían de ir dentro de un div que los agrupe y ser elemento de lista ul (unordered list) la defines en tu archivo css y la puedes usar tantas veces quieras como un botón y con el texto que desees, menos codigo, menos archivos de imagen, menos tiempo de carga, y no olvidemos una mejor optimizacion para buscadores.

  55. Pingback: Diserco a CSS | FOROS VIP
  56. Pingback: Diserco a CSS
  57. Bueno este es un buen tutorial me alegra mucho averlo encontrado la verdad, pero si me interesria lo de dejar el texto y poderlo modificar para poder cambiar todo el texto si es necesario te lo agradeceria mucho si me dijeras donde puedo conseguir ese tutorial o como puedo aya arriba estan los pasos, y estan bien pero me facilitaria mas un tutorial gracias un cordial saludo amigogogp

  58. Hola: discupá la ignorancia, podrías orientarme acerca de como hacer los cortes (slices) en photoshop? Desde ya muchas gracias por este excelente tutorial, no sabía que desde el photoshop se podía generar código

  59. Pues eso los haces con la herramienta de SLICE cuyo shortcut es la tecla “c” esta agrupada junto con CROP. Solo defines el area y si haces doble clic sobre el numero del area se abre undialogo donde puedes elegir el nombre y id para ese slice. Esta sencillo y es intuitivo. Al expostar para web ahi especificas que sean todos los slices y como CSS y listo. Suerte!

  60. me gusto el tutorial me enseña como cortar imagenes en photoshop y lo pondre en practica solo me faltaba.

  61. Mi pregunta es: ¿Esto funciona para cuando lo planteamos en tablet, escritorio y movil?

  62. Hola, tus post me a gustado bastante es sencillo y fácil de entender. Soy diseñador gráfico y fotógrafo y estoy aprendiendo más sobre como hacer sitios web. Actualmente estoy desarrollando mi sitio: http://photopixel.mx se agradecerán comentarios y sugerencias, gracias.

  63. Pingback: PSD a HTML y CSS
  64. mm pues photoshop tiene un modo automatizado, yo GIMP lo conozco muy poco y creo que lo mas facil seria cortar las imagenes y hacerlo a mano lo cual es mas dificil que dejando que photoshop lo haga. La verdad te recomiendo que busques unos tutoriales de como maquetar con CSS para que lo hagas a mano. suerte

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s