MANUAL DE UTILITARIOS III

INTEGRANTES

UNIVERSIDAD TECNICA DE MACHALA

Ayala Ridier
Carpio Deysi
Cruz Juan
Rodrguez Mauricio
Snchez Roxana
Sanmartn Patricia

UNIDAD I

PRINCIPIOS DEL DISEO DE INTERFACES DE

USUARIO

INTRODUCCIN
El diseo de sistemas abarca varias actividades que van incluso hasta el diseo
de interfaz de usuario, empleando as grandes interfaces con respecto a diseo
para la comodidad y ergonoma visual. Por ello estudiar sobre el diseo de
interfaces de usuario en lugar del software en si, adems veremos que deben
tenerse en cuenta las capacidades fsicas y mentales de las personas que
utilizaran el software.

OBJETIVOS
Abarca la interaccin humano computadora y su relacin con el diseo de
interaccin y el diseo de experiencias de usuario.
Conocer los tipos de percepciones ms relevantes desde el punto de vista
interactivo que tiene la persona
Conocer cmo se realiza el proceso de comprensin y los modelos de
memoria
Comprender que el modelo de memoria condiciona el diseo de la interfaz
Ver la importancia que tiene la limitacin de la memoria de trabajo

1.1 Interaccin Persona Ordenador

EL FACTOR HUMANO
MODELO DE PROCESAMIENTO
Para estudiar el papel del ser humano en el diseo de sistemas
interactivos se recurre a la Psicologa Cognitiva

PSICOLOGIA COGNITIVA
Disciplina cientfica que se encarga del
estudio del sistema de procesamiento
de informacin humano
Los psiclogos cognitivos han acumulado datos empricos y teoras
explicativas sobre las capacidades y limitaciones del sistema
cognitivo humano:

cmo se almacena
y recupera la
informacin, etc

cmo se percibe el
mundo que nos
rodea,

De esta forma es posible conocer si hay cosas que le resultan difciles

de aprender o realizar

MODELO DE PROCESAMIENTO HUMANO

CANALES DE ENTRADA-SALIDA

Los sentidos
Constituyen los
canales de
comunicacin con el
exterior (sensores)

Percepcin

Percibir
es
aadir
conocimientos del mundo
exterior por medio de las
impresiones
que
trasnmiten los sentidos.

La mas importantes
para la IPO son:

Percepcin
Visual

Componetes
principales: Color y
Brillo.

Color

El ojo percibe el color a

travs de
los conos, sensibles a
diferentes
longitudes de onda.

Los conos slo son

sensibles a algunos
colores. comienzan a
cansarse y pierden su
sensibilidad

Estrategia: Debe evitarse

la combinacin de colores
oponentes en una
pantalla: rojo-verde,
amarillo-azul

BRILLO
Reaccin a la cantidad
La agudeza visual mejora con la luminancia
Debe ser inversamente proporcional a la duracin del
estmulo
PROFUNDIDAD
Importante en entornos 3D para dar realismo
Claves para la percepcin de la profundidad:
Claves dadas por la propia imagen:
Gradiente de textura
Superposicin
Tamao relativo
Altura relativa
Tamao familiar
Perspectiva lineal
Claves dadas por la
estructura del sistema visual:
Disparidad binocular
Paralaje de movimiento

ANGULO VISUAL
Si el ngulo visual es mayor, el objeto est ms cerca
Una persona con visin normal puede percibir una lnea si
tiene un ngulo visual mnimo de 0,5 segundos de arco

ORGANIZACION DE OBJETOS
La distribucin de elementos en la interfaz es una decisin
del diseador basado muchas veces en su propia intuicin
Es posible proporcionar al diseador las herramientas
necesarias para decidir sobre la mejor distribucin de los
objetos en una interfaz

 Organizacin de objetos
Figura y fondo: Las personas tienden a percibir tan solo uno de los
lados de una figura. Est limitada por un contorno y posee una forma
definida por el mismo.

Unidades de Entrada:
Sirven para configurar la organizacin perceptual definitiva de la imagen.
- Procesos de Divisin: diferencian las diversas partes de una figura.
- Procesos de Agrupacin: Hacen que varios elementos se perciban
conjuntamente.
Organizacin y tarea del usuario
La organizacin de los elementos puede facilitar o entorpecer el trabajo del usuario.
Para un buen diseo: la organizacin perceptual de la informacin debe estar regida a
cmo el usuario lleve a cabo las tareas.
Ejemplo: Si se escribe de izquierda a derecha, el botn debe aparecer a la derecha del
cuadro de texto.

Percepcin y atencin
La atencin: funciona como un filtro que permite restringir la informacin que va a ser
analizada en cada momento.
Qu determina la atencin del usuario?
- El ambiente: estmulos llamativos (imgenes brillantes)
- El propio usuario: las personas no rastrean la totalidad de la imagen sino que se
centran en las reas de alto contenido informativo.

PERSEPCI
N VISUAL
Organizacin de Objetos
La
Atencin

Organizacin de Objetos
Organizacin y tareas del usuario
Unidades de
La
entrada como un filtro que
Funciona
Figura y
fondo
La imagen est
limitada por un
contorno y
posee una
forma definida
por el mismo

organizacin
de
los
elementos puede facilitar o
permite restringir la informacin
entorpecer
el
trabajo
del
que va a ser analizada en cada
Sirven para
configurar la
Idea para un buen Diseo
organizacin
perceptual
definitiva de la
La organizacin perceptual de la
imagen
informacin debe estar regida a
cmo el usuario lleve a cabo las
tareas.
Procesos de
Divisin:
diferencian las
diversas partes
de una figura.
Procesos
de
agrupacin:
Hacen
que
varios
elementos
se
perciban

Qu determina la atencin del

- El ambiente: estmulos
llamativos (imgenes brillantes)
- El propio usuario: las personas
no rastrean la totalidad de la
imagen sino que se centran en
las reas de alto contenido
informativo.

PERCEPCION
Y ATENCION

ILUSIONES
OPTICAS

El procesado visual puede crear ilusiones pticas

Conocimiento a travs de imgenes: el uso de iconos

Los iconos permiten un acceso directo y ms rpido que la palabra a
la informacin semntica del objeto representado.
Recomendaciones: Evitar varias interpretaciones, Presentar en la
misma posicion todas las pantallas.
El diseador de una interfaz desea que los usuarios conozcan la
funcin de los distintos objetos de la misma.

PERCEPCION
Y
CONOCIMIEN
TO

La atencin funciona como un filtro que permite restringir la

informacin que va a ser analizada en cada momento.
La atencion del usuario se determina por:
El ambiente: estmulos llamativos (imagen con colores
brillantes)
El propio usuario: las personas no rastrean la totalidad de la
imagen sino que se centran en las reas de alto contenido
informativo.

CAPACIDAD Y
La habilidad para interpretar la imagen permite resolver
LIMITACIONES
ambigedades por el contexto

PERCEPCIN DEL TEXTO

Por razones de descanso visual, los textos deben estar todos en minsculas a
excepcin de las letras capitales y algunos ttulos.
Hay que construir lneas cortas de texto (alrededor de 8 palabras) y no justificar de
ambos lados sino nicamente del lado izquierdo. As mismo, es importante utilizar
colores neutros para los textos, preferentemente el negro, ya que los colores brillantes
lastiman la vista y distraen del objetivo de la lectura.

Texto

Lineas
Cortas

Minsculas

Colores
Neutros

Excepci
n

Letras
Capitales

Titulos

Preferenc
ia

Maximo de
8 Palabras

Justificado
al lado
Izquierdo

Negro

1. EL ODO
Despus de la vista, el odo es el segundo sentido ms importante. Por supuesto, para
las personas sin una visin adecuada, el odo pasa a ser el sentido ms importante. En
la interaccin humano computadora la segunda forma de comunicacin para las
personas con una visin normal es el sonido. La sensacin de escuchar se da cuando
se produce un sonido y ste viaja en el aire, desplazndolo. El odo es sensible a estos
pequeos cambios de presin, los registra y manda la informacin al cerebro, que los
procesa y nos manda la sensacin de escuchar. El sonido viaja a travs del aire por
medio de ondas que pueden variar en amplitud o en frecuencia. Lo primordial en
este caso es que el sonido nos puede remitir a informacin registrada en el cerebro que

puede hacer que se revivan experiencias agradables o desagradables, o que se registre

una nueva informacin asociada a un sonido.

Sonido
Oido

Amplitud
Frecuenci
a

2. EL TACTO (HPTICA)
Es el canal del contacto o la comunicacin que tenemos con el mundo a travs del
contacto. Este sentido no se ha explotado en el desarrollo de sistemas informticos o
interfaces. El tacto es tambin fundamental para las personas que les falta el sentido
de la vista y cuando por alguna razn, el odo o audio se ve interferido el tacto cobra
ms importancia an. El tacto es importante en el uso del teclado para una interfaz o
de algn otro dispositivo de entrada.

3. EL OLFATO
Nos brinda informacin respecto a substancias qumicas que viajan en el aire.

Estas

substancias pueden ser asociadas a situaciones de peligro, felicidad, sufrimiento,

etc. Desafortunadamente al igual que el sentido del gusto, para el desarrollo de
interfaces grficas de usuario el olfato no ha sido considerado.

Existe una empresa japonesa Mirapro Co que ha desarrollado el software y una esfera
que contiene 36 esencias diferentes con los que el usuario puede percibir olores
asociados a las fechas, horscopos o los contenidos buscados en la red.

Proceso cognitivo y de memoria humana

SENTIDOS
CARACTERISTICAS

MEMORIA
SENSORIAL
MEMORIA
A CORTO
PLAZO
MEMORIA
DE LARGO
PLAZO

Muy grande
Muy voltil, la nueva informacin reemplaza la
anterior
Capra la informacin de interes: (contenido o
presentacin)

Muy peque;a (72)

Voltil
Fusiona el conocimiento previo con la nueva
informacin

Gran tama;o (ilimitada)

Ah'i se almacena el conocimiento
Los m'etodos de b'usqueda de informaci'on no
son eficiente
Recuerdo: con clave y sin clave

Estrategias a aplicarlas en el diseo interfaz del usuario

MEMORIA
SENSORIAL
MEMORIA A
CORTO
PLAZO
MEMORIA
DE LARGO
PLAZO

Los elementos del interfaz deben estar:

ordenados, de acuerdo al usuario,
consistentes
El contenido debe ser inter'es del usuario.
Pantallas no cargadas con mucha
informaci'on
Evitar la memorizaci'on
no cargar la informaci'on en las pantallas
Consistencia en la interfaz de usuario
Agrupar, clasificiar, paginar
Simetr'ia en todo el interfaz

Dar el control al usuario

No obligar a recordar ni mermorizar
Incluir busqueda con varios filtros
No herir la suceptibilidad al usuario
Mensajes afirmativos, no de orden ni grotezco
Seguridad en el software

1.2 Elementos de interfaz de Usuario

1.2.1 Tipos de elementos de interfaz de usuario
Interfaz de usuario: Conjunto de elementos a travs de los cuales un usuario interacta
con un objeto que realiza una determinada tarea. (Televisor, telfono, coche, despertador,
puerta)
El ser humano interacta con los objetos que le rodean, y tiene unas expectativas de
cmo deben comportarse, basado en experiencias anteriores con ellos.
Interfaz de usuario de un programa: Conjunto de elementos hardware y software de un
ordenador que presentan informacin al usuario y le permiten interactuar con la
informacin y con el ordenador.
Tambin incluye el hardware que incluye el sistema:
Teclado
Dispositivo apuntador
Monitor
Componentes software: elementos que el usuario ve, oye, a los que apunta o toca en la
pantalla para interactuar con el ordenador, as como la informacin con la que trabaja.
Tambin es parte del interfaz la documentacin:

En interfaces grficas de usuario, los botones son tipos de widget que permiten al usuario
comenzar un evento, como buscar, aceptar una tarea, interactuar con un cuadro de
dilogo, etc.
Botn
Elemento de las interfaces grficas que se encuentra en la parte ms superior de una
ventana, donde aparece un ttulo que se corresponde con el contenido de la misma.
Barra de Titulo
Elemento en las interfaces grficas que permiten mostrar de forma grfica el estado de
avance de una tarea o proceso.
Barra de Progreso
Barra de
Agrupacin de conos con los cuales es Herramientas
posible
acceder
a
determinadas
herramientas o funciones en una
aplicacin.

Elemento permite mostrar informacin

acerca del estado actual de la ventana.
Generalmente las barras de estado se
ubican en la parte inferior de las
ventanas.

Barra de
Estado

Es un elemento de las interfaces grficas que constan de una

Barra de
barra horizontal o vertical con dos extremos con fechas que Desplazamie
apuntan en sentidos contrarios y que suelen ubicarse en los
nto
extremos de una ventana o recuadro.
Las barras suelen aparecer o activarse cuando el recuadro no es
lo suficientemente grande como para visualizar todo su
contenido

Tutoriales
Referencia
Ayuda
Manuales

 Botn de Opcin
Elemento en las interfaces grficas que permite elegir slo una opcin de un conjunto
predefinido de opciones.

Casillero de Verificacin
Interfaz grfico que permite al usuario marcar mltiples selecciones de un nmero de
opciones.

Cuadro de Dialogo
En interfaces grficas de usuario, un cuadro de dilogo es una ventana especial para
mostrar informacin al usuario o para obtener de ste una respuesta.

Cuadro de Texto
Un cuadro de texto es un elemento tpico en las interfaces grficas en donde es posible
insertar texto.

Icono
Los conos del sistema son aquellos conos que se utilizan para identificar archivos,
accesos directos, programas y herramientas del sistema operativo.

Lista
Una lista es una relacin de datos, ordenados o clasificados segn su tipo.

Lista Despegable
Tipo de elemento GUI que permite al usuario escribir sobre un campo de texto mientras se
muestra una lista de opciones.

Men
Un men es una herramienta grfica en la interfaz de pginas web y aplicaciones que
consiste de una lista de opciones que puede desplegarse para mostrar ms opciones o
funciones.

Men Contextual

En aplicaciones o sistemas operativos, tipo de men que se adaptar al contexto desde

donde se accede. El men contextual se accedo con el clic derecho sobre algn elemento
en la pantalla.

Men Despegable
Se distingue de una simple lista en el hecho de que el usuario debe presionar sobre el
men para que se muestren las opciones disponibles.

Panel Lateral
Elemento usado en las interfaces grficas que permiten mostrar diferentes formas de
informacin en un lado de una aplicacin o el escritorio.

Pestaa
Elemento que se encuentra en las interfaces grficas, que permite cambiar entre distintos
documentos o secciones de forma rpida.

Slider
Un slider es un elemento de las interfaces grficas que permiten seleccionar un valor
moviendo un indicador

Spinner
Un spinner es un elemento de las interfaces grficas que permite al usuario ajustar un
valor dentro de un cuadro de texto adjunto a dos flechas que apuntan en direcciones
opuestas.

Tooltip
Un tooltip es un elemento de las interfaces grficas que se emplea junto con el cursor del
mouse

Ventana
Parte delimitada de la pantalla en un sistema operativo grfico que suele ser rectangular y
que contiene elementos afines entre s en ella.

ESTRATEGIAS A APLICARLAS EN EL DISEO INTERFAZ DEL

USUARIO
Ergonoma
La Ergonoma es una ciencia que estudia las caractersticas, necesidades,
capacidades y habilidades de los seres humanos, analizando aquellos aspectos
que afectan al entorno artificial construido por el hombre relacionado directamente
con los actos y gestos involucrados en toda actividad de ste.
En todas las aplicaciones su objetivo es comn: se trata de adaptar los productos,
las tareas, las herramientas, los espacios y el entorno en general a la capacidad y
necesidades de las personas, de manera que mejore la eficiencia, seguridad y
bienestar de los consumidores, usuarios o trabajadores.
Objetivos de la Ergonoma

Factores
Contamientas
Ambientales

Temperatura

Confort Termico.Frio, Calor, Humeda

Iluminacion

Pantallas de
Visualzacion de
Datos(PVD)

