Maquetacion CSS o Diseño en PhotoShop, que primero

[blanko]

Para los mas expertos, quisiera saber como lo hacéis, montáis el CSS del tirón viendo que imágenes os van haciendo falta y las creáis o buscáis¿? o dibujáis completamente la imagen de como quedaría en photoshop u otro programa y desde ahí partís.

Porque no se como empezar un diseño CSS, y dibujarlo completamente en photoshop se me hace terriblemente difícil. Porque ne photoshop no tengo el sentido de las proporciones. al verlo tan chiquito.

[cleft]

En lo personal realizo el 'mock-up' (digamos: 'propuesta del sitio') en Photoshop primero. Las proporciones las manejas trabajando con Grids (o sin Grid, como gustes), y de acuerdo al estilo de Layout que utilizaras (Fixed - Liquid) para posicionar bien los elementos (valores que despues te sirven a la hora de aplicar estilos).

Seguidamente procedo a realizar la codificacion XTHML (Estructura) y verificar que la misma es accesible y valida.
Luego a aplicar el CSS (Presentacion), valiendome de las proporciones y estilos elaborados en el mockup, y finalmente validandola.

Pero hablando de expertos:
Jesse Bennett-Chamberlain publico el proceso de creacion de un sitio, del cual se aprende mucho:
http://www.digital-web.com/articles/redesigning_the_expressionengine_site/

[euforico]

Mantengo el mismo procedimiento que la repuesta anterior:

1. Realizo la "Maqueta" o propuesta gráfica en Photoshop, de acuerdo a las grillas, ordeno las distancias.
2. Posteriormente procedo a la elaboración en Html con el CSS
3. La primera vesión de CSS la realizo en Firefox de forma validada por la W3C
4. Finalmente duplico este estilo de FF hacia IE6 e IE7

[webosiris]

personalmente, muchísimas veces trabajo directamente en html/css... costumbre más que nada, pero así entre otras cosas ahorro tiempo

[hey_alan]

Primero tienes que tener bien claro cómo quieres que sea tu sitio. Debes comenzar desde el papel y posteriormente darte una idea de la estructura. Para eso yo hago una pseudo-plantilla en PowerPoint, acomodando los elementos como rectángulos que simularán los divs.

Ya cuando tienes bien claro cómo será la estructura y la acomodación de los elementos, crea los gráficos en photoshop y finalmente hazlo realidad. Te recomiendo comenzar por el marcado html y finalizar con CSS.

Claro, todos tenemos nuestras formas de organizarlos .

Saludos.

[andriuch]

Lo mejor es hacer lo que dice euforico, es la mejor forma de que todo quede exactamente como quieres... Lo de que lo veas pequeño en el photoshop... no lo entiendo, si lo haces a pantalla completa y el zoom al 100% tiene que ser igual de grande que lo que luego crearás en tu html.

[metacortex]

Obviamente el diseño con Photoshop va primero. Allí se definen maquetación, medidas, proporciones, grosores, colores, líneas, fondos, tipografía, etc.. Luego es que se comienza a hacer la estructura en HTML.

Aunque la web sea elástica y las medidas relativas, debe crearse la propuesta en Photoshop, sin importar que éste use medidas absolutas. En el HTML y CSS se buscará acercarse lo más posible al diseño ya hecho. Esto es importante porque con el diseño en Photoshop ya se cuentan con directrices para poder guiarse y nos evitará estar dando vueltas y probando una y otra vez. Es decir, en Photoshop construimos la interfaz gráfica completa y podemos verla y modificarla con mucha más facilidad y rapidez.

Además, con el diseño en Photoshop listo podemos enviarle el boceto rápidamente al cliente en forma de "captura" en lugar de hacerlo esperar por el HTML, teniendo en cuenta que mostrarle el HTML listo es un poco inseguro.

[juaniquillo]

Depende... pero tengo que admitir que la gran mayoría de las veces empiezo con photoshop y luego hago el diseño en css.

[blanko]

Muchas Gracias por sus respuestas, en definitiva, esta claro que es mejor crear antes el diseño en photoshop y a partir de él, crear el html y posteriormente el css.

Así que a partir de ahora tendré que leer bastante el foro de diseño, para aprender a dibujar bien en photoshop las webs.

Porque mi nivel actual son firmitas, avatares,... y no quisiera que mi primera diseño, que lo quiero pa mi web, me quede cutresillo.

Seguro que esta muy preguntado, pero alguien conoce tutoriales de photoshop sobre diseñar web, en todos sitios que veos incluido este foro enlaza a este tutorial:
http://www.tallerwebmaster.com/Tutorial-Dise%F1o-Web-con-Adobe-Photoshop-CS3-y-HTML-c-97.html
y sus distintas versiones por la red, es por saber si ahí algún otro y poder comparar.

[Payin]

iba a preguntar lo mismo que Blanko, no hay algun otro tutorial que explique masomenos bien como hacer un prototipo en Photoshop? he estado probando, pero mas que hacer algunos banners no pasa naranja.

Muchas gracias!

[metacortex]

Temo que esta respuesta desilusionará a algunos, pero poco valen los tutoriales si el propósito es buscar una metodología. Si se dominan bien las herramientas y se tiene una idea clara de lo que se quiere, seguramente será muy fácil hacerse de un método propio para asumir los proyectos que vengan.

Asumo que este tópico no debería ser tomado como una especie de "encuesta" sino más bien aplicándole un análisis más profundo. El hecho de que la mayoría de los que participaron aquí se vayan primero por Photoshop no significa que necesariamente sea el método universal y más efectivo, sino con el que algunos de nosotros nos sentimos más cómodos.

Y ése es el truco del asunto: buscar la manera que nos dé mayor comodidad, calidad y menor tiempo en la ejecución. Si -en la búsqueda de un proceso que por naturaleza debería ser muy personal- nos guiamos por un tutorial de otra persona, no estaremos haciendo mucho por nosotros mismos.

Ahora bien, si el problema es que falta dominio de Photoshop o HTML o CSS, entonces habría que comenzar desde el principio y aprender el tema desde un nivel más básico, a fin de fortalecer las bases y llevarnos a tareas más complejas.

Si persistimos en dar saltos más grandes de los que por ahora podemos dar, entonces quedaremos irremediablemente estancados en el nivel de quienes viven del "copypaste" y le salen barbas esperando que otros le solucionen los problemas.

Pero si decidimos confiar por un momento en nosotros mismos y comprender que la mayoría de las veces el mejor tutorial es el instinto propio, seguramente nos sorprenderemos en poco tiempo creando muchas cosas buenas de la nada. Por supuesto, paralelo a la autoconfianza debe ir un conocimiento constante y creciente en el área que nos toca.

[gel]

Hola, amigos...
bueno, después de leer los posts anteriores doy mi opinión y, además, pido una ayuda a los que más saben de CSS!

En estos momentos estoy aprendiendo a diseñar páginas en CSS, ya que son muy agradables, bellas y aparentemente fáciles. Comienzo el diseño de la maqueta en Photoshop -y les digo, que son bellas las que hago-, pero a la hora de cortar y pegar... ¡no sé que coño! ¡no posiciono nada bien! Necesito alguna ayuda en eso.. pues he buscado en un sinfín de tutos y no encuentro cómo posicionar una imagen bien al tope...

Comencé aprendiendo por esta web MUY BUENA (EN INGLES): http://css-tricks.com/video-screenca...p-part-1-of-3/

No obstante, pido que dejen (puesto acá) dónde puedo ver otros tiutoriales de Mockup y Photoshop... o aprender a posicionar correctamente las imágenes.
Abrazos a todos.