Adobe Ilustrator como apoyo para

programadores web
 INTRODUCCIÓN

Este proyecto es planteado con el objetivo de mostrar los beneficios y facilidades

que tiene el software Adobe Ilustrator para realizar maquetas las cuales sirven
para darle profesionalismo al trabajo del ingeniero y poder disminuir el tiempo de
entrega al tener aprobado previamente la maqueta grafica de una página web.
 Objetivo General

Mediante el presente proyecto, buscamos mostrar las diferentes herramientas con

las que cuenta el programa de diseño Adobe Ilustrator y su utilidad para los
ingenieros dedicados a la programación web.

Objetivos Específicos

Optimizar los tiempos y correcciones en los proyectos enfocados a la creación de

una página web

Conocer sobre la historia, cambios de Adobe Ilustrator

Conocer las diferentes herramientas que nos brinda Adobe Ilustrator y el uso que
podemos darle
 ¿Qué es Adobe Ilustrator?

programa de diseño ideal para crear piezas de arte digital, está dentro Adobe
Systems, y viene a ser uno de los pioneros en el diseño vectorial. Su plataforma
cuenta con diferentes herramientas para elaborar distintas piezas gráficas en una
mesa de trabajo, las cuales están destinadas a ser utilizadas para una impresión,
vídeos, publicaciones en redes sociales, portafolio, entre otros.

Cada una de estas piezas se guardan en el formato ai. (extensión de Adobe

Illustrator). Actualmente forma parte del parque de Adobe Creative Cloud, el cual
puede descargarse con los demás programas que ofrece esta plataforma.

Evolución de la marca adobe ilustrator

El comienzo de la historia de Adobe Illustrator, se da con la creación de este

programa en el año 1986, debido al éxito que tuvo el programa para impresoras
Adobe PostScript en el año 1982. Sin embargo, su lanzamiento oficial se da en
enero 1987, bajo el nombre de Adobe Illustrator 1.1. Desde un comienzo, estaría
habilitado solo para el sistema Apple Macintosh, pero los creadores quisieron ir
más allá.

Este programa, desde sus inicios, dio mucha curiosidad a los usuarios, por las
diversas herramientas con las que contaba en su plataforma como. Es así, que
con cada versión que han lanzado, CS3, CS4, CS5, CS6 y CC, han ido mejorando
en el transcurso del tiempo. Por ello, a pesar de tener ya más de 20 años en el
mercado, sigue siendo el programa número uno que los usuarios eligen.

Desde un comienzo la marca de presentación de Adobe Illustrator, fue muy

llamativa. Primero empecemos con su nombre, el cual está compuesto por el
nombre de la marca de la empresa «Adobe» y la palabra Illustrator, que en
español significa «Ilustrador».

Los creadores John Warnock y Luanne Seymour Cohen, eligieron la pintura «El
Nacimiento de Venus», del gran Sandro Boticelli, como la imagen del programa,
que fue utilizada hasta la versión 10. Escogieron esta imagen, por el fluido que
tenía los rizos de venus en el retrato, ya que mostraba el potencial que ofrecía el
programa, al tener un trazado de curvas suaves que ofrecen los gráficos
vectoriales.

No obstante, con el pasar de los años el rostro de la pintura en la aparición del

programa, la caja del producto, las nuevas funciones que brindaba en cada
actualización, esto se dio hasta la versión 10.

Al llegar a esta nueva versión, la imagen fue reemplazada por la ilustración de una
flor que tenía más relación con las nuevas versiones 11 y 12, las cuales ya
pertenecían a Adobe Creative Suite, que era una plataforma que contaba con
diferentes programas de la empresa Adobe. Sin embargo, al actualizarse la
versión de Adobe Creative 3, la compañía decide cambiar de imagen de
presentación, por un diseño simple, que está compuesto por colores básicos y el
texto AI (abreviación del nombre), y a partir de ese año ha ido cambiando,
solamente la tipografía o el color en las características de Adobe Illustrator.

En el año 2005, la compañía Adobe Systems, adquirió el programa MacroMedia