Ruido

Vibraciones

Sindrome de edificio
enfermo(SEE)

Si no se tiene factores
adecuados surge la mala
ergonoma

Criterios de Ergonoma
Entre los criterios tenemos los siguientes:

Problemas
Balance.
Funcionalidad.

Desde el punto de vista ergonmico, una herramienta debe cumplir bsicamente los
siguientes requisitos:

Desempear con
efectividad la funcin
para la que est
hecha
La operacin de la herramienta
debe reducir el cansancio
Estar proporcionada a las
dimensiones del
trabajador
Satisfacer las
necesidades

Proporcionar efecto de
retroalimentacin

Principales Problemas.- se podra decir que hay 3 problemas principales los cuales son:
1. Sitios demasiados complejos
2. Ausencia de un lenguaje y diseo adoptado
3. Ausencia de la informacin principal

Balance.- Es la regulacin del equilibrio que mantiene en un estado nivelado del diseo,
permitiendo llamar la atencin del usuario, se los debe hacer con:

Simplicidad.- Un sitio web bien organizado reforzar la credibilidad de una

organizacin.

Sin Sobrecarga.- No se recomiendan las imgenes animadas. Estas deben

reservarse para mensajes importantes ya que llaman la atencin del usuario

Funcionalidad.- Son las caractersticas especficas que hacen ser practic y utilitario al
usarse, entre ellas son las siguientes:

Navegacin rpida.- La "regla de los tres clics," ampliamente seguida, estipula

que se debe poder acceder a toda la informacin en menos de tres clics.

Ubicacin.- El visitante debe poder ubicar en todo momento el lugar del sitio

que se encuentre.
Libertad al navegar.- El sitio web debe darle al usuario la posibilidad de
regresar a la pgina de inicio y a los principales encabezados (por ejemplo, al

usar la barra de navegacin)

Materializacin de la informacin.- La informacin en un sitio web debe ser
calificada, es decir, que algunos datos como la fecha de la ltima actualizacin
y el nombre del autor.
Caractersticas humanas

Son Caractersticas antropomtricas y fisiolgicas, relacin con los ambientes de trabajo.

En las cuales est la disposicin de pantallas y controles, limitaciones sensoriales y
cognitivas, efectos de la tecnologa, fatiga y salud, amoldamiento e iluminacin, diseo de
ambientes, diseo para usuarios con disminuciones fsicas.

Disposicin de pantallas y controles

Se debe tomar en cuenta lo siguiente:

El usuario debe poder regular la luminosidad y el contraste para evitar el

enrojecimiento, lagrimeo etc.

Ilustracin 2Evitar

Ilustracin 1Necesario

d La luminancia de la pantalla no debe ser inferior a 10 cd/m2.

El color de los caracteres negros sobre blanco ofrece mejor contraste que los
caracteres blancos sobre fondo negro.

El borde coloreado de la pantalla no debe diferir demasiado de la propia pantalla.

El tamao de los caracteres debe ser de 3,5 a 4,5 mm para que su lectura sea fcil
a la distancia de 40-70 cm.

Tcelado y Pantalla

Al manipular un teclado, las manos adoptan una posicin forzada hacia afuera. Los
movimientos rpidos y repetitivos pueden provocar tendinitis, tenosinovitis, o cualquier
lesin asociada a dichos sobreesfuerzos, especialmente si la estacin de trabajo no est
organizada adecuadamente, tambin se debe tener en cuenta lo siguiente:

El teclado deber ser inclinarle e independiente de la pantalla que Permita que

adopte una postura cmoda que no provoque cansancio en los brazos o las
manos. Los espacios suficientes delante del teclado para apoyar los brazos y las
manos. Las teclas debern tender a facilitar su utilizacin.

Caractersticas:

Que sea mate y de colores claros. Para evitar reflejos.

Independiente de la pantalla del ordenador. Es decir, mvil, que permita adoptar

una postura cmoda que no provoque cansancio.

Regulable en cuanto a inclinacin. En un intervalo de 10 a 15, con el fin de evitar
movimientos forzados de las articulaciones, que pueden derivar en lesiones. Se
recomienda que la lnea media del teclado (tercera fila), no se levante ms de tres

centmetros de la superficie de trabajo.

Estable durante su uso.
Los smbolos de las teclas deben resaltar y ser legibles desde la posicin normal

de trabajo.
Teclas cncavas. Es mejor este tipo de superficie, ya que facilita su utilizacin.

ACCESIBILIDAD
La accesibilidad consiste en el acceso a la informacin sin limitacin alguna y mide el
grado en el que una persona puede utilizar un recurso de forma satisfactoria. Tambin se
podra decir que la accesibilidad significa el poder de acceder a una interfaz (sitio web,
software) universalmente (accesible para todo tipo de usuarios)
Diseo para todos:

para

Desarrollo
de
interfaces
de fcil
acceso .

Diseo

El mayor
nmero de
personas
posible

Sin la
necesidad
de
adaptarlos
o
redisearlo
s de una
forma
especial

Todos

Tiene como objetivo prioritario del Diseo para Todos es el de simplificar la vida de
cualquier persona, independientemente de su edad y/o capacidad, ofrecindole interfaces,
susceptibles de ser directamente utilizado.

Sus Principios son:

Uso equitativo.- Se basa en que se debe usar las mismas formas para todos los
usuarios: idnticas cuando sea posible, equivalentes cuando no lo sea y tratar que
el diseo sea atractivo para todos los usuarios.

Uso flexible
f e
O
ib
s
o
p
e
d
rs
a
id
lc
b
f i
O
c
s
n
e
a
d
r s
p ta
a
d
A
r l
c a
A
s
u
d
e
c
rtn
A to
y
r
e
d
As
o
s
a
p
lu
e
d
l o
tm
rio
a
u
im iz
e re
d
o
c
a
h
c
lma
n
o
m
id
u
q
s n
a
m
o
.lc
t o
h
ac
F
r a
ilta
lrc
om
c
o
uo
q
iz
la
n
rd .
ie
s e
u
x
re
p
ro .d
tu
a
n

is
c
la
y
o
tu
p re
is i
c
.
n

Simple

Intuitivo.- Se busca proporcionar avisos durante y al finalizar una tarea o lo que

se est realizando, pero siempre mostrando la informacin de mayor a menor
importancia lo que se trata de mitigar o eliminar es la complejidad que no se ah
necesaria.

Tolerancia al error:
o Proporcionar advertencias sobre peligros y errores.
o Proporcionar caractersticas seguras de interrupcin.
o Disponga los elementos para minimizar los riesgos y errores.

Accesibilidad (Fsica, Color, Usabilidad)

Usualmente las interfaces se disean pensando en una persona estndar con todas las
capacidades fsicas y cognitivas, lo que frecuentemente deja fuera a los colectivos de
personas con "necesidades especiales".
La accesibilidad es la medida en que una aplicacin puede ser utilizada por el mayor
nmero posible de usuarios, acoplndose

a las necesidades de cada uno y a sus

preferencias y/o limitaciones.

Tipos de Discapacidad:

Deficiencias visuales.- Segn la Organizacin Mundial de la Salud la

discapacidad visual es "cualquier restriccin o carencia (resultado de una
deficiencia) de la capacidad de realizar una actividad en la misma forma o grado
que se considera normal para un ser humano. Se refiere a actividades complejas e
integradas que se esperan de las personas o del cuerpo en conjunto, como
pueden ser las representadas por tareas, aptitudes y conductas".

Auditivas.- Es un dficit total o parcial en la percepcin auditiva. Si se pierde esta

capacidad de forma parcial se denomina hipoacusia y si se pierde por completo se
llama cofosis. Adems puede ser unilateral o bilateral. Las personas que sufren
esta discapacidad tendrn problemas para or y se ver afectada su la capacidad
de comunicacin.

Fsica.- Se puede definir como una desventaja, resultante de una imposibilidad

que limitado impide el desempeo motor de la persona afectada, Esto significa que
las partes afectadas son los brazos y/o las piernas

Accesibilidad (Fsica)
La entrada demanda precisin y coordinacin motora, adems de coordinacin visualmotora para el manejo del dispositivo apuntador, y la salida requiere capacidad visual y
ocasionalmente auditiva.

