Foros del Web » Creando para Internet » Diseño web »

Maquetacion Web CSS o Photoshop?

Estas en el tema de Maquetacion Web CSS o Photoshop? en el foro de Diseño web en Foros del Web. Buenas, queria saber que me recomiendan, ustedes prefieren maquetar en Photoshop y luego guardarlo para web (html e imagenes) o en CSS, creando divs? que ...
  #1 (permalink)  
Antiguo 07/07/2009, 02:28
 
Fecha de Ingreso: noviembre-2008
Mensajes: 130
Antigüedad: 9 años, 1 mes
Puntos: 0
Maquetacion Web CSS o Photoshop?

Buenas, queria saber que me recomiendan, ustedes prefieren maquetar en Photoshop y luego guardarlo para web (html e imagenes) o en CSS, creando divs? que es lo mas conveniente?
Saludos..!
  #2 (permalink)  
Antiguo 07/07/2009, 02:59
(Desactivado)
 
Fecha de Ingreso: julio-2008
Ubicación: Muchas noches sin dormir
Mensajes: 211
Antigüedad: 9 años, 5 meses
Puntos: 7
Respuesta: Maquetacion Web CSS o Photoshop?

Yo primero tecleo el código en NotePad++ en xhtml strict 1.0 más css 2.1. Luego creo las imagenes en Photoshop o Fireworks. Los logos en Illustrator.
  #3 (permalink)  
Antiguo 07/07/2009, 09:38
Avatar de pao01
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 1.875
Antigüedad: 9 años, 6 meses
Puntos: 351
Respuesta: Maquetacion Web CSS o Photoshop?

DeCodigos, sin ningún lugar a dudas creo que te conviene aprender html y css y de esa forma elaborar tus proyectos web.
Lo mejor es que tú entiendas el código y puedas ir modificándolo.
__________________
Entre más estrecha la mente, más grande la boca.- Ted Cook
Autosconarte-Blog
  #4 (permalink)  
Antiguo 07/07/2009, 12:33
Avatar de bioxido  
Fecha de Ingreso: diciembre-2008
Ubicación: $_SERVER['PHP_SELF']
Mensajes: 601
Antigüedad: 9 años
Puntos: 21
Respuesta: Maquetacion Web CSS o Photoshop?

Personalmente no te recomiendo maquetar en photoshop...

Bueno, primero que nada si vas a hacer toda la web en photoshop, te va pesar bastante porque van a ser 50imagenes para 1 sola seccion...

La verdad es mas facil hacerlo directamente desde html y css, despues terminas perdiendo mas tiempo intentando "adaptar" todas las divs,tablas,etc que te creo el photoshop...
  #5 (permalink)  
Antiguo 07/07/2009, 18:01
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Maquetacion Web CSS o Photoshop?

Photoshop no, por 2 esenciales razones:

1 - No se usan tablas para maquetar
2 - El texto será una imagen y no tendrá valor semántico y por tanto te costará horrores salir en google
__________________
No diseñes usando tablas.
  #6 (permalink)  
Antiguo 08/07/2009, 15:36
 
Fecha de Ingreso: junio-2009
Ubicación: Madrid
Mensajes: 402
Antigüedad: 8 años, 5 meses
Puntos: 20
Respuesta: Maquetacion Web CSS o Photoshop?

Hmmm??? Como que photoshop no?

Yo lo que hago es lo siguiente:

1. Hago un esquema de como seria mi web (donde estaria el menu, sidemenu, las dimensiones de todo...)

2. Me pongo a diseñar sobre la esquema que tengo.

3. Acabo el diseño, rectifico las errores que pueden aver.

4. Empieza la magia.

5. Empiezo a ir seleccionando cada parte de la web y a guardalo para la web. (Background del website, background del header, footer y etc...) sin texto claro.

6. Empieza la obra del css, a ordenar y colocar cada parte que hemos guardado previamente para colocarlo en su sitio tal como lo hemos diseñado en photoshop...

7. Luego va el menu, y todo lo que queda.

