Foros del Web » Creando para Internet » Diseño web »

Divisiones: pasando PSD template a HTML

Estas en el tema de Divisiones: pasando PSD template a HTML en el foro de Diseño web en Foros del Web. Hola, estoy teniendo serios problemas existenciales con este tema. Y a mi parecer es el tema mas complicado para los desarrolladores novatos. He conseguido un ...
  #1 (permalink)  
Antiguo 01/01/2012, 05:26
Avatar de LordFede  
Fecha de Ingreso: enero-2012
Ubicación: Uruguay
Mensajes: 21
Antigüedad: 12 años, 3 meses
Puntos: 0
Divisiones: pasando PSD template a HTML

Hola, estoy teniendo serios problemas existenciales con este tema. Y a mi parecer es el tema mas complicado para los desarrolladores novatos.
He conseguido un [URL="http://martz90.deviantart.com/#/d38x0z0"]template[/URL] muy bueno, profesional y sobre todo gratuito y libre de reproduccion, este template esta en el formato PSD todavia y no tengo mucha idea de como pasarlo a un index.html con sus respectivas imagenes cortadas y su archivo de texto CSS "linkeado".

Ya tuve progresos con photoshop al momento de pasarlo a HTML, pero me quedo una tabla enorme y no es lo que yo quiero, estoy buscando una manera de transformar todo eso facilmente a elementos <div> estilisados con su CSS correspondiente, super "tableless".
No tengo mucha idea que programas usar, supongo que solo desde Phostoshop con ese template ya hecho, ya podria sacar mi index.html, styles.css, "images/" folder y esas cosas, pero no se como :(

Me encantaria que entre todos aclaremos este tema aca, ya que en este foro no lo he visto para nada claro y el buscador me busca smileys unicamente

ESTE es el template del que estoy hablando: [URL="http://martz90.deviantart.com/#/d38x0z0"]http://martz90.deviantart.com/#/d38x0z0[/URL]

Al descargarlo me doy cuenta que esta todo separado en "grupos" dentro del photoshop simulando los <div> Y NO ESTAN MARCADOS LOS SECTORES (que no se si es necesario, pero de la manera que yo pude pasarlo a HTML guardando el documento para WEB y esas cosas, el documento tenia que estar marcado por sectores). Corrijanme si estoy mal:
1) ahora se deberia sacar cada imagen una por una a una carpeta "imagenes" (por ejemplo)
2) luego todo el html con el contenido (texto)
3) y despues de eso estilizar con CSS y llamar las imagenes verdad?
BIEN,
1) Como?
2) Mi anticristo, codificar HTML "imaginandome" el CSS y las imagenes, no tengo ninguna cosa en que guiarme?
3) Como??
ese es mi tema, no se como ir llevando ese proceso NI QUE PROGRAMAS USAR para que me faciliten mi vida :P
Disculpen si me extendi mucho con la pregunta, el tema es que nadie me ha podido dar una buena respuesta en todo este tiempo.
Acepto links, GUIAS, VIDEOS (unicamente si son concretos, que hablen de lo que yo estoy hablando aqui, porque de otra manera serian videos q me confunden aun mas)

Desde ya muchas gracias!
  #2 (permalink)  
Antiguo 01/01/2012, 12:50
Avatar de pitufoweb  
Fecha de Ingreso: enero-2008
Ubicación: Un Mundo Raro
Mensajes: 1.148
Antigüedad: 16 años, 3 meses
Puntos: 181
Respuesta: Divisiones: pasando PSD template a HTML

Eso se hace manualmente con un editor de texto. Por lo tanto necesitas saber HTML y CSS. Una ves que tengas conocimientos "avanzados" sobre HTML y CSS, todas tus dudas se despejaran y podrás hacer lo que deseas sin problemas.

Ahora, si no tienes conocimientos sólidos sobre HTML y CSS y aun así decides hacerlo, solo te encontraras con otro mar de dudas.


Así que respuesta es simple; Aprende HTML / CSS y sabrás lo que tienes que hacer.





Saludos
__________________
------------- " La felicidad no llega de afuera, nace desde dentro. " -------------
  #3 (permalink)  
Antiguo 01/01/2012, 19:40
Avatar de LordFede  
Fecha de Ingreso: enero-2012
Ubicación: Uruguay
Mensajes: 21
Antigüedad: 12 años, 3 meses
Puntos: 0
Respuesta: Divisiones: pasando PSD template a HTML

