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

Tabla de Contenidos

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)

Caso9comic1.png

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.

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


Tercera versión del modelo y flujos que se desprenden de este

Modelo de proceso de creación de un web-cómic

Un comic presenta un modelo de trabajo que se reitera en la creación de cada número, en un principio se presenta un formato que es dado por el soporte, en el caso del sitio lezhin (revisar caso de estudio 5) es primordialmente para smartphone, en el caso de los comicbook digitalizados es adaptado para funcionar en pantallas grandes o de gran resolución. Una vez teniendo un formato se necesita la historia, la que puede ser creada por un solo autor o puede ser colaborativo en la que existe una persona encargada del arte y otra del guion, a este método se le pueden incluir muchas más personas, separando las personas por portadista, dibujante, colorista guionistas o guionista. La etapa de concepto de arte también suele ser colaborativa, ya sea con otro autor o con terceros, se suelen buscar referencias, para que en base a esto y las ideas gráficas y narrativas, se desarrollen ideas de personajes y fondos. El storyboard suele ser trabajada por una sola persona, pero como cada fase también pasa por un paso de revisión, de esta fase se pasa continuamente al área de sketch, entintado y coloreado. El proceso culmina en la instrucción de globos de texto, en ocasiones este proceso también se le da estilos al globo, en otros casos este proceso ocurre en el entintado o coloreado.


Modelocreacioncomic 33.jpg

Modelo de proceso de creación de un cómic para la plataforma

Crear un cómic para la plataforma propone un nuevo método de trabajo, el que se basa en la creación convencional de un comic normal o web. Los pasos son visualizados de la misma manera, teniendo un formato determinado previamente por la plataforma, un guion, un concepto de arte, storyboard, sketch, entintado, coloreado y globos de texto, teniendo posteriormente una posibilidad de revisión y terminando en una publicación. En el software de creación, se propone tener áreas de trabajo colaborativas, estas se dividen en: Guion: lugar de trabajo donde se define la historia, contextos visuales, temporales y guiones. Aquí se da la oportunidad de definir los diálogos para que después en el área de globos de texto estos se puedan trabajar más rápido. Concepto de arte: lugar de trabajo donde se pueden ver las referencias de manera colaborativa, se pueden hacer fichas de personajes y subir distintas facetas de personajes y fondos. Si se guardan suficientes dibujos estos se pueden utilizar en el área de storyboard como una herramienta que agilicen en trabajo. Storyboard: esta es el área central de trabajo, es donde se conecta el ámbito visual con el narrativo por primera vez, y sirve de guía para los pasos siguientes. En esta área es donde los bocetos se reemplazan por las capas pasadas por el proceso artístico. Este último se desarrolla en un software artístico como clipstudio o Photoshop, en el que se desarrolla de manera más fina y amplia la paleta de herramientas de trabajo. Globos de texto: En esta área se potencia el trabajo previo en el área de guion, para hacer un trabajo más rápido. Una vez creado el globo se le dan estilos a este y al texto que lo contienen. Ya teniendo terminado los globos de texto, se pueden traducir a otro idioma, potenciando el inglés y el portugués. Revisión: Este paso es donde los amigos del usuario podrán leer el comic previo a ser publicado, con la intensión de generar un feedback antes de que se publique en la plataforma web.


Modelocreacioncomic tren33.jpg

Flujo de trabajo del Guion dentro de la plataforma

Modelocguio tren33.jpg

Flujo de trabajo del Concepto de arte dentro de la plataforma

Modelocconcepto tren33.jpg

Flujo de trabajo del Storyboard dentro de la plataforma

Modelocstoryboard tren33.jpg

Flujo general de trabajo del Proceso de arte fuera de la plataforma

Modelopda tren33.jpg

Flujo de trabajo de Globos de texto dentro de la plataforma

Modelocglobos tren33.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.

Pruebas de cómic

Gaviotín, es equivalente a 1 escena