Asi es como yo lo hago, y me sale de maravilla.

Suerte,
w0rldart
  #7 (permalink)  
Antiguo 08/07/2009, 20:27
ramonjosegn
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Maquetacion Web CSS o Photoshop?

Photoshop también genera CSS....
  #8 (permalink)  
Antiguo 09/07/2009, 16:52
 
Fecha de Ingreso: noviembre-2008
Mensajes: 130
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: Maquetacion Web CSS o Photoshop?

Ramonjosegn, Como hago para generar css desde photoshop?...
  #9 (permalink)  
Antiguo 09/07/2009, 16:53
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Maquetacion Web CSS o Photoshop?

DeCodigos, yo dejaría el photoshop para lo que es y haría las web con HTML y CSS.
__________________
No diseñes usando tablas.
  #10 (permalink)  
Antiguo 09/07/2009, 16:53
 
Fecha de Ingreso: noviembre-2008
Mensajes: 130
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: Maquetacion Web CSS o Photoshop?

Cita:
Iniciado por w0rldart Ver Mensaje
Hmmm??? Como que photoshop no?

Yo lo que hago es lo siguiente:

1. Hago un esquema de como seria mi web (donde estaria el menu, sidemenu, las dimensiones de todo...)

2. Me pongo a diseñar sobre la esquema que tengo.

3. Acabo el diseño, rectifico las errores que pueden aver.

4. Empieza la magia.

5. Empiezo a ir seleccionando cada parte de la web y a guardalo para la web. (Background del website, background del header, footer y etc...) sin texto claro.

6. Empieza la obra del css, a ordenar y colocar cada parte que hemos guardado previamente para colocarlo en su sitio tal como lo hemos diseñado en photoshop...

7. Luego va el menu, y todo lo que queda.

Asi es como yo lo hago, y me sale de maravilla.

Suerte,
w0rldart
Tienes alguna web de ejemplo que hicistes con este sistema?
  #11 (permalink)  
Antiguo 09/07/2009, 16:59
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Maquetacion Web CSS o Photoshop?

Mírate estos dos tutoriales:

http://www.araudi.net/migracion/migr...sin_dolor.html
http://www.araudi.net/migracion/migr..._parte_II.html
__________________
No diseñes usando tablas.
  #12 (permalink)  
Antiguo 09/07/2009, 17:31
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Maquetacion Web CSS o Photoshop?

Hola DeCodigos
La metododología propuesta por w0rldart es tan válida como cualquier otra:
Medito y selecciono una idea
La esbozo
Hago un interfaz (el layout) en un programa de diseño gráfico
Preparo las imágenes para los distintos elementos
A escribir código (xhtml + css) para convertir el dibujo en código para los navegadores.
Todo ello muchas veces con un constante ir y venir del editor de texto al de gráficos.
Los que debes encontrar es la forma en la que más a gusto te manejes y más efectiva encuentres.

Lo que no te recomendaría nunca, y enfatizo lo de nunca, es:
Cita:
Iniciado por ramonjosegn Ver Mensaje
Photoshop también genera CSS....
ni creo que lo hiciesen la mayoría de los diseñadores/programadores de páginas web que cuentan con mi reconocimiento y admiración por sus trabajos y conocimientos.

La razón es muy sencilla: cada programa para lo que es su función principal y para lo que está optimizado.
Posíblemente te genere un código, sí, pero lleno de basura y en muchas partes ni estándar ni válido.
Y ya no entramos en tiempo de carga de la página, peticiones al servidor, peso, semántica, optimización, accesibilidad y un largo etcétera.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #13 (permalink)  
Antiguo 09/07/2009, 17:48
ramonjosegn
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Maquetacion Web CSS o Photoshop?

Cita:
<html>
<head>
<title>pagina001</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Styles (pagina001.psd) -->
<style type="text/css">
<!--

#pagina001 {
position:absolute;
left:0px;
top:0px;
width:1000px;
height:730px;
}

