21 mayo, 2010

Como crear una web con Photoshop (1/2)

Para construir un sitio web tenemos muchas herramientas hoy en día, más de las que pensamos. Pero cuando hablamos de crearla en HTML el rey del software por excelencia es Dreamweaver. Es la herramiena especifica mas popular para la creacion de paginas web.
Aunque el discipulo de Macromedia sigue cometiendo grandes errores que acaban por desesperar a mas de uno (entre los que me incluyo): Es incapaz de mostrar el resultado final de la página tal como va verse en el navegador y hacerlo, además, en tiempo real.
DW sólo muestra la estructura de la pagina web, el esqueleto, y las imágenes que acompañan a la web. En principio eso debería ser suficiente para muchos programadores, pero para los diseñadores web es un problema que el programa resalta los marcos de las tablas tan gruesos, que muestre las inserciones en flash como cuadros en grises o que desplace las piezas del complejo puzzle que supone cualquier web. A cualquiera podria llegar a irritarle semejante impreciosión, a mi por lo menos lo consigue.



Por eso he preferido tomar otro camino para la creacion de webs estáticas, aunque eso no me evita reacer en DW para ciertas tareas. Los pasos a seguir son estos.

  1. El paso número uno consiste en diseñar la web en tu programa favorito y llevarlo a Photoshop, donde también puedes diseñarla. 
  2. Después divides el diseño en sectores y generas el HTML con las imágenes. 
  3. Y por último, en nuestro amado DW añades aquellos elemenos multimedia que no puedes insertar en Photopshop, como videos de YouTube o Vimeo, mapas de Google Maps, un Podcast....etc. siempre que hayas tenido en cuenta el espacio que van a ocupar.


1
Pues si, nada más fácil que coger y ponerte a diseñar tu web. Y para ello tienes dos opciones básicas: utilizar el mismo Photoshop o cualquier otro software de diseño

Si vas a utilizar el mismo Photoshop, puedes hacer uso de todas las herramientas que empleas normalmente, sin restricción. Además te ahorrarás el trabajo de tener que traspasarlo más tarde porqué ya lo has creado en el mismo programa que necesitarás más adelante.

Si utlizas otro software tipo Freehand, Illustrator, Indesign o Fireworks tambien puedes emplear todas las herramientas a tu abasto, pero es recomendable que cuando pases el diseño a Photoshop lo hagas capa a capa. De esta manera podrás realizar pequeñas correcciones si fuera necesario en el mismo Photoshop, y no tendrías que volver al programa de origen, corregirlo y tener que transportar de nuevo el diseño. Es mi consejo pero puedes hacerlo como te de la gana.


En la próxima entrega os explicaré la auténtica chicha, como partir la web con Photoshop y generar el archivo html.  Hasta otra.



No hay comentarios: