Curso de Illustrator CS5

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

(3) Una página web desde Illustrator

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

Los sectores son áreas rectangulares, que pueden contener un gráfico o no, que corresponden a celdas de tablas. Las tablas y las celdas son entidades propias del lenguaje HTML.

Herramienta sector. Crea sectores.

 

Seleccionar sector. Selecciona los “sectores” para redimensionarlos.

 

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

1. Crear los gráficos en Illustrator 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 Illustrator. El programa crea código HTML en forma algo rudimentaria, pero que sirve para resolver problemas simples.

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 Illustrator.

Paso 1

Abrimos el documento webDG.ai 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 podemos ponerle un nombre de archivo y un nombre alternativo. Para hacerlo seleccionamos el sector y vamos al menú Objeto > Sectores > Opciones de sector. Se presenta el cuadro de diálogo Opciones de sector que se muestra en la figura 10.

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.


Figura 10:
Cuadro de diálogo Opciones de sector.

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.


Figura 11:
Cuadro de diálogo Opciones de sector para los sectores correspondientes a los botones.

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 12. 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 sitio o algún otro nombre significativo. Esta carpeta será el sitio web de esta página simple que generará Illustrator. En la parte inferior tiene unas opciones importantes (ver figura 13). 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 Illustrator. 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 >>