Share
Este tutorial es perfecto para usuarios principiantes de Adobe Illustrator. Cubriremos cómo diseñar un sitio web y prepararlo para su uso en la web. Además, usaremos el recientemente lanzado Website Elements Freebie para simular el diseño también..
Empezar un Nuevo documento con un ancho de 960px y una altura de su elección. He elegido este ancho porque este sitio web probablemente incurrirá en tráfico de Internet que tiene monitores de promedio a grandes. Un ancho de 960 píxeles es un tamaño seguro que favorecerá a la mayoría de los visitantes. Por último, establece tu Modo de color a RGB.
El borde negro muestra el tamaño del documento (denominado Artboard) que creamos. Me gusta colocar una captura de pantalla en blanco de una ventana del navegador en su propia capa mientras estoy diseñando, para tener una buena idea de cómo se verá mi sitio web cuando esté listo..
Este siguiente paso es muy importante. Asegúrese de conocer el zoom en el que está viendo el documento. Cuando todo esté dicho y hecho, su sitio web se verá al 100%. Siéntase libre de acercar y alejar mientras trabaja en su diseño, pero asegúrese de que todos los elementos de texto y diseño sean legibles cuando se los vea al 100%. Use el menú desplegable resaltado a continuación (o simplemente escriba el porcentaje que desea) para cambiar el zoom a.
Nota al margen: a veces Adobe Illustrator se muestra irritado y no muestra los números a medida que los escribe en el área de zoom resaltada a continuación. Por ejemplo, si escribe 58%, a veces los números no cambian a medida que escribe. Si este es el caso, simplemente presione regresar después de ingresar sus valores, y su documento cambiará de tamaño al número que ingresó.
El Artboard se puede alternar entre visible e invisible yendo a Ver> Ocultar mesa de trabajo. El problema con esto es que demora un poco más que mostrar y ocultar las guías (Comando + tecla de punto y coma) Por lo tanto, me parece mejor usar guías y ocultar la mesa de trabajo. Durante el diseño de un sitio web completo, le resultará mucho más fácil presionar una tecla rápida en lugar de ir a la parte superior de la pantalla y seleccionar de una lista cada vez.
Puede que le resulte fácil establecer un equilibrio y una buena jerarquía dibujando primero cuadros grises simples en su página. Los rectángulos delgados representan el lugar donde planeo usar texto, mientras que los cuadros grises grandes serán imágenes.
Una vez que tenga una idea general de cómo se verá el diseño, puede agregar guías y eliminar los cuadros grises..
Usando solo las guías como referencia, agregue otros elementos como navegación, texto y ajuste donde irán el logotipo, las imágenes y los iconos. Es útil activar y desactivar las guías (Comando + tecla de punto y coma), mientras estás refinando el diseño. Si las guías que dibujó no funcionan tan bien como pensaba, definitivamente ajústelas como mejor le parezca.
Nota al margen: cuando se activan y desactivan las guías, se bloquean automáticamente. No puedes mover guías bloqueadas. Para desbloquear las guías rápidamente presione Comando + Opción + Punto y coma.
Continúa finalizando tu encabezado con imágenes, íconos y gráficos..
A continuación, he decidido agregar un color azul claro para mejorar el encabezado.
Agregue estilo a su texto, asegurándose de decidir cómo se verán los enlaces y los encabezados. Creo que es mucho más fácil y rápido realizar tantos elementos de diseño dentro de Illustrator para poder concentrarme en programar y codificar el sitio web cuando llegue el momento.
Hay un par de formas diferentes de preparar un diseño para usar dentro de un editor WYSIWYG (Lo que ves es lo que obtienes), como Adobe Dreamweaver. El primer método es utilizar rodajas. Las rebanadas se pueden hacer utilizando guías o una selección. Para usar guías para hacer cortes, primero arrastre las guías a su página alrededor de cada objeto que requerirá su propio enlace. Por ejemplo, un icono que, al hacer clic, va a una página específica. A continuación, tengo cuatro iconos, cada icono llevará al visitante a una página web o área del sitio diferente..
He dibujado guías entre cada ícono y justo fuera del área azul. Por lo general, es más limpio si dibuja sus guías aproximadamente 1 o 2 píxeles fuera del área que está cortando. Esto asegura que ninguna de tus ilustraciones será cortada.
Nota al margen: no dibuje guías sobre su diseño completo a la vez. En cambio, haz las secciones una a la vez. Por ejemplo, primero haz el área del encabezado. Borra todas tus guías yendo a Ver> Guías> Borrar guías. Guarde sus cortes para la web (que se explicarán en un paso posterior) y repita este proceso para otras áreas del diseño.
Una vez que haya dibujado sus guías, el siguiente paso es hacer rebanadas de ellos. Para hacer rebanadas de tus guías ve a Objeto> Rebanada> Crear desde Guías. En ocasiones, Illustrator no puede hacer cortes la primera vez que lo intente. Descubrí que a veces necesito repetir este paso tres o cuatro veces antes de que Illustrator haga rodajas. A continuación, los cuadros numerados en negro indican que las rodajas se han hecho.
Para guardar sus cortes para usar en un sitio web vaya a Archivo> Guardar para web y dispositivos ... Utilizar el Herramienta de selección de rebanada (K) resaltado en la esquina superior izquierda para seleccionar los sectores específicos que desea guardar. Seleccione múltiples rebanadas a la vez manteniendo presionada la tecla Mayús. Ajuste la configuración de la derecha para satisfacer sus necesidades. Las imágenes JPEG funcionan mejor para elementos que tienen varios colores, mientras que el formato de archivo GIF funciona bien para elementos que tienen grandes áreas de color y no muchos colores en general, el formato de archivo PNG funciona bien para gráficos transparentes (aunque puede requerir un poco de trabajo para ajustar). navegadores IE más antiguos). Es posible que desee probar la calidad en función del tipo de archivo y ajustar la Calidad para ahorrar ancho de banda. Una vez que esté listo, haga clic en Salvar.
Decide dónde quieres guardar las imágenes. He elegido el escritorio. En el formato, seleccione Solo imágenes, luego haga clic en Guardar.
En tu escritorio ahora tendrás una carpeta llamada Imágenes. Dentro de esta carpeta estarán los segmentos específicos (imágenes) que seleccionó. Estas imágenes son ideales en resolución y tamaño de archivo para su uso en la web.
Borra tus guías yendo a Ver> Guías> Borrar guías. Ahora, dibuje nuevas guías alrededor de la siguiente área que desea cortar. El estado de desplazamiento (cuando el mouse está sobre la navegación) será rojo, mientras que el estado apagado estará gris. Deberás realizar ambas versiones de la navegación. Para lograr esto de manera eficiente, primero haga que toda su navegación sea roja y luego vaya a Archivo> Guardar para web y dispositivos ...
Seleccione los segmentos específicos que desea guardar. Como mi navegación no está formada por imágenes o por una gran cantidad de colores, he decidido que el mejor tipo de archivo para la navegación será GIF, luego haga clic en Salvar. Además, tenga en cuenta que si su usuario es una fuente compatible con la web, puede decidir utilizar texto HTML en lugar de imágenes..
Puedes darle un nuevo nombre a tus imágenes en este punto. Sin embargo, se les asigna un nombre automáticamente, por lo que no es obligatorio.
Si guardó sus imágenes en la misma ubicación que antes, notará que la carpeta Imágenes en su escritorio ahora incluye las imágenes adicionales que acaba de guardar..
Tenga en cuenta que esto es solo un flujo de trabajo posible. Alternativamente, puede colocar estados de activación y desactivación en algún lugar de su documento, crear todos los segmentos y exportarlos juntos.
El otro método para crear sectores es seleccionar un objeto y luego ir a Objeto> Rebanada> Crear desde selección. Crear rebanadas usando guías o desde una selección también está bien. Use un flujo de trabajo que encuentre cómodo y mejor para el proyecto en particular en el que está trabajando.
En ocasiones, no necesitará incluir el texto que se encuentra dentro de una división. Por ejemplo, el pie de página tendrá texto que se escribe dentro del editor WYSIWYG. Si este es el caso, simplemente elimine el texto antes o después de hacer los cortes, pero antes de guardar los cortes para la web.
A continuación se dará cuenta de que eliminé el texto después de hacer las rodajas..
Observe el sitio web final. Como puede ver, diseñar un sitio web en Adobe Illustrator es simple y efectivo. Puede experimentar rápidamente con el diseño y dar a esta fase del proceso de diseño web la atención y el pensamiento que necesita. Puede ver la imagen final a continuación o ver una versión más grande aquí.
Accentsconagua