Es la primera prueba con el fin de probar la animación parallax en scroll horizontal, esta prueba ayudó a visualizar cuáles son las reglas de este tipo de animación en una plataforma web. Cada capa es una archivo .png con transparencias, estas se traslapan y son visualizadas para que en su interacción en movimiento sea un aporte a la composición y sirva como un apoyo a la narrativa. El ejemplo también fue un apoyo para conocer qué tipo de herramientas son necesarias para poder componer las imágenes que interactúan entre ellas.

https://tolytox.github.io/parallax/

Comicprueba1.jpg

Poseidon, equivalente a 5 escenas

Este es el segundo cómic, este buscaba una mayor complejidad en el dibujo y en la composiciones. Este cómic fue un apoyo para considerar particularidades técnicas, por ejemplo la separación del cómic en escenas como una necesidad para que funciones de manera fácil y sin problemas la animación parallax. Esta también fue una ayuda para considerar la constitución de momentos narrativos en el cómic.

Comicprueba2.jpg


Wireframes del montador para comics Primera versión

Tras haber hecho un cómic digital con animación parallax, se abrieron distintas dudas,

¿Como ayudo al dibujante a tener una percepción del movimiento de las capas sin tener que interrumpir el flujo de trabajo?,

¿Como le facilitó al dibujante la medida de las capas con animación sin que este tenga que pensar en los factores que inciden en la animación parallax?

¿Como la plataforma entrega al dibujante herramientas que le permitan tener una concepción del movimiento, la composición y el desarrollo de los momentos narrativos que se construyen en el avance de la lectura?

El montador de cómic para la plataforma, es un software local con funcionalidades web, esto permite trabajar las imágenes desde el computador sin tener que subirlas 1 a 1 a una plataforma web. El montador organiza los momentos del cómic en escenas o “super viñetas” que contienen distintos elementos narrativos entre ellos: subviñetas, globos de texto, onomatopeyas, distribución de personajes, animaciones parallax etc. Esta organización se presenta de manera horizontal, cada escena contiene capas (estas capas son las que llevan el movimiento), en un principio existen dos capas, la capa ventana que es la capa madre en la que el dibujante entrega el ancho, el que determinara el ancho de la escena, la segunda capa inicial es la capa de fondo, esta capa tiene la misma medida que la ventana pero se encuentra en el punto z=100 ( esta medida es solo referencial y se construye de la misma forma que en el modelaje 3d) que es la máxima distancia a la que se puede llegar en profundidad.

Al crear la segunda capa esta se posicionará a una distancia por defecto, y será más grande que la capa ventana, esto es porque para moverse debe existir un rango de que exista fuera de lo visible. Al crear una tercera capa estará más lejana que la segunda y será más pequeña, esto para que comience la noción de perspectiva, se repetirá el proceso hasta que las capas tengan la medida de la capa ventana.

Una vez existan estas capas se puede comenzar a introducir contenido, hay dos formas de hacerlo arrastrando imágenes o bocetando sobres las capas (cada capa es transparente por defecto ). La funcionalidad del boceto es poder visualizar desde un comienzo como se verán los movimientos, el montador tiene 3 visualizadores el 2D, el 3D y el preview, el 2D sirve para editar, cuando dibujamos lo hacemos sobre un lienzo en 2D y la lectura final también será 2d, solo que existirá un efecto de profundidad. La vista 3D sirve para editar la profundidad de la capa, esto afecta con al ancho de dicha capa y la velocidad en la que se moverá, y por último la visión preview, muestra el recorte hecho por la pantalla y los movimientos finales del cómic.

Una vez terminado los bocetos y visto las variables de movimiento, se puede editar cada capa por separado en el editor de imágenes favorito del usuario (photoshop, paint tool sai, Mangastudio, etc). Aquí es donde se realiza todo el trabajo artístico, existen dos recomendaciones, no cambiar el formato de la imagen que editaran y no cambiar las dimensiones, esto podría provocar un conflicto con el software o podría desconfigurar las dimensiones que el usuario entrego anteriormente.

