Foros del Web » Creando para Internet » Diseño Gráfico »

Maquetar PSD

Estas en el tema de Maquetar PSD en el foro de Diseño Gráfico en Foros del Web. Hola ¡Que tal? A ver si podéis echarme una mano. He realizado un curso de diseño web con Photoshop. He terminado la web pero no ...
  #1 (permalink)  
Antiguo 06/04/2011, 16:23
Avatar de white_island  
Fecha de Ingreso: junio-2005
Ubicación: Valencia
Mensajes: 71
Antigüedad: 12 años, 3 meses
Puntos: 1
Maquetar PSD

Hola ¡Que tal? A ver si podéis echarme una mano. He realizado un curso de diseño web con Photoshop. He terminado la web pero no entiendo exactamente como tengo que maquetarla. En una carpeta he metido todo el contenido, se supone que esta parte no se exporta y se va poniendo con Dreamweaver pero aun así no encuentro la forma de maquetar todo su menú y su fondo.
¿Podéis realizar vosotros la maquetación y pasarme el PSD para que vea como realizarlo correctamente? Necesito ayuda urgente, sería un favor porque por más que miro no se por donde pegarle los hachazos jj
Os dejo el PSD

Download Link: Web Sushi.psd
http://www.sendspace.com/file/jpb3ov
__________________
Y DIJO EL BUDA: Una de las mayores fuentes de inteligencia se obtiene de los momentos vividos, asi que ya sabes, sobre todo ""VIVE""
  #2 (permalink)  
Antiguo 07/04/2011, 01:17
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.538
Antigüedad: 15 años, 5 meses
Puntos: 1257
Tema movido desde Web general
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 07/04/2011, 03:54
 
Fecha de Ingreso: febrero-2007
Mensajes: 40
Antigüedad: 10 años, 7 meses
Puntos: 9
Respuesta: Maquetar PSD

Hola white_island, no me queda muy clara la pregunta pero mi modesto aporte hasta donde sé...
Cuando trabajas los interfases, fondos, lo que sea, en PS, en las opciones de exportación/ Guardar para Web/ tienes una forma muy fácil.
Ahí te saldrán 3 opciones para seleccionar: 1. Imágenes + HTML, (si quieres que la web salga con sus páginas completas),
2. Sólo imágenes 3. Sólo HTML.
En el caso 1 q es el más completo PS exporta las imágenes a una carpeta y las hojas.html como si todo fuera un sitio, luego lo puedes abrir
y trabajar directamente en DW.
Verás que el código viene validado, y ahí muchas veces meterás ajustes personales, título, otras cosas que insertes directo en DW,
cualquier script, pero lo importante es que ya te carga una HTML lista
para usar que puedes seguir variando en propiedades.
Espero te haya servido de algo.
Slds, E
  #4 (permalink)  
Antiguo 07/04/2011, 04:03
Avatar de white_island  
Fecha de Ingreso: junio-2005
Ubicación: Valencia
Mensajes: 71
Antigüedad: 12 años, 3 meses
Puntos: 1
Respuesta: Maquetar PSD

lo que quiero saber cómo maquetar esta web ya que no me aclaro en hacer los cortes, Se que tengo que exportar solo imágenes y después trabajarlo con Dreameaver en este caso pero no sé cómo realizar esos cortes ya que el diseño es algo diferente. ¿Si pudierais descargaros el PSD?
__________________
Y DIJO EL BUDA: Una de las mayores fuentes de inteligencia se obtiene de los momentos vividos, asi que ya sabes, sobre todo ""VIVE""
  #5 (permalink)  
Antiguo 07/04/2011, 06:52
Avatar de algoparapensar
Colaborador
 
Fecha de Ingreso: julio-2006
Mensajes: 3.100
Antigüedad: 11 años, 2 meses
Puntos: 340
Respuesta: Maquetar PSD