Cita:
Iniciado por pitufoweb Ver Mensaje
Eso se hace manualmente con un editor de texto. Por lo tanto necesitas saber HTML y CSS. Una ves que tengas conocimientos "avanzados" sobre HTML y CSS, todas tus dudas se despejaran y podrás hacer lo que deseas sin problemas.

Ahora, si no tienes conocimientos sólidos sobre HTML y CSS y aun así decides hacerlo, solo te encontraras con otro mar de dudas.


Así que respuesta es simple; Aprende HTML / CSS y sabrás lo que tienes que hacer.





Saludos
Muchas gracias!!! me olvide de mencionar ese detalle, tengo ya conocimiento de PHP, MySQL, XHTML y CSS, codifiqué como primer proyecto en mis inicios un CMD para WAP.
Quiza esté un poco desactualizado de cosas como CS3 y si hay alguna diferencia grande entre HTML y HTML5, sinceramente eso no lo se... pero ya tengo muchas experiencias con ese lenguaje. Lo que no tengo conocimiento es de el proceso luego de haber diseñado el layout con PS.
Es mi primera vez que estoy intentando "desenterrarme" de los móviles para trabajar con WEB.
Nuevamente gracias.
  #4 (permalink)  
Antiguo 01/01/2012, 20:41
Avatar de pitufoweb  
Fecha de Ingreso: enero-2008
Ubicación: Un Mundo Raro
Mensajes: 1.148
Antigüedad: 16 años, 3 meses
Puntos: 181
Respuesta: Divisiones: pasando PSD template a HTML

si buscas en Google "pasar de psd a html" encontraras muchos artículos sobre el tema.

Te dejo un enlace; http://interacciondigital.net/tutori...s-paso-a-paso/

No lo he leído, pero creo que te ayudara a entender los conceptos básicos para comenzar.




Saludos
__________________
------------- " La felicidad no llega de afuera, nace desde dentro. " -------------
  #5 (permalink)  
Antiguo 02/01/2012, 19:43
Avatar de LordFede  
Fecha de Ingreso: enero-2012
Ubicación: Uruguay
Mensajes: 21
Antigüedad: 12 años, 3 meses
Puntos: 0
Respuesta: Divisiones: pasando PSD template a HTML

He venido buscando en google un monton, tambien he mirado videos de 11 partes en youtube.
Pero con ese link ya aclare varias cosas:
* No hay manera para sacarlo cortado del Photoshop en DIVS en vez de TABLEs como lo hace.
* Si o si la maquetación por completo y el cortado de imagenes en el Photoshop se hace "a mano"

Pero ahora me quedan dudas especificas sobre el cortado de imagenes que creo que las voy a tener que eliminar en otros posts que ya hayan efectuado por aca :)
Muchas gracias por esa ayudita.
Y si alguno tiene un buen TIP para dar sobre la maquetacion, por favor sientase libre de contarlo aca!! :DD
  #6 (permalink)  
Antiguo 02/01/2012, 20:11
Avatar de pitufoweb  
Fecha de Ingreso: enero-2008
Ubicación: Un Mundo Raro
Mensajes: 1.148
Antigüedad: 16 años, 3 meses
Puntos: 181
Respuesta: Divisiones: pasando PSD template a HTML

Bien.