-->
</style>
<!-- End ImageReady Styles -->
</head>
<body id="pagina001" style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
<!-- ImageReady Slices (pagina001.psd) -->
<img src="im%c3%a1genes/pagina001.jpg" width="1000" height="730" alt="">
<!-- End ImageReady Slices -->
</body>
</html>
creo que es bastante más limpio que el de muchos programas populares, como dreamweaver o frontpage...

con respecto a cómo se genera, es muy largo de explicar (y tiene muchísimas opciones), tan sólo decir que se hace con la opción exportar para web, y ahí está todo lo que se necesita, opciones, nombres, carpetas, comptabilidad, etc
  #14 (permalink)  
Antiguo 09/07/2009, 18:05
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Maquetacion Web CSS o Photoshop?

Vaya, un documento sin Doctype,
que no cierra el único metatag que incluye.
Tiene una declaración de estilos en el head y pese a ello mete más estilos en el body para la misma clase, obviando que margin es una propiedad shorthand.
Que sólo tiene una imagen en el html pero sin elemento contenedor que la ampare.
Y no entramos en todo lo que se podrá derivar del uso de la posición absoluta una vez que a la página se le añadan contenidos.

Definitivamente, sigo sin ser partidario de que el photoloquesea me haga el (x)html y el css
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #15 (permalink)  
Antiguo 09/07/2009, 18:51
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.741
Antigüedad: 9 años, 4 meses
Puntos: 2113
Respuesta: Maquetacion Web CSS o Photoshop?



Confucio dijo: "Yo invente la confusion"... ahhh, no eso se lo achaco una Miss ... segun la pelicula Entrapment Confucio dijo: "No uses un cañon para matar un mosquito".

Podemos traducirlo con la sugerencia de kseso?: a cada herramienta darle el uso para el que fue creada y Photoshop fue creado para manipulacion de imagenes; que tiene ese pequeño extra para "facilitar el trabajo" de "guardar para Web", si, lo tiene, pero no genera codigos estandar y va a dar mas problemas que beneficios.
__________________
- León, Guanajuato
- GV-Foto
  #16 (permalink)  
Antiguo 09/07/2009, 19:23
Avatar de trasgukabi  
Fecha de Ingreso: septiembre-2004
Mensajes: 2.749
Antigüedad: 13 años, 3 meses
Puntos: 18
Respuesta: Maquetacion Web CSS o Photoshop?

Cita:
Iniciado por kseso? Ver Mensaje
Vaya, un documento sin Doctype,
que no cierra el único metatag que incluye.
Tiene una declaración de estilos en el head y pese a ello mete más estilos en el body para la misma clase, obviando que margin es una propiedad shorthand.
Que sólo tiene una imagen en el html pero sin elemento contenedor que la ampare.
Y no entramos en todo lo que se podrá derivar del uso de la posición absoluta una vez que a la página se le añadan contenidos.

Definitivamente, sigo sin ser partidario de que el photoloquesea me haga el (x)html y el css

(No te puedo dar karma-no sé porqué-, pero te lo daría)
  #17 (permalink)  
Antiguo 09/07/2009, 20:58
Avatar de arthpix  
Fecha de Ingreso: diciembre-2003
Ubicación: Cancún
Mensajes: 2.340
Antigüedad: 14 años
Puntos: 93
Respuesta: Maquetacion Web CSS o Photoshop?

Y si por casualidad aparece una web maquetada con Photosp en Google ¿Cómo se vería en los resultados de la búsqueda?

Mi web con Photoshop -- [Traducir esta página]
Imagen001Imagen002Imagen003Imagen004Imagen005Image n006Imagen007Imagen008Imagen009Imagen010
Imagen011Imagen012Imagen013Image014Imagen015Imagen 016Imagen017
www.photoshopweb.com/mipagina.html - En Caché - Similares

__________________
Antes de hacer rabietas infórmate: Linux != Windows
  #18 (permalink)  