Ilustracin 3Adaptacin para personas con discapacidad motriz, apuntador tipo licornio

Por ejemplo, un lector en Braille procesar siempre a modo de tabla, mientras que si la
aplicacin ha utilizado las tablas para el diseo, hace incomprensible la interface. Un
lector en Braille tambin leer las etiquetas ALT del sitio, sin embargo, si las etiquetas ALT
estn vacas o no explican el objetivo del elemento, el usuario no sabe qu hay en la
pantalla.

Accesibilidad (Color)
Una mala eleccin de los colores en la pantalla puede causar problemas a los usuarios
daltnicos (para los que el tono es importante) o de baja visin (para quienes el brillo y el
contraste son importantes).
Tambin Las combinaciones de color de fondo y de primer plano deben ofrecer suficiente
contraste para ser visualizadas por personas con discapacidad visual, o tener el suficiente
contraste para pantallas en blanco y negro.

Combinaciones de colores para texto ms accesibles:

Combinaciones de colores para pginas ms accesibles:

Recomendaciones al momento de usar colores en una pgina web:

Suficiente contraste de luminancia entre el texto y color de fondo.

No usar el color como el nico medio de distinguir los elementos de informacin.
Los vnculos no deben depender exclusivamente de un color
Los campos de formularios deben mostrar los errores sin basarse en el color.
Utilizar colores perfectamente distinguibles

Ejemplo de uso correcto e incorrecto de uso de los colores en una pgina web

Uso Correcto: se lo puede describir de modo correcto ya que es simple el diseo

y el uso de los colores es el adecuado ya que nos muestra algunas combinaciones
de colores que se podran usar.

Uso Incorrecto:

UNIDAD II

DISEO Y VECTORIZACIN POR

COMPUTADORA

INTRODUCCIN
En el presente capitulo conoceremos las ventanas de trabajo que tenemos en
Adobe Ilustrator con cada una de sus herramientas, las mismas que nos servirn
para trabajos de diseo posteriores.
Tambin aprenderemos a vectorizar imgenes en formato bitmap y podremos
realizar diseos graficos en formatos 2D y 3D

OBJETIVOS
Conocer y utilizar las herramientas de Adobe Ilustrator a travs de
prcticas constantes guiadas por el docente para poder disear y
vectorizar imgenes.
Conocer las herramientas de trazado
Utilizar herramientas de corte y difusin

2.1 Introduccin a Adobe Ilustrador

Adobe Illustrator (AI) es el nombre o marca comercial oficial que recibe uno de los
programas ms famosos de la casa Adobe, junto con sus hermanos Adobe
Photoshop y Adobe Flash, y que se trata esencialmente de una aplicacin de creacin y
manipulacin vectorial en forma de taller de arte que trabaja sobre un tablero de dibujo,
conocido como "mesa de trabajo" y est destinado a la creacin artstica de dibujo y
pintura para Ilustracin (Ilustracin como rama del Arte digital aplicado a la Ilustracin
tcnica o el diseo grfico, entre otros). Es desarrollado y comercializado por Adobe
Systems Incorporated y constituye su primer programa oficial de su tipo en ser lanzado
por sta compaa definiendo en cierta manera el lenguaje grfico contemporneo
mediante el dibujo vectorial. Adobe Illustrator contiene opciones creativas, un acceso ms
sencillo a las herramientas y una gran versatilidad para producir rpidamente grficos
flexibles cuyos usos se dan en (Maquetacin-Publicacin) impresin, vdeo, publicacin
en la Web y dispositivos mviles. Las impresionantes ilustraciones que se crean con ste
programa le han dado una fama de talla mundial a esta aplicacin de manejo vectorial
entre artistas grficos digitales de todo el planeta, sin embargo, el hecho de que hubiese
sido lanzado en un principio para ejecutarse slo con el sistema operativo Macintosh y
que su manejo no resultara muy intuitivo para las personas con muy poco trasfondo en
manejo de herramientas tan avanzadas afect la aceptacin de ste programa entre el
pblico general de algunos pases.

Cmo iniciamos Adobe Illustrator?

Para comenzar a trabajar en el programa se activa la pestaa en el borde superior
izquierdo, la cual aparece como File, al tocar con el mouse sale un desplegado en el
cual vamos a hacer click en el primero que es New.

2.1.1 La ventana de Illustrador