FreeHand, una aplicación de ilustración vectorial, esta compra le costó a la
empresa $340 millones de dólares. Sin embargo, esta plataforma al tener su
público cuando pertenecía a su antiguo dueño, Altsys, cayó por el simple hecho
que ya no tenía nuevas herramientas, además que Adobe la seguía ofreciendo sin
actualizaciones, ni nada nuevo, y los usuarios que querían utilizar este programa,
se tenían que ver obligados a usar Illustrator.

Después de un tiempo y causar un poco de controversia entre los usuarios, en el

año 2009, emitieron un comunicado en su sitio web oficial titulado «Adobe y el
futuro de Freehand», donde explican lo siguiente:

«No se han realizado actualizaciones de FreeHand en más de cuatro años y

Adobe no tiene pensado iniciar un desarrollo para agregar funciones nuevas o
compatibilizar Mac con tecnología Intel y Windows Vista. Para apoyar los flujos de
trabajo de los clientes, seguiremos vendiendo FreeHand y ofreciendo servicio de
atención al cliente y de asistencia técnica de acuerdo con nuestras políticas.
Aunque reconocemos que FreeHand dispone de una base de clientes fieles,
animamos a los usuarios a que utilicen el nuevo Adobe Illustrator CS4, que es
compatible tanto con PowerPC y Mac con tecnología Intel, como con Microsoft
Windows XP y Windows Vista.»

No obstante, este comunicado no sirvió de mucho, pues los usuarios fieles han
seguido solicitando una nueva actualización, hasta el punto de crear una
comunidad web «Freehand libre», para presionar a Adobe Systems, a entregar
 nuevas versiones o el código de fuente para que otras compañías, puedan traer
de vuelta el programa. Hasta el momento la empresa no se ha pronunciado.

Las diferentes versiones de Adobe Illustrator

Desde su lanzamiento en el año 1982, en total existen 27 versiones, con nuevas

Adobe Illustrator características. Aquí te las nombramos.

Las ventajas y desventajas de usar Adobe Illustrator

Ventajas Desventajas
El programa algunas veces puede ser un poco
Las imágenes no pierden calidad.
pesado.
Se debe tener una buena memoria ram en la
Los editables pueden ser modificados en
computadora para trabajar sin problemas en la
cualquier momento.
plataforma.
No llegan a ser aptos para todos los sistemas
Permite realizar animaciones.
operativos.
Sus piezas gráficas se pueden ser usadas
No cuenta con una gama de efectos en
para maquetación, diseño web, dibujos
fotografías.
vectoriales, gráficos para móviles, etc.
Una amplia gama de colores y herramientas No permite un trabajo de edición fotográfica, la
para crear piezas digitales. cual conlleva a utilizar obligadamente Photoshop

Las principales herramientas de Adobe Illustrator

A continuación, presentaremos las principales herramientas con las que contamos

en Adobe Ilustrator. Estas Herramientas se pueden habilitar con el teclado o
mouse.

 Seleccionar

 Selección (V): selecciona objetos enteros.

 Selección Directa (A): selecciona partes de un objeto (puntos o segmentos
del trazado) para su traslado o modificación.
 Selección de grupos: selecciona objetos y grupos dentro de grupos.
 Varita mágica (Y): selecciona objetos con atributos similares (como el
color).
 Lazo (Q): selecciona puntos o segmentos del trazado de objetos
específicos.
 Herramienta Mesa de Trabajo: para crear diferentes mesas de trabajo
Mayús+Q.

 Dibujar
 Pluma (P): dibuja líneas rectas y curvas para la creación de objetos.
 Añadir punto de ancla (+): agrega puntos de ancla a trazados ya
realizados para su modificación.
 Eliminar punto de ancla (-): elimina puntos de ancla en los trazados ya
realizados.
 Convertir punto de ancla (Mayusc+C): modifica vértices redondeados en
vértices angulares y viceversa.
 Curvatura (Mayús+): dibujar segmentos de curvas.

 Línea: dibuja segmentos de línea rectos individuales.

 Arco: dibuja segmentos de curva cóncavos y convexos individuales.
 Espiral: dibuja segmentos en forma de espiral.
 Cuadrícula rectangular: dibuja cuadrículas a partir de líneas rectas.
 Cuadrícula polar: dibuja cuadrículas de gráficas circulares.
 Rectángulo (M): dibuja rectángulos y cuadrados (Mayusc.). También existe