tipos de visores

Wireframecomic1.pngWireframecomic2.png Wireframecomic3.png Wireframecomic4.png

Proceso de trabajo

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

Wireframes del montador para comics Tercera versión

Pantalla de inicio

Esta pantalla ayuda al usuario al organizar sus comics, sin necesidad de entrar en alguna carpeta creada por el software. Ya que un comic esta compuesto de varias capas de información, por tanto, varios archivos distintos, lo que para un usuario no experimentado puede causar confusión y miedo.

Wireframecomic5-3.png

Pantalla principal del comic o pantalla estudio

Esta pantalla muestra el primer acceso a las áreas de trabajo: Guion, Concepto de arte, Storyboard, Montaje, Globos de texto e Información General. También muestra la información básica para poder subir el comic.

Wireframecomic6-3.png

Pantalla de trabajo para el Guion

La pantalla es para trabajar texto, contiene los elementos básicos de edición de texto, basado en un principio en el motor de edición de Google doc. LA plataforma permite trabajar en conjunto en cada pantalla de trabajo. La función principal que aporta el software es la posibilidad de etiquetar los diálogos y luego usarlos en la pantalla de globos de texto.

Wireframecomic61-3.png

Pantalla storyboard

Esta pantalla es la principal en el flujo de edición, en esta se puede crear el primer boceto de la historia. En la revisión anterior se proponía un visor 3d para tener la percepción de profundidad de cada capa, en esta versión se olvida el visor 3d, dado que es muy confuso, en cambio se propone una función de despliegue de capas, en las que se visualizan en orden para poder trabajar en paralelo. También se propone una reproducción automática para ver el movimiento de las capas, a esto se le incluye una función de visualizar la transparencia, dado que a cada capa es un png transparente. El organizador de las escenas se presenta lateralmente, en una suerte de pestañas invertidas que ayuden a pasar de escena de forma horizontal.

Wireframecomic62-3.png


Maquetas finales

En esta unidad se encuentran estilos y maquetas finales ya pasadas por comprobaciones de varios usuarios posibles de la plataforma.

Primeros estilos

Logos

El nombre de la plataforma es trencómic, previo a este fue traincomic. El nombre viene de la metáfora de lectura espacial que surge en los comics propuestos, se ve la pantalla como una ventana y el comic se desplaza como el paisaje que se ve por la ventanilla de un tren. El tren también es un sinónimo de movimiento y horizontalidad.


El primer logo tenía la intención de visualizar la palabra tren, en esta visualizar la horizontalidad, se aprovecha la geometría ortogonal de las letras. La palabra comic vendrían a ser las ruedas del tren, aprovechando la geometría de las letras que componen la palabra. Ambas palabras estaban envueltas en una pagina que hace la metáfora al comic book.

Primerlogotrencomic.jpg

El segundo logo enfatiza la palabra comic, utilizando su geometría redonda y utilizando su ángulo de corte para general el segundo elemento que visualiza el gesto de lectura de formato de comic que se propone. Este isotipo es que da pie a la base de toda la iconografía que vendrá después. El logo final se construye a través del isotipo inserto dentro de una caja, asociándolo con el botón de las app para smartphone, y la tipografía usada pero el nombre es una condensada que contrasta con el misma forma del isotipo. Desde el isotipo se realizo una familia breve de signos que serán usados posteriormente como imágenes de perfil o iniciales de comic sin portadas. Mas que letras son representaciones de estas en forma de signos, sin tener la intención de presentarlas como palabras

Segundologotrencomic.jpg Segundologotrencomic2.jpg

Iconografía

Los iconos son construidos a partir del grosor del trazo del isotipo de trencómic, en casos particulares se esta regla no se respeta para otorgar una información más clara del concepto que lleva el símbolo. Los trazos más delgados son proporcionales al grosor más ancho. La intención de los iconos es tener una visibilidad en tamaños pequeños, para poder ahorrar espacio en los paneles de herramientas.

