Curso de Adobe Illustrator CS5

25
Práctica: Crear Web
mediante sectores
En esta práctica veremos cómo crear una página Web mediante la herramienta
Sector de Illustrator. La Web que se muestra en la página es meramente
demostrativa, ya que usted podrá crear su propia Web. Al ser la última práctica se
presupone un conocimiento avanzado para llevarla a cabo sin ayuda y de una forma
eficaz.

1. Una vez creada la apariencia de la página Web, puede empezar a definir los sectores.
2. Seleccione todos los elementos de la página que necesiten una interactividad en la Web,
como por ejemplo:
• El texto de los botones del menú horizontal superior, el Aviso legal y los FAQ.
 Crear una animación para Flash

• Las banderas que incluirán el enlace a las páginas según el idioma elegido.
• La imagen “Contáctanos” que puede incluir un enlace a la página “Contactos”
• Etc…
3. A continuación seleccione el Sector > Crear del menú Objeto. Si le resulta más
cómodo, cree los sectores manualmente utilizando la herramienta Sector del panel de
Herramientas.

Nota: La creación de los Sector debe de ser una labor muy precisa, cualquiera sobre-
posición de sectores o imperfección se verá reflejada en la visualización en el navegador
Web.

4. A continuación defina cuales sectores son imágenes o no, y cuales son texto,
seleccionando cada sector con la herramienta Seleccionar sector y definiéndolo
mediante el cuadro de dialogo Opciones de sector. Acceda al cuadro de diálogo
seleccionando en el menú Objeto la opción Sector > Opciones de sector.
Curso de Adobe Illustrator CS5

5. Asigne un nombre fácilmente reconocible a cada sector.

Nota: Podrá definir una URL y una etiqueta Alt directamente desde el cuadro de diálogo
Opciones de sector. Sin embargo podrá insertarlos y modificarlos en un segundo momento
directamente desde el programa de edición html que utiliza, como Adobe Dreamweaver.

6. Una vez definidos todos los sectores guarde el documento con el comando Guardar
para web y dispositivos del menú Archivo.
7. En el cuadro de diálogo Guardar para web y dispositivos mediante la herramienta Zoom
del mismo cuadro de diálogo para poder visualizar la página Web en su totalidad. Active
la herramienta Seleccionar sector del mismo cuadro de diálogo y seleccione todos los
sectores.
8. A continuación elija el formato JPG de Alta calidad y haga clic en Guardar.

9. En el cuadro de diálogo Guardar optimizada como elija los siguientes ajustes:

• Tipo: HTML e imágenes (*html)

 Crear una animación para Flash

• Sectores: Todos los sectores

• Ajustes: Otro

10. Seleccionando esta última opción se abrirá el cuadro de diálogo Ajustes de salida. Pulse
en el botón Siguiente hasta llegar a la sección Guardar archivos. Compruebe que estén
activas las opciones Colocar imágenes en carpeta y Copiar imagen de fondo al guardar.
Curso de Adobe Illustrator CS5

11. Haga clic en OK y finalmente en Guardar. Todos los sectores se habrán guardado
dentro la carpeta Imágenes con formato .JPG, el archivo .HTML estará fuera de la
carpeta.
12. Acuérdese de mover el archivo .HTML siempre junto a la carpeta Imágenes, no cambie
de nombre a la carpeta y a su contenido para no perder el enlace que existe entre ellos.