en la parte
inferior.
para dibujar líneas diagonales
que crucen el anillo, dividiéndolo en seis secciones.
Repita el procedimientos para colorear los otros campos.
o Guarde
el documento Ctrl+ S o Cmd + S con el nombre: Tortas barras y mapa
para info nombre y apellido.ai
Eliminando líneas objetos internos
del objeto
o Ahora elimina cualquier fragmento de línea
restante dentro de las secciones con la herramienta “Creador de formas”
(Mayús + M) y Alt + clic (o Opción + clic).
- Con
el objeto seleccionado procede a desagrupar los objetos menú principal: Objeto
> Desagrupar (o usar comando: Mayúscula + Ctrl + G o Mayúscula + Cmd + G)
y con la herramienta
“Selección” (V) vaya
y seleccione
cada
sección cortada desplácelo usando el comando
Objeto > Transformar > Mover…
(
Mayúscula + Ctrl + M o
Mayúscula + Cmd + M).
- Ahora seleccione todos los objetos de la mesa de
trabajo (Seleccionar>Todos) Ctrl+A o Cmd+A
- Y con la herramienta Escala (S) amplie el objeto a 120% dandole doble clic sobre la herramienta.
·
Diseño
del gráfico de pilares (Pillar Chart):
o
Selecciona
la herramienta "Rectángulo" (M) y haz clic en la segunda mesa de
trabajo.
Introduce un ancho de 132 píxeles y una altura de 350 píxeles. Haz
clic en "OK".
o
Con la
herramienta "Selección" (V), redondea las esquinas del rectángulo
arrastrando los pequeños círculos en las esquinas o ajustando el "Radio de
vértice" en el panel "Propiedades" (Ventana > Propiedades) a
aproximadamente 60 píxeles.
Rellene el objeto
o
Duplica el
pilar arrastrando con la tecla Alt (o Opción) presionada.
Utiliza Ctrl + D /
Cmd + D para duplicar varias veces.
o
Alinea y
distribuye los pilares verticalmente (Ventana > Alinear).o
Aplica
colores a los pilares según tu diseño.
Abrir el archivo de los iconos
- ·
Inserte los
iconos del archivo Iconos de apoyo.ai.
o Copie
y coloque iconos relevantes sobre cada pilar y en las zonas del gráfico
de torta. Escala y posiciona los iconos.
o
Alinea la
parte inferior de los iconos utilizando reglas (Ctrl + R / Cmd + R) y la
herramienta "Selección". Centra horizontalmente cada icono dentro de
su pilar.
- Ahora regrese a archivo Iconos de apoyo.ai y selecciona los iconos de la parte superior y los copia
o Ahora ubique cada icono en el lugar que
corresponde.
Agrupa todos los iconos con las formas (Ctrl + G / Cmd + G).
En la mesa de trabajo agrupa cada icono
individualmente (Ctrl + G / Cmd + G).
· De
la segunda mesa de trabajo copia y pega el mapa en la tercera mesa de trabajo.
Asegúrate de que las diferentes regiones o
estados del mapa sean objetos vectoriales individuales para poder interactuar
con ellos en InDesign.
Guarde
el documento Control + S o Comando + S
Definiciones Técnicas:
- Mesa de
trabajo (Artboard): El área de
trabajo en Illustrator que representa una página individual en tu diseño.
- Elipse
(Herramienta): Utilizada para
crear círculos y óvalos.
- Creador
de formas (Herramienta):
Permite fusionar, eliminar o intersecar formas de manera intuitiva.
- Segmento
de línea (Herramienta):
Utilizada para dibujar líneas rectas individuales.
- Buscatrazos
(Pathfinder): Un panel con
herramientas para combinar, dividir y modificar objetos basados en sus
trazados. La función "Dividir" separa los objetos superpuestos en
formas individuales.
- Alinear
(Panel): Permite alinear y
distribuir objetos entre sí o con respecto a la mesa de trabajo.
- Incrustar
(Embed): Al incrustar un
archivo enlazado (como un icono), los datos del archivo se guardan directamente
en el documento de Illustrator, eliminando la dependencia del archivo externo.
Fase 2: Transferencia a Adobe
InDesign y Preparación
- Crear
un nuevo documento en InDesign:
Abre Adobe InDesign y crea un nuevo documento .
El nombre del
archivo es: S09.s2-Infografia Interactiva en PDF nombre y apellido
y las dimensiones deseadas del archivo son:
- Abra el archivo Biblioteca proyecto interactivo.indl
- Copiar
y pegar desde Illustrator:
Selecciona la primera infografía (gráfico circular) en Illustrator (Alt
+ Ctrl + A / Opt + Cmd + A) y cópiala (Ctrl + C / Cmd + C).
- Pégala en
la página de InDesign (Ctrl + V / Cmd + V). Cambie el PUNTO DE REFERENCIA de
la ubicación del objeto vectorial y redúzcalo al 90% con la cadeneta activada.
1.
Después de
haberlo reducido precise su ubicación insertando las siguientes coordenadas:
1.
Repetir
el procedimiento con el grafico de pilares: Selecciona en la SEGUNDA MESA DE TRABAJO el gráfico de pilares en
ILLUSTRATOR (Alt
+ Ctrl + A / Opt + Cmd + A) y cópiala (Ctrl + C / Cmd + C).
2.
Pégala en
la página de INDESIGN
(Ctrl + V / Cmd + V).
3.
Cambie el PUNTO DE REFERENCIA de
la ubicación del objeto vectorial e inserte las siguientes coordenadas.
4.
Repetir
el procedimiento con el mapa: Selecciona
en la TERCERA MESA DE TRABAJO el gráfico de mapa en ILLUSTRATOR (Alt + Ctrl +
A / Opt + Cmd + A) y cópiala (Ctrl + C / Cmd + C).
Añadir
etiquetas de texto:
- Utiliza la
herramienta "Texto" (T) en InDesign para crear cuadros de texto con
las etiquetas para el gráfico circular (ej., "Crecimiento",
"Investigación"). Utiliza la fuente deseada (Filson Pro Heavy en el
ejemplo) y el tamaño (16 puntos). Coloca las etiquetas debajo de cada sección
del gráfico. Asegúrate de que el texto sea blanco.
- Crear
copias de etiquetas: Duplica
las etiquetas de texto (Alt + arrastrar o Opción + arrastrar) y edítalas para
cada sección del gráfico circular.
·
Actualice
las etiquetas con los nombres: INVESTIGACIÓN, CREATIVIDAD, OBJETIVO,
ÉXITO e IDEAS.
Alinear
etiquetas:
- Alinear
etiquetas: Selecciona cada
etiqueta de texto con su icono correspondiente (desagrupando temporalmente el
gráfico circular si es necesario: Mayús + Ctrl + G / Mayús + Cmd + G) y alinea
sus centros horizontales o bordes según sea necesario. Vuelve a agrupar el
gráfico circular (Ctrl + G / Cmd + G).
- En la biblioteca arrastre el objeto 09-Valores de la empresa al lado de la mesa de trabajo.
Definiciones Técnicas:
- Cuadro
de texto (Text Frame): Un
contenedor en InDesign para introducir y formatear texto.
- Vector: Gráficos creados a partir de ecuaciones
matemáticas que definen puntos, líneas y curvas. A diferencia de los gráficos
rasterizados (basados en píxeles), los gráficos vectoriales pueden escalarse a
cualquier tamaño sin perder calidad.
Fase 3: Creación de Interactividad en
InDesign
1.
Crear
objeto multiestado (Multi-State Object) para cifras:
o o Selecciona todos los cuadros de texto con las
cifras. Alinea los textos en centro vertical y centro horizontal
o
Abre el
panel "Estados de objeto" (Ventana > Interactivo > Estados de
objeto).
o Haz clic en el botón “Crear Nuevo estado”.
Esto agrupará las cifras en diferentes estados dentro de un solo contenedor.
o
Renombra
cada estado para que corresponda a la etiqueta del gráfico circular con los
nombres: CRECIMIENTO-info, INVESTIGACIÓN-info, CREATIVIDAD-info, OBJETIVO-info, ÉXITO-info e IDEAS-info. Asegúrate de que los estados estén apilados
verticalmente en la misma posición.
o
Renombra
el objeto multiestado a "Cifras principales de la infografía".
o
Mueve el
objeto multiestado centrado sobre el gráfico circular.
2.
Crear
botones para las secciones del gráfico circular:
o
Selecciona
la primera sección del gráfico circular.
o
Abre el
panel "Botones y formularios" (Ventana > Interactivo > Botones
y formularios).
o
Haz clic
en "Convertir objeto en botón".o
Nombra el
botón "Botón Crecimiento".o
Establece
el "Evento" a "Al liberar o tocar".
o
Añade una
"Acción" de "Ir a estado".
o En “Objeto”, selecciona el Objeto: “Cifras
principales de la infografía” en “Estado”, selecciona el estado
correspondiente a esta sección CRECIMIENTO-info.Crear
apariencia de rollover:
Haz
clic en la pestaña Al pasar sobre el (Rollover). Haz doble clic en el botón para entrar
en el estado de rollover. Cambia el color de la sección del gráfico a negro con
una tinta del 20%.
Vuelve al estado "Normal".
- Repite
este proceso para cada sección del gráfico circular, creando un botón y
vinculándolo al estado de objeto correspondiente.
- Nombra el botón "Botón investigacion".
o Establece el "Evento" a "Al liberar o tocar".
Añade una "Acción" de "Ir a estado".
o En “Objeto”, selecciona el Objeto: “Cifras principales de la infografía” en “Estado”, selecciona el estado correspondiente a esta sección INVESTIGACION-info.
Crear apariencia de rollover:
Haz clic en la pestaña Al pasar sobre el (Rollover). Haz doble clic en el botón para entrar en el estado de rollover. Cambia el color de la sección del gráfico a negro con una tinta del 20%.
Vuelve al estado "Normal".
Repite este proceso para cada sección del
gráfico circular, creando un botón y vinculándolo al ESTADO DE OBJETO
de:
|
NOMBRE:
|
EVENTO
|
ESTADO
|
|
Botón Creatividad
|
Al pasar sobre el objeto
|
CREATIVIDAD-info
|
|
Botón Objetivo
|
Al pasar sobre el objeto
|
OBJETIVO-info
|
|
Botón Éxito
|
Al pasar sobre el
objeto
|
ÉXITO-info
|
|
Botón Ideas
|
Al pasar sobre el
objeto
|
IDEAS-info
|
3.
Crear
efecto de sombra interior (opcional): Selecciona cada sección del gráfico circular y aplica un "Sombra
interior" (Objeto > Efectos > Sombra interior).
Ajusta los
parámetros (opacidad, desplazamiento) para crear un efecto visual de
profundidad.
Prueba del botón
·
Vaya al panel de Previsualización
de interactividad de EPUB en el menú Ventana>Interactivo> Previsualización
de interactividad de EPUB para obtener una vista previa y realizar la prueba
de los botones interactivos.
4.
Crear
objetos multiestado para los switches de los pilares:
Vuelva al
panel Biblioteca proyecto Interactivo y arrastre a la mesa de trabajo el
grupo de objetos 05-Innovación
Tome las
cajas de texto con el subtítulo de CRECIMIENTO, y centre horizontalmente
como verticalmente el objeto usando el panel Alinear (Ventana>Objeto y maquetación>
Alinear)Cambie los
colores de los textos usando el panel de Muestras.Repita los
procedimientos con las cajas de texto.
Actualice los colores de los
iconos como se aprecia en la imagen. Agrupe la
figura del “icono” con el objeto “circulo contenedor”.
·
Duplique
el icono con la tecla Alt u Opt y ubíquelo en la parte superior
del pilar.
o
Para cada
pilar, selecciona el icono inferior (estado "apagado") y el icono
superior (estado "encendido") manteniendo presionada la tecla Mayús.
o
En el
panel "Estados de objeto", haz clic en "Convertir selección en
objeto multiestado".
o
Renombra
el objeto multiestado (ej., "Switches Crecimiento").
o
Renombra
los estados a "Apagado" (icono inferior) y "Encendido"
(icono superior), asegurándote de que "Encendido" esté debajo de
"Apagado" en el panel.
o
Repite
para los otros pilares.
5.
Convertir
títulos de pilares en botones (sin acción):
Convertir
títulos de pilares en botones (sin acción):
1.
Selecciona
cada título de PILAR (tanto el blanco como el azul) y
conviértelos en botones en el panel “Botones y formularios”.
2.
Nombra los
botones: “Información Switch Crecimiento”. Activa la opción “Oculto
hasta la activación” para los botones de información (blancos). No apliques
ninguna acción a estos botones por ahora.
3.
Nombre del botón: “Información Switch Investigación”.
Activa la opción “Oculto hasta la activación” para los botones de
información (blancos). No apliques ninguna acción a estos botones por ahora.
4.
Nombre del botón: “Información Switch Creatividad”.
Activa la opción “Oculto hasta la activación” para los botones de
información (blancos). No apliques ninguna acción a estos botones por ahora.
5.
Nombre del botón: “Información Switch Ideas”.
Activa la opción “Oculto hasta la activación” para los botones de
información (blancos). No apliques ninguna acción a estos botones por ahora.
Crear
interactividad para los switches de los pilares:
o
Botón
"Apagado":
Selecciona el icono inferior del switch de un pilar (dentro del objeto
multiestado, doble clic para entrar). Conviértelo en un botón (ej., "Botón
Apagado Crecimiento"). Establece el evento a "Al soltar o
tocar". Añade la acción "Mostrar/Ocultar botones y formularios".
En "Visibilidad", muestra el botón de información correspondiente
("Información Switch Crecimiento") y oculta el título azul
correspondiente ("Título Azul Crecimiento"). Añade también la acción
"Ir a estado" al objeto multiestado del switch, cambiando al estado
"Encendido". Crea una apariencia de rollover para el botón
"Apagado" (ej., cambiar el color del icono a azul).
o
Botón
"Encendido":
Selecciona el icono superior del switch del mismo pilar (dentro del objeto
multiestado). Conviértelo en un botón (ej., "Botón Encendido
Crecimiento"). Establece el evento a "Al soltar o tocar". Añade
la acción "Mostrar/Ocultar botones y formularios". En
"Visibilidad", muestra el título azul correspondiente ("Título
Azul Crecimiento") y oculta el botón de información ("Información
Switch Crecimiento"). Añade también la acción "Ir a estado" al
objeto multiestado del switch, cambiando al estado "Apagado".
Definiciones Técnicas:
·
Objeto
multiestado (Multi-State Object): Un contenedor interactivo que permite mostrar diferentes estados de un
grupo de objetos basados en la interacción del usuario.
·
Botones
y formularios (Panel): Permite
convertir objetos en botones interactivos y asignarles eventos (acciones del
usuario) y acciones (respuestas del programa).
·
Evento: Una interacción del usuario con un objeto
interactivo (ej., clic, rollover).
·
Acción: La respuesta del programa a un evento (ej., ir
a un estado, mostrar/ocultar objetos).
·
Rollover: Un estado visual de un botón que se activa
cuando el cursor del ratón se mueve sobre él.
·
Al
soltar o tocar (On Release or Tap): Un evento que se activa cuando se suelta el botón del ratón o se
levanta el dedo de la pantalla táctil.
·
Ir a
estado (Go To State): Una
acción que cambia el estado visible de un objeto multiestado.
·
Mostrar/Ocultar
botones y formularios (Show/Hide Buttons and Forms): Una acción que controla la visibilidad de
otros botones y objetos en el documento.
·
Oculto
hasta la activación (Hidden Until Triggered): Una propiedad que mantiene un objeto invisible hasta que una acción lo
activa.
Fase 4: Publicación Online y Prueba
1.
Previsualizar
interactividad: Utiliza el
panel "Previsualización de interactividad EPUB" (Ventana >
Interactivo > Previsualización de interactividad EPUB) para probar la
funcionalidad de los botones y los cambios de estado dentro de InDesign.
2.
Exportar
online (Publicar online): Ve a
Archivo > Publicar online.... Configura las opciones de publicación (título,
descripción, etc.) y haz clic en "Publicar". InDesign generará una
versión online interactiva de tu documento.
3.
Probar
en un navegador web: Abre el
enlace de la publicación online en un navegador web para verificar que la
interactividad (rollover, cambio de estado de los switches) funcione
correctamente.
Palabras Clave (en inglés):
1.
Adobe
Illustrator, Adobe InDesign, interactive infographics, multi-state objects,
buttons, forms, rollover effect, on/off switch, show/hide, publish online, web
browser, vector graphics, page layout, user interaction.