Segundologotrencomic3.jpg

Maquetas

https://marvelapp.com/275a63i

Pantalla de Creaciones

Similar a la que se encuentra en los wireframes, la funcionalidad de esta pantalla es organizar los comic creador por el usuario, cada comic se ordena en relación a la ultima vez que se editó, acompañado de esto aparece en la esquina superior de cada portada la cantidad de horas de trabajo que lleva la creación, esto indica el estado de trabajo, en el caso de que este se encuentre detenido por mas de un mes se le avisara al usuario que este comic esta abandonado como una manera de incitar a terminar el trabajo o decidir borrarlo, por otro lado si este esta a punto de ser publicado pasa a un estado de revisión, esto significa que el usuario le envió el comic a sus amigos para que pudieran hacer una revisión de este comic ( En caso de no tener amigos en la plataforma, es una incentivo para que estos comiencen a usarla), una vez se comienza este estado aparece el estado de avance de este. En el caso de que el comic sea un numero de una serie, se indicara bajo de este, dejando un link con el nombre de la serie. Existen dos formas de crear una serie, la primera es mediante archivo>nueva serie, aquí se preguntará por primer número de la serie, de no existir no se podrá crear la serie. La segunda forma de crear una serie es arrastrando un comic sobre otro, el comic con mayor antigüedad pasara a ser el numero 1 y el otro el numero dos y así a medida que se arrastren comic. Los comics publicados estarán en un segundo nivel de navegación, en el caso de que este dentro de una serie, en la pantalla creaciones solo se mostrara el ultimo numero en el que se este trabajando, en el caso de que se este trabajando en dos numero a la vez se mostraran ambos, una vez este sea publicado, solo será visible dentro de la carpeta de la serie.

Maquetastrencomic1.png

Pantalla de comic o Pantalla estudio

En esta pantalla se cambió la navegación completamente con relación al wireframe. La barra superior paso a ser una navegación consistente en todo el software, pasando desde las carpetas hasta las áreas de trabajo (Guion, Concepto, Storyboard, Globos, Preview y Publicar), estas ultimas se despliegan al llegar a esta pantalla, previamente a esto permanecen ocultas, ya que lo editado en estas le pertenece solo al comic. Esta pantalla al igual que la pantalla creaciones tiene distintos estados, al momento de que el comic se encuentre en revisión, se mostrara el avance detallado de esta. Y al momento de estar publicado, se mostrará en detalle las estadísticas de interacciones y lecturas que recibe el comic, esto es importante para el autor porque ayuda a tener una percepción de gustos e intereses del usuario, y es un primer estado que permite construir un perfil de lectores, mostrando edad, ubicación, sexo y cantidad.

Maquetastrencomic2.png

Pantalla Guion

Esta pantalla se mantuvo fiel en muchos aspectos al wireframe, propone un trabajo cooperativo, y organizativo, en el que se pueden etiquetar los diálogos que estén dentro del guion para poder acceder de manera rápida en la pantalla de globos de texto. La idea de interacción es poder hacer esto de manera rápida y simple, tan solo presionando el icono de globo que aparece cada vez que se selecciona texto.

Maquetastrencomic3.png

Pantalla Concepto

Esta pantalla no fue desarrollada en wireframes, pero es dado que es una pantalla que, de carpetas similar a la pantalla de creaciones y la pantalla de series, en esta área se propone organizar en base a carpetas predispuestas, las referencias y conceptos artísticos que se vallan realizando. La idea principal de esta área de trabajo es poder trabajar cooperativamente con otros autores del mismo comic. También se propone como una segunda instancia hacer dibujos separados como distintas facetas de los personajes y utilización de fondos para poder insertarlos dentro del área de trabajo de storyboard. Existen dos maneras de subir los trabajos dentro de esta área, la principal es arrastrar los dibujos sobre la carpeta que se desee (en base a las ya creadas), en el caso de que los trabajos se arrastren fuera de las carpetas los trabajos no se guardaran, esto para guiar al usuario a un camino organizativo estándar. La segunda manera de subir los dibujos es a través de archivos>insertar (esta opción cambia respecto al rea de trabajo).


