Foros del Web » Creando para Internet » CSS »

Maquetacion CSS o Diseño en PhotoShop, que primero

Estas en el tema de Maquetacion CSS o Diseño en PhotoShop, que primero en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 28/02/2008, 02:53
 
Fecha de Ingreso: agosto-2007
Mensajes: 42
Antigüedad: 10 años, 3 meses
Puntos: 0
Maquetacion CSS o Diseño en PhotoShop, que primero

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.
  #2 (permalink)  
Antiguo 28/02/2008, 05:36
 
Fecha de Ingreso: febrero-2008
Mensajes: 62
Antigüedad: 9 años, 9 meses
Puntos: 1
Re: Maquetacion CSS o Diseño en PhotoShop, que primero

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/


Última edición por cleft; 28/02/2008 a las 05:57
  #3 (permalink)  
Antiguo 28/02/2008, 19:05
 
Fecha de Ingreso: febrero-2008
Ubicación: Santiago - Chile
Mensajes: 42
Antigüedad: 9 años, 9 meses
Puntos: 0
Re: Maquetacion CSS o Diseño en PhotoShop, que primero

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
  #4 (permalink)  
Antiguo 28/02/2008, 20:36
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 10 meses
Puntos: 997
Re: Maquetacion CSS o Diseño en PhotoShop, que primero

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

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #5 (permalink)  
Antiguo 28/02/2008, 21:14
Avatar de hey_alan  
Fecha de Ingreso: diciembre-2006
Ubicación: México
Mensajes: 348
Antigüedad: 11 años
Puntos: 8
Re: Maquetacion CSS o Diseño en PhotoShop, que primero

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.
__________________
Alan Marth Media

Diseño web y Publicidad en Morelia, Michoacán
  #6 (permalink)  
Antiguo 29/02/2008, 04:48
Avatar de andriuch  
Fecha de Ingreso: abril-2004
Mensajes: 65
Antigüedad: 13 años, 7 meses
Puntos: 0
Re: Maquetacion CSS o Diseño en PhotoShop, que primero

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.
  #7 (permalink)  
Antiguo 29/02/2008, 05:16
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.021
Antigüedad: 13 años, 6 meses
Puntos: 832
Re: Maquetacion CSS o Diseño en PhotoShop, que primero

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.
  #8 (permalink)  
Antiguo 29/02/2008, 08:18
Avatar de juaniquillo
Colaborador
 
Fecha de Ingreso: noviembre-2005
Ubicación: San Juan, Puerto Rico
Mensajes: 5.745
Antigüedad: 12 años
Puntos: 281
Re: Maquetacion CSS o Diseño en PhotoShop, que primero

Depende... pero tengo que admitir que la gran mayoría de las veces empiezo con photoshop y luego hago el diseño en css.
__________________
Por fin.. tengo algo parecido a un blog
Y por lo visto ya estoy escribiendo...
  #9 (permalink)  
Antiguo 01/03/2008, 12:35
 
Fecha de Ingreso: agosto-2007
Mensajes: 42
Antigüedad: 10 años, 3 meses
Puntos: 0
Sonrisa Re: Maquetacion CSS o Diseño en PhotoShop, que primero

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.
  #10 (permalink)  
Antiguo 01/03/2008, 13:37
Avatar de Payin  
Fecha de Ingreso: mayo-2007
Mensajes: 92
Antigüedad: 10 años, 7 meses
Puntos: 0
Re: Maquetacion CSS o Diseño en PhotoShop, que primero

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!
  #11 (permalink)  
Antiguo 01/03/2008, 14:33
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.021
Antigüedad: 13 años, 6 meses
Puntos: 832
Re: Maquetacion CSS o Diseño en PhotoShop, que primero

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.
  #12 (permalink)  
Antiguo 11/05/2009, 01:39
Avatar de gel
gel
 
Fecha de Ingreso: julio-2007
Ubicación: Toronto
Mensajes: 76
Antigüedad: 10 años, 5 meses
Puntos: 1
Respuesta: Maquetacion CSS o Diseño en PhotoShop, que primero

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.

Última edición por gel; 11/05/2009 a las 01:46
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

SíEste tema le ha gustado a 1 personas (incluyéndote)




La zona horaria es GMT -6. Ahora son las 06:46.