Adobe Illustrator es un programa de diseño que crea gráficos vectoriales para una amplia variedad de usos, incluyendo impresión , el movimiento y web. Los gráficos vectoriales utilizan fórmulas matemáticas para presentar imágenes , a diferencia de otros formatos como GIF , que utilizan un conjunto de puntos . Aunque no está diseñado específicamente como un programa de diseño web, Illustrator tiene las herramientas avanzadas para exportar gráficos creados dentro del programa para el uso del sitio web y también genera el código necesario para su visualización en un navegador. Cosas que necesitará la búsqueda Web de diseño de software de edición
Mostrar más instrucciones
Crear 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 de 960 píxeles de ancho se ajusta a la más popular de ancho resolución de pantalla de 1024 píxeles , una vez la barra de desplazamiento y bordes de la ventana se tienen en cuenta.
2

Crear un croquis dibujado a mano del diseño visual de base de su sitio web si no lo has hecho ya. Esto le proporcionará una referencia útil para crear en Illustrator.
3

Crea tu diseño con la imagen y herramientas de texto para un encabezado estilizada. Si su diseño incluye espacio para el texto tal como entradas de blog , deje el espacio en esa área en blanco o crear un borde alrededor para facilitar el trazado .
4

Añadir guías para el diseño de su objetivo delimitar las diferentes secciones de el diseño. Esto es muy importante porque va a utilizar las guías para hacer cortes que definen las fronteras de los elementos en su sitio web . Las guías pueden ayudarle a alinear los objetos con precisión. Haga clic en la regla vertical u horizontal y arrastre el ratón hasta donde desee la guía que se encuentra .
5

Compruebe la colocación de las guías de precisión y exactitud . Dibuja más si es necesario para separar cada elemento, por ejemplo, imágenes de navegación que serán enlaces en su sitio .
Generar código
6

Seleccione "Objeto " en el menú , a continuación, seleccione "Slice " y seleccione " Crear desde guías. " Cuando se crean las rodajas verás pequeñas cajas negras en el interior de cada rebanada con un número correspondiente . Seleccione " Archivo" en el menú y elegir la opción " 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 todos los sectores.
7

Seleccione los ajustes de optimización de las opciones en el lado derecho de la pantalla. Usted puede elegir los 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

Previa diferentes ajustes haciendo clic en las pestañas de " 2 -up " y " 4 -up " . En la esquina inferior de cada vista previa puede ver la información de optimización como el tamaño y el tiempo de renderizado del navegador. Haga clic en el botón "Guardar " . Decida dónde desea que sus imágenes y código sean salvos y navegar a esa área a través del " Donde:" botón
9

Elija el formato de su trabajo. . Si usted es hábil utilizando HTML, y sólo desea que las imágenes porque va a agregar código para que después, elegir la opción " sólo imágenes". Si usted es un principiante o prefiere tener el código 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 Hojas de estilo en lugar de tablas , seleccione el botón "Default Settings" y seleccione " Exportar como capas CSS " en la pestaña " Capas " .
10 < p> Abra el archivo HTML desde un navegador para ver su trabajo. Editar los archivos con un programa de diseño web.