la posibilidad de hacerlos concéntricos (Alt.).
 Rectángulo redondeado: dibuja rectángulos y cuadrados (Mayusc.)
redondeados.También existe la posibilidad de hacerlos concéntricos (Alt.).
 Elipse (L): dibuja elipses y círculos (Mayusc.).También existe la posibilidad
de hacerlas concéntricas (Alt.).
 Polígono: dibuja formas regulares de varios lados.También existe la
posibilidad de hacerlos concéntricos (Alt.).
 Estrellas: dibuja estrellas de varios lados. También existe la posibilidad de
hacerlas concéntricos (Alt.).
 Destello: crea efectos de destello de una lente o solar.

 Pincel (B): permite el dibujo de líneas a mano alzada y caligráficas (en

convivencia con la paleta pinceles), además de añadir dibujos y motivos a
los trazados.
 Pincel Manchas (Mayús+b): permite dibujar diferentes manchas en la
gráfica.
 Shapper (Mayús+N): hacer nítida la imagen.
 Lápiz (N): dibuja y modifica líneas a mano alzada.
 Suavizar: suaviza las curvas Bézier de los trazados.
 Borrador de trazados: borra trazos y puntos de ancla de un objeto.

 Rociar (Mayús+S): colocar varias instancias de un símbolo como un

conjunto en la mesa de trabajo (para acceder a las opciones de la
herramienta doble clic sobre su icono).
 Desplazar: mueve instancias de un símbolo, (para acceder a las opciones
de la herramienta doble clic sobre su icono).
 Reunir/Separar: aleja o acerca instancias de símbolo, para acceder a la
opción inversa mantener pulsado Alt (para acceder a las opciones de la
herramienta doble clic sobre su icono).
 Cambiar tamaño: cambia el tamaño de instancias de símbolo, para
acceder a la opción inversa mantener pulsado Alt (para acceder a las
opciones de la herramienta doble clic sobre su icono).
 Girar: rota instancias de un símbolo, (para acceder a las opciones de la
herramienta doble clic sobre su icono).
 Manchar: colorea instancias de símbolo, para acceder a la opción inversa
mantener pulsado Alt (para acceder a las opciones de la herramienta doble
clic sobre su icono).
 Traslucir: aplica transparencia a instancias de símbolo, para acceder a la
opción inversa mantener pulsado Alt (para acceder a las opciones de la
herramienta doble clic sobre su icono).
 Aplicar estilo: aplica el estilo gráfico seleccionado (en la paleta Estilos
Gráficos) a instancias de símbolo, para acceder a la opción inversa
 mantener pulsado Alt (para acceder a las opciones de la herramienta doble
clic sobre su icono).

 Columnas (J): crea gráficas que comparan valores mediante columnas

verticales.
 Columnas apiladas: crea gráficas similares a las de las columnas, pero
apila las columnas una sobre otra en lugar de lateralmente (estas columnas
resultan útiles para mostrar la relación de las partes con el total).
 Barras: crea gráficas similares a las de columnas, pero colocando las
barras horizontalmente en lugar de verticalmente.
 Barras apiladas: crea gráficas similares a las de columnas apiladas pero
apilando las barras horizontalmente en lugar de verticalmente.
 Lineal: crea gráficas que utilizan puntos para representar uno o más
