Diseñar web con Photoshop
He leído por algún sitio que se puede diseñar un sitio web con Photoshop y luego editarlo con Frontpage o Dreamweaver. Si esto es cierto, ¿Cómo hay que hacer?
4 respuestas
Respuesta de chakal
1
Tu pregunta es muy general. Ignoro que conocimientos tenés de Photoshop pero trataré de darte una pauta lo más amplia posible al respecto.
Todo diseñador de páginas web hace sus diseños en Photoshop o en cualquier programa similar. Yo trabajo con Photoshop y todo lo que te diga al respecto es exclusivamente la forma en que yo diseño y creo una web. Pero no es la única forma. Otros usarán métodos similares o muy diferentes. Para empezar hago una captura de pantalla del browser a la resolución que quiero que sea la página. El standard es de 800 x 600. Esto no significa que el espacio para diseñar es de ese tamaño. Este es un error común en aquellos que recién empiezan. El espacio a diseñar es aquel que está contenido en el browser. En 800 x 600 el espacio disponible sin que la web haga scroll es de 780 x 410. Una vez capturada la imagen del browser que no servirá de parámetro la pegamos en un documento nuevo de Photoshop. En el espacio antedicho donde se verá la web comenzamos a hacer nuestro diseño. Una vez terminado deberemos recortar y optimizar las imágenes para exportarlas a nuestro programa editor de HTML. Tanto el Frontpage como el Dreamweaver son programas para este fin. Te recomiendo por experiencia que, si debés aprender uno de los dos, elijas Dreamweaver. Ya que es mucho mejor y no llena el código fuente de tanto código basura como el Frontpage. Para tratar las imágenes que vas a exportar deberás pensar en la mejor forma de ir cortando cada una y después armarlas como un rompecabezas en el editor. Las imágenes GIF y JPG son las que se utilizan en web. Te explico brevemente en que consisten para que tengas una idea de cual usar según el tipo de imagen que vayas a exportar.
- Gif es un formato de mapa de bits comprimido que sólo almacena una información no superior a los 256 colores. También es posible realizar con este formato pequeñas animaciones.
- JPG es otro formato comprimido de mapa de bits pero la información de color que puede almacenar abarca más variedad de gradientes ya que es un formato de 24 bits.
¿Cuándo utilizar uno u otro? Bueno, para imágenes de colores plenos lo mejor guardarlas en formato gif. Mientras que para fotos o imágenes que tengas gradientes lo mejor es el formato JPG. En Photoshop existe la posibilidad de salvar las imágenes que vamos a usar en web en el apartado "Guardar para web" (Archivo>Guardar para web) Se abrirá una ventana donde tendrás la imagen original y la optimizada. Modificando los parámetros podrás subir o bajar la calidad de la imagen a guardar teniendo en cuenta que la idea es obtener una imagen con la mejor calidad posible y al mismo tiempo de poco peso.
Una vez recortadas y guardadas las imágenes llega el momento de empezar a armar el documento HTML agregando tus imágenes y poniendo los textos en el mismo editor.
Esto es, a grandes rasgos, la forma de trabajar con estos programas para realizar una página web. Cuando comiences a trabajar en esto y te surjan dudas volvé a preguntar. Será más fácil que te responda cosas más específicas que te serán más útiles.
Todo diseñador de páginas web hace sus diseños en Photoshop o en cualquier programa similar. Yo trabajo con Photoshop y todo lo que te diga al respecto es exclusivamente la forma en que yo diseño y creo una web. Pero no es la única forma. Otros usarán métodos similares o muy diferentes. Para empezar hago una captura de pantalla del browser a la resolución que quiero que sea la página. El standard es de 800 x 600. Esto no significa que el espacio para diseñar es de ese tamaño. Este es un error común en aquellos que recién empiezan. El espacio a diseñar es aquel que está contenido en el browser. En 800 x 600 el espacio disponible sin que la web haga scroll es de 780 x 410. Una vez capturada la imagen del browser que no servirá de parámetro la pegamos en un documento nuevo de Photoshop. En el espacio antedicho donde se verá la web comenzamos a hacer nuestro diseño. Una vez terminado deberemos recortar y optimizar las imágenes para exportarlas a nuestro programa editor de HTML. Tanto el Frontpage como el Dreamweaver son programas para este fin. Te recomiendo por experiencia que, si debés aprender uno de los dos, elijas Dreamweaver. Ya que es mucho mejor y no llena el código fuente de tanto código basura como el Frontpage. Para tratar las imágenes que vas a exportar deberás pensar en la mejor forma de ir cortando cada una y después armarlas como un rompecabezas en el editor. Las imágenes GIF y JPG son las que se utilizan en web. Te explico brevemente en que consisten para que tengas una idea de cual usar según el tipo de imagen que vayas a exportar.
- Gif es un formato de mapa de bits comprimido que sólo almacena una información no superior a los 256 colores. También es posible realizar con este formato pequeñas animaciones.
- JPG es otro formato comprimido de mapa de bits pero la información de color que puede almacenar abarca más variedad de gradientes ya que es un formato de 24 bits.
¿Cuándo utilizar uno u otro? Bueno, para imágenes de colores plenos lo mejor guardarlas en formato gif. Mientras que para fotos o imágenes que tengas gradientes lo mejor es el formato JPG. En Photoshop existe la posibilidad de salvar las imágenes que vamos a usar en web en el apartado "Guardar para web" (Archivo>Guardar para web) Se abrirá una ventana donde tendrás la imagen original y la optimizada. Modificando los parámetros podrás subir o bajar la calidad de la imagen a guardar teniendo en cuenta que la idea es obtener una imagen con la mejor calidad posible y al mismo tiempo de poco peso.
Una vez recortadas y guardadas las imágenes llega el momento de empezar a armar el documento HTML agregando tus imágenes y poniendo los textos en el mismo editor.
Esto es, a grandes rasgos, la forma de trabajar con estos programas para realizar una página web. Cuando comiences a trabajar en esto y te surjan dudas volvé a preguntar. Será más fácil que te responda cosas más específicas que te serán más útiles.
Respuesta de elleon
1
Pues mira, yo personalmente uso este método. Me diseño la interfaz en Photoshop. Mediante guías delimito las zonas que luego serán imágenes, botones, etc. Y todo esto lo paso a Image Ready. Con Image REady convierto las guías en separadores y luego todo optimizado lo exporto. Esto genera un html, que luego edito y ajusto con Dreamweaver.
Respuesta de joseka2
1
Image Ready es una aplicación que está siendo distribuida junto con el PhotoShop y está más orientada que el PhotoShop a el desarrollo de imágenes para el web.
Ayuda para crear con alguna facilidad gifs animados e imágenes optimizadas para el web. Claro, no te va a ayudar a poner los textos que acompañan una página hecha en HTML. Mucho menos te va a ayudar con las nuevas rutinas en java. Incluso las instrucciones en javascript tendrás que ponerlas a mano o con otras herramientas.
En conclusión, te PhotoShop e ImageReady van a auxiliarte en mejorar la performance de las imágenes y fondos de tu página. Una vez que hayas acabado el esqueleto de imágenes en IR, puedes salvarlo en HTML y ése archivo, claro, lo podrás complementar con Dreamweaver por ejemplo.
Agradezco la confianza reflejada en tu puntuación.
Un abrazo.
Joseka
Ayuda para crear con alguna facilidad gifs animados e imágenes optimizadas para el web. Claro, no te va a ayudar a poner los textos que acompañan una página hecha en HTML. Mucho menos te va a ayudar con las nuevas rutinas en java. Incluso las instrucciones en javascript tendrás que ponerlas a mano o con otras herramientas.
En conclusión, te PhotoShop e ImageReady van a auxiliarte en mejorar la performance de las imágenes y fondos de tu página. Una vez que hayas acabado el esqueleto de imágenes en IR, puedes salvarlo en HTML y ése archivo, claro, lo podrás complementar con Dreamweaver por ejemplo.
Agradezco la confianza reflejada en tu puntuación.
Un abrazo.
Joseka
Respuesta de leonn18
No es cierto photoshop te permite crear la animación gráfica, es decir la parte visual en cuanto gráficos, banner, anmacion que luego puedas integrar estos diseños a tu web es otra cosa, porque los únicos editores de diseño web son Frontpage o Dreamweaver.