Cita:
¿Podéis realizar vosotros la maquetación y pasarme el PSD para que vea como realizarlo correctamente? Necesito ayuda urgente, sería un favor porque por más que miro no se por donde pegarle los hachazos jj
Por lo general a esos "favores" se les llama "trabajo" y te suelen cobrar por hacerlos, ¿ofreces parte de la ganancia por éste favor?.

Hace unos dias encontré, en el foro, un muy lindo tutorial de Como pasar un diseño de Photoshop a HTML y CSS. Te lo recomiendo y tambien te recomiendo releer los apuntes del curso que hiciste.

Por experiencia te digo que siempre es mejor hacer (cuantas veces sea necesario) uno mismo las cosas, darse cuenta de los errores y resolverlos que mirar trabajos ajenos y cometer errores que no tenes idea de donde salieron ni como resolverlos.

Armate de paciencia, no es algo tan rapido y si es urgente, contrata a alguien para que te lo haga.

__________________
AlgoParaEscuchar en Facebook ─ Música, música y mas música.
  #6 (permalink)  
Antiguo 07/04/2011, 08:34
Avatar de valentina4you
Colaborador
 
Fecha de Ingreso: agosto-2010
Ubicación: Montevideo
Mensajes: 1.623
Antigüedad: 7 años, 1 mes
Puntos: 285
Respuesta: Maquetar PSD

Será que siempre aparece gente que quiere "favores" gratis, no? jeje
Algoparapensar te ha puesto un link que está muy bien explicado lo que buscas.
__________________
Diseño Gráfico Profesional
www.valenn.com | Sigueme @valenncom | facebook/valenncom
  #7 (permalink)  
Antiguo 07/04/2011, 15:03
Avatar de white_island  
Fecha de Ingreso: junio-2005
Ubicación: Valencia
Mensajes: 71
Antigüedad: 12 años, 3 meses
Puntos: 1
Respuesta: Maquetar PSD

O yo me explicado mal o vosotros no me entendéis. Si esto son 2 minutos lo que puede costar a un tío que tenga las cosas claras sobre cómo hacer los cortes de esta web. Ni que estuviera pidiendo hacer un diseño. Lo único que pido es una ayuda en ver como se maqueta esta web por alguien con experiencia, que por cierto esta web es de un curso no es para uso personal. Es más hasta viendo el PSD estoy ayudando yo más que lo que cuesta realizar los cortes.
Si tuviera que contestar como vosotros a los favores que he realizado en edición de videos seria millonario vamos.
A ver si os acostumbráis si participáis en foros en ayudar más y dejaros de comentarios que si de gratis que no de gratis, que yo con esta web no gano nada como os dije es una web que he realizado en un curso de diseño web con Photoshop.
__________________
Y DIJO EL BUDA: Una de las mayores fuentes de inteligencia se obtiene de los momentos vividos, asi que ya sabes, sobre todo ""VIVE""
  #8 (permalink)  
Antiguo 07/04/2011, 15:13
Avatar de pao01
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 1.875
Antigüedad: 9 años, 3 meses
Puntos: 351
Respuesta: Maquetar PSD

white_island, se te ha dejado un tutorial para que veas la forma de hacerlo.

Si precisas más ayuda explica en qué parte del tutorial te frenaste para seguir recibiendo consejos ó sugerencias de cómo proceder.

Si no era tu intención un trabajo realizado enhorabuena, sólo se deja en claro para evitar malas interpretaciones.

Cita:
¿Podéis realizar vosotros la maquetación y pasarme el PSD para que vea como realizarlo correctamente? Necesito ayuda urgente, sería un favor porque por más que miro no se por donde pegarle los hachazos jj
Convengamos que tu forma de plantearlo ayudó a que se pensara en tal forma.

Y consejo aparte, si es un trabajo para un curso, creo que nada mejor que evacuar dudas donde estás estudiando, lo que no implica en modo alguno que no se te vaya a responder en este foro.
__________________
Entre más estrecha la mente, más grande la boca.- Ted Cook
Autosconarte-Blog
  #9 (permalink)  
