¿CÓMO DISEÑAR UN SITIO WEB “FROM SCRATCH”? - Parte 2

Y después de varios diseños llegué a un diseño final...

Y bien, ahora que ya tenemos el diseño en photoshop hecho utilizaremos la herramienta SECTORES para extraer las imágenes que necesitaremos para armar todo nuestro diseño en html.

Para este diseño en particular necesitaremos la barra de arriba (donde está la búsqueda), apagamos todos los textos que tiene encima y creamos un sector que contenga la barra completa. También apagamos el logo, pues este lo copiaremos de otra forma, igualmente los íconos de esa barra los copiaremos de una manera diferente.

Para crear el sector luego de hacer clic en esta herramienta arrastramos el mouse y seleccionamos toda el área que necesitamos (en este caso la barra de arriba).

Como podrán ver apareció un número en la esquina superior del área que seleccionamos, este es el número de sector sobre el cual estamos trabajando. Hagamos doble clic sobre esa área y nos aparecerá una ventana. En el campo NOMBRE cambiamos el valor que aparecere allí y ponemos cualquier nombre que podamos recordar, en mi caso yo decidí llamar a ese sector top-bar-bg. Ese es el nombre que tendrá la imagen cuando la guardemos y la vayamos a trabajar en HTML, recuerden que es preferible utilizar guiones medios ( - ) para nombrar las imágenes, es una técnica sencilla de SEO.

Ya tenemos nuestro primer sector hecho, ahora hagamos un sector de cada item del menú. Una buena idea es hacer zoom para poder abarcar el área exacta que necesitamos.

Hacemos doble clic sobre cada uno de los item del menú para nombrarlos con nombres lógicos. Para editar diferentes sectores debemos escojer la otra opción de la herramienta sectores: HERRAMIENTA SELECCIONAR SECTOR.

Con esta herramienta ya podemos ir haciendo doble clic sobre los diferentes sectores que tenemos hechos. En mi casa decidí llamarme a cada item con el nombre de la categoría que representarán: inicio, equipo, servicios, catalogo, pedidos y blog.

Pueden notar que también pueden ponerle los URL y los TEXTOS ALT directamente en Photoshop CS3, pero la verdad yo prefiero hacerlo en Dreamweaver, así que dejaré en blanco los demás campos y sólo me enfocaré en los nombres.

Como pueden ver el diseño tiene dos rayas horizontales debajo del menú, si estas rayas no tuvieran un sombreado podríamos hacerlas con un color sólido en el CSS en vez de con imágenes, pero como les puse sombra utilizaremos las imágenes.

Crearemos un sector que abarque toda el área horizontal de las rayas gris y negra, incluyendo las sombras. Yo escojí llamarle rayas.

Ahora apagamos todo el texto e imágenes que está como contenido y creamos un sector del mismo largo que el anterior que abarque un pedazo del área blanca, este será ahora el fondo de nuestro contenido. Debemos asegurarnos que el área que seleccionamos quede exactamente igual de larga que la de la área anterior. Yo le llamé a este sector content-bg

 

También necesitaremos la imagen del final del contenido con las esquinas redondeadas, así que crearemos un sector de ese pedazo. Como necesitamos que tenga el mismo ancho el sector anterior, lo que podemos hacer es crear un sector sin nombre que abarque casi toda el área blanca del contenido para poder cuadrar el sector que crearemos abajo.

Y ahora con este sector "guía" podemos crear el sector que contiene la imagen de las esquinas redondeadas de abajo.

Como pueden ver ambos secotres están alineados, debemos quedar que no quede ni siquiera un pixel de más o de menos entre ambos sectores recuerden: "Un píxel hace la diferencia".

Y ahora el último sector, para crear ese footer sólo necesitaremos un pedazo del fondo azul degradado, la raya verde podemos hacerla con CSS, pero prefiero incluirla en el sector y hacer el footer nada más con esa imágen. A este último sector le llamaré footer-bg.

Y de esta forma hemos terminado todos los sectores que necesitamos.

Ahora guardaremos todos esos sectores como imágenes independientes. Lo primero que haremos es apagar la capa fondo, pues todas las imágenes que necesitamos serán png transparentes. Luego vamos a ARCHIVO > GUARDAR PARA WEB Y DISPOSITIVOS

Nos aparecerá una nueva ventana y con la herramienta SELECCIONAR SECTOR que nos aparece allí, vamos haciendo clic sobre cada uno de los sectores que creamos.

Cada vez que hagamos clic en un sector, escojemos en los AJUSTES PREESTABLECIDOS la opción PNG y así veremos cómo cada sector se va tomando un fondo transparente.

Para alcanzar los sectores de abajo podemos movernos con la herramienta DESPLAZAR, que es la que tiene forma de manito. En la imagen también vemos como los sectores se volvieron de fondo transparente.

Una vez hacemos clic en GUARDAR, buscamos un lugar donde alojar nuestras imágenes, no es necesario que creemos una carpeta nueva, Photoshop CS3 lo hará por nosotros. Para los que tienen Phostoshop en inglés la carpeta se llamara images, para los que tiene el Photoshop en español (como yo) la carpeta se llamará imágenes, por lo cual deberán cambiarle el nombre más adelante, pues no es recomendable tener caracteres latinos (como tildes o ñ) como nombres de los directorios y/o archivos de nuestros sitios Web.

Ahora, si revisan la caperta donde guardaron las imágenes verán todos los pedacitos que ha creado photoshop para nosotros trabajar.

Borremos todas las imágenes que no hayamos nombrado, esas imágenes no nos servirán de nada para lo que necesitamos, así que en conclusión nos quedaremos con las siguientes imágenes:

blog.png
catalogo.png
content-bg.png
content-bottom.png
equipo.png
footer-bg.png
inicio.png
pedidos.png
rayas.png
servicios.png
top-bar-bg.png

Las imágenes del logo y los íconos son parte de los sectores, las debemos tener guardadas totalmente aparte.

¡Y listo! Por ahora los dejo con eso... muy pronto viene la parte 3 de este tema: "div-ing", que debo decir es la más interesante y al final la más importante, pues daremos forma a nuestra página Web.

Para descargar el *.psd y las imágenes haz clic en el botón de abajo.

Una recomendación musical: "Lieber gott" - Marlon
Una cita: "Un píxel hace la diferencia." - Yen
Un libro: "Wiccan" - Scott Cunningham