Maquetastrencomic4.png

Pantalla Storyboard

Esta pantalla es la principal de edición, no varía en mayores funcionalidades respecto al wireframes, presenta herramientas básicas de dibujos y edición de imágenes (no está pensada para hacer el proceso artístico), se puede acceder a las distintas capas de dos formas, la primera es a través del panel de capas, la segunda es desplegando las capas, con el botón desplegar y elegir la capa. El panel de funcionalidades particulares de esta área de trabajo son los que ayudan a visualizar y en general son los que otorgan las facilidades para poder construir el storyboard con movimientos, los botones de esta barra son: “trasparecía”, es la que quita el blanco de referencia de las capas y muestra hasta donde están rellenas las formas y esto para poder tener una concepción clara de lo que se esta trabajando es transparente. El segundo botón es “desplegar”, como se dijo anteriormente este botón despliega las capas, y las pone en paralelo para entender el ancho variante de estas y organizarlas según su ancho, para entender la cantidad de desplazamiento de estas. El tercer botón de “play” este sirve para ver una reproducción automática del movimiento que se esta proponiendo en una escena en particular (en caso de que se requiera ver las escenas en conjunto, existe la pantalla preview). El ultimo botón es el “reemplazar” este empaqueta la capa para poder abrirse en un editor de imágenes o programa artístico que desee el usuario, este botón es el que conecta el storyboard con el proceso artístico, que se realiza fuera de la aplicación (esta función antes solo pertenecía a la pantalla de montaje, pero esta fue eliminada, y que no solo tenía una función, la cual era fácilmente integrable en el área de storyboard). Una vez la imagen fue reemplazada se mostrará el storyboard original como una imagen dentro de la capa, pero no visible a menos que se desee, esto se muestra en caso de que en una revisión futura se requiera un cambio desde el origen. Las funciones nuevas que se aplicaron con respecto al wireframes, son el la barra de desplazamiento que aparece bajo la capa seleccionada, esta permite mover las capas para ver su interacción entre ellas y desplegadas pueden verse por si solas. Las otras funciones tienen que ver con la percepción del área de trabajo en la pantalla.


Maquetastrencomic5.png

Interacciones

Maquetastrencomic51.pngMaquetastrencomic52.pngMaquetastrencomic53.png

Pantalla de Globos

Esta pantalla es a primera vista similar a la de storyboard, pero en esta no se puede editar gráficamente el trabajo hecho en esa área, solo se puede trabajar con los globos de texto y su contenido. Anteriormente en los wireframes esta pantalla no estaba bien constituida, es por eso que no esta presente en ese capítulo. La interacción como se dijo en la pantalla de guion se basa en un primer estado en la etiqueta de los guiones (se puede trabajar igualmente sin usar este método, pero este es el recomendado), existe una pantalla donde están los guiones presentados, estos se arrastran sobre la pantalla y crean un globo, a lo que posteriormente el usuario debe elegir su forma y su estilo de línea, luego presionando el texto puede agregarle estilos. En el caso de que no se etiquetaran los diálogos, basta con hacer click sobre la pantalla de trabajo y se hará un globo en el que se tendrá que escribir el texto. En las capas estas se presentarán como una capa extra que existe entre las capas de imágenes, separando las imágenes y las de texto mediante un lenguaje iconográfico. Una ves terminado el proceso de colocar los globos de texto, se puede agregar un segundo idioma, se recomiendan por el software el inglés y el portugués, como una forma de intencionar la plataforma para el continente americano.

Maquetastrencomic6.png

Interacciones

Maquetastrencomic61.pngMaquetastrencomic62.png

Pantalla de Preview

Esta pantalla tomo más importancia en relación con el wireframe, previamente servía solo para observar lo trabajado, ahora esta pantalla es el paso previo a la publicación, aquí se pueden etiquetar puntos de mayor importancia, con una medida de protección ante el scroll continuo sin control. De la misma forma en el estado de revisión, se puede ver los comentarios localizados de los primeros usuarios lectores Con respeto a los comentarios localizados, estos no necesariamente se aplicarán en la visualización web a todos los usuarios, pues en el caso de que sea una lectura masiva el comic se llenara de etiquetas, aunque no descarto que la interacción localizada dentro del comic pueda ser un dado importante de dentro del estudio compositivo de ese formato.

Maquetastrencomic7.png

Comic de prueba para smartphone y escritorio (sin parallax)

https://tolytox.github.io/pruebas-skroll/

Portadainterferencia.jpg


Portadainterferencia2.jpg

https://tolytox.github.io/pruebas-skroll/

Video que explica el flujo para crear un web-comic para trencómic

https://youtu.be/8OVRdXvHVN8

Conclusión

El proyecto Trencómic, es una plataforma de visualización de y creación de comic, al comenzar con el proyecto tenía la intención de levantar el comic y otorgarle importancia como un genero en si mismo. En la revisión de paginas que soportaran webcómic, pude encontrarme con tres que serian los pilares de Trencómic, y con esto no quiero referir en que sus funcionalidades son una copia, sino que es un estudio en donde puedo observar las falencias y los beneficios de cada una. La primera fue Lezhin comic, sitio koreano en donde se suben los webcómics, desde una suerte de editorial digital, los comic son primordialmente asiáticos (mangua), desde su idea editorial se mantiene una calidad en los trabajos. Tapas es el segundo sitio en mi lista, este es occidental, no tengo claro la nacionalidad de origen (ya que mi estudio se basaba en la interacción), los comic que están aquí están mayormente en inglés, a diferencia de Lezhin, cualquier usuario puede subir su comic, y tiene una lógica de subirlo por páginas, lógica que para mi un lector de comic tradicional no tenia mayor sentido, pero al parecer tenia un sentido de interacción en los lectores que seguían estos comic, esta lógica venia a capear la espera que existía entre números, ya que la producción de un comic suelen ser demorosas. El tercer referente, el cual es casi vergonzoso desde un punto de vista del diseño de interacción, y servicios web, es el sitio subcultura. Este sitio es el único sitio “masivo” de webcómic en español, en el cual se basan las editoriales chilenas para dar un visto bueno a la publicación de nuevos comic impresos ( esto no ocurre con cada numero que publican estas editoriales, pero son un dato para poder publicar), tuve una experiencia en el verano de este año 2017 con un comic llamado jim bastardo, la interacción en esta pagina era sumamente dificultosa, con lenguajes encriptados y servidores que en ocasiones se llenaban, sin tener en cuenta que para dificultar aún más la distribución de estos comic, no permitía compartir el contenido en redes sociales. Desde este ultimo tome la iniciativa de comenzar con una plataforma de lectura de comic, con la idea de poder crear un lugar estable y con circulación de lectores que permitiera quitar las trabas de idioma que generan otros sitios como Tapas y Lezhin (pensando desde países de habla hispana), y trabas de conectividad que causaba el sitio subcultura. La idea inicial contemplaba solo un mínimo de funcionalidad para los autores, pero tren comic a lo largo del año fue transformándose en algo mucho interesante e innovador que el mínimo. Trabajando en un nuevo formato de comic, que yo me atreví en denominar comic de multiplanos, en relación con las cámaras de multiplanos que se usaban en animación. Lo presentado ahora en esta tercera etapa de título, espera ser el comienzo de un proyecto mucho mas grande el cual pretendo presentar como proyecto el próximo año, en base al aporte cultural nacional e internacional que significaría tener una plataforma de estas características que apunte a un publico latino.