Antiguo 07/04/2011, 15:18
Avatar de white_island  
Fecha de Ingreso: junio-2005
Ubicación: Valencia
Mensajes: 71
Antigüedad: 12 años, 3 meses
Puntos: 1
Respuesta: Maquetar PSD

El curso solo explica como se hace el diseño una vez acabado yo quiero aprovechar esta web en saber maquetarla para trabajarla en Dreamweaver siguiendo otro curso diferente. He seguido varios cursos de maquetación con otras webs y todo perfecto, pero cuando voy a maquetar esta web en específico no me aclaro en realizar los cortes. Solo es eso.
__________________
Y DIJO EL BUDA: Una de las mayores fuentes de inteligencia se obtiene de los momentos vividos, asi que ya sabes, sobre todo ""VIVE""
  #10 (permalink)  
Antiguo 07/04/2011, 17:34
Avatar de fishdesign  
Fecha de Ingreso: abril-2011
Ubicación: Málaga
Mensajes: 389
Antigüedad: 6 años, 5 meses
Puntos: 95
Respuesta: Maquetar PSD

Primera regla: No subas los psd a pelo, comprímelos en rar ya que puedes reducir su tamaño hasta en un 90%.

Da igual el diseño que sea. Toda web tiene un mínimo de estructura (header, menu, contenedor, footer...)
Si sabes maquetar, sabes que "recortar".
En este caso, veo un diseño bastante simple y no tendría que suponer un problema en ningún aspecto salvo que, obviamente, no sepas maquetar.


Segunda regla: Si puedes usar CSS, no uses imágenes.

En primer lugar, coloca el color de fondo.
Luego los brushes esos (adornos, según has puesto tu) lo sacas igual (sin fondo).
Los colocas uno a uno o los metes todos a mocho como background (pones repeat, los centras o ajustas la web para que no salgan scrolls y los brushes se "estiren" (para ello deberían tener más calidad))

Tercera regla: No rasterices todas las capas. Ahora mismo con el psd que has subido ni se pueden cambiar las letras del menú, entre otras cosas.

Por otro lado saca el "logo", luego la linea horizontal y menú. Puedes sacarlo con imágenes o hacerlo directamente con CSS, ya como veas. (con CSS3 puedes usar text-shadow)

Ahora saca la imagen del centro, es decir, "CONTENIDO".
El texto de ahí dentro ni se te ocurra sacarlo con imágenes a no ser que no quieras que te indexen los buscadores ni por casualidad.

Las hojarascas esas (brushes) puedes sacarlo directamente con la imagen o si quieres sacarla aparte y luego las posicionas.
La imagen de la comida, lo mismo.


Finalmente, para el footer no es necesario sacar imagen.


Te recomiendo usar sprites (meter todas las imágenes en un mismo lienzo y luego sacarlas con background-position)


Cuarta regla: Hacer caso a las tres primeras xD


Ya el resto debes hacerlo tu. Como en las campañas de tráfico; no podemos maquetar por ti ;) xD


Un saludo ;)

Última edición por fishdesign; 07/04/2011 a las 17:39
  #11 (permalink)  
Antiguo 08/04/2011, 11:49
Avatar de valentina4you
Colaborador
 
Fecha de Ingreso: agosto-2010
Ubicación: Montevideo
Mensajes: 1.623
Antigüedad: 7 años, 1 mes
Puntos: 285
Respuesta: Maquetar PSD

