Unlimited PS Actions, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Design & Illustration
  2. Web Design

Utiliza Adobe Illustrator para crear un diseño web limpio

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Web and Interface Design With Vector.
Quick Tip: Create Bright Web Buttons using the 3D Options in Illustrator
Create a Green Landscape Website in Adobe Illustrator

Spanish (Español) translation by Silvia Lohrmann (you can also view the original English article)

Este tutorial es perfecto para principiantes y usuarios intermedios de Adobe Illustrator. Veremos cómo diseñar una página web y prepararla para su uso en la web. También vamos a usar los recientemente lanzados Elementos Gratis para Sitio Web para maquetar el diseño


1. Configura tu Nuevo Documento

Paso 1

Inicia un Nuevo Documento con un ancho de 960 px y un alto a tu elección. He elegido este ancho ya que este sitio web probablemente tenga un tráfico promedio de usuarios que cuente con monitores grandes. Un ancho de 960 píxeles es un tamaño seguro que favorecerá a la mayoría de los visitantes. Por último, establece el Modo de Color en RGB.

El borde negro muestra el tamaño del documento (llamado Mesa de Trabajo) que hemos creado. Me gusta poner una captura de pantalla de una ventana del navegador en blanco en su propia capa mientras estoy diseñando, para obtener una buena idea de como se verá mi web cuando esté hecha.

Paso 2

Este próximo paso es muy importante. Asegúrate de estar consciente de a qué zoom estás viendo el documento. Al fin y al cabo, tu sitio web será visto al 100%. Siéntete libre de alejar y acercar mientras trabajabas en tu diseño, pero ten en cuenta que todo tu texto y los elementos de diseño sean legibles al ser vistos al 100%. Usa el menú desplegable resaltado abajo (o simplemente escribe el porcentaje que desees) para cambiar el zoom.

Nota: a veces Adobe Illustrator se pone de mal humor y no muestra los números cuando los escribes en el área de zoom resaltada abajo. Por ejemplo, si escribes 58% a veces los números no cambian a medida que escribes. Si este es el caso, simplemente presiona Enter después de introducir los valores, y tu documento se redimensionará según el número que ingresaste.

Paso 3

La mesa de trabajo puede alternarse entre visible e invisible yendo a Ver > Ocultar Mesas de Trabajo. El problema con esto es que uno tarda un poco más que mostrando y ocultando guías (Command + tecla de Punto y Coma). Por lo tanto, creo que es mejor utilizar guías y ocultar la Mesa de Trabajo. En el transcurso de la maquetación de un sitio web entero, te resultará mucho más fácil hacer un atajo de teclado que ir a la parte superior de la pantalla y seleccionar de una lista cada vez.


2. Estructura tu diseño con guías 

Paso 1

Te puede resultar fácil establecer equilibrio y una agradable jerarquía si empiezas por dibujar en tu página simples cajas grises. Los rectángulos delgados muestran dónde planeo usar texto, mientras que las cajas grises grandes serán imágenes.

Paso 2

Después de que tengas una idea general de la disposición, puedes añadir guías y quitar los cajas grises.

Paso 3

Utilizando sólo las guías como referencia, añade otros elementos como navegación, texto y determina dónde irán el logotipo, las imágenes e los íconos. Es útil hacer tus guías visibles e invisibles alternativamente (Command + tecla de Punto y Coma), mientras estés afinando el diseño. Si las guías que dibujaste no quedan tan bien como pensabas, obviamente ajústalas como mejor te parezca.

Nota: cuando activas y desactivas las guías, estas se bloquean automáticamente. No puedes mover las guías bloqueadas. Para desbloquear las guías pulsa rápidamente Command + Option + Punto y Coma.


3. Termina tu diseño

Paso 1

Continúa ultimando tu encabezamiento con imágenes, íconos y gráficos.

Paso 2

Abajo, he decidido añadir un color celeste para mejorar el encabezamiento.

Paso 3

Añade estilo a tu texto, asegúrate de decidir cómo se verán enlaces y títulos. Me resulta mucho más fácil y más rápido definir la mayor cantidad de elementos de diseño posible dentro de Illustrator, así me puedo concentrar en la programación y codificación de la página web cuando llegue el momento.


4. Creando sectores en tu diseño

Paso 1

Hay un par de maneras diferentes de preparar un diseño para su uso dentro de un editor WYSIWYG (lo que ves es lo que tienes) como Dreamweaver de Adobe. El primer método es utilizar sectores. Los sectores pueden hacerse usando guías o una selección. Para crear sectores utilizando guías, primero arrastra las guías sobre la página alrededor de cada objeto que requiera su propio enlace. Por ejemplo, un icono que, al hacer clic, va a una página específica. A continuación hay cuatro íconos, cada ícono conducirá al visitante a una página web o área del sitio diferentes.

