Como crear una web con Photoshop (2/2)

Una vez hemos diseñado nuestra web ya podemos a empezar con la dissección.
¡¡Enfermera, el bisturí!!

2

Herramienta Sector y Herramienta selección de sector

Estas 2 son las herramientas que necesitas para dividir tu web en partes mas pequeñas. Esta parte del proceso consiste en fraccionar la imagen en sectores rectangulares a los que asignaremos una etiqueta con una función específica: Imagen, Sin imagen o Tabla. 

Comenzaremos con un sólo sector, que abarca toda la imagen. Cuando se crea un nuevo sector de usuario o un sector basado en capas, se generan sectores automáticos adicionales para las áreas restantes de la imagen.  Debemos procurar minimizar el número de sectores. Así simplificaremos el trabajo y el número de imágenes creadas.

Marcos sin Imagen

Con esta opción el sector se mostrará con el color de fondo asignado pero no contendrá ninguna imagen en su interior. Adobe nos proporciona además la posibilidad de excribir en el marco, pero no podremos darle formato al texto, al menos desde Photoshop.

Es útil utilizar este tipo de marcos cuando los fondos son de colores homogéneos para evitar la carga innecesaria de imágenes y optimizar así la carga de la web.

Marcos con Imagen

Con esta opción especificamos a Photoshop que dicho marco contendra una imagen. Esta imagen corresponderá a la sección de nuestro diseño que contiene el sector. Más adelante podremos especificar el tipo de imagen que se generará en función de nuestras necesidades. Básicamente para exportar a web las opciones son JPG, PNG o GIF.

Tabla

No tiene secretos, el sector contendrá una tabla HTML.

Una vez completemos el proceso de diseccion de la web y estén asignadas las funciones de todos los sectores ya podemos guardar para web pulsando Control + mayusc. + Alt + S (en Windows) o Commando + mayusc. + Alt + S (en Mac OS X)

Acto seguido nos aparece la ventana en la que podremos especificar el formato de la imagen de cada sector, que como ya dije antes podremos optar por JPG, GIF o PNG con sus diferentes compresiones y paletas de colores. Las cuatro ventanas te permiten comparar el resultado utilizando esos 4 posibles formatos de imagen. Solo queda elegir dónde guadar, asegurarnos que guardará el archivo HTML y las imágenes y pulsar el botón mágico. Entonces Photoshop generará un fichero HTML junto a una carpeta con las imágenes que necesita para mostrar la web correctamente.

3

El último paso será añadir a través de Dreamweaver aquello que Photoshop no nos permite hacer. Si no hemos optado en insertar el texto como una imagen podremos que escribir el contenido de la web y darle formato, color, cuerpo, sangría, etc.  

Quedará, por último, insertar los fragmentos de código que nos permitan incrustar vídeos de Youtube y cía., animaciones en Flash o cualquiera otro elemento insertable siempre que hayamos dejado el hueco exacto para su ubicación. Cualquiera pequeño desajuste, aunque sea de 1 píxel, provocará que el puzzle no encaje bien y la web no se muestre como esperábamos. Por eso en Dreamweaver es mejor no tocar nada del diseño de la web. Sólo si eres un experto. Pero seguramente si fueras una experto no estarías perdiendo el tiempo con este cutre tutorial.