Curso de Photoshop CS5 | Segunda parte

<< Capítulo anterior | Capítulo siguiente >>
<< Índice general
Capítulo 4 | Gráficos para la web

(2) Una página web desde Photoshop

Photoshop cuenta con herramientas destinadas al diseño de páginas web. Es posible crear un diseño y exportarlo con Guardar para web… y que exporte los gráficos y el código HTML necesario para que publicar en la WWW. Las herramientas que facilitan este trabajo son las relacionadas con la creación y selección de sectores.

Se denominan sectores a las áreas rectangulares, que pueden contener un gráfico o no y que, al exportarse, se transforman en codificación HTML. Los archivos HTML exportados a partir de un documento Photoshop segmentado en sectores forman tablas cuyas celdas corresponden a las áreas creadas con las herramientas de sector. Las tablas y las celdas son entidades propias del lenguaje HTML.

Herramienta sector. Crea sectores.

 

Seleccionar sector. Selecciona los “sectores” para redimensionarlos o para desplegar la ventana Opciones de sector, en donde se puede definir si va a estar ocupado por texto o por una imagen; si es una imagen se puede ingresar el nombre que tendrá el archivo exportado; el nombre alternativo; si llevará un enlace en la página web y otras informaciones accesorias.

Hay dos formas de trabajar para realizar gráficos web en Photoshop:

1. Crear los gráficos en Photoshop y realizar la programación HTML en un programa especializado como Dreamweaver, por ejemplo.

2. Crear los gráficos y el código HTML en Photoshop. El programa crea código HTML en forma algo rudimentario, pero que sirve para resolver problemas simples.

Una página web desde Photoshop

En la figura 6 vemos un diseño preparado para exportar como página web. Veamos paso a paso cómo es el procedimiento para obtener código HTML desde Photoshop.

Paso 1

Abrimos el documento webDG.psd disponible en el centro de atención al lector. Usando la Herramienta sector, dividimos en sectores como muestra la figura 7.

Paso 2

Usando la herramienta Seleccionar sector le ponemos un nombre de archivo y un nombre alternativo. Para hacerlo hacemos doble clic con dicha herramienta sobre el sector. Se presenta el cuadro de diálogo Opciones de sector que se muestra en la figura 8.

En Tipo de sector debe estar seleccionada la opción Imagen.

En Nombre ponemos un nombre que identifique la imagen contenida en el sector. En Etiqueta Alt ponemos el nombre que aparecerá si el navegador no tiene habilitada la opción de mostrar imágenes o es un navegador para discapacitados visuales.

Hacemos lo mismo con los demás sectores. Los que tendrán un tratamiento especial serán los sectores que contienen los íconos de los programas, ubicados en la parte inferior. Éstos tendrán un vínculo a unas imágenes.

Dimensiones debe quedar como está: son las dimensiones del sector y las que tendrá la imagen exportada.

Tipo de fondo del sector. Podemos poner un color parecido al color del fondo del diseño, para que se muestre mientras se descargan las imágenes.

Paso 3

Los íconos de los programas serán botones que, al hacer clic, mostrarán la imagen de las carátulas de los cursos. Para estos sectores configuraremos el cuadro de diálogo Opciones de sector de la siguiente manera:

• Nombre. Un nombre que identifique a la imagen del sector.

• URL. El nombre del archivo de imagen que se mostrará al hacer clic. Este archivo deberá estar en la misma carpeta que el archivo HTML resultante de la exportación de este diseño.

• Destino. Ponemos blank para que la imagen se abra en otra ventana del navegador, dejando abierta la página web de origen.

• Texto de mensaje. Cambia el mensaje por defecto del área de estado del navegador para el sector. Si se da el caso, se visualizará por defecto la dirección URL del sector.

• Etiqueta Alt. Este texto aparece en los navegadores no gráficos. También aparece en lugar de la imagen mientras se
descarga la imagen.

Paso 4

Procedemos a exportar el diseño. Vamos al menú Archivo > Guardar para la web y dispositivos. Se nos despliega la ventana de la figura 10. Aquí seleccionaremos todos los sectores con la herramienta Seleccionar sector de su panel de herramientas.

Configuraremos de una sola vez el formato y calidad de exportación de los archivos. En este caso es importante que todos los archivos tenga la misma calidad y formato. De no ser así puede haber diferencias de color entre un sector y otro.

Los archivos los exportaremos en GIF y a 256 colores.

Paso 5

Al aceptar la ventana anterior se presenta una ventana de guardar documento de nuestro sistema operativo. Seleccionamos una carpeta vacía a la que le ponemos el nombre web o algún otro nombre significativo. Esta carpeta será el sitio web de esta página simple que generará Photoshop. En la parte inferior tiene unas opciones importantes (ver figura 11). Aquí tenemos que elegir HTML e imágenes.

En esta carpeta deberemos poner las imágenes ps.jpg, id.jpg y ai.jpg, que son las carátulas que se abrirán al hacer clic en los botones. Estas imágenes están disponibles, junto a los otros elementos para hacer esta práctica, en el Centro de atención al lector.

En la figura 11 vemos la ventana de guardado con las opciones elegidas. En la figura 12 vemos la carpeta con los archivos generados por Photoshop. Para probar que todo ha salido bien abrimos el archivo HTML en el navegador.

En este enlace vemos la versión que debería haber quedado con lo realizado hasta ahora.

En este otro enlace vemos una versión mejorada, que terminamos en Dreamweaver, haciendo que los botones tengan un comportamiento “rollover” y que las imágenes abran en un pop up centrado, entre otras cosas. Además centramos la tabla resultante de la exportación y coloreamos el fondo de la página.

<< Tema anterior | Arriba | Tema siguiente >>