Cita:
Iniciado por white_island Ver Mensaje
O yo me explicado mal o vosotros no me entendéis. Si esto son 2 minutos lo que puede costar a un tío que tenga las cosas claras sobre cómo hacer los cortes de esta web. Ni que estuviera pidiendo hacer un diseño. Lo único que pido es una ayuda en ver como se maqueta esta web por alguien con experiencia, que por cierto esta web es de un curso no es para uso personal. Es más hasta viendo el PSD estoy ayudando yo más que lo que cuesta realizar los cortes.
Si tuviera que contestar como vosotros a los favores que he realizado en edición de videos seria millonario vamos.
A ver si os acostumbráis si participáis en foros en ayudar más y dejaros de comentarios que si de gratis que no de gratis, que yo con esta web no gano nada como os dije es una web que he realizado en un curso de diseño web con Photoshop.

Que a alguien que sabe hacer las cosas le lleve menos tiempo hacerlas no significa que tenga que hacercelas al resto. Es la gracia de aprender a hacer las cosas, con la práctica adquieres experiencia y luego las haces rápido. Si es tan sencillo cómo dices, por qué no lo haces tu?

De todas maneras, porque soy buena te voy a hacer un tuto rápido para que te quede claro y puedas hacerlo tu mismo.

COMO MAQUETAR UNA WEB EN PHOTOSHOP Y EXPORTARLA EN SECCIONES

Supongamos que este es mi diseño de Photoshop







Luego eliges en dónde quieres guardarlo y según la opción que le hayas dado te guardara el HTML + una carpeta con imágenes o solamente las imágenes.
También tienes otra heramienta en selector que es para seleccionar y modificar los selectores, es decir, puedes modificar su tamaño o incluso el nombre del selector para una identificación más sencilla, sino por defecto se te exportaran como NOMBREDEARCHIVO_01 etc..

A ver si puedes hacerlo tu ;)
__________________
Diseño Gráfico Profesional
www.valenn.com | Sigueme @valenncom | facebook/valenncom
  #12 (permalink)  
Antiguo 08/04/2011, 13:10
Avatar de fishdesign  
Fecha de Ingreso: abril-2011
Ubicación: Málaga
Mensajes: 389
Antigüedad: 6 años, 5 meses
Puntos: 95
Respuesta: Maquetar PSD

Con el tuto de valentina4you ya no deberías tener ningún problema. (por cierto, yo hago los recortes de otra manera, ya que esta opción no me parece la mejor para los sprites, que es como suelo maquetar)

Un saludo
  #13 (permalink)  
Antiguo 09/04/2011, 07:05
Avatar de valentina4you
Colaborador
 
Fecha de Ingreso: agosto-2010
Ubicación: Montevideo
Mensajes: 1.623
Antigüedad: 7 años, 1 mes
Puntos: 285
Respuesta: Maquetar PSD

Cita:
Iniciado por fishdesign Ver Mensaje
Con el tuto de valentina4you ya no deberías tener ningún problema. (por cierto, yo hago los recortes de otra manera, ya que esta opción no me parece la mejor para los sprites, que es como suelo maquetar)

Un saludo
Que manera usas? Nutre nuestra diversidad intelectual! :)
__________________
Diseño Gráfico Profesional
www.valenn.com | Sigueme @valenncom | facebook/valenncom
  #14 (permalink)  
Antiguo 09/04/2011, 07:17
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.921
Antigüedad: 14 años, 6 meses
Puntos: 1794
Respuesta: Maquetar PSD

Yo no entiendo que serán los "sprites" en una maquetación html. En fin.

Considero una manera alterna a usar slices (Que ciertamente eran muy comunes cuando se hacía por tablas) ahora podemos utilizar los elementos completos y por separado, además que transparentes.

La diferencia del método probablemente será que tanto contamos con los elementos base por separado o ya los entregaron fusionados en un solo jpg, o cosas por el estilo.
  #15 (permalink)  
Antiguo 09/04/2011, 07:41
Avatar de valentina4you
Colaborador
 
Fecha de Ingreso: agosto-2010
Ubicación: Montevideo
Mensajes: 1.623
Antigüedad: 7 años, 1 mes
Puntos: 285
Respuesta: Maquetar PSD

