Illustrator CC and web design: the winning combination

Illustrator CC y diseño web: la combinación ganadora

the sitio web perfecto debe ser receptivo, visualmente atractivo, legible, original, único y, en la medida de lo posible, diferente de todos los demás. En resumen, ¡hay que distinguirlo!



Via dedocomunicazione.it

No parece fácil de conseguir, pero existe un software que nos puede ayudar en el negocio. ES Illustrator CC y podría convertirse en el mejor amigo de cualquier diseñador web, de hecho crea excelentes diseños para la web gracias a algunas peculiaridades y funcionalidades. Hay muchas características que hacen que Illustrator CC sea adecuado para el diseño web, sería imposible analizarlas todas, recorramos las más curiosas.

Index
  1. Illustrator CC y diseño web

Illustrator CC y diseño web

RAZÓN EN PÍXELES

Illustrator CC y diseño web

A través de Adobe.com

En AI, de hecho, es posible trabajar directamente para la web utilizando la función de alineación de píxeles para exportar gráficos nítidos y nítidos. Al activar esta propiedad, todos los segmentos horizontales y verticales del objeto se alinean con la cuadrícula de píxeles: de esta forma se obtienen líneas nítidas.

Si planea guardar un gráfico como un mapa de bits, puede obtener una vista previa de cómo Illustrator divide los objetos en píxeles individuales, para hacer esto, simplemente vaya al menú Vista y elige el artículo vista previa de píxeles.

TRANSFORMACION DE HERRAMIENTAS

Las herramientas clásicas que le permiten rotar, mover y escalar gráficos pueden funcionar juntas para crear gráficos escalables en píxeles con precisión y ser útiles al diseñar para la web. En realidad Illustrator trabaja con vectores, por lo que podemos cambiar las propiedades de los elementos gráficos según sus necesidades.

FILE Efecto fotográfico de tinta urbana | Tutoriales de Photoshop

REUTILIZA LOS GRÁFICOS

Una forma de ahorrar tiempo es reutilizar los mismos iconos en varios proyectos. Casi todos los sitios hoy en día tienen íconos que hacen referencia a las redes sociales. Estos iconos se pueden utilizar razonablemente en varios proyectos y lo bueno es que Illustrator nos permite «reciclarlos» haciendo una copia de un símbolo e insertándolo en el panel de símbolos.

¡Pero eso no es todo! Digamos que estamos casi al final de un proyecto y hemos usado el mismo símbolo varias veces. Nuestro cliente nos pide que cambiemos el color. ¿Tienes que cambiarlo manualmente para cada símbolo?

La respuesta es no. Si lo guardamos en el panel de símbolos, basta con cambiar el original y todos los demás, por lo tanto, sufrirán los mismos cambios.

LA BALANZA DE 9 PORCIONES

En ActionScript, establecer un valor para la propiedad scale9Grid de un objeto de visualización, se habilita la escala de 9 cortes para ese objeto y se establece el tamaño de los rectángulos que forman la cuadrícula. Básicamente, dividamos nuestro elemento en 9 áreas iguales. Podría ser de gran ayuda escalar los objetos de manera adecuada para que aparezcan perfectamente en su página web. Tomemos el ejemplo de un banner que contiene el texto en su interior: gracias a esta escala, es posible aumentar o disminuir el tamaño del banner sin cambiar el texto. También es posible cambiar el tamaño de la altura del texto pero no su ancho o viceversa.

POLICÍA PARA LA WEB

taperkit

A través de Typekit

No pierda mucho tiempo buscando la fuente perfecta que también se adapte a las páginas web. Esta búsqueda se vuelve mucho más ágil si usa Fuente Typekit, donde se enumera el uso más apropiado para cada política.

FILE Navegue rápidamente por las imágenes con Birds Eye View en Photoshop

GENERAR Y EXTRAER AUTOMÁTICAMENTE EL CÓDIGO CSS

Illustrator CC y diseño web

Vía webdesignerdepot.com

Illustrator CC y el diseño web van de la mano, tanto que es posible exportar Código CSS para objetos individuales o para diseños completos creados en Illustrator. Lo bueno es que también puede hacer la operación inversa: a partir de los gráficos vectoriales directamente, se crea el código CSS para que el código creado contenga todas las especificaciones (incluidos colores y sombras) del objeto en cuestión.

GENERAR EL CÓDIGO CSS PARA TODO EL PROYECTO

Lo bueno de Illustrator es que puedes obtener el código de todo el proyecto creado con un solo clic. Luego, el código se moverá a una hoja de estilo HTML para crear el sitio real.

ARCHIVO SVG (Gráficos vectoriales escalables)

Illustrator CC y diseño web

Este tipo de archivo se utiliza para escalar objetos gráficos haciéndolos, entre otras cosas, comprimibles por los navegadores. En Illustrator, puede guardar en formato SVG adaptable. Los SVG tradicionales no permitían cambiar el tamaño sin perder algunas propiedades de la imagen original, por lo que al tener que adaptar los mismos gráficos a diferentes monitores y dispositivos, poco se podía hacer para preservar la relación de aspecto y la nitidez. Un archivo SVG receptivo, por otro lado, le permite cambiar el tamaño del objeto en HTML.

Si realmente prefiere continuar sin tener que ver más con el diseño web, recuerde que puede satisfacer las necesidades del desarrollador que trabaja en su equipo simplemente aprovechando el potencial que Illustrator tiene para ofrecerle. De esta forma, ahorrarás tiempo, esfuerzo e incluso dinero.

Illustrator CC y el diseño web no deberían tener secretos ahora que hemos analizado estas características. Solo queda experimentar y convencerse de que incluso un diseñador gráfico puede adentrarse en el mundo del diseño web sin miedo.

FILE Subjetivo: lo mejor de la historia del cine

Go up

We use our own and third party cookies to improve the user experience. More Informaticon