Diseñar y maquetar webs en el mismo programa

djtonight

Buenas a todos, antes de ir directo a la pregunta, os pongo en situación:

Tengo una empresa de informática en la que yo me encargo del tema web. La parte del diseño me la paso un poco por el forro porque voy o bien a base de templates o las programo desde cero en bloc de notas a partir de un boceto previo que me pasa un diseñador en pdf o jpg.

El caso es que tengo ahora un diseñador cercano que me hace esto mismo, con ilustrator o programas similares, junta imágenes, botones, etc... y esa captura me la pasa para que yo la transforme en una web html+css.

ok, pues la pregunta que os hago, es que programa debería utilizar el diseñador para que además de diseñar la web pueda exportarla a html+css. Para empezar, el diseñador no tiene ni papa de html.
He probado dreamweaver, pero hay cosas que no llegan a mostrarse bien en el modo "diseño", o bien genera demasiado código innecesario.
También probe a hacer las secciones con illustrator y guardarlo en HTML, pero me lo hico en tablas y con imagenes dentro de las celdas, un asco.
Seguramente eso se pueda configurar para que te lo genere en DIVs y las imagenes sean de fondo segun hagan falta o yo que sé, no soy un experto.

¿alguna recomendación? que programas utilizan los PRO en diseño web?
Que el mismo diseñador que concibe un diseño web me creara el "template" me quitaría mucho curro, y a él supongo que le facilitaria las cosas que en el mismo programa o en pocos pasos pudiera hacerlo.

gracias

scumah

Me temo que no te voy a dar ninguna solución directa a lo que pides :( Lo que hacen los pros es diseñar con PS, y a partir del .psd (Con sus capitas, nada de imagen plana que así es absolutamente imposible) sacar las imágenes y maquetar en cualquier editor. Lo mejor y más rápido sería que "aprendieras" a usar PS y sacaras tú las imágenes que necesites.

Lo que tu quieres, que yo sepa, no hay programa que lo haga correctamente, pero existe algún que otro plugin para PS (De pago casi todos, supongo), como este o este, que dicen que hacen algo parecido. Ahora, el resultado no es ni de coña como hacerlo a mano.

eXtreM3

Llevo mucho tiempo pensando que Adobe podría sacar algún programa que hiciera esto. El diseñador hace la web en illustrator, photoshop o indesign, lo que le de la gana, y con tu fantástico programa retrocompatible de Adobe, exportarlo como html + css y voilà! Estructura básica conseguida, lo que tú llamas template.

La verdad, para el potencial que tiene adobe, no debe ser dificil crear esta herramienta. Y si no la han sacado ya es porque no les es rentable, una pena.

edit: http://www.bucledigital.com/2011/02/helium-la-gran-incognita-de-adobe/

Habrá que ver como se comporta ese bicho =D

adr1ana_cs

#1 La mejor solución y lo que yo utilizo es:

  1. Diseño en photoshop. Después guardas en png y con Fireworks, haces los recortes de las imagenes, y previamente de esto, ocultando los textos desde el psd, ya que estos irian en HTML :) Fireworks te permite hacer divisiones y luego exportarlas todas en diferentes imágenes .png con solo darle a guardar :)
1 respuesta
radykal

Lo que comenta #4 lo puedes hacer directamente con Photoshop con la herramienta de sectores.

1 respuesta
eXtreM3

Pero qué cutrada es esa? Pregunto...

2
BLZKZ

vamos que primero haceis el mockup, luego lo comprimis en un jpeg o png perdiendo calidad, lo recortais y volveis a comprimir perdiendo aun mas calidad (sin contar transformaciones que hagais por el camino)

En fin xD, decidle a kaos que se pase por aquí y os recomiende algo mejor xD

#8 manubrio no es pene? xD querías decir "manija"? xD

Meleagant

El Photoshop tiene una herramienta para dividir los elementos de un diseño en secciones y luego exportarlas todas a la vez como imágenes.

Eso es lo más parecido que conozco. El posicionamiento y todos los elementos que no sean imágenes los tendrás que seguir haciendo a manubrio.

1 respuesta
adr1ana_cs

#5 Si, es cierto, puedes hacerlo tambien directamente con Photoshop, pero yo lo veo mas práctico con Fireworks :)

lebroN

photoshop + divs = buena maquetacion

Simplemente haz el diseño que te guste en photoshop, luego selecciona la herramienta de cortar en sectores y guarda las imagenes. Lo único que tienes que hacer es ir poniendolas en el estilo css de tus divs en el fondo o como quieras: #div1 {background-image: url;}

1 1 respuesta
jask

#10 Añado:
photoshop + divs + css = buena maquetación.

No hay que basarse solo en imágenes para poner de fondo y tal, muchas veces las imágenes que hay que usar son mínimas, ya que solo se basan en jugar con los fondos y cosas así.

Ya si te ves capacitado, y vas a hacer una web como dios manda, utiliza sprites, que es colocar en un mismo archivo las imágenes "pequeñas" que se van a utilizar, a si siempre se carga un archivo y no se tiene que tirar de varios, reduciendo la carga de la web, y algo importante, la petición del usuario, porque esa imagen ya la tendrá cacheada una vez y solo hay que moverse con CSS dentro de ella para que aparezca el "trozo" adecuado.

Suerte

1 respuesta
lebroN

#11 bueno yo contaba que para usar divs hay que darle las propiedades con css pero se me pasó xD gracias por la corrección

1 respuesta
jask

#12, no hay problema. Lo puse más que nada por la gente que no sabe muy bien como va el tema de maquetación. :)

Usuarios habituales

  • jask
  • lebroN
  • adr1ana_cs
  • Meleagant
  • eXtreM3
  • radykal
  • scumah