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.