¿Cómo construir una página web en Illustrator

Adobe Illustrator es un programa de diseño que crea gráficos vectoriales para una amplia variedad de usos, incluyendo la impresión, el movimiento y la web. Los gráficos vectoriales utilizan fórmulas matemáticas para presentar imágenes, en oposición a otros formatos como GIF, que utilizan un conjunto de puntos. Si bien no es específicamente diseñado como un programa de diseño de páginas web, Illustrator tiene herramientas avanzadas para exportar los gráficos creados dentro del programa para el uso del sitio web y también genera el código necesario para la visualización dentro de un navegador.

Instrucciones

Creando un diseño

1 Crear un documento de Illustrator que es de 960 píxeles de ancho, con una altura de su elección en función del contenido y el diseño que tiene en mente. Un sitio 960 px ajusta mal por la más popular ancho de la resolución del monitor de 1024 px vez que los extremos de las barras de desplazamiento y de la ventana se tienen en cuenta.

2 Crear un boceto dibujado a mano del diseño visual básico de su sitio web si no lo ha hecho ya. Esto le proporcionará una referencia útil para la creación dentro de Illustrator.

3 Cree su diseño utilizando las herramientas de imagen y de texto para una cabecera estilizada. Si su diseño incluye espacio para texto, como blogs, dejar el espacio en esa zona en blanco o crear un borde alrededor de ella para facilitar la delineación.

4 Añadir guías para el diseño de demarcar las distintas secciones de la disposición. Esto es muy importante porque va a utilizar esas guías para hacer rebanadas, que definen las fronteras de los elementos en su sitio web. Las guías pueden ayudarle a alinear objetos con precisión. Haga clic en la regla vertical u horizontal y arrastre el ratón donde desea que la guía que se encuentra.

5 Compruebe la colocación de sus guías de precisión y exactitud. Dibuje más si es necesario para separar cada elemento, tales como imágenes de navegación que serán enlaces en su sitio.

Generación de código

6 Seleccione "objeto" del menú, a continuación, seleccione la "rebanada" y elegir la opción "Crear desde guías." Cuando se crean las rebanadas verá pequeñas cajas negras interior de cada sección con un número correspondiente. Seleccione "Archivo" en el menú y selecciona "Guardar para Web y dispositivos." Seleccione la herramienta Seleccionar sector, que es el segundo icono en el menú de herramientas en la parte derecha de la pantalla debajo del icono de la mano. Seleccione todas las rebanadas.

7 Seleccione los ajustes de optimización de las opciones en la parte derecha de la pantalla. Puede elegir ajustes predefinidos o crear un perfil personalizado en función de si desea que sus imágenes sean JPEG, GIF o PNG. También puede ajustar la calidad de las imágenes.

8 Vista previa de los diferentes ajustes haciendo clic en las pestañas "4-Up" y "2-up" y. En la esquina inferior de cada una vista previa puede ver la información de optimización tales como el tamaño del archivo y el tiempo de renderizado del navegador. Haga clic en el botón "Guardar". Decidir dónde desea que sus imágenes y código que se guarden y vaya a esa zona a través del "Donde:" botón.

9 Elija el formato para su trabajo. Si usted es hábil utilizando HTML y sólo desea que las imágenes, ya que se agregue código para ellos después, elegir la opción "Sólo imágenes." Si usted es un principiante o si prefiere que el HTML generado para usted, elija la opción "HTML y las imágenes". Si usted prefiere para el posicionamiento de los elementos que se organizarán con Cascading Style Sheets en lugar de tablas, seleccione el botón "Ajustes por defecto" y seleccione "Exportar como capas CSS" en la pestaña "Capas".

10 Abra el archivo HTML desde un navegador para ver su trabajo. Editar los archivos con un programa de diseño de páginas web.