Maquetar PSD

white_island · #1 (**permalink**) 06/04/2011, 16:23

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

caricatos · #2 (**permalink**) 07/04/2011, 01:17

Tema movido desde Web general

EtiamBrindarte · #3 (**permalink**) 07/04/2011, 03:54

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

white_island · #4 (**permalink**) 07/04/2011, 04:03

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?

algoparapensar · #5 (**permalink**) 07/04/2011, 06:52

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.

valentina4you · #6 (**permalink**) 07/04/2011, 08:34

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.

white_island · #7 (**permalink**) 07/04/2011, 15:03

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.

pao01 · #8 (**permalink**) 07/04/2011, 15:13

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.

white_island · #9 (**permalink**) 07/04/2011, 15:18

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.

fishdesign · #10 (**permalink**) 07/04/2011, 17:34

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

valentina4you · #11 (**permalink**) 08/04/2011, 11:49

Cita:

Iniciado por white_island

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

fishdesign · #12 (**permalink**) 08/04/2011, 13:10

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

valentina4you · #13 (**permalink**) 09/04/2011, 07:05

Cita:

Iniciado por fishdesign

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! :)

Rafael · #14 (**permalink**) 09/04/2011, 07:17

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.

valentina4you · #15 (**permalink**) 09/04/2011, 07:41

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

jaja

fishdesign · #16 (**permalink**) 09/04/2011, 12:39

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

white_island · #17 (**permalink**) 09/04/2011, 16:33

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?

Rafael · #18 (**permalink**) 10/04/2011, 00:06

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)

valentina4you · #19 (**permalink**) 10/04/2011, 02:08

Cita:

Iniciado por white_island

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.

josueochoa · #20 (**permalink**) 16/07/2011, 23:44

Cita:

Iniciado por algoparapensar

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!

GAST0N · #21 (**permalink**) 17/07/2011, 11:14

Cita:

Iniciado por white_island

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