Antiguo 13/07/2009, 04:13
Avatar de fmorenop  
Fecha de Ingreso: noviembre-2008
Ubicación: Toledo
Mensajes: 125
Antigüedad: 9 años, 1 mes
Puntos: 16
Sonrisa Respuesta: Maquetacion Web CSS o Photoshop?

No es de Confucio... pero "Las opiniones son como los culos. Todo el mundo tiene una" y esta es la mía, la que uso:

Maquetas el prototipo con photoshop, incluyendo textos y obtienes una instantanea de cómo se verá la web (aproximadamente)

Ahora puedes decidir si exportas las imágenes (sin textos) para maquetarlo con capas y css (tu mismo si te pones con el notepad+ desde 0 pero es como reinventar la rueda) o puedes:

- Definir sectores en photoshop con los elementos de la página.
- Exportar el HTML y las imágenes (optimizadas, poco peso incluso para una página completa)
- Coger un editor web 'de verdad' (dreamweaver por ejemplo) y cambiar las imágenes de las celdas por fondos, añadir capas con textos u otras imágenes, css, javascript, rollovers, etc...

Los sectores e imágenes comunes a toda la web se utilizán en el resto de las subpáginas (se encuentran en la cache del browser y las páginas se cargan instantaneamente)

En este caso, se obtiene usa página maquetada sobre una tabla... (tened paciencia los fandiv+css), el texto es texto, atributos, cabeceras, DOCTYPE, etc.. sin problemas SEO, (El que quiera validar que se ponga a ello).... y ya está.

Y la página que obtienes (con más o menos vistosidad, calidad o validez), no depende de las herramientas o tecnología, sino del uso que le da.

No es el supermoderno div+css pero es tan estandar, compatible y accesible, bla, bla,bla,... como cualquier otro método.

Imageready (Photoshop), con opciones para crear HTML, sectores, optimizar imágenes, rollovers, enlaces, etc... SI fué creado para hacer páginas web (aunque no sea, ni de cerca, el mejor editor web y, claro está, yo apenas lo uso para generar la tabla inicial, los slices o, tan sólo, los sectores de la página usando luego el dreamweaver) pero fijo que el notepad+, editplus, etc... tampoco se crearon para maquetar HTML, ni cobol, ni java, ni PHP, pero sierven perfectamente si estás acostumbrado.

Esta, por ejemplo, es otra forma de hacer páginas. Tan válida como el wordpress, joomla, o el notepad+ y el paintshop pro.

Pack

P.D: Entre matar moscar a cañonazos y 'hacerlas huir sin causarles daño y sufrimiento'... hay unos cuantos cientos de miles de posibilidades. jejejeje

Última edición por fmorenop; 13/07/2009 a las 05:56
  #19 (permalink)  
Antiguo 13/07/2009, 18:02
 
Fecha de Ingreso: junio-2009
Ubicación: Madrid
Mensajes: 402
Antigüedad: 8 años, 5 meses
Puntos: 20
Respuesta: Maquetacion Web CSS o Photoshop?

DeCodigo si tengo, por ejemplo: www.reformaslorenzo.es, esta diseñada en photoshop y luego claro, todo lo he pasado a xhtml y css
  #20 (permalink)  
Antiguo 14/07/2009, 02:15
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.741
Antigüedad: 9 años, 4 meses
Puntos: 2113
Respuesta: Maquetacion Web CSS o Photoshop?

Cita:
Iniciado por fmorenop
No es de Confucio... pero "Las opiniones son como los culos. Todo el mundo tiene una" y esta es la mía...


Cita:
Iniciado por fmorenop
Entre matar moscar a cañonazos y 'hacerlas huir sin causarles daño y sufrimiento'... hay unos cuantos cientos de miles de posibilidades. jejejeje
Cierto, las posibilidades son casi infinitas, sin embargo, yo hablaba solo de la que creo mas conveniente (aunque requiere mucho mas trabajo), ya despues DeCodigos vera cual de todas las opciones que le dimos le sirve o le gusta mas.
__________________
- León, Guanajuato
- GV-Foto
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




La zona horaria es GMT -6. Ahora son las 05:30.