Plataforma digital para el comic chileno

De Casiopea



TítuloPlataforma digital para el comic chileno
Tipo de ProyectoProyecto de Titulación
Período2017-2017
AsignaturaTaller de Diseño Gráfico Titulación 1
Del CursoTaller de Diseño Gráfico Titulación 1
CarrerasDiseño, Diseño Gráfico, Interacción y Servicios
Alumno(s)Tomás Andres Ortega Araya
ProfesorHerbert Spencer, Katherine Exss

Investigación

Breve línea de tiempo del comic

Las tiras de prensas nacen en 1895 en una página de los diarios dominicales de estados unidos, el desarrollo del género llevó a la división de éste en distintos subgéneros según su temática y personajes. Con su desarrollo narrativo, fueron naciendo historias que siguen una línea temporal, lo que permite un desarrollo del conflicto que duraba más de una sola tira. Este suceso derivó a que los autores buscarán formas de tener a sus lectores a la espera de cada edición, y al mismo tiempo tratar de atraer nuevos lectores, sin que se pierdan dentro de la secuencia temporal. Una de las ideas narrativas fue crear personajes que envejecen con el pasar del tiempo, al igual que los lectores.

Tira publicada por bud fisher uno de los precursores dentro de la tira periódica. Tira publicada en el Chicago Tribune Syndicate, hecha por Frank King, da pie a las tiras episódicas.

La revista europea nacen a principios del siglo XX, las tiras comienzan a tener mayor autonomía, se separan del periódico y adquieren la viñeta como un elemento secuencial marcado, las revistas constan de entre 4 y 8 paginas y estan impresas a 2 tintas, los dibujos siguen siendo más que acompañantes del texto, y es una propuesta de los diarios que apuntan a un público infantil.

Revista española tbo que nació en 1917. Portada.Revista española tbo que nació en 1917. Interior a dos tintas.

El comic book hizo su debut en 1929, con la publicación de The Funnies, la revista contenía tiras de ediciones anteriores de periódicos, números más adelante contendría numeros originales, la revista duró 31 ediciones y dejo el espacio abierto para el comienzo de otros book comics. Con la aparición de Action comic (superman) y Detective comic (batman), empiezan a aparecer historias autoconclusivas de vaqueros y superhéroes. Este modelo da pie inicial a una consolidación del cómic como un género narrativo, que pueda salir de los temas humorísticos e infantiles. En los años 70 y con el apoyo de artistas europeos y sus ideales, el cómic comienza el rumbo de historias más adultas.

the funnies es el primer comic book en imprimirse en 1929. Portada.the funnies es el primer comic book en imprimirse en 1929. Viñetas.

Action comic es el comic book que da pie a historias de superhéroes, junto con detective comic dan vida a la era de oro del cómic. Portada. Action comic es el comic book que da pie a historias de superhéroes, junto con detective comic dan vida a la era de oro del cómic. Viñetas.


Detective comic junto con action comic fueron los que cambiaron la temática al comic book y a tira normal. Portada. Detective comic junto con action comic fueron los que cambiaron la temática al comic book y a tira normal. Viñeta.

El álbum da comienzo en europa a la par con el comic book, el cual siguió una misma línea, con la diferencia que en europa dio pie a la experimentación de distintas temáticas, y narrativas, que junto con el nacimiento del comix, potenció su capacidad de tratar temas para un público adulto. Este género dio el primer pie para las novelas gráficas.

Las aventuras de tintín, fue una de las precursoras del género, alcanzando rápidamente ediciones en otros idiomas.Portada. Las aventuras de tintín, fue una de las precursoras del género, alcanzando rápidamente ediciones en otros idiomas.Viñeta.


El nacimiento del comix underground, en los años 60 este tipo de cómic,tenía índoles político, con ideologías fuertes, lo que apuntaba a tener un público adulto, con pensamientos críticos. De esta forma cambió el estereotipo que se tenía de la narrativa del cómic, el cual hasta ese momento se dedicaba a hacer historias infantiles y de humor.


Zap una revista de Robert Crumb, uno de los autores más importantes del comix estadounidense. Portada. Zap una revista de Robert Crumb, uno de los autores más importantes del comix estadounidense. Viñeta.

Paralelo al periodo del comix, nacen las novelas gráficas, un género del cómic mucho más complejo, el cual en un principio fueron historias literarias adaptadas para ser dibujadas, y más adelante fueron comic con una historia bien escrita.


Contrato por dios, la primera novela gráfica, está consilia los elementos narrativos con los gráficos, por lo mismo entra dentro de esta categoría. Portada. Contrato por dios, la primera novela gráfica, está consilia los elementos narrativos con los gráficos, por lo mismo entra dentro de esta categoría. Viñeta.

Entre las décadas de los 60 y 90 (o hasta el dia de hoy), se desarrolla un formato de mini comic, este consta de las mismas características de un comic, pero en tiradas cortas, normalmente son por un único autor y tiene un público muy reducido. tiene una producción más bien amateur.

shigai-sen comic extraído del sitio subcultura.es, sitio que aloja comic amaterur. Portada. shigai-sen comic extraído del sitio subcultura.es, sitio que aloja comic amaterur. Viñeta.

Lectura en el entorno digital

La aparición de un nuevo sostenedor de la lectura modificó por completo la forma en que pensamos un libro, cambió la realidad en que el autor debe escribir el libro y la realidad en el que el lector lo recibe, la forma en que se debe editar el contenido es completamente nueva. La forma en que se debe tratar el contenido textual se basa en cómo el lector debe adaptarse a las nuevas objetos de lecturas (computador, tablet, smartphone) y los intermediarios que existen para entrar en el contenido.

La lectura original del texto se ve afectada, dado que el lector puede leer un mismo texto en distintos dispositivos, lo que afecta completamente en el contexto de la lectura. Esto aumenta más aún cuando las interfaces de los distintos dispositivos son distintos y tienen distintas funcionalidades. para poder diseñar un interfaz hay que tener claro muchos factores, dado que no es solo necesario saber que se lee, sino también donde y como se lee.

¿Qué sabemos acerca de la forma en que interactuamos con los nuevos soportes que sustituyen a los medios convencionales? ¿Cómo se representa y gestiona el conocimiento y la experiencia del pasado a través de los nuevos medios? ¿Cuáles son las formas en que nos relacionamos con estos objetos de conocimiento y la información que contienen? ¿Qué impacto reviste la confluencia de formatos y medios en la experiencia de lectura? ¿cuáles son los comportamientos de estos usuarios en entornos digitales? ¿Qué tipo de recursos necesitan, qué recursos utilizan, por qué se produce el rechazo o aceptación de unos en detrimento de otros?. ¿Al cambiar la tecnología y el proceso se modifica el tipo de lectores? ¿Es decir, qué elementos de los libros impresos son valiosos o incluso imprescindibles en el nuevo contexto digital, y qué nuevas funciones son lo suficientemente importantes para lectores e investigadores y susceptibles de desarrollo? algunas de las preguntas a las que es preciso responder para articular una teoría sólida de la lectura digital.

El cómic en el entorno digital

El cómic digital visto desde su comienzo (2002)

Desde que se empezó a dibujar el comic de manera completamente digital, apareció el concepto del contenido como sólo información, sin un formato físico que lo contuviera, estaba libre a las posibilidades.

Comenzando por el precio del producto este bajaría considerablemente, dado que el precio por impresión ya no estaría, lo que se estimaba que fuera una décima parte de su precio original. Por otro lado igualará la competencia de las grandes industrias de comic ( DC, Marvel) con los nuevas editoriales pequeñas, dado que estarían jugando en un mismo territorio en el que el mercado decidirá quien está a la cabeza. dada las nuevas libertades que ofrece el formato digital, se habla de comic que contengan imágenes en movimiento y sonido que acompañen a la lectura, se hace la comparación de estos con los dvds que contiene escenas extras, comentarios de autores. componer mini videos dentro la lectura.

Esto hace aparecer la discusión de hasta qué punto un cómic es comic, y cuando esto se convierte en otra cosa. dicha discusión no tiene mayor repercusión, dado que en realidad el cómic mientras mantenga su integridad narrativa, y a esto me refiero que se respeten la diagramación y concepción de la página inicial, y sobre esta se agreguen distintos elementos multimedia, que derivarían de la misma página.

El cómic se basa en la sucesión de viñetas, cada viñeta es un periodo de tiempo y no solo un solo momento, cada viñeta puede contener texto, dibujo y representaciones gráficas de sonido y movimiento, en su conjunto cada viñeta configura la serie de sucesos que componen la página o doble página del cómic. por la variedad de elementos que contiene el cómic, no es extraño para algunos ver en versiones digitales, movimientos y sonidos.

La mayor problemática existe al buscar la plataforma que permita la lectura del cómic, dado que esta se debe adaptar a la calidad y tamaño de la pantalla. La solución más obvia es tomar la doble página y adaptarla al ancho de la pantalla, el problema que nace de esto, es la lecturabilidad de globos de textos muy pequeños, existen navegadores de cómic que permiten ver viñeta por viñeta, lo que ocasiona la pérdida de la noción de la espacialidad de la viñeta, iguala la lecturabilidad perdiendo los rangos de importancia y además la composición de la doble página. bajo este mismo sistema de viñeta a viñeta, existe un sistema que hace cruzar las viñetas por la pantalla de manera automática, quitándole al lector la posibilidad de tener su propio ritmo de lectura.

Casos referenciales plataformas de cómic digital:

Comicxology: https://www.comixology.com/Scott-Pilgrim-Free-Comic-Book-Day-Story/digital-comic/3135

Lezhin: https://www.lezhin.com/en

Subcultura: http://subcultura.es/

Gonvisor (visor de comic): http://www.gonvisor.com/

Madefire app: http://www.madefire.com/

Phallaina app: http://phallaina.nouvelles-ecritures.francetv.fr/

Tapas app: https://tapas.io/

Comic Screen app (visor de comic): https://play.google.com/store/apps/details?id=com.viewer.comicscreen

Casos de estudio

El estudio se realizará dentro de 8 casos que están dentro del web-comic, y otros 2 casos que tienen otro tipo de calificación. El análisis se aplicará en base a los siguientes criterios, en cada uno de los casos.


Género: esta opción habla de la extensión narrativa y la relación entre el texto y la imagen del cómic, el cual lo dividi en 3 opciones:

La tira, que tiene una extensión narrativa muy breve, y su diagramación se basa en la separación clara entre el texto y la imagen.

El cómic, tiene una mayor extensión, que va desde 13 páginas hasta (45 aprox), esta puede ser episódica y autoconclusiva. tiene un carácter secuencial muy marcado, en el que sucedes una interrelación de las viñetas.

La novela gráfica, es el formato de mayor extensión narrativa, puede tener varios episodios en una sola edición, esta no necesariamente debe tener una interrelación de las viñetas, el carácter de relación de la narración y la imagen es mucho más abierto.

Contexto: habla en un breve texto sobre la información temporal, espacial o conceptual que puede dar un carácter distintivo al caso.

Soporte: Cuenta sobre el soporte original del comic. Para qué fue pensado su formato y su diagramación.

Método de lectura en pantalla: Habla sobre los gestos que se deben hacer para poder acceder a la información.

Tamaño tipográfico (aprox): Un dato aproximado del tamaño en pixeles de la fuente utilizada en los globos de texto.

Proporción en la pantalla pc y smartphone: Datos de proporción que permiten visualizar la apropiación de los formatos digitales.

Tipo de viñeta: Esquemas y descripción, que permiten categorizar los distintos tipos de vinculación secuencial en los formatos.

Diagramación: Esquemas y descripción, que permiten ver la geometría detrás de la composición del caso.

Tipo de multimedia y ¿para que?: Datos que permiten saber qué tecnologías multimedia se están aplicando a la lectura y cuál es su función.