Por ultimo te comento que para maquetar el diseño que mencionas ( http://martz90.deviantart.com/#/d38x0z0 ) , solo necesitas 3 imágenes; la imagen de fondo, la imagen de buscador y una para el área del contenido. Todo lo demás se hace con HTML y CSS.



Saludos
__________________
------------- " La felicidad no llega de afuera, nace desde dentro. " -------------
  #7 (permalink)  
Antiguo 03/01/2012, 06:56
Avatar de LordFede  
Fecha de Ingreso: enero-2012
Ubicación: Uruguay
Mensajes: 21
Antigüedad: 12 años, 3 meses
Puntos: 0
Respuesta: Divisiones: pasando PSD template a HTML

Cita:
Iniciado por pitufoweb Ver Mensaje
Bien.

Por ultimo te comento que para maquetar el diseño que mencionas ( [URL]http://martz90.deviantart.com/#/d38x0z0[/URL] ) , solo necesitas 3 imágenes; la imagen de fondo, la imagen de buscador y una para el área del contenido. Todo lo demás se hace con HTML y CSS.



Saludos
Me queres confundir mas verdad? jajaja
Segun lo que yo veo, lo que vendria a ser el "main content" tiene una transparencia como background, eso seria una imagen, luego el background del body, la otra transparencia del footer, que por lo que se, esas transparencias no se pueden lograr con CSS.
Las imagenes de las redes sociales, logo, buscador, menu separators, y un boton verde.
Las "rounded boxes" en los modulos si se que son faciles de hacer con css...
Creo que no son solo 3 imagenes :)
  #8 (permalink)  
Antiguo 03/01/2012, 13:45
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
Respuesta: Divisiones: pasando PSD template a HTML

#2 De lo mejorcito que leído como respuesta últimamente, Pitufoweb.

Conocimientos de html + css No hay otra.
Imagen de fondo, contenedor general negro en rgba, imagen para el menú de navegación y el sidebar también en rgba.

Pero para que se haga una idea más cabal de lo que significa pasar un diseño gráfico a código html+css: hay empresas que han hecho de eso su tabajo. Claro, porque hay quien lo paga.
  #9 (permalink)  
Antiguo 03/01/2012, 16:18
Avatar de LordFede  
Fecha de Ingreso: enero-2012
Ubicación: Uruguay
Mensajes: 21
Antigüedad: 12 años, 3 meses
Puntos: 0
Respuesta: Divisiones: pasando PSD template a HTML

Cita:
Iniciado por kseso? Ver Mensaje
#2 De lo mejorcito que leído como respuesta últimamente, Pitufoweb.

Conocimientos de html + css No hay otra.
Imagen de fondo, contenedor general negro en rgba, imagen para el menú de navegación y el sidebar también en rgba.

Pero para que se haga una idea más cabal de lo que significa pasar un diseño gráfico a código html+css: hay empresas que han hecho de eso su tabajo. Claro, porque hay quien lo paga.
Con "RGBA" te refieres a el codigo
Código CSS:
Ver original
  1. background-color:rgba(255,0,255,0.2);
Verdad?
Bueno, pérmitame decirle que mediante su comentario y una búsqueda por w3schools.com acabo de aprender sobre esa [URL=http://www.webmentor.cr/rgba-diseno-web/]propiedad[/URL] :) y es genial!
Ahora, el "contenedor general" como dice usted tiene una especie de foco de luz sobre la parte del header, asi que supongo que eso debe ser otra imagen, y no un efecto logrado con CSS.

Por otra parte:
Cita:
Iniciado por kseso? Ver Mensaje
Pero para que se haga una idea más cabal de lo que significa pasar un diseño gráfico a código html+css: hay empresas que han hecho de eso su tabajo. Claro, porque hay quien lo paga.
Me parece genial, pero he venido a este foro para poder lograrlo yo mismo, y no tener que depender de nadie, ni de dinero para hacerlo. No quiero tomarlo como sarcasmo, pero intentemos evitarlo. Ya que he venido con la mejor onda para una agradable y fructifera discusion sobre este tema.
  #10 (permalink)  
Antiguo 03/01/2012, 16:19
Avatar de LordFede  
Fecha de Ingreso: enero-2012
Ubicación: Uruguay
Mensajes: 21
Antigüedad: 12 años, 3 meses
Puntos: 0
Respuesta: Divisiones: pasando PSD template a HTML

Cita:
Salio un repost sin querer, quien pueda bórrelo.
  #11 (permalink)  
Antiguo 03/01/2012, 16:46
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
Respuesta: Divisiones: pasando PSD template a HTML

Pues debe ser cierto. Debe haber epidemia de suceptibilitis.
Iba bien, pero lo estropeó todo con su último párrafo.
Espero que consiga sacarlo adelante.
Yo, con su permiso, finalizo aquí mi participación.
  #12 (permalink)  
Antiguo 05/01/2012, 06:53
 
Fecha de Ingreso: diciembre-2003
Mensajes: 310
Antigüedad: 20 años, 3 meses
Puntos: 4
Respuesta: Divisiones: pasando PSD template a HTML

Hola LordFede
Comprendo perfectamente tu frustracion o "tema existencial" como bien dices, y coincido en que la conversion de PSD a HTML, es unos de los temas mas complicados para los desarrolladores que recien comienzan.

Lamentablemente, te confirmo lo que algunos dijeron aqui: para maquetar web, debes aprender XHTML y CSS, si o si.


Mira, yo me dedico a esto desde hace mas de 10 años y te aseguro que al principio es un tema que cuesta muchisimo, pero una vez que lo aprendes, no tienes limites.

Olvidate de la opcion "Save for web" del photoshop, no sirve para nada.
Debes recortar imagen por imagen, exportarlas, luego estructurar el documento con DIVs escribiendo codigo HTML en cualquier editor de texto plano, y por ultimo dandole estilo a esa etructura por medio de CSS.
(luego puedes insertarle PHP, JS, jQuery, Flash o lo que se te ocurra)

ASI es como se hace profesionalmente, no pierdas tiempo intentando otra cosa.
Solo te confundirás mas.

De hecho, tengo un blog dedicado EXCLUSIVAMENTE a la maquetacion web y a la conversion de PSD a HTML.

Puedes verlo aqui debajo de este post o ingresando a mi perfil.
Alli tienes el link.

Manos a la obra Fede, es un camino un poco largo, pero al final esta la recompensa.


Saludos!
Cristian
  #13 (permalink)  
Antiguo 05/01/2012, 07:26
Avatar de LordFede  
Fecha de Ingreso: enero-2012
Ubicación: Uruguay
Mensajes: 21
Antigüedad: 12 años, 3 meses
Puntos: 0
Respuesta: Divisiones: pasando PSD template a HTML

Te agradezco muchisimo la buena onda Cristian!
Supongo que mis conocimientos de XHTML y CSS ya me permiten maquetar una web correctamente! Y ya esta mas que claro que ningun programa puede hacer alguna parte del codigo por vos.

Me sorprende porque ya habia estado en tu blog unos dias atras, y es mas, lo tengo en favoritos junto con un par mas. Me parecio genial!

Ahora estoy teniendo un pequeño problema que es el de cortar las imágenes con photoshop, ya que usando la herramienta "Seleccionar", estando en la capa que quiero cortar, usando "Guardar para web" jamas me guarda ese pedacito que seleccione sino la pagina entera. Y lo peor es que en un tutorial bastante reciente lo leí asi. Pero bueno, ya se que es cuestion de que siga buscando tutoriales y problemas concretos que se me vayan presentando :)

Les agradezco MUCHISIMO por toda la ayuda que me brindaron y espero que esto sea reciproco en un futuro no muy lejano, en cuanto lance mi propia empresa de desarrollo web en mi pais ^^

PD: Estaría bueno que quién quiera, comparta aca sus metodos o "comodidades" a la hora de maquetar :)
  #14 (permalink)  
