Cómo armar un sitio web en Illustrator (En 10 Pasos)

Por lauren miller

Adobe Illustrator es un programa de diseño que crea gráficos vectoriales para una amplia gama de usos que incluye impresión, movimiento y sitios web. Los gráficos vectoriales hacen uso de fórmulas matemáticas con el objeto de presentar imágenes, en contraposición a otros formatos como los GIF, que emplean un conjunto de puntos. Si bien no ha sido específicamente diseñado como un programa de diseño web, Illustrator cuenta con herramientas avanzadas para exportar gráficos creados dentro del programa para su uso en páginas web y además genera el código necesario para mostrar dentro de un navegador.

Paso 1

Crea un documento de Illustrator que tenga 960 pixeles de ancho de la altura que elijas según cual sea el contenido y el diseño que tengas en mente. Un sitio de 960 pixeles de ancho se adecua al ancho de resolución de monitor más popular de 1.024 pixeles cuando se tienen en cuenta la barra de desplazamiento y los bordes de la ventana.

Paso 2

Crea un bosquejo dibujado a mano del diseño visual de tu sitio web, si es que todavía no lo has hecho. Esto te brindará una referencia útil para crear dentro del Illustrator.

Paso 3

Crea tu diseño utilizando las herramientas de imagen y de texto para un encabezamiento elaborado. Si incluyes en él texto como por ejemplo mensajes en un blog, deja en blanco el espacio en esa área o crea un borde que lo rodee para un delineado sencillo.

Paso 4

Agrega guías a tu diseño con el objeto de demarcar las diferentes secciones del diseño. Esto es muy importante porque usarás esas guías para realizar cortes, que definirán los bordes de los elementos en tu sitio web. Las guías pueden ayudarte a alinear objetos con precisión. Haz clic en la regla vertical o en la horizontal y arrastra el ratón hasta dónde quieres que esté posicionada la guía.

Paso 5

Verifica dos veces la ubicación de tus guías en pos de la precisión y la exactitud. Arrástralas más, de ser necesario, para separar cada elemento, como por ejemplo las imágenes de navegación que serán los enlaces de tu sitio.

Paso 1

Selecciona "Objeto" en el menú, luego selecciona "Corte" y "Crea a partir de las guías". Cuando crees las guías, verás pequeñas casillas negras dentro de cada corte con su correspondiente número. Selecciona "Archivo" en el menú y luego "Guardar para web y dispositivos". Selecciona la herramienta para seleccionar el corte, que es el segundo ícono del menú de herramientas ubicado a la derecha de la pantalla debajo del ícono de la mano. Selecciona todos los cortes.

Paso 2

Selecciona las configuraciones de optimización de entre las opciones que figuran en el lado derecho de la pantalla. Pueden elegir configuraciones pre-establecidas o crear un perfil personalizado, dependiendo de si quieres que tus imágenes sean archivos JPEG, GIF o PNG. También puedes ajustar la calidad de las imágenes.

Paso 3

Haz una vista previa de las diferentes configuraciones haciendo clic en las pestañas "2-up" y "4-up". En la esquina inferior de cada vista previa podrás ver la información de la optimización, como por ejemplo el tamaño del archivo y el tiempo de renderización del navegador. Haz clic en la tecla "Guardar". Decide si quieres guardar tus imágenes y el código y navegar hacia esa área usando la tecla "Dónde.".

Paso 4

Escoge el formato de tu trabajo. Si dominas el XXXX y sólo deseas las imágenes porque le agregarás más tarde un código, selecciona "Sólo imágenes". Si eres principiante o prefieres que el se genere el XXXX por ti, elige la opción "XXXX e imágenes". Si prefieres para el posicionamiento de los elementos estar organizado con Cascading Style Sheets (Hojas de Estilo en Cascada) en lugar de tablas, selecciona "Configuración por omisión" y "Exportar como capas CSS" en la pestaña "Capas".

Paso 5

Abre el archivo XXXX desde adentro de un navegador para ver tu obra. Edita los archivos con un programa de diseño web.