Breve Tutorial Como Pasar de PSD a CSS En

Breve tutorial como pasar de PSD a CSS en minutos!por sdgestudio en enero 12, 2008

Truco en photoshop que recien puse en prctica hoy.El truco es sencillo ayuda a un diseador 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 cdigo.

creacion_paginas_web

Paso 1: Abrir tu diseo en photoshop

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.

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

Paso 4: Repite la operacin con todos los cortesDe 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 diseador como yo, es mas facil si desde un principio utilizamos maneras para comprender el codigo mas facilmente. Al final de cuentas uno como diseador web termina aprendiendo un poco de todos los

codigos y lenguajes mas usados. :p

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.

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.

Paso 7: Seleccionar generar CSS

Navegas por las pantallas seleccionando 2 cosas: Exportar como (X)HTML yGenerar CSS ( por ID ). Esto en lugar de generar un codigo con tablas htmlgenerara un codigo usando las CSS.

Paso 8: Abrir la pgina y ver el Cdigo. Listo!!!Despues de que grabaste revisas tu carpeta y ahi habra un archivo HTML y su respectiva carpeta con las imgenes. Ya sera un trabajo posterior el acomodar a tu gusto y refinar el CSS generado. Esta es una solucin muy rapida para hacer un armado de imagenes usando solo el photoshop.

Tambin es un excelente inicio para aquellos que quieren aprender de que se trata el CSS.

Share this:

Share Like this: Like 2 bloggers like this post.

From web design

79 comentarios

1.

Christian Enlace permanente

Bueno, yo soy aprendiz en esto de programacion. Pero en diseo grafrico, algo me defiendo. He ledo el tutorial, y me parece interesante, lo pondr en practica. Muchas gracias Responder

o

Marlon Valle Enlace permanente Hola Christian te agrego del Foro de WordPress de Diseo Grafico! agregame! [email protected] y nos echamos la mano en CSS! Responder

2.

Enrique Estrada Enlace permanente Sinceramente los felicito, excelente su rticulo. Tenia tiempo buscando una solucin. Muchas gracias!! Enrique Estrada Responder

3.

Desborregando Enlace permanente Felicidades, va al grano y soluciona el salto entre imagen y codificacin web. Muchas gracias!!! Responder

4.

Xuaki Enlace permanente 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 Responder

5.

sdgestudio Enlace permanente 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. Responder

6.

Enrique Estrada Enlace permanente Tengo una duda: Hay alguna manera de que el texto quede como texto y no como imagen? Muchas gracias!! Un saludo Responder

7.

sdgestudio Enlace permanente 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 diseo 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. Responder

o

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

o

romina Enlace permanente 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 Responder

sdgestudio Enlace permanente creo que lo que quieres es hacer tu diseo 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.

8.

Enrique Estrada Enlace permanente 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! Responder

9.

Carlos zambrano Enlace permanente Muy buena explicacion, pero temgo una duda estoy montando un blog para esta paginahttp://www.galaxisound.com, pero quiere personalizar lo tengo todo el diseo 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 Responder

10.

popo Enlace permanente opo`po`po Responder

11.

Hank Enlace permanente muy bueno el tutorial me a ayudado muchisisisisismo Responder

12.

picoleta Enlace permanente Hola, me ha encantado el tutorial este que pones. Yo hace tiempo que hice un curso de html en Sun, y ha cambiado un montn el tema, ya que yo de html bien, pero todo en tablas, ahora con la maquetacin en css estoy super perdida, y claro, no quiero ponerme de 0 a elaborar webs con cdigo puro y duro. Entiendo el cdigo y lo leo, pero prefiero pasar de diseos en psd a css directamente. Muchas gracias. Responder

13.

matias Enlace permanente 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! Responder

14.

alonso Enlace permanente 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 diseo 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; } Responder

15.

gabriel Enlace permanente Te AMO!!! Me salvaste la vida con esto!!!!!!! Responder

16.

Rodri Enlace permanente 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. Responder

17.

maniat1k Enlace permanente es interesante lo voy a probar a ver si funciona (ojala si) muchas gracias Responder

18.

walter Enlace permanente

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

19.

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

20.

matias Enlace permanente muy buen tutorial..perfecto y facil..los felicito me ayudo mucho Responder

21.

Mariano Enlace permanente Gran Duda, no hya forma la pgina 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: [email protected] Responder

o

sdgestudio Enlace permanente 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. Responder

PauloSilva Enlace permanente Que tal esto me funciono perfectamente para los nuevos exploradores pero desafortunadamente me lo estan exigiendo para interner explorer 7 tenes alguna solucin..porfa sera de mucha ayuda y de antemano muchas gracias

o

Walter Enlace permanente Tal vez esto te ayude un poco http://micodigobeta.com.ar/?p=340 Responder

22.

Gebema Enlace permanente Fantastico!! Me sirvio de muchoooo, Gracias! Responder

23.

Esteban Enlace permanente

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 Responder

o

sdgestudio Enlace permanente 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 PRINCIPALde 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. Responder

24.

victor Enlace permanente que version de photoshop estas usando tengo la cs3 y no me sale la opcion save for web & devices de antemano muchas gracias Responder

o

sdgestudio Enlace permanente 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

Responder

25.

jorge rendon Enlace permanente 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 Responder

o

sdgestudio Enlace permanente 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. Responder

o

Noemi Enlace permanente Sos el que era diseador de Pane en Via, si sis me urge ubicarte saludos, no estoy en pane Responder

sdgestudio Enlace permanente

no, no soy

o

Noemi Enlace permanente Me urge ubicarte sos el que era diseador de Pane en Via?, no estoy alli, saludos Responder

26.

David Enlace permanente Tienes razon , es super facil, muchas gracias por la explicacion Responder

27.

iosef Enlace permanente 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 Responder

28.

gabe Enlace permanente 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!! Responder

o

sdgestudio Enlace permanente 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 Responder

29.

gabe Enlace permanente 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. Responder

30.

Jos Juan Enlace permanente wowowowowowo me has ahorrado mucho trabajo muchas gracias!!! ahora si sin lmite para disear !

Responder

31.

Gabriel Maiorano Enlace permanente 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