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

.

Acerca de Emmanuel Vargas @sdgestudio

Graphic Designer currently working with user interface for web applications using dojo toolkit, jQuery in a java environment. Photographer interested in portrait, experimental and photo-journalism for social events. www.sdgestudio.com you can find me in G+

  1. Pingback: Iniciarse en CSS desde photoshop « SEO, web design 2.0, posicionamiento y diseño de paginas web

  2. Pingback: CSS desde photoshop. Notas al tutorial anterior. « SEO, web design 2.0, posicionamiento y diseño de paginas web

  3. 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

  4. Enrique Estrada

    Sinceramente los felicito, excelente su árticulo.

    Tenia tiempo buscando una solución.

    Muchas gracias!!

    Enrique Estrada

  5. Felicidades, va al grano y soluciona el salto entre imagen y codificación web.

    Muchas gracias!!!

  6. Xuaki

    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

  7. 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”.

  8. Enrique Estrada

    Tengo una duda:

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

    Muchas gracias!!

    Un saludo

  9. 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.

  10. Enrique Estrada

    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!

  11. 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

  12. popo

    opo`poò`poò

  13. Hank

    muy bueno el tutorial me a ayudado muchisisisisismo

  14. picoleta

    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.

  15. 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!

  16. alonso

    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;
    }

  17. gabriel

    ¡¡¡¡Te AMO!!!
    Me salvaste la vida con esto!!!!!!!

  18. Rodri

    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.

  19. maniat1k

    es interesante lo voy a probar a ver si funciona (ojala si…) muchas gracias🙂

  20. 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.

  21. 3raiglesiadedios

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

  22. Pingback: PSD a HTML - Convertir PSD a CSS y XHTML

  23. Pingback: PSD a HTML - Converter PSD a CSS y XHTML - Galego

  24. Marlon Valle

    Hola Christian te agrego del Foro de WordPress
    de Diseño Grafico!
    agregame!
    marlonnet_7@hotmail.com
    y nos echamos la mano en CSS!

  25. Marlon Valle

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

  26. muy buen tutorial..perfecto y facil..los felicito me ayudo mucho

  27. 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

  28. 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.

  29. Gebema

    Fantastico!! Me sirvio de muchoooo, Gracias!

  30. romina

    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

  31. 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.

  32. Esteban

    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

  33. 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.

  34. que version de photoshop estas usando tengo la cs3 y no me sale la opcion “save for web & devices”

    de antemano muchas gracias

  35. 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

  36. 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

  37. 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.

  38. Tienes razon , es super facil, muchas gracias por la explicacion

  39. Noemi

    Sos el que era diseñador de Pane en Via, si sis me urge ubicarte
    saludos, no estoy en pane

  40. Noemi

    Me urge ubicarte sos el que era diseñador de Pane en Via?, no estoy alli, saludos

  41. iosef

    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

  42. 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!!

  43. 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

  44. 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.

  45. wowowowowowo me has ahorrado mucho trabajo muchas gracias!!! ahora si sin límite para diseñar !😀

  46. 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

  47. 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

  48. 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

  49. 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.

  50. 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

  51. 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…

  52. 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.

  53. 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

  54. 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

  55. 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!!!

  56. 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

  57. Manuel

    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

  58. Pues para el formulario necesitaras el archivo PHP donde inque al servidor a donde y mandar los datos.

  59. Águeda

    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!!^^

  60. no se a que te refieres con DIV PA y DIV Normales

  61. Águeda

    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”)

  62. ok, ya entendi. Solo Cambia el codigo a mano, position:absolute por position:relative hay cosas que si tendras que cambiar a mano pero que te permitiran aprender mas y hacer mejores cosas cada vez. Recomiendo este link. para aprender y comprender el CSS Positioning o posicionar objetos usando CSS

  63. Águeda

    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…

  64. Cesar

    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

  65. Pingback: Alguien me puede ayudar? :)

  66. 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

  67. 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.

  68. mira eso se hace de una forma diferente y puedes checar aqui algunas muestros de CSS liquid layouts o diseño ajustables de CSS http://matthewjamestaylor.com/blog/perfect-3-column.htm

  69. Muchisimas gracias por tu respuesta.. Y por tu TIEMPO… un 10 al trabajo q haces.
    Enhorabuena…

  70. 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!!

  71. 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

  72. 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

  73. PauloSilva

    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

  74. 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

  75. 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:/

  76. 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!

  77. Excelente tutorial, aunque ya lo sabia, pero no sabia lo del custom, muchas gracias.

    saludos.

  78. Gracias, muy útil la información, justo lo que andaba buscando, 1saludo. http://www.jesusweb.es

  79. 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.

  80. Lo probé y me fue genial, desde adobe photoshop cs4

    La verdad es que andaba buscando esta solución no se cuanto tiempo

    Gracias

    http://www.elprofedemicurso.es
    elprofedemicurso@gmail.com

  81. saith franklin

    de verdad me encanto muy bien explicado y algo que comprendí al instante, te felicito amigo

  82. Pingback: Diserco a CSS | FOROS VIP

  83. Pingback: Diserco a CSS

  84. Alberto Lares (La mujer de judas)

    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

  85. 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

  86. 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!

  87. mario cotom

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

  88. Yer Espinoza

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

  89. Victor Salgado

    x2
    Muchas gracias tambien me ahorre horas con esto.

  90. te recomiendo un framework como foundation que te permite hacer un sitio amigable con dispositivos moviles

  91. 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.

  92. Gracias, no esta nada mal. Aunque busco algo mas robusto y seguro que joomla. Pero agradezco la sugerencia🙂

  93. Pingback: PSD a HTML y CSS

  94. Pingback: Diseo grfico a CSS | Da Webmasters

  95. 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

  96. krisspsdahtml

    Hola
    Aqui les dejo un blog completo sobre conversion de PSD a HTML:

    http://www.psdahtmlpasoapaso.com.mx

    Tiene videotutoriales gratuitos y muchisimos articulos.

    Saludos!

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

A %d blogueros les gusta esto: