Este artículo se centra en la creación de una edición digital interactiva, dirigida principalmente a estudiantes del taller Diseño de Ediciones Digitales. Se autoeditó el contenido aprendido durante las clases expuestas en la wiki, para la realización de una edición digital interactiva con un aprendizaje a profundidad y con un público objetivo de los mismos estudiantes del Taller Diseño de Ediciones Digitales 2022. El objetivo principal es profundizar y guiar los contenidos académicos para la producción de distintas ediciones digitales, abarcando desde la evolución del libro y los derechos de autor hasta las instrucciones básicas para la creación de un PDF interactivo o EPUB.
Recopilación y Estructura de la Información
Primeramente se realiza la recopilación de información para los contenidos de la edición, en donde se indaga sobre los temas faltantes no recopilados en la wiki personal. Luego se establece la tabla de contenidos o índice, la cual contendrá la edición a ejecutar, en esta se contemplan tres temas principales: publicaciones digitales, ediciones digitales y programas. Se desarrollo un aprendizaje desde lo general a lo particular, debido a que se planteo confeccionar una tabla de contenido con tres temas a profundizar. Se realiza las pertinentes correcciones mencionadas en la clase anterior sobre el índice para seguir ajustando los títulos para una mayor exactitud y la continuidad entre los contenidos de las páginas.
Diseño Gráfico y Tipografía
La línea gráfica predominante en toda la edición se destaca por la utilización de la figura geometría hexagonal, por lo cual las diagramaciones de las páginas maestras son en base a la implementación de este elemento dispuesto en la lámina, además de ser planteadas desde las interacciones a presentar para el usuario. Se ejecutaron los cambios en cuanto a distribución de los número indicativos de los temas, el cambio del color amarillo para el tema 3 y la continuación de los siguientes capítulos en base a las 4 plantillas presentadas para la composición total de la edición. La paleta de colores ejecutado logra plasmar colores pasteles en contraste con colores intensos dentro de una misma gama. Para los textos no se implementa el negro puro, debido a que no se recomienda su uso para la lectura en pantalla, por lo cual se utiliza en un 80 % del matiz. La paleta está dividida en 3 colores base que tienen un alto nivel de contraste con el color más oscuro y con los colores más saturados de la gama.
Las familias tipográficas utilizadas son la Ubuntu para los títulos y subtítulos, en Medium y Bold en tamaño 58 pt para titulares y 40-25 pt para subtítulos, y Lato en estilo Regular en tamaño 20 y 18 pt para el cuerpo de texto. Se emplea la tipografía Ubuntu Medium, la cual pertenece a una familia tipográfica OpenType, diseñada con un estilo sans-serif humanístico. Se utiliza la tipografía Lato Regular, la cual es una tipografía sans-serif humanista que es implementada en más de 9,6 millones de sitios web. Las palabras dentro de los textos de contenido de la edición, no se separaran en un salto de línea dentro de un párrafo. La propuesta de visualización de pantalla que propone subdivisiones del contenido presentada en pop up se dictamino que cada burbuja de dialogo sería de dos a tres líneas de diez a quince palabras como máximo.
Diagramación y Navegación
Ocho cuadrantes: esta diagramación se emplea en las páginas de comparar información y las portadas de los capítulos. Tres tercios: esta diagramación se emplea en las páginas con explicación de dos conceptos o distribución de hexágonos más dispersos, para que así estén contenido dentro de los tercios. Se proporciona un botón de regreso a la página de índice, para facilitar la navegación en la edición. Este se conforma por la misma figura representativa de la edición, encontrada en la portada. Los botones incorporados varían el color según el capítulo en donde se encuentre, a manera excepcional el botón de home no cambia en ninguna página.
Tutoriales Interactivos
Se comienza con la realización de tutoriales informativos para poder guiar al lector de manera practica lo aprendido, para esto se propone una nueva plantilla para proyectar las páginas con mayor información y para los vídeos tutoriales, debido a que el usuario necesita una mayor detención en estas páginas. Estas plantillas tienen relación con la temática tratado a lo largo de la edición, en la cual se diseña un ventana de la plataforma Youtube y Adobe Digital Editions para poder de manera mucho más dinámica e interactiva, entender el contenido expuesto.
Creación de un Fanzine en InDesign: Guía Paso a Paso
Para crear un FANZINE (que en este caso será un un FOTOLIBRO) necesitamos, en primera instancia, contenidos de texto, imagen, ilustración y todo lo relacionado a un tema que nos permita plasmar un trabajo editorial. Trabajaremos, de acuerdo al caso, con una secuencia fotográfica que pueda generar un relato y que sea coherente a un concepto.
Paso 1: Preparación de los Archivos en Photoshop
Para crear nuestro FANZINE iniciaremos con Adobe Photoshop como creador y editor de los archivos gráficos base. Para ello iniciamos el programa y seleccionamos pestaña Archivo / Nuevo / Documento (Podemos utilizar Ctrl + N). Aparecerá el cuadro de selección de creación de documento. Seleccionamos IMPRIMIR (1) y formato OFICIO (2), si no aparece el formato establecido podemos agregar las medidas especificadas de 33 cms. de ancho y 21,6 de alto con resolución 300 pixeles por pulgada (sin marcar mesas de trabajo(3)), color RGB (4) y contenido de fondo transparente (5). Lo demás puede quedar tal como se ve por defecto.
Aparecerá un formato de hoja horizontal y deberán dividirlo en 2, sacando una guía de la regla izquierda (6) con la herramienta MOVER usando el atajo de teclado “V” (7). Las guías son líneas de marcado para crear límites y grillas de construcción gráfica, se sacan desde las reglas en la parte izquierda y superior del paño de trabajo y para activar las REGLAS pueden utilizar el atajo de teclado Ctrl + R.
El formato que visualizamos finalmente es una revista abierta, en la cual la página izquierda está ubicada a la izquierda de la línea divisoria y la página derecha a la derecha de la línea divisoria. Trabajaremos con la portada de la revista y para ello marcaremos con un marco rectangular y aplicaremos atajo de teclado “M” (10) seleccionado solo la página derecha del formato y llenándola de color blanco o negro (11) con BOTE DE PINTURA “G”.
La imagen resultante debes cortarla a la mitad usando la herramienta RECORTAR usando atajo de teclado “C”, cuando la zona de corte esté definida se aplica ENTER para recortar, quedando como resultado solamente la portada (13), que debería medir 16,5 cms. de ancho y 21,6 cms. de alto. Aplicamos atajo CTRL + S para guardar la imagen actualizada del corte.
Paso 2: Diseño en Adobe InDesign
Ya teniendo las páginas y contenidos a diagramar en nuestro diseño editorial listo iniciaremos con Adobe InDesign. Seleccionamos pestaña Archivo / Nuevo / Documento (Podemos utilizar Ctrl + N). Aparecerá el cuadro de selección de creación de documento. Seleccionamos las medidas que debería medir 16,5 cms. de ancho y 21,6 cms. de alto (las de nuestra página modelo en PSD) (14), agregaremos 10 páginas (15) y dejaremos las demás especificaciones tal cual vienen por defecto. Nuestra mesa de trabajo debería verse así.
En la PESTAÑA PÁGINAS haremos doble click en la PÁGINA 1 (18) que será nuestra portada. Esto ampliará la página y en ella crearemos un MARCO RECTANGULAR con atajo teclado “F” (19) que cubrirá toda la página. Mantenemos el MARCO RECTANGULAR seleccionado con HERRAMIENTA SELECCION usando atajo teclado “V” y vamos a pestaña Archivo / Colocar… y seleccionamos la imagen de portada creada. La imagen se colocará automáticamente y ordenaremos su encaje haciendo click derecho sobre la imagen y seleccionando opción Encaje / llenar marco proporcionalmente… de igual manera pueden probar las otras opciones de encaje para experimentar. Con ese procedimiento pueden crear contenido para todo su FANZINE.
Paso 3: Exportación a PDF
Y en el PANEL DE CONFIGURACIÓN DE PDF seleccionar las siguientes características… Todas las páginas por PLIEGOS (20) y Opciones / Optimizar para en vista rápida en web (21), las demás opciones podemos dejarlas por defecto.
El Proceso de Color en InDesign
Creación de una Paleta de Colores
- En el panel MUESTRAS seleccionaremos la VISTA EN MINIATURAS (1) y posteriormente crearemos una carpeta nueva (2) dándole un nombre.
- Mediante el uso de CUENTAGOTAS cliquearemos zonas de color de nuestra imagen referente.
- Al cliquear el color piel notaremos que el color de RELLENO en el panel de herramientas cambia (1) y en esa instancia podemos tomarlo con el puntero y arrastrarlo a nuestro grupo de colores.
- Ya teniendo todos los colores listos comenzamos la creación de zonas de color. Seleccionamos la herramienta PLUMA (1) y comenzamos a marcar las zonas de color intermedio en nuestra capa llamada COLOR.
Exportación y Visualización
Se presenta la demostración y registro del contenido total de la edición, a través del PDF Interactivo. Este proyecto está planificado en formato de salida de EPUB y PDF Interactivo de InDesign,por lo cual para poder visualizar el contenido se recomienda descargar Adobe Digital Editions, la aplicación Lithium o en su defecto otro lector de EPUB para el dispositivo empleado.
Se puede visualizar que el lector de EPUB Adobe Digital Editions para PC, es más dificultoso el uso para el lector, debido a que al momento de interactuar con los botones y posteriormente seguir con la siguiente página, esta se devuelve a la página de índice,causando una lectura más lenta. En cuanto a la aplicación para dispositivos móviles Lithium, otorga una mayor interacción y facilidad de navegación al usuario,pudiendo cambiar de página a través del scroll del propio celular o por medio del botón Home, pero este lector de EPUB posee un fallo al momento de la hacer clic en algún lado de la página, debido a que se realiza un zoom al elemento presionado, ocasionando que el lector se salga de la lectura.
Ejemplo de Diseño de Portada de Revista
Para esta composición se pensó hacer una revista que hable de la cultura y el arte en la Región de Valparaíso. Se utilizó como nombre el concepto que se ha trabajado en toda la unidad, se creó un logo con el blanco interno de las letras relleno, creando un contraste en si mismo, se buscó una fotografía del Teatro Municipal Viña del Mar, considerándolo como un lugar icónico que acoge diferentes expresiones artísticas.
Se creó un lema de revista "Arte de la quinta", apelando al lenguaje cotidiano y se buscaron 3 noticias para hacerlas titulares. El titular principal que se presenta en itálica es sobre la Bienal Internacional de Artes Valparaíso, como evento de mayor relevancia e impacto para la Región, luego, los dos titulares secundarios realzan otros eventos culturales que están sucediendo actualmente. Todos con sus respectivas bajadas de título.
Proceso de Creación
- En primer lugar se utilizó el programa Illustrator, con la Herramienta texto se escribió el concepto y se ajustaron los atributos, cambiando la tipografía, tamaño, entre otros. Con la Herramienta Elipse se crearon las formas para cubrir el blanco interno de la letra "O" y "R" y con la Herramienta Polígono se creó un triángulo que cubrió la de la letra "A". Se hicieron pruebas de color y se exportaron dos versiones para probar en los otros programas.
- Se ocupó el programa Photoshop para oscurecer la imagen de fondo, se agregó una capa con el color uniforme negro y se redujo la opacidad. El proceso anterior se realizó con dos fotografías porque durante el proceso de creación de la portada se cambió de la fotografía de Valparaíso a una del Teatro Municipal Viña del Mar, priorizando un acabado más elegante, formal y serio.
- Con InDesign se agregaron los textos y detalles finales de la portada, se utilizaron diferentes capas, guías y columnas, manteniendo los márgenes establecidos al crear el documento. Con la Herramienta Marco rectangular se colocaron el logo, imagen de fondo y código de barras. Con la Herramienta Texto se crearon los titulares, las bajadas, la fecha y el lema de la revista, ajustando sus atribuciones según la importancia y el acabado que se quería lograr. Se definió una tipografía para todos los titulares y bajadas, variando su tamaño, espesor y si estaba escrito totalmente en altas o no.
Elementos Importantes en una Portada de Revista
- Logo o cabecera: En este caso de color amarillo, con la fuente de mayor tamaño, ubicado en la parte superior abarcando casi todo el ancho del documento. Es el elemento más importante porque le da la identidad a la marca.
- Titular principal con bajada: Se identifica porque tiene tipografías diferentes y la palabra "COCINAS" escrita solo en altas, con un mayor tamaño.
- Titulares secundarios: En este caso se presentan dos, utilizan la misma tipografía con los mismos atributos, dando a entender que tienen el mismo grado de importancia, además incluyen una bajada en la misma tipografía pero con menos espesor y menor tamaño. Los titulares son concisos y despiertan la curiosidad del lector.
- Información fija: En este caso muestra los países en dónde se encuentra la revista y el precio en pesos colombianos.
- Imagen principal: En este caso la revista explica la imagen como el oasis del arte y la cultura en Bogotá. Las imágenes pueden ser ilustraciones o fotografías, dependen del tipo de publicación.
TAG: #Trabajo