Muy interesante. Ni idea que son los sprites la verdad, la única sprite que conozco es esta:



jaja
__________________
Diseño Gráfico Profesional
www.valenn.com | Sigueme @valenncom | facebook/valenncom
  #16 (permalink)  
Antiguo 09/04/2011, 12:39
Avatar de fishdesign  
Fecha de Ingreso: abril-2011
Ubicación: Málaga
Mensajes: 389
Antigüedad: 6 años, 5 meses
Puntos: 95
Respuesta: Maquetar PSD

Los sprites tienen ya bastantes años (en el 2004 ya se usaba). No es nada nuevo ni yo me he inventado el nombre xD

http://css-tricks.com/css-sprites/

http://www.google.es/#hl=es&biw=1366&bih=667&q=css+sprites&aq=f&aqi=g-s1&aql=&oq=&fp=ae3ff68c43d1b013



Básicamente se trata de poner todas las imágenes en un mismo lienzo, dando finalmente un archivo .png con todas las imágenes (no tiene porque ser TODAS las imágenes de una web, todo depende).

Luego en css, se llama a la imagen y se usa el background-position para situar la imagen.


Qué bueno tiene esto?

Pues que ahorramos peticiones al servidor y la imagen final ocupará menos que si cogemos una por una, así que también se ahorra ancho de banda.


Aquí un ejemplo de Google:
http://www.google.es/images/srpr/nav_logo39.png


Un saludo
  #17 (permalink)  
Antiguo 09/04/2011, 16:33
Avatar de white_island  
Fecha de Ingreso: junio-2005
Ubicación: Valencia
Mensajes: 71
Antigüedad: 12 años, 3 meses
Puntos: 1
Respuesta: Maquetar PSD

Valentina gracias por el tuto pero creo que sigues sin entenderme, la explicación que has puesto en el tuto ya sé cómo se hace, como comente en anteriores posts he realizado varios cursos de diseño Web y en estos sí que se maquetaba la Web una vez acabado el diseño, te vuelvo a repetir que no necesito saber que hacer porque ya lo sé.
Lo único que pedia es una captura de los cortes en esta misma web ya que en este diseño yo personalmente me lio bastante por su diseño y no sé exactamente como realizar los cortes, no creo que sea tan difícil entender lo que estoy diciendo.
Bueno da igual, doy por cerrado la ayuda, gracias a todos.

cdgp estoy siguiendo 3 cursos muy buenos de diseño web, de todas maneras este curso que me has pasado es presencial verdad?
__________________
Y DIJO EL BUDA: Una de las mayores fuentes de inteligencia se obtiene de los momentos vividos, asi que ya sabes, sobre todo ""VIVE""
  #18 (permalink)  
Antiguo 10/04/2011, 00:06
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.921
Antigüedad: 14 años, 6 meses
Puntos: 1794
Respuesta: Maquetar PSD

Fishdesign, Ok, si, ya. Yo uso en algunos casos el sistema, pero no ubicaba el nombre. Grax.

Entonces habría como 3 métodos.

Slices, Sprites, y posicionamiento de objetos completos. (No le digan capas por favor)
  #19 (permalink)  
Antiguo 10/04/2011, 02:08
Avatar de valentina4you
Colaborador
 
Fecha de Ingreso: agosto-2010
Ubicación: Montevideo
Mensajes: 1.623
Antigüedad: 7 años, 1 mes
Puntos: 285
Respuesta: Maquetar PSD

Cita:
Iniciado por white_island Ver Mensaje
Valentina gracias por el tuto pero creo que sigues sin entenderme, la explicación que has puesto en el tuto ya sé cómo se hace, como comente en anteriores posts he realizado varios cursos de diseño Web y en estos sí que se maquetaba la Web una vez acabado el diseño, te vuelvo a repetir que no necesito saber que hacer porque ya lo sé.
Lo único que pedia es una captura de los cortes en esta misma web ya que en este diseño yo personalmente me lio bastante por su diseño y no sé exactamente como realizar los cortes, no creo que sea tan difícil entender lo que estoy diciendo.
Bueno da igual, doy por cerrado la ayuda, gracias a todos.