Antiguo 05/01/2012, 07:43
 
Fecha de Ingreso: diciembre-2003
Mensajes: 310
Antigüedad: 20 años, 3 meses
Puntos: 4
Respuesta: Divisiones: pasando PSD template a HTML

Cita:
Iniciado por LordFede Ver Mensaje
Te agradezco muchisimo la buena onda Cristian!
Supongo que mis conocimientos de XHTML y CSS ya me permiten maquetar una web correctamente! Y ya esta mas que claro que ningun programa puede hacer alguna parte del codigo por vos.

Me sorprende porque ya habia estado en tu blog unos dias atras, y es mas, lo tengo en favoritos junto con un par mas. Me parecio genial!

Ahora estoy teniendo un pequeño problema que es el de cortar las imágenes con photoshop, ya que usando la herramienta "Seleccionar", estando en la capa que quiero cortar, usando "Guardar para web" jamas me guarda ese pedacito que seleccione sino la pagina entera. Y lo peor es que en un tutorial bastante reciente lo leí asi. Pero bueno, ya se que es cuestion de que siga buscando tutoriales y problemas concretos que se me vayan presentando :)

Les agradezco MUCHISIMO por toda la ayuda que me brindaron y espero que esto sea reciproco en un futuro no muy lejano, en cuanto lance mi propia empresa de desarrollo web en mi pais ^^

PD: Estaría bueno que quién quiera, comparta aca sus metodos o "comodidades" a la hora de maquetar :)
Genial Fede, me alegro q te haya ayudado.
Con respecto a que no te exporta el slice seleccionado, fijate luego de poner "Save for web", tenes q volver a seleccionar el slice en la pantalla de exportacion.
Y luego cuando te deja poner el nombre de archivo a guardar, fijate abajo en el desplegable "Sectores" tenes que tener seleccionado "Sectores Seleccionados".

