¿Cómo crear un diseño web?

LzO

Pues eso me gustaría saber como hacer un diseño como empezar... haceis la plantilla en 800x600 y luego recortais o que? no me entero mucho, algún tutorial o algo? gracias.

erdanblo

¿Algo como esto?

Crawler

buen enlace el de erdanblo.

Por mi parte decir que te olvides ya de 800x600 y pases a 1024x768

http://www.w3schools.com/browsers/browsers_display.asp

Aunque los datos de la w3c y de españa pueden ser 2 mundos distintos, pero... es mi opinión.

LzO

Gracias le voy a hechar un vistazo

GaN2

Una pregunta: Al hacer la interfaz web con el photoshop, a la hora de pasarlo todo a código HTML, la división y demás de los elementos nos lo guarda como tablas?

v1rus

#5 te crea un html si quieres también con las imagenes ya metidas... aunque yo recomiendo maquetar de 0 puesto que la maquetación automática no es que sea ni aceptable tan siquiera =)

Saludos

GaN2

Es que eso es lo que no me queda claro, te haces el diseño como una imagen, y después qué? Quiero decir, te lo pasa a html o que haces con él?

erdanblo

Con la herramienta sectores la recortas y esa imagen recortada es la que luego usas para maquetar usandola de fondo, o como imagen, según vayas necesitando.

Letto

+1 al 1024 pero teniendo en cuenta que el ancho máximo debe ser de 960 o 990 para evitar que te aparezca barra de navegación horizontal.

Si te sirve, estos son los datos de mv:

  1. 1024x768 381.053 34,66%
  2. 1280x1024 243.271 22,12%
  3. 1280x800 134.947 12,27%
  4. 1680x1050 102.028 9,28%
  5. 1440x900 89.610 8,15%
  6. 1152x864 43.588 3,96%
  7. 800x600 29.938 2,72%
eagLe__

El tema de la herramienta de photoshop a mi me sirve, pero luego tengo que andar remaquetandola debido a que obviamente las tablas se separan cuando se alarga el contenido escrito que hay en ellas. Solo tienes que poner la foto de esa tabla como fondo en las partes que vayas a escribir.

Yo lo hago de esa manera, teniendo mucho cuidado donde va a existir texto para hacer lo que he comentado anteriormente y que no se rompan todas las tablas.

Te pongo un ejemplo de como quedaría, es 1 web que hice para un equipo:

bLaKnI

Pero al hacer Save&Web... o algo así, en opciones específicas podeis seleccionar que la extracción os la haga por CSS mediante DIVs y no por tablas.
Lo que pasa, que se convierten en divs de posicionamiento fijo (absolute+tamaño predefinido), lo cual es una verdadera mierda si tienes una mínima intención de maquetar en liquido o elástico.

Lo recomendable parece ser lo que comentaban, te haces las divisiones, exportas las imagenes que sabes que encajan cual puzzle, y posteriormente trabajas TU con tus DIV usando dichas imágenes de fondo o como elemento, según sea conveniente.

Para mi lo jodido son los fondos (backgrounds). Siempre creas alguno "fantasia" y te llevas la desgracia de que los margenes tienen que ser de un color fijo. Entonces se nota como el fondo de la web real, se corta.
Hay que parir ideas de degradados en la imagen para que finalmente el fondo sea de un color concreto, o bien colocar una imagen de background en el body basada en x-tiling. Sino, jodida esta la cosa... :(

GaN2

Vale, me ha quedado claro, la idea es que recortas las zonas y con el CSS luego las puedes hacer encajar cual puzzle.

RaymaN

Hacedle caso a #9 que últimamente está muy puesto en temas de maquetación y los dolores de cabeza que acarrean, eh Letto? xDDD

Como ya han dicho, hazte el diseño en Photoshop y recorta las imágenes para luego encajarlas usando CSS. Procura no usar imágenes en cosas que se pueden hacer con CSS, como bordes, espaciados y demás.

erdanblo

#9 Yo ahí no aparezco :(

yEnS

Nosé si será la mejor opción pero lo que llevo haciendo desde hace varios años es Maquetar a escala real en Photoshop, activar las guías (Ctrl+H) y dividir la web mediante esas guias para luego ir cortando según lo marcado a la vez que voy maquetando con CSS.

Nosé si les piyé manía a las slice, pero me resulta más cómodo.

Respecto a resoluciones, yo usaría la 960px que actualmente se podría decir que es la "estándar" para cubrir casi todos los usuarios.

GaN2

Alguna pega más a este sistema a parte del ya mencionado tema de las capas en valores absolutos y demás?? Yo a la hora de maquetar lo hago con CSS puro y duro y me llego a desesperar a veces, entre las capas elásticas y las medidas en EM / % es desesperante. Todo esto viene porque el profesor que me dio Diseño Web era un colgao de la accesibilidad, nos obligaba a maquetar absolutamente todo en liquido y medidas elásticas sin explicar absolutamente nada, y al final he acabado odiado la accesibilidad web y la madre que los pario a todos.

Puni

#16 no se q tiene lo de la accesibilidad web q todo el mundo q la descubre la acaba odiando. yo al principio me sential mal cuando me escuchaba diciendo "cuantos ciegos van a visitar mi web? pues q les den por el taja", ahora ya ni lo pienso... xD

pd: como molan los diseños liquidos y como dan por el culo... solucion? footer con resolucion recomendada como antaño xD

konkas

Si estás empezando diseña directamente con Fireworks, Photoshop es para fotos, Fireworks para interfaz de usuario.

Cravendish

joder, yo pertenezco a una minoría asombrosa segun #9 xDD (1920x1080)

GaN2

Algún buen tutorial del tipo que puso #2 pero para fireworks?

PiradoIV

Ojo, yo por ejemplo voy con 1440x900 pero la ventana del navegador la reduzco a unos 800x850px, son injustas esas estadísticas xD

mOrK2

Pero Fireworks esta muy limitado, con PS se pueden hacer cosas más elaborada. Y que conste que yo uso FW xD

Usuarios habituales

  • mOrK2
  • GaN2
  • Puni
  • yEnS
  • erdanblo
  • LzO
  • Crawler