Puse guías entre cada icono y alrededor de la zona celeste. Generalmente es más limpio si colocas las guías 1 o 2 píxeles por fuera del área de corte. Esto asegura que ninguna parte de tu diseño quedará cortada.

Nota: No pongas todas las guías sobre tu diseño a la vez. En cambio, haz secciones una a la vez. Por ejemplo, en primer lugar haz el área de encabezado. Borra todas las guías yendo a Ver > Guías > Borrar Guías. Guarda tus sectores para la web (discutido en un paso posterior) y repite este proceso para otras áreas del diseño.

Paso 2

Una vez que hayas puesto guías, el siguiente paso es cortar el diseño. Para hacer sectores de tus guías ve a Objeto > Sector > Crear desde Guías. En ocasiones, puede que Illustrator no haga los sectores la primera vez que lo intentas. Me di cuenta de que a veces necesito repetir este paso tres o cuatro veces antes de que Illustrator efectivamente corte los sectores. Abajo, los cajas numeradas en negro indican que se ha sectorizado el diseño.

Paso 3

Para guardar tus sectores para uso en un sitio web ve a Archivo > Guardar para Web... Usa la herramienta Seleccionar Sector (K) en la esquina superior izquierda para seleccionar los sectores específicos que deseas guardar. Selecciona varios sectores a la vez manteniendo pulsada la tecla Shift. Ajusta la configuración a la derecha para satisfacer sus necesidades. Las imágenes JPEG funcionan mejor para elementos que tienen varios colores, mientras que el formato GIF funciona bien para los que tienen grandes áreas de color y no muchos colores en general, el formato PNG funciona bien para gráficos transparentes (aunque puede requerir algo de trabajo ajustarlo para los exploradores más antiguos de IE). Te conviene probar calidad versus tipo de archivo y ajustar la Calidad para ahorrar ancho de banda. Una vez que esté listo, haz clic en Guardar.

Paso 4

Decide dónde deseas guardar las imágenes. He elegido el escritorio. En formato selecciona Solo Imágenes y, a continuación, haz clic en Guardar.

Paso 5

En tu Escritorio ahora tendrás una carpeta llamada Imágenes. Dentro de esta carpeta estarán los sectores específicos (imágenes) seleccionados. Estas imágenes son ideales en resolución y tamaño de archivo para su uso en la web.

Paso 6

Borra tus guías yendo a Ver > Guías > Borrar Guías. Ahora lleva nuevas guías alrededor de la siguiente área que deseas cortar. El estado hover (cuando el mouse está sobre la navegación) será rojo, mientras que el estado apagado será gris. Tendrás que hacer las dos versiones de la navegación. Para lograr esto eficientemente, primero haz toda la navegación roja y luego Ve a Archivo > Guardar para Web...

Paso 7

Selecciona los sectores específicos que deseas guardar. Ya que mi navegación no se compone de imágenes o una abundancia de colores, he decidido que el mejor tipo de archivo para la navegación será GIF, luego haz clic en Guardar. También ten en cuenta que si estás usando una fuente compatible con la web, entonces puedes decidir utilizar texto html en lugar de imágenes.

Paso 8

En este momento puedes dar a tus imágenes un nuevo nombre. Aunque serán nombradas automáticamente, por lo que esto no es obligatorio.

Paso 9

Si has guardado tus imágenes en la misma ubicación que antes, podrás ver que la carpeta de imágenes en tu escritorio ahora incluye las imágenes que acabas de guardar.

Paso 10

Ten en mente que este es solo uno de los flujos de trabajo posibles. Alternativamente, podrías colocar estados activos e inactivos en alguna parte en el documento, crear todos tus sectores y exportarlos juntos.

El otro método de crear sectores es seleccionar un objeto y luego ir a Objeto > Sector > Crear desde Selección. Está igual de bien crear sectores usando guías como crearlos desde una selección. Utiliza un flujo de trabajo que encuentres cómodo y que sea el mejor para el proyecto particular en el que estés trabajando.

Paso 11

En ocasiones no necesitarás incluir el texto que caiga dentro de un segmento. Por ejemplo, el pie de página tendrá el texto que se escriba dentro del editor WYSIWYG. Si este es el caso, simplemente borra el texto antes o después de hacer los sectores, pero antes de salvar los sectores para la web.

Paso 12

A continuación verás que borré el texto después de hacer los sectores.


Impresionante trabajo, ¡ya terminaste!

Observa el sitio web final. Como puedes ver, maquetar un sitio web en Adobe Illustrator es sencillo y eficaz. Rápidamente puedes experimentar con el diseño y dar a esta fase del proceso de diseño web la atención y reflexión que necesita. Puedes ver la imagen final a continuación o ver una versión más grande aquí.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.