Tambien deberias comprobar los "Ajustes de Salida".

Saludos!
  #15 (permalink)  
Antiguo 05/01/2012, 09:24
Avatar de LordFede  
Fecha de Ingreso: enero-2012
Ubicación: Uruguay
Mensajes: 21
Antigüedad: 12 años, 3 meses
Puntos: 0
Respuesta: Divisiones: pasando PSD template a HTML

Cita:
Iniciado por florlangosta Ver Mensaje
Genial Fede, me alegro q te haya ayudado.
Con respecto a que no te exporta el slice seleccionado, fijate luego de poner "Save for web", tenes q volver a seleccionar el slice en la pantalla de exportacion.
Y luego cuando te deja poner el nombre de archivo a guardar, fijate abajo en el desplegable "Sectores" tenes que tener seleccionado "Sectores Seleccionados".

Tambien deberias comprobar los "Ajustes de Salida".

Saludos!
Estoy intentando cortar mi primer diseño en photoshop :) pero jamas me aparece para volver a seleccionar una vez clickeo en guardar para web.
Te muestro dos Capturas de pantalla (usando PS CS5)

[URL]http://imageshack.us/f/846/68074963.jpg/[/URL]
[URL]http://imageshack.us/f/708/53100659.jpg/[/URL]
Y de todas maneras cuando le doy guardar, no me deja seleccionar "Sectores Seleccionados"
  #16 (permalink)  
Antiguo 05/01/2012, 09:46
 
Fecha de Ingreso: diciembre-2003
Mensajes: 310
Antigüedad: 20 años, 3 meses
Puntos: 4
Respuesta: Divisiones: pasando PSD template a HTML

El problema es que no estas haciendo slices, solo hiciste una seleccion con la opcion Marco (la de las lineas punteadas)

La herramienta Slice es el quinto icono desde arriba hacia abajo, en la paleta de Herramientas.
La dejas clickeada y te vana aparecer 3 iconos mas. Elige el segundo "Herramienta Sector".

Luego dibuja los sectores con esa herramientas y repite el proceso de "Save for web".

Ya lo tienes.
:)
  #17 (permalink)  
Antiguo 05/01/2012, 15:49
Avatar de LordFede  
Fecha de Ingreso: enero-2012
Ubicación: Uruguay
Mensajes: 21
Antigüedad: 12 años, 3 meses
Puntos: 0
Respuesta: Divisiones: pasando PSD template a HTML

Cita:
Iniciado por florlangosta Ver Mensaje
El problema es que no estas haciendo slices, solo hiciste una seleccion con la opcion Marco (la de las lineas punteadas)

La herramienta Slice es el quinto icono desde arriba hacia abajo, en la paleta de Herramientas.
La dejas clickeada y te vana aparecer 3 iconos mas. Elige el segundo "Herramienta Sector".

Luego dibuja los sectores con esa herramientas y repite el proceso de "Save for web".

Ya lo tienes.
:)
Claro, pero seleccionando sectores, de esa manera es que he probado, me corta demasiados pedazos innecesarios, y partes como las flechas del slideshow que son redondas y transparentes...? como hago? ya que tendria que cortar un cuadrado en el que sale tambien parte de la imagen de la slideshow por debajo de la flecha. Creo que se entiende a que me refiero...

Muchas gracias!
  #18 (permalink)  
Antiguo 05/01/2012, 16:36
 
Fecha de Ingreso: diciembre-2003
Mensajes: 310
Antigüedad: 20 años, 3 meses
Puntos: 4
Respuesta: Divisiones: pasando PSD template a HTML

Pues simplemente oculta la capa que tiene la imagen que no quieres que se vea.
Y listo.
  #19 (permalink)  
Antiguo 06/01/2012, 10:53
Avatar de LordFede  
Fecha de Ingreso: enero-2012
Ubicación: Uruguay
Mensajes: 21
Antigüedad: 12 años, 3 meses
Puntos: 0
Respuesta: Divisiones: pasando PSD template a HTML

Cita:
Iniciado por florlangosta Ver Mensaje
Pues simplemente oculta la capa que tiene la imagen que no quieres que se vea.
Y listo.
Pensé que debería haber otra forma, pero bueno.. con usar esa me es suficiente :D En cuanto termine de maquetar mi primer template lo muestro por aqui :) muchas gracias

Etiquetas: divisiones, html, imagenes, pasando, psd, template
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:03.