cdgp estoy siguiendo 3 cursos muy buenos de diseño web, de todas maneras este curso que me has pasado es presencial verdad?
Está bien pero el foro no es para que te hagan el trabajo. Tienes que usar tu imaginación con estas cosas.
__________________
Diseño Gráfico Profesional
www.valenn.com | Sigueme @valenncom | facebook/valenncom
  #20 (permalink)  
Antiguo 16/07/2011, 23:44
 
Fecha de Ingreso: septiembre-2010
Mensajes: 14
Antigüedad: 7 años
Puntos: 6
Respuesta: Maquetar PSD

Cita:
Iniciado por algoparapensar Ver Mensaje
Por lo general a esos "favores" se les llama "trabajo" y te suelen cobrar por hacerlos, ¿ofreces parte de la ganancia por éste favor?.

Hace unos dias encontré, en el foro, un muy lindo tutorial de [URL="http://web.tursos.com/tutoriales/html-css/como-pasar-un-diseno-de-photoshop-a-html-css/"]Como pasar un diseño de Photoshop a HTML y CSS[/URL]. Te lo recomiendo y tambien te recomiendo releer los apuntes del curso que hiciste.

Por experiencia te digo que siempre es mejor hacer (cuantas veces sea necesario) uno mismo las cosas, darse cuenta de los errores y resolverlos que mirar trabajos ajenos y cometer errores que no tenes idea de donde salieron ni como resolverlos.

Armate de paciencia, no es algo tan rapido y si es urgente, contrata a alguien para que te lo haga.

Gracias por el link!
  #21 (permalink)  
Antiguo 17/07/2011, 11:14
Avatar de GAST0N  
Fecha de Ingreso: agosto-2010
Ubicación: Buenos Aires
Mensajes: 680
Antigüedad: 7 años, 1 mes
Puntos: 64
Respuesta: Maquetar PSD

Cita:
Iniciado por white_island Ver Mensaje
O yo me explicado mal o vosotros no me entendéis. Si esto son 2 minutos lo que puede costar a un tío que tenga las cosas claras sobre cómo hacer los cortes de esta web. Ni que estuviera pidiendo hacer un diseño. Lo único que pido es una ayuda en ver como se maqueta esta web por alguien con experiencia, que por cierto esta web es de un curso no es para uso personal. Es más hasta viendo el PSD estoy ayudando yo más que lo que cuesta realizar los cortes.
Si tuviera que contestar como vosotros a los favores que he realizado en edición de videos seria millonario vamos.
A ver si os acostumbráis si participáis en foros en ayudar más y dejaros de comentarios que si de gratis que no de gratis, que yo con esta web no gano nada como os dije es una web que he realizado en un curso de diseño web con Photoshop.
PARA MAQUETAR PSD DEBES SABER HTML Y CSS.

Quiero aclarar algo, asi me cueste maquetar tu PSD en 2 minutos, yo tuve q estudiar y pagar un buen dineral para q me enseñen a maquetar y programar , no creo que sea justo que venga alguien y te pida q le hagas algo porque se imagina q es algo facil y q no lleva menos de 2 minutos!.. aun asi es trabajo.

De todas formas creo q la respuesta ya te la dieron, por si acaso te vuelvo a recordar PARA MAQUETAR DEBES SABER HTML Y CSS. , y si no podes pagar a alguien q te lo haga entonces lee e investiga sobre css y html , y si en tu curso te mandaron a maquetar debe ser porq algo te habran enseñado.. deberas repasar tus apuntes o preguntarle a tu profesor...

SALUDOS!!
__________________
Twitter: @GastonArnedo

Muerte a los <tr> y <td>

Etiquetas: maquetar, psd
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 10:16.