conjuntos de valores, con una línea diferente para unir los puntos de cada
conjunto (este tipo de gráfica se utiliza habitualmente para mostrar la
tendencia de uno o varios conceptos durante un tiempo determinado.
 De áreas: similares a las de líneas pero resaltando los valores totales
además de los cambios de valor.
 De dispersión: crea gráficas que trazan puntos de datos como pares de
coordenadas en los ejes x e y (estas gráficas son útiles para identificar
motivos o tendencias en los datos y también para observar si las variables
se influyen entre sí).
 Circular: crea gráficas circulares cuyas porciones representan los
porcentajes relativos de los valores comparados.
 De radar (o de red): crea gráficas que comparten conjuntos de valores en
puntos determinados en el tiempo o en categorías concreta. Se muestran
en formato circular.
 Sector: divide las ilustraciones en imágenes web independientes.
 Seleccionar sector: selecciona sectores web.
 Herramienta cuadrícula perspectiva (Mayús+K): sirve para aplicar la
cuadrícula de perspectiva al momento de diseñar
 Herramienta selección de perspectiva (Mayús+V): para seleccionar
diferentes áreas del dibujo.

 Texto
 Texto (T): crea texto y contenedores de texto y permite también introducir y
modificar texto.
 Texto de área: convierte los trazados cerrados de un objeto en
contenedores de texto y permite introducir y modificar el texto en su interior.
 Texto en trazado: convierte trazados normales en trazados de texto (lo que
le hace perder al trazado normal sus características de color, estilo, etc.) y
permite introducir y modificar el texto de los mismos.
 Texto vertical: crea texto y contenedores de texto vertical, y permite
introducir y modificar el texto vertical.
 Texto de área vertical: convierte trazados cerrados en contenedores de
texto vertical y permite introducir y modificar el texto de los mismos.
 Texto vertical en trazado: convierte trazados en trazados de texto vertical
y permite la modificación e introducción de texto en los mismos.
 Retocar texto (Mayús+T): sirve para transformar libremente el tamaño del
texto.

 Pintura

 Degradado (G): ajusta los puntos de inicio y fin y el ángulo de los

degradados de los objetos (en convivencia con la paleta degradado).
 Malla (U): crea y edita mallas y envolventes de mallas para dotar a
los dibujos de un color en degradado más natural.

 Selección de pintura interactiva: selecciona los rellenos y trazados

de objetos de un grupo de pintura interactiva.

 Navegar
Mano (H): mueve la mesa de trabajo de Illustrator dentro de la ventana de
ilustración.

Segmentación de impresión: ajusta la cuadrícula de página para controlar

dónde aparece la ilustración en la página impresa.

Zoom (Z): aumenta (Control+ Espac.) o reduce (Control+Alt+Espac.) la vista

en la ventana de la ilustración.

Los comandos de Illustrator

Al conocer sus herramientas básicas, ahora vamos a darte los comandos

de illustrator y/o atajos que debes conocer para realizar increíbles piezas
gráficas.

 Comandos más usados en Illustrator

o Previsualizar un Trazo: Ctrl+Y / Comando+Y
o Agrupar: Ctrl+G / Comando+G
o Ocultar o mostrar reglas: Ctrl+R / Comando+R
o Ocultar o mostrar cuadrícula: Ctrl + { /Comando+Shift + *
o Duplicar objeto: Alt+ desplazar la flecha / Alt + desplazar flecha
o Ocultar o mostrar transparencia: Ctrl+Shift+D /
Comando+Shift+D
o Bloquear Guías: Alt+Ctrl+; / Opción + Comando + ;
o Desagrupar: Ctrl+Shift+G / Comando+Shift+G
o Guardar para web: Ctrl+Shift+Alt+S / Comando+Shift+Alt+S
o Convertir a trazo: Ctrl+Shift+O / Comando+Shift+O
o Propiedades del documento: Ctrl+Alt+P/ Comando+Alt+P
o Ocultar o mostrar mesa de trabajo: Ctrl+Shift+H /
Comando+Shift+H
o Crea guías: Ctrl+5/ Comando+5
o Crear un trazo compuesto: Ctrl+5 / Comando+5
o Herramienta de selección perspectiva: Mayús+V / Mayús+V
o Cuadrícula de perspectiva: Ctrl + Mayús + I
o Copiar objetos en perspectiva: Ctrl + Alt + arrastrar/ Comando +
Alt + arrastrar
o Crear contornos en texto: Mayús + Ctrl + O / Mayús +
Comando + O
o Abrir guía de color: Mayús + F3 / Mayús + F3
o Cambiar el modo de color: Mayús + clic en barra de color /
Mayús + clic en barra de color
 Conclusión

Al conocer todo sobre este programa, sus mejores herramientas, sus

características y hasta un poco más de su historia, podemos comprender la
importancia que tiene esta herramienta para un programador web. Con el
uso de este, todo programador puede agilizar y optimizar los diferentes
proyectos que se deban trabajar.