Taller de Adobe Photoshop: la interfaz de tu sitio en XHTML y CSS (2)

¡Buenas, mis queridos alumnos! ¡Llegó el momento de crear nuestro sitio web completo, en XHTML + CSS con Photoshop! ¿Tuvieron problemas o dudas la clase pasada? ¡Espero que no! A estas alturas deberían tener lista la interfaz, con un header con el logo, la botonera, etc.

Acomodando los sectores y pasándole a Photoshop los parámetros correctos con la función Guardar para la web, podremos generar el archivo XHTML y la carpeta contenedora de las imágenes, todo listo para subir al servidor y ver online ^_^ ¡Empecemos ya!

De Photoshop a la web

Recortando los sectores de la imagen

Recién dijimos que en nuestro psd tendríamos sectores que corresponderán a elementos del sitio web. Deberíamos entonces delimitar estos elementos por medio de guías, por ejemplo:

Para que se entienda por qué yo las puse donde las puse, veamos esta imagen donde he resaltado cada elemento que delimitan las guías:

La clase pasada vimos (brevemente) que había que usar la herramienta Sector.

Hacemos clic en el botón Sector de la barra de herramientas de Photoshop (o tecleamos “K“).

En el panel de opciones veremos un botón que dice “Sectores a partir de guías”. Al hacer clic en él cada trozo de imagen que estaba delimitada por las guías se convertirá en un sector que luego podemos guardar como una imagen aparte, separada del resto (como vimos en la clase pasada, con los botones de la botonera, valga la redundancia).

Lo que debemos hacer ahora es muy simple pero difícil de explicar, jejeje. Nuestro sitio se ha dividido en una gran cantidad de sectores, pero muchos no nos servirán porque serán parte del fondo o porque hay algunos sectores divididos “de más”.

En la siguiente imagen podemos ver cómo nos quedó “sectorizada” la imagen:

Pero en realidad lo que nos interesa es tener sólo estos sectores:

Para ello vamos a presionar por unos segundos el botón de la herramienta Sector, que desplegará una segunda opción llamada “Seleccionar Sector”. La elegimos y con ella podremos hacer clic en cada sector sobrante, al tiempo que movemos por medio de los manejadores los sectores que queremos hacer más grandes (que ocupen varios casilleros).

Así me ha quedado a mí el psd con los sectores bien definidos:

Ahora sí podemos decir que tenemos un sector de la imagen para cada elemento de nuestra página web (HTML): un header (cabecera) con el logo, una botonera, el área del contenido, etc.

Guardar para la web y dispositivos

Ahora que ya tenemos los sectores dispuestos adecuadamente, vamos a Archivo->Guardar para la web y dispositivos.

Se nos abre un panel donde podemos seleccionar cada parte de la imagen sectorizada y elegir con qué formato la queremos guardar (como una imagen separada, aparte, única).

Por ejemplo, podemos elegir el formato .png para conservar las partes transparentes (que dejarán ver el fondo de nuestro sitio web ). Las fotos pueden ser .jpg de calidad media (la idea es que nopesen mucho para que la página no se vuelva lenta al cargar).

En fin, opciones hay miles, ustedes explorarán y verán qué les conviene en cada caso.

Haciendo doble clic en un sector cualquiera accederán a varias opciones, como darle nombre a esa imagen (área) en particular, generar un alt text en el HTML para fines de indexación, o si queremos que ese sector esté vacío (sin imagen) y tenga un color de fondo cualquiera o sea transparente.

Una vez hechas todas las modificaciones y ajustes, hacemos clic en Guardar.

Podemos ver que tenemos varias opciones, pero elegimos las siguientes:

(podemos ver que ya he nombrado index.html al archivo que creará Photoshop. Esto es porque será la página de inicio de nuestro sitio web ^_^).

En la pestaña que aparece elegimos HTML y tildamos la casilla “XHTML de salida”.

En Sectores (slices, en inglés), elegimos Generar CSS por ID. ¡Esto creará el código CSS en nuestra página web!

¡Listo! Damos clic en guardar y se creará un archivo XHTML + CSS con una carpeta con las imágenes dentro, recortadas.

¡YA TENEMOS NUESTRO SITIO WEB ^_^!

Podemos ver, si abrimos con algún programa como Dreamweaver el archivo HTML, el código creado con Photoshop (incluido el CSS).

Nos vemos la próxima, con más Taller de Photoshop.