Gesto de lectura: Dato extraído del eye tracking , que permite ver cual es el viaje de lectura que hacen varios usuarios frente al caso en específico. Permite ver la continuidad de la lectura.


Caso 1

Comicejemplo11.gif

http://thecomicfome.cl/post/152648332605/chuuuuta-c%C3%B3mic-fome-para-los-m%C3%A1s-cumplea%C3%B1eros-de

Género: tira

Contexto: Es una tira extraída del sitio the comic fome, un sitio que alberga una serie de tiras de ilustradores chilenos, en su gran mayoría son tiras con imágenes estáticas, por eso esta tira está compuesta por gif que enfatizan la presencia de esta.

Lecturatocomic111.jpg Lecturacomic1movil1.jpg


Soporte: Digital.

Método de lectura en pantalla: scroll vertical (Dentro de su contexto).

Contextocomic11.jpg Contextocomicmovil11.jpg

Proporción en la pantalla pc: ⅓ (aprox) del ancho.

Proporción en pantalla smartphone: ancho completo

Tipografía: Es una tipografía handwriting display, que funciona en este tipo de viñeta dado que el texto ocupa una importante porción en la composición.

Tipografiacomic11.gif

Diagramación: La diagramación de las viñetas se basa en una matriz simple cuadrada, en las que cada viñeta ocupa una porción equivalente. El texto está restringido a la parte superior de la viñeta. las viñetas realizan la secuencia de una situación normal, a una situación de alta tensión. normal, nerviosismo, alto impacto, y climax.

Esquema de composición de viñetas:

Caso1viñetas1.jpg

Esquema de composición de elementos:

Caso1composicion1.jpg

Tipo de multimedia y ¿para que?: Animación de tipo gif, para enfatizar la presencia de la tira en su contexto. Resaltarla de sus pares. Gesto de lectura:

Caso 2

Presidentehamster1.png

hamster president, mix entre formato largo y gif

Género: tira

Contexto: Expuesto en formato blog (tumblr) en el que mientras el usuario baja, se van cargando imágenes, su formato largo permite guardar la conclusión de la tira oculta, y es expuesta a medida que se hace scroll.

Contextocomic21.jpg Contextocomicmovil21.jpg

Soporte: Digital.

Método de lectura en pantalla: scroll vertical.

Lecturatocomic21.jpg Lecturacomic2movil1.jpg


Proporción en la pantalla pc: ⅓ (aprox) del ancho

Proporción en pantalla smartphone: ancho completo

Tipografía: La tipografía es handwriting display, la tipografía se presenta en bajas, no existe una línea base aparente, aunque funciona bien por la porción considerable dentro de la viñeta.

Tipografiacomic21.png

Diagramación: las viñetas se ordenan verticalmente de igual forma, cada viñeta en su interior contiene un fondo formado por los personajes, el método de narración hace aparecer la densidad de información en cada cuadro. las viñetas ocupan el recurso secuencial, utilizando también el factor de lo desconocido a través de la cantidad de viñetas que es capaz de mostrar el navegador.

Esquema de composición de viñetas:

Caso2viñetas1.jpg

Esquema de composición de elementos:

Pcaso2composicion1.jpg

Tipo de multimedia y ¿para que?: animacion gif, es utilizada para enfatizar acciones, y sonidos dentro de la narración.

Caso 3

Caso3wally1.png

Género: cómic

Contexto:' es un formato para ser impreso, traspasado a un archivo de compresión que contiene imágenes de las doble páginas del cómic, en este caso la imagen tiene cortada los bordes blancos ya que harían la imagen más grande y menos adaptable a dispositivos.

400px Contextocomicmovil31.jpg

Soporte: impreso.

Método de lectura en pantalla: pagina a pagina (click).

Lecturatocomic31.jpg Lecturacomic3movil1.jpg

Proporción en la pantalla pc: 2/3 (aprox) del ancho

Proporción en pantalla smartphone: 2 anchos completo, solo se puede ver una página a la vez.

Tipografia: La tipografia es handwriting, solo se presenta en altas, y en un espacio reducido, la proporción en la pantalla es pequeña, presenta problemas de legibilidad que es acentuado por no tener altas y bajas. (En el caso digital)

Tipografiacomic31.png

Diagramación: Las viñetas y las ilustraciones están inclinadas con el fin de apuntar a la esquina inferior derecha de la segunda pagina, esto para lograra la continuidad a la siguiente pagina, y de esta forma no cortar el ritmo de lectura. las viñetas son de tipo lineal, y de fondo, existe una relación entre las viñetas de ambas páginas, siguen en el ritmo de bloque, ilustracion, ilustracion, bloque. el texto no está limitado a un solo lugar, sino que construye un camino de lectura, y contornea el dibujo, y direcciona la vista.

Esquema de composición de viñetas:

Caso3viñetas1.jpg

Esquema de composición de elementos:

Caso3composicion1.jpg


Tipo de multimedia y ¿para que?: no tiene, existe un reconocedor de viñetas, que permite navegar viñeta por viñeta, para poder hacer más accesible la lectura, pero rompe completamente con la diagramación, las jerarquías y los tiempos de lectura.

Caso 4

Comicejemplo3 021.png

Lezhin sitio koreano para leer comic


Género: cómic

Contexto: comic extraído del sitio coreano lezhin.com, en el que se publican cómic digitales, en el sitio se potencia el uso de la aplicación para smartphone, por lo que los comic deben estar compuestos para ser leídos en esa plataforma.

Contextocomic41.jpg Contextocomicmovil41.jpg

Soporte: Digital.

Método de lectura en pantalla: scroll vertical.

Lecturatocomic41.jpg Lecturacomic4movil1.jpg

Tipografia: la tipografia es handwriting, solo esta en altas, su cuerpo es alto, y su espaciado es aireado al igual que el interlineado, el blanco que deja al rededor del texto considerable.

Tipografiacomic41.png

Proporción en la pantalla pc: 1/3 (aprox) del ancho.

Proporción en pantalla smartphone: anchos completo.

Tipo de viñeta: lineal. trabajan la temporalidad del momento, a través de los ángulos agudos de las viñetas y vuelve a un tiempo normal, haciendo las viñetas más cuadradas.

Diagramación: la diagramación se basa en la direccionalidad del ojo a través del uso de los globos de texto y los blancos en la viñeta, las pausas de lectura están basados en los blancos entre viñetas, y por último las viñetas están ligadas por el gesto vertical de lectura y por los globos de texto y algunos casos las onomatopeyas. Las viñetas trabajan la temporalidad del momento, a través de los ángulos agudos de las viñetas y vuelve a un tiempo normal, haciendo las viñetas más cuadradas.

Esquema de composición de viñetas:

Caso4viñetas1.jpg

Esquema de composición de elementos:

Caso4composicion1.jpg

Tipo de multimedia y ¿para que?: no tiene.

Caso 5

Caso5comic1.png

Género: cómic

Contexto: comic extraído del sitio coreano lezhin.com, en el que se publican cómic digitales, en el sitio se potencia el uso de la aplicación para smartphone, por lo que los comic deben estar compuestos para ser leídos en esa plataforma.

Contextocomic51.jpg Contextocomicmovil51.jpg

Soporte: Digital.

Lecturatocomic51.jpg Lecturacomic5movil1.jpg

Método de lectura en pantalla: pagina a pagina (click).

Tipografia:la tipografia es handwriting, solo esta en altas, su cuerpo es alto, y su espaciado es aireado al igual que el interlineado, el blanco que deja al rededor del texto considerable.

Tipografiacomic51.png

Proporción en la pantalla pc: 2/3 (aprox) del ancho.

Proporción en pantalla smartphone: 2 anchos completo se ve una página a la vez.

Diagramación: La diagramación no construye tan firmemente la relación entre la página doble, pero aun así existe la relación rítmica entre ellas. La composición se forma a través de la interacción de las diagonales de las viñetas y la dirección que pueden dar las ilustraciones y las onomatopeyas. Las viñetas trabajan la temporalidad del momento, a través de los ángulos agudos de las viñetas y vuelve a un tiempo normal, haciendo las viñetas más cuadradas.

Esquema de composición de viñetas:


Caso5viñetas1.jpg

Esquema de composición de elementos:

Caso5composicion1.jpg

Tipo de multimedia y ¿para que?: no tiene.

Caso 6

Caso6comic1.png

Novela grafica auspiciada por peugeot

Género: cómic

Contexto: es un cómic digital con el fin de hacer publicidad a peugeot y su nuevo auto, por lo mismo tiene 4 momentos de lectura, que hablan de las 4 cualidades del auto.

Contextocomic61.jpg


Soporte: Digital.

Lecturatocomic61.jpg

Método de lectura en pantalla: scroll mixto.

Tamaño tipográfico (aprox): no tiene

Proporción en la pantalla pc: ancho completo.

Proporción en pantalla smartphone: anchos completo.

Diagramación: las viñetas son del ancho de la pantalla y sus transición existe a través del scroll. La diagramación se basa en la diferenciación de los distintos elementos de las viñetas, los cuales pueden ser móviles a través de la interacción del lector por medio del scroll, la lectura va a cambiar según su desplazamiento.

Esquema de composición de elementos:

Caso6viñetas1.jpg


Tipo de multimedia y ¿para que?: tiene tres tipos de elementos multimedia, el primero es la interacción con los elementos de la viñeta a través del scroll, casual desplazamiento de este a medida que se va bajando, al mismo tiempo tiene música de fondo y sonidos de acciones, este último se activa a medida que se baja con el scroll y por último, existe una animación que se activa al llegar a la viñeta. Además el soporte permite una auto lectura, en la que el navegador se desplaza a través de la lectura.

Caso 7

Caso7comic1.png

comic de terror koreano


Género: cómic

Contexto: El cómic está puesto en un sitio coreano de cómic amateur, este caso en particular es parte de una serie de 2 cómic que realizó el autor.


Contextocomic71.jpg


Soporte: Digital.

Método de lectura en pantalla: scroll vertical.

Lecturatocomic71.jpg


Tamaño tipográfico (aprox): 20 px

Proporción en la pantalla pc: ⅓ del ancho.

Proporción en pantalla smartphone: anchos completo.


Diagramación: La diagramación está dada por la disposición de los textos, los que están dispuestos para crean un recorrido de lectura. Las pausas en la lectura están dadas por espacios negros, que le dan unidad a la lectura. Las viñetas ocupan el formato completo, y varían en su largo, la diferencia de intención está colocada más en la ilustración que en la disposición de la secuencia. Las pausas entre las viñetas provocan la sensación de unidad en cada cuadro, lo que no rompe necesariamente con la secuencia, sino que la acerca más al mundo de la animación.

Esquema de composición de viñetas:

Caso7viñetas1.jpg

Esquema de composición de elementos:

Caso7composicion1.jpg

Tipo de multimedia y ¿para que?: tiene dos momentos en los que se despliega de golpe una animación (con el fin de sorprender), esta animación viene acompañada de un efecto de sonido. El elemento animado es siempre el personaje y no varía en este aspecto.

Caso 8

Caso8comic1.jpg

Género: novela gráfica

Contexto: Es una aplicación que contiene la novela gráfica.

Contextocomicmovil81.jpg

Método de lectura en pantalla: horizontal.


Lecturacomic8movil1.jpg


Proporción en la pantalla pc: no aplica

Proporción en pantalla smartphone: anchos completo.

Tipografía: la tipografía es handwriting pero también tiene características de caligrafía con serif, se presenta con altas y bajas, con una separación aireada al igual que su interlineado.

Tipografiacomic81.png


Diagramación: La diagramación está dada por la disposición de los textos y los rostros. Las pausas en la lectura están dadas por espacios negros, que le dan unidad a la lectura y la detenciones de la mirada crean el gesto de zigzagueo que va de arriba hacia abajo de manera horizontal.

Esquema de composición de elementos:

Caso8viñetas1.jpg


Tipo de multimedia y ¿para que?: tiene aplicaciones de parallax y es usado para las pausas o separaciones de secuencias, es aplicada en alguna capa de la información ya sea en la variedad de fondos o en el movimiento de personajes. su función narrativa además de dar énfasis a una situación, añade una temporalidad en la lectura dada la composición.

Acerca del gesto

Son casos que no entran dentro del formato del comic, pero hacen un trabajo en relación a la gestualidad y disposición de las lecturas digitales.

caso 9 (motion-book)

1000px

Género: novela gráfica

Contexto: es un formato hecho para la lectura en dispositivos, este en particular pertenece a la aplicación madefire, que entrega una amplia variedad de motion book, en su gran mayoría son adaptaciones de un comic impreso.

Contextocomicmovil91.jpg

Método de lectura en pantalla: página a página, horizontal.


Lecturacomic9movil1.jpg

Proporción en la pantalla pc: no aplica

Proporción en pantalla smartphone: anchos completo.

Tipografía: Es una tipografía handwriting, se muestra solo en altas, y tiene un espaciado poco aireado al igual que el interlineado, el blanco que se deja alrededor del texto tampoco es muy considerable.

Tipografiacomic91.png


Diagramación: La diagramación varía de una viñeta única, a muchas viñetas en la pantalla, y esta también se transforma en la medida que las animaciones aparecen.

Esquema de composición de elementos:

1000px


Tipo de multimedia y ¿para que?: tiene animaciones, sonidos, y aplicación de parallax, el formato de lectura es similar a una diapositiva, en el que haciendo click se despliega una serie de animaciones y sonidos. las tecnologías multimedia son usadas para transformar la diagramación, mediante globos de texto y viñeta, dar énfasis a acciones mediante animaciones cortas y efectos de sonido, ayudar a la narrativa a través de sonidos de fondo, y dar profundidad al espacio a través de parallax.

Transformación de la composición impreso a digital La transformación ocurre del medio impreso a un medio audiovisual.

400px
Error al crear miniatura: Falta archivo

Conclusiones

