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

Marlon Valle Enlace permanente Hola Christian te agrego del Foro de WordPress de Diseo Grafico! agregame! marlonnet_7@hotmail.com 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

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

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: blasamrc@hotmail.com Responder

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

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

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

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

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

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

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

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<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 Responder

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

32.

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

33.

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

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

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

34.

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

35.

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

36.

carlos psd Enlace permanente 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 Responder

37.

gueda Enlace permanente Hola!! Fantstico tutorial!!!! Pero tengo 2 preguntas:

1-hay alguna manera de que los divs que te generan sean Divs normales y no Divs PA? 2-finalmente hiciste el tutorial para exportar el texto y que te lo conserve como tal? Muchas gracias y felicidades por el tutorial!!! Responder

38.

mario valle Enlace permanente 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 Responder

sdgestudio Enlace permanente Pues para el formulario necesitaras el archivo PHP donde inque al servidor a donde y mandar los datos. Responder

39.

Manuel Enlace permanente Hola a todos, estoy siguiendo el tutorial, con Photoshop CS5 y me genera un archivo con extensin .IROS El cdigo que tiene no es legible en modo texto. Sabeis que estoy haciendo mal? Gracias por anticipado Responder

40.

gueda Enlace permanente Hola! Quisiera saber si hay algn modo de que cuando paso mis elementos de PSD a Dreamweaver, no se hagan como imgenes dentro de DIV PA o capas, sino como DIV normales Gracias!!^^ Responder

sdgestudio Enlace permanente no se a que te refieres con DIV PA y DIV Normales Responder

gueda Enlace permanente Sime refiero a los DIV que se generan cuando exportas los sectores y le das a generar CSS, que son en posicin absoluta (DIV PA). Quisiera que me generaran DIV en posicin relativa (DIV normales)

sdgestudio Enlace permanente ok, ya entendi. Solo Cambia el codigo a mano, position:absolute porposition: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

gueda Enlace permanente

Ahpensaba que haba otra maneraya haba probado a hacerlo manualmente (cambiar position:absolute a position:relative en el CSS) pero no me sirve porque me altera todo el diseo original

41.

Cesar Enlace permanente Este articulo describe una solucion bastante apropiada para quien tiene prisa por publicar su diseo 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 Responder

42.

yaenis Enlace permanente Muchsimas gracias por el tuto muy til.. Mi preg. es la sig. Q parmetros poner en el css, para q la pg. generada de la manera q muestras se comporte como auto-ajustable. Gracias de antemano. Responder

sdgestudio Enlace permanente mira eso se hace de una forma diferente y puedes checar aqui algunas muestros de CSS liquid layouts o diseo ajustables de CSShttp://matthewjamestaylor.com/blog/perfect-3-column.htm Responder

yaenis Enlace permanente Muchisimas gracias por tu respuesta.. Y por tu TIEMPO un 10 al trabajo q haces. Enhorabuena

43.

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

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

luciano Enlace permanente gracias por la respuesta, ahora cuando pongo una imagen como backgrundimage de un div, al ver al web en firefox y opera me muestra la imagen , pero en safari no :S

44.

thegaray Enlace permanente

buenoa ver, soy diseadora y por lo gnral mi diseo siempre lo hago puro en vectores porq de programacion no se nadapero este tutorial parece sencillo..Lo intentare y veremos como me va Gracias Responder

45.

Ricardo Ortiz Enlace permanente 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 :/ Responder

46.

paulipaus Enlace permanente Muchas gracias por el post! Haba odo hablar de este mtodo pero no me haba atrevido a ponerlo en prctica todava. Con tus instrucciones est muy claro. Saludoss! Responder

47.

aldabu Enlace permanente Excelente tutorial, aunque ya lo sabia, pero no sabia lo del custom, muchas gracias. saludos. Responder

48.

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