Despus de haber configurado el rea de trabajo, para comenzar a trabajar en Illustrator,
la primera pantalla que aparece es la siguiente, nos muestra la hoja en blanco, y las 2
barras ms importantes para poder iniciar en el programa (aparecen en el lado izquierdo y
derecho de nuestra pantalla.

Aqu se muestran explicaciones extras de las reas de trabajo.

La barra de aplicacin de la parte superior contiene un conmutador de espacio de
trabajo y otros controles de aplicacin.
El panel de herramientas incluye utilidades para crear y editar imgenes,
ilustraciones, elementos de pgina, etc. Las herramientas seleccionadas estn
agrupadas.
El panel Control muestra opciones especficas de la herramienta seleccionada en
el momento, el panel de control tambin se conoce como la barra de opciones en
Photoshop, ya que Adobe Flash, Dreamweaver y Fireworks no tienen panel de
control.
La ventana documento exhibe el archivo en el que se trabaja. Las ventanas
Documento se pueden organizar como chas, y en ciertos casos, tambin se
pueden agrupar y acoplar.
Los paneles ayudan a controlar y modicar el trabajo, tambin se puede trabajar
mediante capas que nos ayudan y permiten recuperar pasos y edicin no
guardada (seguridad).
Se muestra una descripcin ms precisa de las reas de trabajo y barras de aplicaciones.

A.
Ventanas
de
2.1.1 Herramientas de
documento.
2.1.2
2.1.3
B.
Barra
de
2.1.4
Aplicaciones.
2.1.5
C. Conmutador de
2.1.6
2.1.7
trabajo.
2.1.8
D. Barra de Ttulo de
panel.
2.1.9
E. Panel de control.
F.
Panel
herramientas.

de

2.1.2 Seleccin: normal, directa, de grupos, de lazo y de varita mgica

G. programa
Botn contraer
Este
nos ayuda con numerosas herramientas para crear y manipular las
conos.
ilustraciones. Estas galeras ofrecen informacin rpida y visual de cada herramienta.

2.1.2 Herramientas de Seleccin

2.1.3 Herramientas bsicas: lneas, rectngulos, elipse, polgono, estrella,

destello

2.2 Dibujo Bsico

2.2.1Pluma, aadir y eliminar punto de ancla, convertir en punto en ancla
La herramienta Pluma
La herramienta Pluma (accesible con la tecla P) es la ms til y verstil en
el dibujo vectorial, ya que con ella podemos concretar exactamente dnde y
cuntos puntos de ancla tendr nuestro trazo, si son suavizados o vrtices,
y si los segmentos son rectos o curvos.
Esta herramienta se divide a su vez en sub-herramientas, que aunque las
podemos elegir directamente en la barra de herramientas, podemos
tambin utilizarlas a medida que dibujamos con la pluma, jugando con el
teclado y las teclas Ctrl y Alt.

La herramienta Pluma nos permite dibujar un trazado, haciendo clic donde

queramos crear un punto de ancla.

La herramienta Aadir punto de ancla crea un nuevo punto de ancla al

trazado sobre el que pulsemos, y en la posicin del clic.

La herramienta Eliminar punto de ancla elimina el punto de ancla

existente sobre el que hagamos clic.

Podemos alternar entre estas dos herramientas pulsando la tecla Alt.

La herramienta Convertir punto de ancla transforma un punto ya

existente. Por ejemplo, si hacemos clic sobre un punto suavizado, se
convertir en un vrtice. Y si hacemos clic sobre un vrtice y arrastramos,
podremos controlar las lneas de direccin y transformarlo en un punto
suavizado.

2.2.2

Texto, mano, zoom, ventana de caracteres y prrafo

El texto
Es una de las funciones ms cuidada de Illustrator. Podemos aadir desde
pequeas anotaciones a nuestra ilustracin a utilizar Illustrator para crear
atractivos folletos, y dar a nuestro texto la forma que queramos tratndolo
como un trazado.

Texto de punto.
Es una lnea de texto, en horizontal o vertical, sin un lmite definido. El texto
comienza desde donde se hace clic, y no crea saltos de lnea automticos, aunque
podemos hacerlos de forma manual. Utilizaremos este mtodo para aadir pocas
palabras, como leyendas al pie de una ilustracin.

Para introducir este tipo de texto, basta con seleccionar la herramienta Texto ,
hacer clic sobre el punto inicial y comenzar a escribir. Cuando queramos saltar de
lnea, pulsamos la tecla Intro.
Texto de rea.
Los caracteres vienen contenidos en un objeto, que define sus lmites. Cuando
llega a los lmites, el texto se va ajustando al elemento contenedor. Utilizaremos
este mtodo para introducir texto de varios prrafos, ya que nos facilita
posicionarlo con el resto de imgenes.

El smbolo que aparece en la imagen indica que el texto se ha desbordado, no cabe todo
el el rea de texto. Para introducir este texto, seleccionamos el objeto que formar el rea,

y hacemos clic en su trazado con la herramienta Texto de rea para poder comenzar a
escribir. Normalmente utilizaremos reas rectangulares, las cuales podemos crear
directamente trazando un rectngulo con la herramienta Texto .
Texto en un trazado.
El texto sigue la lnea y direccin del trazado sobre el que lo aadamos, ya sea abierto o
cerrado. Utilizaremos este mtodo para introducir texto con formas especiales, como en
ttulos.

Para introducir este texto, seleccionamos el objeto o trazado que marcar la ruta
del texto, y hacemos clic sobre l con la herramienta Texto de trazado para poder
comenzar a escribir.
El texto que introducimos normalmente es horizontal, pero tambin podemos
introducir texto vertical. Esto no se refiere al texto en relacin con la parte
horizontal del documento, si no a que un carcter est al lado del anterior (texto
horizontal) o en su parte inferior (texto vertical).

Para escribir texto en vertical, en la barra de herramientas disponemos de una

herramienta de texto vertical para cada uno de los tres mtodos de introduccin de
texto que hemos visto, que utilizaremos igual que las de texto horizontal.
El Zoom
Es importante a la hora de trabajar saber aumentar o disminuir el tamao de
nuestro documento para ajustarlo a nuestras necesidades, y esto lo hacemos con
el Zoom.
El zoom es la ampliacin del documento, expresada en un tanto por ciento.
Tomamos como 100% el tamao normal del documento, por lo que valores
mayores indicarn un aumento, y menor disminucin. Este cambio de tamao slo
se aplica a cmo vemos el documento, pero no a su tamao real.
En la esquina inferior izquierda de la Ventana del documento encontramos el
indicador de zoom . Se trata de un desplegable en el que podemos elegir uno de

los tamaos preestablecidos, entre 3,13% y 6400%. Estos son los valores mnimo
y mximo que podemos establecer.
Pero resulta ms til controlar el Zoom a travs del teclado o de la propia
herramienta Zoom (tecla Z). Al elegirla, el cursor tomar forma de lupa , y al hacer
clic sobre el documento aumentar el zoom tomando como centro el cursor. Esto
tambin podemos hacerlo girando hacia delante la rueda del ratn manteniendo
la tecla Alt pulsada. Para disminuir con la herramienta Zoom habr que mantener
la tecla Alt pulsada mientras se usa. Veremos que el cursor cambia a una lupa con
el signo - . Esto tambin lo logramos con la tecla Alt y la rueda hacia atrs.

2.2.3 Pincel, lpiz, borrador, tijera, cuchilla

Pinceles
En vez de utilizar trazados lisos, podemos utilizar otros ms llamativos, con los
pinceles.
Podemos utilizar el pincel en un trazado ya creado seleccionado con el objeto, o
dibujar directamente con el pincel utilizando la herramienta Pincel , cuyo uso es
igual que la herramientaLpiz .
La herramienta Lpiz
La herramienta Lpiz nos permite crear trazos a mano alzada, dibujando el trazo
a medida que arrastramos el cursor por la pantalla. Esto da al dibujo e aspecto de
estar "hecho a mano".
El principal inconveniente de esta herramienta en el dibujo vectorial, es que no nos
permite decidir dnde se colocan los puntos de ancla en el trazo, aunque s
podamos editarlos despus. Es por ello, que a no ser que busquemos el efecto de
hecho a mano, esta herramienta se suele utilizar para hacer bocetos
Dibujar con la herramienta Lpiz

La forma de dibujar con el lpiz es la ms natural, sobre todo si se utiliza una

tableta grfica en vez de un ratn. Basta con seleccionar la herramienta, con lo
que el cursor tomar forma de lpiz . Hacemos clic en el lugar donde queramos
que comience el trazo, y arrastramos el cursor siguiendo la forma del trazo

deseado. Si queremos que el trazo se cierre, debemos de tener presionada la

tecla Alt cuando soltemos el botn del mouse, pero no es necesario situarnos justo
sobre el punto inicial.
Suavizar
Si mientras utilizamos la herramienta Lapiz presionas la tecla Alt cambiamos a la
herramienta Suavizar . Tambin la encontramos disponible como herramienta
independiente.
Esta

herramienta

tambin

dispone

de

unos

valores:

de Suavizado y Fidelidad configurables. Y lo que hace es eso, reaplicar estos

valores la trazado, previamente seleccionado, sobre el que se aplica la
herramienta. Cada vez que utilicemos la herramienta sobre el mismo trazado, este
se suavizar un poco ms, teniendo cada vez menos puntos de ancla.

Borrar partes de un trazado mediante la herramienta Borrador de trazados

1. Seleccione el objeto.
2. Seleccione la herramienta Borrador de trazados .
3. Arrastre la herramienta a lo largo del segmento de trazado que desee borrar. Para
obtener resultados ptimos, utilice un nico movimiento suave de arrastre.
Borrar objetos mediante la herramienta Borrador
1. Realice una de las siguientes acciones:

Para borrar objetos concretos, elija los objetos o bralos en modo de

aislamiento.

Para borrar cualquier objeto de la mesa de trabajo, deje los objetos sin
seleccionar.

Si no ha seleccionado nada, la herramienta Borrador borrar atravesando todas las

capas.
2. Elija la herramienta Borrador .

3. (Opcional) Haga doble clic en la herramienta Borrador y especifique las opciones.

4. Arrastre por el rea que desea borrar. Puede controlar la herramienta mediante
uno de los siguientes procedimientos:

Para restringir la herramienta Borrador a una lnea vertical, horizontal o

diagonal, haga clic en la tecla Mays y arrastre.

Para crear una marco alrededor del rea y borrar el contenido de sta,
pulse la tecla Alt y arrastre (Windows) o la tecla Opcin y arrastre
(Mac OS). Para restringir el marco a un cuadrado, pulse las teclas Alt y
Mays y arrastre (Windows) o las teclas Opcin y Mays y arrastre
(Mac OS).

Cuchilla

Seleccione la herramienta Cuchilla . Haga clic y mantenga pulsada la herramienta

Borrador para ver y seleccionar la herramienta Cuchilla.
Lleve a cabo uno de los procedimientos siguientes:

Para realizar un corte con un trazado curvo, arrastre el puntero hasta el

objeto.
Para realizar un corte con un trazado recto, mantenga pulsada la tecla Alt
(Windows) o la tecla Opcin (Mac OS) al tiempo que hace clic en la mesa
de trabajo con la herramienta Cuchilla. A continuacin, arrastre el puntero.

Tijera
Este es un sencillsimo tip para aprender a cortar vectores utilizando la
Herramienta Tijera de Adobe Illustrator.

Seleccionamos el vector a cortar, en este caso ac tenemos un corazn para el

ejemplo

Slo debo saber en qu puntos deseo cortar el vector, en la imagen los puntos
azules representan los puntos por los que cortar la tijera.

Selecciono la herramienta tijera y solo hago dos clicks, uno en cada punto a cortar
y listo, ya hemos cortado un vector de manera sencilla.

2.3 Efectos y formatos

2.3.1 Herramienta Transformacin libre
Transformar es un objeto que consiste en mover, rotar, reflejar, cambiar la escala o
distorsionar el objeto. Esto lo podemos hacer de mltiples formas, dependiendo por
ejemplo de si queremos introducir un valor especfico o queremos hacerlo directamente
sobre el objeto. Cuando seleccionamos uno o varios objetos, estos aparecen enmarcados
por el cuadro delimitador, que determina el alto y ancho total del objeto. Ya sabemos que
para mover el objeto, solo hay que hacer clic sobre l y arrastrarlo. Si al hacerlo
mantenemos pulsada la tecla Alt, en vez de moverlo creamos una copia.

1.-Primero debemos crear un new proyecto, lo cual lo hacemos abrimos el llustrador

vamos a la opcin Archivo->Nuevo->

2.-luego en la ventana new q se abra le colocamos el nombre de nuestro proyecto y le

damos clic en OK

3.- luego nos saldr abrir nuestro new proyecto con una hoja en blanco para proceder a
realizar nuestra prctica.

4.-Una vez teniendo la hoja en blanco procedemos a dibujar un cuadrado para ello
hacemos lo siguiente:

Damos clic en la herramienta llamada Herramienta Rectngulo o simplemente

presionamos el acceso directo que es la letra M

Luego se procede a dibujarlo en la hoja en blanco

5.-la herramienta de transformacin libre hay varias formas de usarla:

1. Es seleccionar la figura con la fecha negra o seleccin o presionar la tecla V

Y podremos darnos cuenta que se va a visualizar el rectngulo de seleccin con

los puntos de ancla y el centro.

Esto nos permite modificar la forma que hemos seleccionado ya se ha:

a. Rotndola.- Para rotar la imagen nos posicionamos encima de un punto de
ancla del rectngulo de seleccin y cunado nos aparezca dos flechas
curvas vamos a arrastrar para rotar nuestra forma de arriba abajo o como
gustemos.

b. Achicndola o Agrandndola.- Para agrandar vamos a dar clic en los

puntos de ancla del rectngulo de seleccin cunado aparecern dos
flechas negras arrastraremos el mouse hacia donde queramos agrandar.

Agrandndola o Achicarla Horizontalmente (movemos el mouse hacia la

derecha o izquierda)

Agrandndola Verticalmente o Achicarla (movemos el mouse hacia la arriba

o abajo)

Si deseamos agrandar o Achicar la imagen pero que se agrande

igualmente sus lados simplemente le damos clic en la esquina del
rectngulo en su punto ancla y movemos el mouse inclinadamente

2. Tambin lo podemos hacer usando la herramienta transformacin libre la cual es

ms precisa para eso hacemos lo siguiente:
a. Escogemos la herramienta trasformacin libre de la barra de herramientas.

b. Luego escogemos la opcin trasformacin libre y por ejemplo si querremos

rotar la figura simplemente debemos dar clic sostenido en cualquier lado de
la hoja y la figura empezara a rotar.

3. Tambin hay otra forma pero se debe llenar los datos en una ventana emergente
como se lo ve a continuacin como se lo realiza:
a. Seleccionamos la figura le damos clic derecho y vamos a la opcin
Transformacin y se despliega algunas opciones de trasformacin.

b. Seleccionamos la figura y al darle clic en la opcin mover

Se nos abrir una ventana emergente en la cual se deber colocar la posicin en la q

queremos mover la figura

coloca
cuantos
O enSe
que
Angulo
seSedec

Una vez que hemos configurado los valore en el q vamos a mover la figura nos daremos
cuenta que mediante vamos cambiando los valores nos mostrara en el lugar que se
colocara como se ve a continuacin:

Ubicacin donde se mover la figura

Ubicacin donde estaba originalmente la figura

Nos da la opcin que si presionamos el botn copiar nos ara una copia exacta en el lugar
que queramos mover pero se mantendr en el lugar de origen la figura que queramos
copiar como se muestra a continuacin:

Si presionamos aceptar lo que ara es mover la figura original al lugar que escogimos

Herramienta Cuentagotas
Podemos seleccionar o asignar colores ya utilizados en el documento con la herramienta
Cuentagotas. Al hacer clic sobre un objeto con esta herramienta, tomamos el color del
objeto, tanto para el trazo como para el relleno. Y si tenamos un objeto seleccionado,
tomar los nuevos colores. Si la utilizamos combinada con la tecla Alt, produce el efecto
contrario. Es decir, asigna al objeto sobre el que pulsemos los colores de relleno y
contorno seleccionados, se lo hace de la siguiente manera:
1. Primero realizamos dos figuras una que tengo color y otra talmente en blanco
como se muestra a continuacin:

2. Luego seleccionamos la figura sin pintar y vamos a la barra de herramientas y

seleccionamos la herramienta Cuentagotas, como podemos ver en el cuadro de
colores est en blanco

3. Una vez que ya hemos cogido la herramienta simplemente debemos darle clic
encima de la figura pintada y automticamente se copiara el color con el que esta
esa figura, y se pondr en color en la figura que seleccionamos, y podremos
darnos cuenta q el color aparecer en el cuadro de pintura.

4. Si se desea hacerlo pero desde una imagen se hace lo mismo, se coloca la

imagen y se hace los mismo procedimiento pero con la diferencia que se le dar
clic con la herramienta cuentagotas en el color de la imagen que queramos utilizar.

2.3.2 Herramienta Malla

1. Debemos colocar una imagen en nuestro proyecto en la hoja en blanco:

2. Luego lo que debemos hacer es bloquear la imagen para q no se nos mueva, para
hacerlo asemos lo siguiente:
a. Seleccionamos la imagen
b. Vamos a la opcin Objetos
i. Opcin bloquear

1. Y seleccin

c. O simplemente aplastamos Ctrl + 2

3. Luego lo que aremos en contornearemos la imagen con la herramienta pluma y la
moveremos hacia un lado de la original

4. Luego usaremos la herramienta cuentagotas para pintarla del mismo color

5. Ahora seleccionando el trazado nos dirigimos a la Herramienta Malla y hacemos
clic calculando la zona de luz de la manzana real.

6. Para evitar errores presionamos CTRL + Y para ver todos los trazados,
seleccionamos la Herramienta Eliminar punto de Ancla y borramos los puntos que
estn entre las lneas dando un clic sobre ellos.

7.

Creamos todos los puntos necesarios (con la Herramienta Malla) en las zonas de
luz como en las zonas de oscuridad, una vez terminado de crear los puntos nos
dirigimos a la Herramienta Seleccin Directa, seleccionamos punto por punto y lo
vamos pintando con el Cuentagotas

2.3.2 Herramienta Degradado

Esta herramienta permite hacer degradados entre dos o ms colores, que se pueden
desarrollar en forma lineal o radial. Desde el panel Degradado de color se puede editar la
apariencia de los degradados

Una vez que tenemos la figura pintada y ya hemos dado clic en la herramienta, vamos a
la figura y le damos clic en la figura y nos saldr de la siguiente forma:

Si acercamos el punteo del mouse y podremos ver q aparecen algunas flechitas a lo largo
de la lnea que apareci y se vera de la siguiente manera:

Los que parecen botones sirve para controlar el degradado si se los mueve para la
derecha el degradado se ara para esa direccin como por ejemplo:

Y si se hace del otro lado sea desde la izquierda sucede lo mismo la degradacin se
har desde la izquierda.

2.4 Edicin de smbolos y objetos

2.4.1. Rociar, desplazar, reunir, separar, cambiar tamao, girar
2.4.1.1.

Rociar

La herramienta Rociar smbolo funciona de forma parecida a un rociador de partculas,

permitindole aadir al mismo tiempo un gran nmero de objetos idnticos a la mesa de
trabajo. Por ejemplo, utilice el rociador de smbolos para aadir cientos de hojas de
hierba, flores silvestres, abejas o copos de nieve.
1. Seleccione un smbolo del panel Smbolos y, a continuacin, elija la herramienta
Rociar smbolo.

2. Haga clic o arrastre hasta el lugar en donde desea que aparezcan las instancias
del smbolo.

Adicin o eliminacin de instancias de smbolos en un conjunto existente

1. Seleccione el conjunto de smbolos existente.
2. Elija la herramienta Rociar smbolo y un smbolo en el panel Smbolos.
3. Lleve a cabo uno de los procedimientos siguientes:
o

Para aadir instancias de smbolos, haga clic o arrastre hasta el lugar en

que deben aparecer las nuevas instancias.

Para eliminar instancias de smbolo, mantenga pulsada la tecla Alt

(Windows) o la tecla Opcin (Mac OS) mientras hace clic o arrastra hasta el
lugar del que desea eliminar las instancias.

2.4.1.2. Desplazar
Se pueden utilizar herramientas de smbolos para modificar varias instancias de un
conjunto. Por ejemplo, puede dispersar instancias por un rea mayor mediante la
herramienta Reunir/Separar smbolos o aplicar tintas gradualmente para que parezcan
ms realistas.
Aunque puede utilizar herramientas de smbolos en instancias de smbolo individuales,
resultan mucho ms eficaces cuando se utilizan en conjuntos de smbolos. Cuando
trabaje con instancias de smbolo individuales, la mayora de estas tareas se pueden
llevar a cabo fcilmente mediante las herramientas y comandos que utiliza normalmente
con los objetos habituales.
1. Seleccione la herramienta Desplazar smbolo .
2. Lleve a cabo uno de los procedimientos siguientes:
o

Para mover instancias de smbolos, arrastre en la direccin en la que

desea mover las instancias.

Para traer las instancias de smbolos hacia delante, mantenga pulsada la

tecla Mays y haga clic en la instancia del smbolo.

Para llevar las instancias de smbolos hacia atrs, mantenga pulsada la

tecla Alt (Windows) o la tecla Opcin (Mac OS) y haga clic en la instancia
de smbolo.

2.4.1.3. Reunir/Separar
1. Seleccione la herramienta Reunir/Separar smbolos .
2. Lleve a cabo uno de los procedimientos siguientes:
o

Haga clic o arrastre en el rea donde desea acercar las instancias de

smbolos entre s.

Mantenga pulsada la tecla Alt (Windows) o la tecla Opcin (Mac OS) y haga
clic o arrastre en el rea donde desea alejar las instancias de smbolos
entre s.

2.4.1.4. Cambiar de tamao

1. Seleccione la herramienta Cambiar tamao de smbolo.
2. Lleve a cabo uno de los procedimientos siguientes:
o

Haga clic o arrastre en el conjunto donde desea aumentar el tamao de las

instancias de smbolos.

Mantenga pulsada la tecla Alt (Windows) o la tecla Opcin (Mac OS) y haga
clic o arrastre hasta el lugar donde desea reducir el tamao de las
instancias de smbolos.

Mantenga pulsada la tecla Mays mientras hace clic o arrastra para

conservar la densidad de las instancias de smbolos mientras cambia el
tamao.

2.4.1.5. Girar
1. Seleccione la herramienta Girar smbolo.
2. Haga clic o arrastre en la direccin en la que desea orientar las instancias de
smbolos.

2.4.2. Paletas de: colores, pinceles, smbolos, trazo degradado y

Transparencia
2.4.2.1. Colores
En esta opcin de herramientas se muestra la forma de elegir los colores de diferentes
maneras y la conforman.

Color

Gua de color

2.4.2.2. Pinceles y objetos

Esta herramientas son para modificar el tipo de pincel con el que se dibuja, adems de
tambin poner imgenes que por defecto Illustrator ya las trae incluida por lo cual esas
imgenes no pierden resolucin al hacerlas ms grande o ms pequeas y lo conforman.

Muestras

Pinceles

Smbolos

2.4.2.3.

Transparencia y degradado

Esta herramientas son para ponerle ya sea a un dibujo o imagen una transparencia y
poderla modificar, adems de tambin poder colorear los dibujos con degradado y la
conforman.

Trazo

Degradado

Transparencia

2.4.3. REFORMA DE OBJETOS

2.4.3.1. EFECTOS DE BUSCATRAZOS

Los efectos de Buscatrazos permiten combinar varios objetos utilizando uno de los diez
modos de interaccin. A diferencia de las formas compuestas, no se pueden editar las
interacciones entre objetos al utilizar un efecto de Buscatrazos.
Utilice el panel Buscatrazos (Ventana > Buscatrazos) para combinar objetos en formas
nuevas.

Ilustracin 3. Panel de Buscatrazos

En la fila superior de botones del panel se crean trazados or trazados compuestos por
defecto y formas compuestas slo cuando se pulsa la tecla Alt o la tecla Opcin. Puede
seleccionar los siguientes modos de forma:

Aadir a rea de forma Aade el rea del componente a la geometra

subyacente.
Restar de rea de forma Recorta el rea del componente de la geometra

subyacente.
Formar interseccin con reas de formas Utiliza el rea del componente para

recortar la geometra subyacente como lo hara una mscara.

Excluir reas de formas superpuestas Utiliza el rea del componente para
invertir la geometra subyacente, vaciando reas rellenas y viceversa.

A. Todos los componentes en modo

Aadir
B. Tras aplicar el modo Restar a los
cuadrados
C.

Tras

aplicar

el

modo

Formar

interseccin a los cuadrados

D. Tras aplicar el modo Excluir a los
cuadrados

Opciones del Buscatrazos

Las opciones del Buscatrazos se pueden definir en el men del panel Buscatrazos o
haciendo doble clic en un efecto de Buscatrazos del panel Apariencia.

Precisin Afecta a la precisin con que los efectos del Buscatrazos calculan el
trazado de un objeto. Cuanto ms preciso sea el clculo, ms preciso ser el

dibujo y ms tiempo tardar en generarse el trazado resultante.

Quitar puntos redundantes Elimina los puntos innecesarios al hacer clic en un

botn del Buscatrazos.

Los comandos Dividir y Contornear eliminan ilustraciones sin tintas Elimina los
objetos no rellenos de la ilustracin seleccionada al hacer clic en el botn Dividir o
Contornear.

APLICACIN DE EFECTOS DE BUSCATRAZOS

Los efectos de Buscatrazos permiten crear nuevas formas a partir de los

objetos superpuestos. Para aplicar efectos de Buscatrazos, utilice el men
Efecto o el panel Buscatrazos.

Los efectos de Buscatrazos del men Efecto slo se pueden aplicar a grupos,
capas y objetos de texto. Despus de

aplicar el efecto, todava es posible

seleccionar y editar los objetos originales. Tambin puede utilizar el panel

Apariencia para modificar o eliminar el efecto.

Los efectos de Buscatrazos del panel Buscatrazos se pueden aplicar a cualquier
combinacin de objetos, grupos y capas. La combinacin final de la forma se crea
al hacer clic en un botn de Buscatrazos. Despus, ya no se podrn editar los
objetos originales. Si el efecto resultara en varios objetos, estos se agrupan
automticamente.
APLICACIN DE UN EFECTO DE BUSCATRAZOS CON EL MEN EFECTO

1. Lleve a cabo uno de los procedimientos siguientes:

Agrupe los objetos que desea utilizar y seleccione el grupo.
Mueva los objetos que desea utilizar a una capa diferente e identifique la capa
como destino.
2. Escoja Efecto > Buscatrazos y, a continuacin, elija un efecto del Buscatrazos.
Para volver a aplicar rpidamente el mismo efecto del Buscatrazos, escoja
Efecto > Aplicar [efecto]
APLICACIN DE UN EFECTO DE BUSCATRAZOS CON EL PANEL
BUSCATRAZOS

1. Seleccione los objetos a los que desea aplicar el efecto.

Para aplicar un efecto de Buscatrazos a un grupo o una capa, identifique como
destino el grupo o la capa.
2. En el panel Buscatrazos, haga clic en un botn de Buscatrazos (en la fila
inferior) o pulse Alt y haga clic (Windows) u Opcin y haga clic (Mac OS) en
un botn de Modo de forma (en la fila superior).

RESUMEN DE LOS EFECTOS DEL BUSCATRAZOS

Aadir Define el contorno de todos los objetos como si fueran un nico objeto
combinado. La forma resultante adopta los atributos de pintura del objeto
superior.

 Formar interseccin Define el contorno del rea con la que se superponen

todos los objetos.
Excluir Define las reas no superpuestas de los objetos y convierte en
transparentes las reas que se superponen. Las reas en las que se
superponen un grupo de objetos par se hacen transparentes; cuando se
superpone un grupo de objetos impar, el rea se rellena.
Restar Resta los objetos situados ms al frente del objeto situado ms al
fondo. Puede usar este comando para eliminar ciertas reas de la ilustracin
cambiando el orden de apilamiento.
Menos fondo Resta los objetos situados ms al fondo del objeto situado ms
al frente. Puede usar este comando para

eliminar ciertas reas de la

ilustracin cambiando el orden de apilamiento.

Dividir Separa una parte de la ilustracin en las caras rellenas que la
componen (una cara es un rea no dividida por un segmento de lnea).
Nota: al utilizar el botn Dividir del panel Buscatrazos, puede utilizar las
herramientas Seleccin directa o Seleccin de grupos y manipular las caras
resultantes de forma independiente. Puede optar por eliminar o por conservar
los objetos no rellenos al aplicar el comando Dividir.
Cortar Elimina la parte oculta de un objeto relleno. Elimina los trazos y no
combina objetos de igual color.
Combinar Elimina la parte oculta de un objeto relleno. Suprime los trazos y
combina cualquier objeto aadido o superpuesto relleno con el mismo color.
Recortar Divide una ilustracin en las caras rellenas que la componen y, a
continuacin, elimina todas las partes de la ilustracin que quedan fuera de los
lmites del objeto situado ms al frente. Tambin suprime todos los trazos.
Contornear Divide un objeto en sus segmentos de lnea o bordes. Este
comando es til para ilustraciones en las que es necesario cortar los objetos
que se sobreimprimen.
Nota: al utilizar el botn Contornear del panel Buscatrazos, puede utilizar las
herramientas Seleccin directa o Seleccin de grupos y manipular cada borde
de forma independiente. Puede optar por eliminar o por conservar los objetos
no rellenos al aplicar el comando Contornear.
Mezcla definida Combina colores al escoger el valor ms alto de cada uno de
los componentes de color. Por ejemplo, si el color 1 es 20% cian, 66%
magenta, 40% amarillo y 0% negro y el color 2 es 40% cian, 20% magenta,

30% amarillo y 10% negro, el color fuerte resultante ser 40% cian, 66%
magenta, 40% amarillo y 10% negro.
Mezcla suave Hace que se puedan ver los colores subyacentes a travs de la
ilustracin superpuesta y, a continuacin, divide la imagen en las capas de sus
componentes. Deber especificar el porcentaje de visibilidad de los colores
superpuestos.
Reventar Compensa los posibles huecos entre los colores de una ilustracin.
Para ello, crea una estrecha rea de superposicin (denominada reventado)
entre dos colores adyacentes.
2.4.3.2.

MSCARAS DE RECORTE

Una mscara de recorte es un objeto cuya forma enmascara otra ilustracin de

forma que slo se pueden ver las reas estn dentro de la forma, es decir, la
ilustracin se recorta con la forma de la mscara. La mscara de recorte y los
objetos que se enmascaran se denominan conjunto de recorte. Un conjunto de
recorte se puede crear a partir de una seleccin de dos o ms objetos o de
todos los objetos de un grupo o una capa.
Los conjuntos de recorte a nivel de objetos se combinan como un solo grupo
en el panel Capas. Al crear conjuntos de recorte a nivel de capas, el primer
objeto recorta todos los objetos que se encuentren debajo de l. Todas las
operaciones que realice en un conjunto de recorte a nivel de objetos, como las
transformaciones y los alineamientos, se basan en el lmite de la mscara de
recorte y no en el lmite sin mscara. Una vez que haya creado la mscara de
recorte a nivel de objeto, slo podr seleccionar el contenido de recorte
mediante el panel Capas de la herramienta Seleccin directa o bien aislando el
conjunto de recorte.
Las siguientes pautas se aplican a la creacin de mscaras de recorte:
Los objetos que enmascara se desplazan al grupo de mscara de recorte en el
panel Capas, si es que an no estn all.
Slo los objetos vectoriales pueden ser mscaras de recorte; sin embargo, se
puede enmascarar cualquier ilustracin.

 Si utiliza una capa o un grupo para crear una mscara de recorte, el primer
objeto de la capa o el grupo enmascara todos los subconjuntos de la capa o el
grupo.
Independientemente de los atributos anteriores, una mscara de recorte
cambia a un objeto sin relleno ni trazo.

Para crear una mscara semitransparente, utilice el panel Transparencia para

crear una mscara de opacidad.

Ocultar partes de objetos con una mscara de recorte

1. Cree el objeto que desea utilizar como mscara.
Este objeto es el trazado de recorte. Slo los objetos vectoriales pueden ser
trazados de recorte.
2. Mueva el trazado de recorte sobre los objetos que desea enmascarar en el orden
de apilamiento.
3. Seleccione el trazado de recorte y los objetos que desea enmascarar.
4. Escoja Objeto > Mscara de recorte > Crear.

Para crear un trazado de recorte a partir del rea en la que dos o ms objetos se
superponen, agrupe primero los objetos.

Creacin de una mscara de recorte para un grupo o capa

1.

2.

Cree el objeto que desea utilizar como mscara.

Este objeto es el trazado de recorte. Slo los objetos vectoriales pueden ser
trazados de recorte.
Mueva el trazado de recorte y los objetos que desea enmascarar a una capa o un

grupo.
3. En el panel Capas, asegrese de que el objeto enmascarante se encuentra en la
parte superior del grupo o capa y, a continuacin, haga clic en el nombre de la
capa o grupo.
4. Haga clic en el botn Crear/Soltar mscara de recorte situado en la parte inferior
del panel Capas, o escoja Crear mscara de recorte en el men del panel Capas.
Edicin de una mscara de recorte
1. En el panel Capas, seleccione e identifique el trazado de recorte. Tambin puede
seleccionar el conjunto de recorte y seleccionar Objeto > Mscara de recorte >
Editar mscara.
2. Realice una de las siguientes acciones:

Mueva el trazado de recorte arrastrando el punto de referencia central del

objeto con la herramienta Seleccin directa.

Modifique la forma del trazado de recorte con la herramienta Seleccin directa.
Aplique un relleno y un trazo a un trazado de recorte.
Para seleccionar todos los trazados de recorte de un documento, deseleccione
toda la ilustracin. Escoja Seleccionar > Objeto > Mscaras de recorte.

Edicin de trazados en un conjunto de recorte

Para editar las partes de un trazado que quedan fuera de la mscara de recorte, primero
debe seleccionar el trazado concreto dentro del lmite de la mscara de recorte y, a
continuacin, editar el trazado.
1. Realice una de las siguientes acciones:
Seleccione el trazado en el panel Capas.
Coloque la herramienta Seleccin directa sobre una parte del trazado del interior
de la mscara. Cuando aparezca el contorno del trazado, haga clic sobre l.
Nota: para seleccionar un trazado recortado haciendo clic sobre l, deber hacer clic
en la parte del interior de la mscara.
2. Edite el trazado
Adicin o eliminacin de un objeto de una ilustracin enmascarada

En el panel Capas, arrastre el objeto dentro o fuera del grupo o capa que contiene
el trazado de recorte.

Soltar objetos de una mscara de recorte

Lleve a cabo uno de los procedimientos siguientes:

Seleccione el grupo que contiene la mscara de recorte y elija Objeto >
Mscara de recorte > Soltar.
En el panel Capas, haga clic en el nombre del grupo o capa que contiene la
mscara de recorte. Haga clic en el botn Crear/Soltar mscara de recorte
situado en la parte inferior del panel, o seleccione Soltar mscara de recorte en
el men del panel.

Debido a que se ha asignado a la mscara de recorte un relleno y trazo de

Ninguno, sta ya no es visible hasta que la seleccione o le asigne nuevos
atributos de pintura.