Del total de casos estudiados web-comic, 7 están pensados para un soporte una plataforma digital, y de estos, 4 tiene un formato que está pensado al ⅓ de la pantalla total de en un ordenador, lo que es equivalente al ancho total de una pantalla de smartphone puesta verticalmente, 2 ocupan ⅔ de la pantalla (incluyendo el caso 3 que está pensando para un soporte impreso) lo que en smartphone significa dos veces la pantalla total en vertical, y, 2 que ocupan el ancho total de la pantalla ( El caso 6 es solo para pantalla de escritorio y el caso 8 es solo para pantallas móviles). La proporción del cómic en la pantalla tiene una relación directa con el desplazamiento de la información, en los comic de formato ⅓ el desplazamiento es vertical, en los formatos ⅔ es de pagina a pagina (dada la relación con el elemento impreso), y las de pantalla completo puede ser horizontal ( Caso 8), vertical (no hay un caso en el que se aplicara pero es una posibilidad de aplicación o mixta (Caso 6). El cómic-digital, puede ser un formato muy diverso, dado que trae tantas capas de información que los elementos multimedia se pueden manifestar intuitivamente, 5 de los casos estudiados presentan un tipo de elemento multimedia, 2 de estos tienen presentan sonidos, y otros dos son animación de tipo gif.

Bajo estas características de lectura y proporciones, ¿cual serian los beneficios del formato digital que no tengan el formato impreso? En el caso 3, el comic está pensado para un formato impreso, pero está exhibido en un formato digital, tiene una lectura de pagina a pagina y la proporción ⅔ de la pantalla, aunque siempre se lee en digital a la proporción de ⅓ dado que en la doble página la tipografía se ve muy pequeña, aproximadamente tiene un tamaño tipográfico de 5 px el más pequeño entre todos y la menos espaciada, lo que también dificulta su lectura. En el caso del caso 5, es un comic de doble página, pero pensado para un formato digital, al igual que el caso 3 es de ⅔ del ancho, pero este se lee de esta forma sin complicaciones en escritorio, en pantallas móviles el formato cambia a ⅓, su tamaño tipográfico es de 7, pero su texto presenta mucho más blanco a su alrededor y su interlineado. En la plataforma lezhin comics, solucionan este problema de cambio de proporción ( que a su vez es una cambio de composición), en el caso 4, exponiendo las tiras de forma vertical en un formato constante de ⅓ de pantalla, para que este no varíe entre pantallas, y poniendo como rol principal de soporte, los dispositivos móviles, la tipografía tiene una buena lectura en ambos soportes y la narrativa se volvió mucho más continua, al no existir un hoja a hoja, las pausas se volvieron parte de la composición, esto también se utiliza en el caso 7. En el caso 8 se enfatiza más la continuidad de la lectura digital, en este caso el cómic se presenta de manera horizontal (ocupa el ancho de la pantalla en horizontal), las viñetas se diluyen una con otra, así que tanto su desplazamiento y su composición ayudan a un continuo.

Abordando otra particularidad del soporte digital, en los casos 1, 2, 6, 7, 8, fueron hechos y pensados para un soporte digital, y tienen algún tipo de aplicación multimedia, esto significa que tiene algún tipo de sonido, animación o desplazamiento de objetos, esto en la generalidad enfatizan algún momento de la narración. En las tiras cortas ( caso 1 y 2) enfatizan viñetas a través de animaciones gif, o enfatizan a sí mismas (tira completa) con respecto a su contexto. En el caso 8 se usa la aplicacion de desplazamiento con parallax, que le da profundidad y ritmo a la lectura, este caso es muy particular dado que enfatiza los tiempos pausados de lectura y no una acción en particular. En el caso 7, existe una animacion con sonido, que se activan en un punto de la lectura, hace un traspaso de estático a móvil, para luego volver a estático, enfatiza la sorpresa del momento, trayendo el mundo de lo audiovisual al mundo de solo lo gráfico. En el caso 6 se presenta, animacion con sonido, desplazamiento de elementos durante la lectura (parallax) y sonidos de fondo, este caso trae mucho del mundo cinematográfico. Este último caso es el más similar al motion book, un nuevo formato, de animación que trae elementos propio del cómic, como la relación entre viñetas, en este caso existe parallax, animación y sonido, formalmente esto ya no es un cómic sino una adaptación a animada. Volviendo al caso 8 que únicamente tiene parallax, se puede considerar como un elemento no invasivo dentro de la composición del cómic, el parallax es una forma de mirar por capas la construcción de una imagen, dado que el cómic se puede definir como una yuxtaposición de elementos visuales, puede llegar a ser un aporte real, que no rompe con la relatividad temporal que cada lector puede tener de la narrativa.


¿Con respecto a la distribución del contenido y la proporción en la pantalla y en relación a la compatibilidad del formato en distintos visualizadores, cual funciona o funcionaría más eficientemente?


En el caso 3 y 5, se usa la proporción de ⅔ de la pantalla en escritorio, dado que tiene 2 paginas para pantallas móviles solo se visualiza 1, una práctica común en varias plataformas y software de lectura de cómics, este método rompe con la composición de la doble página, dado que existe una relación entre estas, en el caso 5 esta ruptura es menos violenta, pero no obstante en páginas del mismo cómic más adelante se nota fuertemente.

En los casos 1 y 2 son tiras y su composición es cuadrada, lo que las convierte en las más moldeables, desde el punto de vista del cambio de composición entre pantalla y pantalla, estas al ser poco contenido no son un gran problema.

En los casos 4 y 7, se usa la proporción de ⅓ en pantalla de escritorio, lo que equivale al ancho de la pantalla en vertical de un dispositivo móvil, de esta manera se soluciona el problema de cambio de composición, pero no se aborda la compatibilidad en ambos casos (escritorio y móvil).

En el caso 6 se aborda completamente la pantalla de escritorio, pero se deja de lado completamente el caso de dispositivos móviles, al punto de que no se pude entrar al cómic.

En el caso 8 se aborda completamente la pantalla en horizontal del dispositivo móvil, dando un gesto de lectura de saltos cortos que no cansan la vista, pero no existe una versión para escritorio.

En caso de madefire la plataforma para leer motion book, aborda bien el formato de dispositivos móviles, aunque no se puede usar en escritorio.

Dado los gestos de lectura y la adaptación de la pantalla a smartphone, se puede considerar que una diagramación horizontal, puede ser la mejor forma de distribución de un cómic digital, ya que de esta manera puede abordar la pantalla de escritorio y la pantalla móvil puesta de manera horizontal. en el ejercicio de visualizar el caso 6 en la pantalla móvil, este ocupa bien el espacio dado, y en el caso 8 se puede notar un ritmo y una continuidad en la lectura.

Proceso de creación de un cómic digital

Bases narrativas y gráficas

Formato

Definido por la imprenta, o por la plataforma web, es el lienzo que pre-ordena las leyes de composición del cómic

Imprenta: B6 (10.0 x 21.0 cm), A6 (14.8 x 10.5 cm), A5(21.0 x 14.8 cm) , A4(29.7 x 21.0 cm), A3(42.0 x 29.7 cm), A2(59.4 x 42.0 cm), A1(84.1 x 59.4 cm) y B2(50.0 x 70.0 cm) estos formatos responden al tamaño de pliego considerando márgenes y cortes.

Plataforma web: 4:3, 16:9, 16:10, 3:2, 5:4, 21:9


Guión

Define la psicología de los personajes, el contexto narrativo, y el género narrativo ( terror, acción , ciencia ficción, etc), también define parte de la composición desde el punto de vista conceptual y las necesidades de énfasis gráfico

Definición de personajes Contexto espacial Género literario Tiempos narrativos Tipo de narrador

Concept art

Es la definición de leyes gráficas que seguirán en el cómic, colores, estilos de delineado, tipos de fondo, diseño de personajes y relación entre otros elementos. cada decisión se toma en torno a la intención narrativa en torno al guión. En la suma de lo gráfico y lo narrativo aparece el cómic.

Character design : diseño del personaje en relación a sus caracteristicas psicologicas y fisicas, y el rol que desempeña en la historia.

Estilo de coloreado, texturas, expresiones

Estilos de fondo: Relación de los personajes con el fondo, definicion de lineas y texturas Definición de Lineart.

Estilo de coloreado, texturas, detalles

Definición de paleta de colores : Se definen respecto a las contextos y géneros del guion. Cambian respecto a la intención narrativa del artista y escritor.

Estructura visual

Storyboard

Primer encuentro del guión y lo gráfico, define la estructura de la página o formato web, se segmenta la página, se hace un primer acercamiento a la composición de contrastes, y un primer momento de la interacción de los personajes y fondos. En esta etapa se definen los momentos que tendrá el comic.

Segmentación de la página o tira: se distribuyen viñetas, personajes y/o fondos en el lienzo

Primer momento de contrastes: se colorean o marcan zonas de mayor contraste para tener una percepción del recorrido de la vista sobre el lienzo

Distribución de personajes y fondos: en el interior de las viñetas o en el lienzo se distribuyen los personajes, fondos y otros elementos con el fin de comunicar visualmente el total o partes del guión.

Definición de momentos del cómic o tira: En base al guión se componen los momentos de mayor o menor énfasis

Sketch

Definición de trazos

Esta es la etapa donde el diseño de personajes y diseño de fondos convergen con el storyboard, los dibujos se deben hacer pensando en la forma en que serán coloreados y al mismo tiempo tienen q responder al contraste y la expresión que fueron esbozadas en el storyboard a partir del guión.

Dibujo de viñetas: Decisión más nítida de viñetas, globos de texto (Los globos de texto aun pueden cambiar dependiendo de la composición).

Dibujo de personajes: Decisiones de expresiones corporales y faciales de los personajes. Se hace en base al storyboard y al diseño de personaje.

Dibujo de fondos: Decisión de cantidad de detalles y profundidad del fondo, se hacen en base al storyboard y el diseño de fondos.

Dibujo de elementos: decisión de cantidad de importancia que tengan objetos, onomatopeyas u otros elementos que se integren en las viñetas o página.

Capa de estilos

Entintado

El proceso en donde los contrastes se hacen más fuertes, se definen los contornos los personajes, fondos y globos de texto. El lineart se trabaja en base al diseño de personaje, y puede variar en pos del énfasis. El entintado de personajes, fondos y otros elementos gráficos, debe desarrollarse en capas distintas para que el proceso sea más rápido y limpio, también el entintado puede ser distinto dependiendo de las decisiones tomadas en el concept art.

Delineado: de personajes, fondos y otros elementos gráficos, en capas distintas para aumentar la eficiencia del trabajo.

Relleno:se colorean las zonas de negro y de alto contraste, es una etapa previa al coloreado final y varía dependiendo del concept art.

Coloreado

Este es el proceso de coloreado y sombreado del cómic, este debe responder al igual que el paso anterior al sketch y al concept art, se agregan los grises, texturas y sombras que incorporan una capa más de información que ayuda a la narrativa. Al igual que la capa anterior el coloreado se separa en las respectivas capas de personaje, fondos y otros elementos gráficos. La sombra también puede estar separada en capas diferenciadas todo esto con el fin de tener un trabajo más rápido y limpio.

Coloreado:Responde a las decisiones tomadas en el concept art, y varía dependiendo de las necesidades comunicativas expuestas en el guión.

Sombreado: Responde a los contraste propuestos en el storyboard y a los esquemas realizados en el sketch, al igual que en el coloreado pueden variar dependiendo de las necesidades comunicativas.

Retoques y fiscalización

Edición o ajustes

Es el momento en que se ajustan los últimos detalles, se integran textos y se hace una revisión de contrastes y elementos narrativos.

Edición de contrastes: Es una etapa del proceso de coloreado que puede afectar a la línea y al color, por ejemplo desenfocar una zona, siempre tiene la función de enfatizar algunas zonas y quitar peso a otras

Ajustes de textos: se dejan listos los diálogos de cada globo de texto o viñeta, en este momento se leen y revisan la longitud de los diálogos y la transformación de algunos globos de texto. (por esto también es importante tener los globos de texto en otra capa)

Publicación

(Entrega del archivo final)

Distribución: Puede ser una distribución física o una publicación digital dentro de una plataforma o muchas plataformas de lectura.

Difusión: La editorial o el autor debe hacer un trabajo de publicidad vía web y física.


Modelocreacioncomic11.jpg

Proceso de creación de cómic digital para la plataforma

Bases narrativas y gráficas

Formato

Definido por la imprenta, o por la plataforma web, es el lienzo que preordena las leyes de composición del cómic

Plataforma web: 4:3, 16:9, 16:10, 3:2, 5:4, 21:9

Guión

Define la psicología de los personajes, el contexto narrativo, y el género narrativo ( terror, accion , ciencia ficcion, etc), también define parte de la composición desde el punto de vista conceptual y las necesidades de énfasis gráfico

Definición de personajes Contexto espacial Género literario Tiempos narrativos Tipo de narrador

Concept art

Es la definición de leyes gráficas que seguirán en el cómic, colores, estilos de delineado, tipos de fondo, diseño de personajes y relación entre otros elementos. cada decisión se toma en torno a la intención narrativa en torno al guión. En la suma de lo gráfico y lo narrativo aparece el comic.

Character design: diseño del personaje en relación a sus caracteristicas psicologicas y fisicas, y el rol que desempeña en la historia.

Estilo de coloreado, texturas, expresiones

Estilos de fondo: Relación de los personajes con el fondo, definicion de lineas y texturas Definición de Lineart.

Estilo de coloreado, texturas, detalles

Definición de paleta de colores: Se definen respecto a las contextos y géneros del guion. Cambian respecto a la intención narrativa del artista y escritor.

Estructura visual

Storyboard

Primer encuentro del guión y lo gráfico, define la estructura del formato web, se segmenta la página, se hace un primer acercamiento a la composición de contrastes, y un primer momento de la interacción de los personajes y fondos, en lo que se definen esquemáticamente los desplazamientos que tendrán los elementos. En esta etapa se definen los momentos que tendrá el comic.

Segmentación de la página o tira: se distribuyen viñetas, personajes y/o fondos en el lienzo

Primer momento de contrastes: se colorean o marcan zonas de mayor contraste para tener una percepción del recorrido de la vista sobre el lienzo

Distribución de personajes y fondos: en el interior de las viñetas o en el lienzo se distribuyen los personajes, fondos y otros elementos con el fin de comunicar visualmente el total o partes del guión.

Esquemas de movimientos: Por medio de flechas rojas se esquematizan los elementos que se moverán en el desplazamiento del cómic.

Esquemas de capas: se realiza una numeración de las capas para luego poder agrupar los elementos en distintas imágenes con transparencias.


Definición de momentos del cómic o tira: En base al guión se componen los momentos de mayor o menor énfasis

Sketch

Definición de trazos

Esta es la etapa donde el diseño de personajes y diseño de fondos convergen con el storyboard, los dibujos se deben hacer pensando en la forma en que serán coloreados y al mismo tiempo tienen q responder al contraste y la expresión que fueron esbozadas en el storyboard a partir del guión. Todos los dibujos tienen que responder a los esquemas de movimientos y las capas a las que se asignaron.

Dibujo de viñetas: Decisión más nítida de viñetas, globos de texto (Los globos de texto aun pueden cambiar dependiendo de la composición).

Dibujo de personajes: Decisiones de expresiones corporales y faciales de los personajes. Se hace en base al storyboard y al diseño de personaje.

Dibujo de fondos: Decisión de cantidad de detalles y profundidad del fondo, se hacen en base al storyboard y el diseño de fondos.

Dibujo de elementos: decisión de cantidad de importancia que tengan objetos, onomatopeyas u otros elementos que se integren en las viñetas o página.

Capa de estilos

Entintado

El proceso en donde los contrastes se hacen más fuertes, se definen los contornos los personajes, fondos y globos de texto. El lineart se trabaja en base al diseño de personaje, y puede variar en pos del énfasis. El entintado de personajes, fondos y otros elementos gráficos, debe desarrollarse en capas distintas para que el proceso sea más rápido y limpio, también el entintado puede ser distinto dependiendo de las decisiones tomadas en el concept art.

Separación para el montaje:

1° Separación de capas para el montaje: Agrupación de distintos elementos que conviven en el mismo nivel de profundidad perceptual.

2° Separación de capas para limpieza y eficiencia: separación de los elementos (personajes fondos, etc) con el fin de tener un proceso más limpio y rápido.

Delineado: de personajes, fondos y otros elementos gráficos, en capas distintas para aumentar la eficiencia del trabajo.

Relleno: se colorean las zonas de negro y de alto contraste, es una etapa previa al coloreado final y varía dependiendo del concept art.

Coloreado

Este es el proceso de coloreado y sombreado del cómic, este debe responder al igual que el paso anterior al sketch y al concept art, se agregan los grises, texturas y sombras que incorporan una capa más de información que ayuda a la narrativa. Al igual que la capa anterior el coloreado se separa en las respectivas capas de personaje, fondos y otros elementos gráficos. La sombra también puede estar separada en capas diferenciadas todo esto con el fin de tener un trabajo más rápido y limpio. La separación de capas funciona con la misma lógica que en el entintado

Coloreado: Responde a las decisiones tomadas en el concept art, y varía dependiendo de las necesidades comunicativas expuestas en el guión.

Sombreado: Responde a los contraste propuestos en el storyboard y a los esquemas realizados en el sketch, al igual que en el coloreado pueden variar dependiendo de las necesidades comunicativas.

Retoques y finalización

Montaje

Esta es la etapa donde las distintas capas realizadas se juntan y comienzan a tener una interacción en movimiento. En esta etapa también se insertan los globos de textos y se les da su lugar en la composición en relación a el storyboard.

Ordenar capas: Se ubica cada imagen con sus elementos, en la capa que corresponde a lo indicado en el storyboard

Datos de movimiento: Los datos se regulan de 1% a 100% en relación al movimiento entre las imágenes, este se puede mover más o menos en relación a las demás capas.

Insertar textos: Los textos se insertan solos o dentro de una viñeta o globo de texto, los globos de texto son flexibles, lo que permite ajustar el tamaño según el lector, dentro de los ajustes existe un tamaño de letra maximo y minimo

Insertar otros elementos: Otros elementos depende el autor y los elementos que tenga guardados en la data de la plataforma, como onomatopeyas, texturas, fondos que puede agregar en una nueva capa.


Edición o ajustes

Es el momento en que se ajustan los últimos detalles, se hace una revisión de contrastes y elementos narrativos. También es posibles hacer ajustes tanto de textos como de movimientos.

Edición de contrastes: Es una etapa del proceso de coloreado que puede afectar a la línea y al color, por ejemplo desenfocar una zona, siempre tiene la función de enfatizar algunas zonas y quitar peso a otras

Revisión de textos: se dejan listos los diálogos de cada globo de texto o viñeta, en este momento se leen y revisan la longitud de los diálogos y la transformación de algunos globos de texto. (por esto también es importante tener los globos de texto en otra capa)

Testeos y ajustes: se ajustan los movimientos en relación al momento narrativo que se desee comunicar. Este momento es de ensayo y error hasta lograr ajustar los tiempos.

Publicación

(Entrega del archivo final)

Distribución: es una publicación digital dentro de la plataforma.

Difusión: La plataforma permite hacer publicaciones vía web para distintas redes sociales y dentro de la misma plataforma se puede llegar a estar en la home.

Modelocreacioncomic 21.jpg

Segunda versión de modelo

Este demuestra un proceso lineal con un comienzo y un final definidos, en general los pasos se mantienen igual pero lo que ocurre dentro se ve modificado comprendiendo un método más fluido e intuitivo de trabajo (en este modelo aun no es testeado con posibles usuarios), también se integran los software que están presentes en cada paso.

Modelocreacioncomic 22.jpg

Mapa de clases de la plataforma web

El mapa de clases ayuda a visualizar la cantidad y el tipo de información que contendrá cada elemento en la plataforma, y es una comienzo de la reflección de los procesos por los que tiene que pasar el cómic y que tipo de organización tendrá para ser encontrable y editable.

Mapadeclasescomic 22.jpg

Partituras de interacción del proceso de subir un cómic

La partitura de interacción, esquematiza la serie de acciones que sucederán en el proceso que realiza el usuario al momento de subir su primer cómic digital a la plataforma. Tomando el camino desde la página web, hasta realizar sus primeras animaciones en la plataforma de origen local con conexión web para sincronizar sus trabajos.

Mapadeflujocomic1.jpg Mapadeflujocomic2.jpg


Wireframes para el software montador de cómics para la plataforma

Como propuesta de proyecto decidí desarrollar un software local con conexión web que permite administrar y montar los cómics que se podrán leer en el sitio.

El montador cuenta con 3 visualizadores cada responde a una necesidad de perspectiva para la contracción de la composición del cómic. La mesa de trabajo es para poder mover las cosas en el eje x e y, y poder insertar textos. muestra una percepción bidimensional de la composición.

El visor 3D permite desplazar los objetos en el rango de z, esto permite regular la velocidad en que se mueven los objetos y al mismo tiempo regular el tamaño de la capa en relación a la distancia del visor. por último la previsualización permite tener una visión convergente de ambos casos, sin la posibilidad de editar, pero con la facilidad de pensar la composición de movimientos y objetos.

El software como montador está pensado desde el momento del storyboard, para que en el proceso artístico (desarrollado en otro programa) este no sea pausado o interrumpido constantemente por las pruebas de movimiento.

Tipos de visores

Wireframecomic1.pngWireframecomic2.png Wireframecomic3.png Wireframecomic4.png

Proceso de trabajo

Wireframecomic5.png Wireframecomic6.png Wireframecomic7.png Wireframecomic8.png Wireframecomic9.png