Tarea ciclo de la Imagen- Josefina Schiappacasse

De Casiopea



TítuloTarea ciclo de la Imagen- Josefina Schiappacasse
AsignaturaProducción Gráfica
Del CursoProducción gráfica 2021
3
Alumno(s)Josefina Schiappacasse

Ciclo de la Imagen

Formatos de Imagen y Mapa de bits

Actualmente existen muchos formatos de imagen, pero primero hay que entender los tipos de compresión de imagen.

Existen dos tipos. La compresión con pérdida que elimina la información no visible para ahorra espacio, por ejemplo cuando se envía una imagen desde la galería a otro dispositivo por medio de una aplicación estas suelen bajar la calidad de la imagen. La compresión sin pérdida mantiene los parámetros de compresión originales manteniendo la calidad y cantidad de información.

Formatos de imagen

El uso de un formato de archivo incorrecto (o subóptimo) podría resultar en:

  • Baja calidad de imagen / video / audio
  • Tamaños de archivo innecesariamente grandes
  • Entrega lenta de archivos grandes
  • Inaccesibilidad de los datos dentro del archivo[1]
  • TIFF

Tag Image File Format es el formato de mapa de bits mas versátil, seguro y con mayor soporte. Describe datos de imágenes en dos colores, escala de grises, paleta de color y color completo en varios espacios de color. Ocasionalmente se puede tener problemas en abrir los archivos TIFF creado con otra aplicación o bajo una plataforma diferente. "Los TIFF son ideales para situaciones en las que no desea perder calidad de imagen y no le preocupa el tamaño de la imagen. Por ejemplo, si está almacenando fotografías para imprimirlas más tarde. Es posible que deba usarlos si está utilizando un software de autoedición, o pueden ser lo que su escáner envía a su computadora."[2]

  • GIF

Graphics Interchange Format, fue desarrollado para comprimir imágenes de ocho bits, que pudiesen ser telecomunicadas e intercambiadas entre los usuarios. Permite crear animaciones sencillas en un formato muy liviano para compartir.

  • PNG

Portable Network Graphics es un formato de compresión sin pérdida, que no soporta animaciones, sino imágenes con líneas, colores sólidos y texto, que requieren precisión. Importante es que admite el canal alfa en las imágenes lo que permite guardas imágenes con sectores transparentes. "Al igual que los JPG, los PNG se suelen utilizar para imágenes y fotografías vívidas y de alta calidad."[3]" Utilizar en gráficos, ilustraciones, y archivos pequeños en la web que necesiten transparencias. Evitar en fotografías con muchos detalles que necesiten ser subidas a la web porque serán demasiado pesadas."[4]

  • JPEG Y JPG

JPEG es un mecanismo estandarizado de compresión de imagen, cuyo contenedor más común es JPG, el cual un algoritmo de compresión que disminuye el tamaño/peso de las imágenes, también reduce su calidad. JPG sólo guarda con un máximo de 8 bits. "Se utiliza mejor para una calidad de imagen fotorrealista e imágenes complejas llenas de colores vivos."[5] "Ideal para mostrar fotografías en la web sin ocupar mucho espacio en un servidor."[6]

  • EPS

Encapsulated PostScript puede contener texto y gráficas vectoriales pero adicionalmente suelen incluir una previsualización en mapa bits de la imagen encapsuladamente. El actual formato Al se basó en EPS para la creación de su propio formato, aunque ambos han sido reemplazados por el formato PDF, que se ha vuelto un estándar para el intercambio de imágenes vectoriales.

  • PSD

Es un formato nativo de Photoshop y permite guardar todas las creaciones almacenando capas y canales que existan en el archivo de imagen. Casi no tiene compatibilidad con otros programas, es usado generalmente durante el proceso de edición y luego para publicar o compartir se usa en otro formato. "Los PSD son útiles si usted y su equipo usan Adobe Photoshop y desean colaborar o archivar el trabajo que se editará más adelante. También son compatibles con otros productos de Adobe como Illustrator, Premiere Pro y After Effects."[7]

  • PDF

Portable Document Format puede contener no solo imágenes y texto sino también botones interactivos, link, videos y más. Una virtud de PDF es que no depende del software donde se creó el documento, ni tampoco depende de un sistema operativo, por lo que puede ser visualizado con el mismo resultado sin importar desde donde se abra el archivo.

  • RAW

Raw significa crudo o bruto, es decir, contiene la totalidad de los datos de la imagen tal y como ha sido captada por el sensor digital de la cámara. No tiene definido ningún parámetro del color y sólo algunos softwares son capaces de interpretarlos. Por ejemplo, no podremos abrir una imagen RAW en Paint, pero si en Photoshop y la imagen tendrá un peso mayor al habitual. " Estos archivos son útiles si va a editar la foto en el futuro y está dispuesto a cambiar un tamaño de archivo grande por una imagen de mayor calidad."[8]

  • SVG

Scalable Vector Graphics está basado en el lenguaje XML el cual describe las características de como debe aparecer la imagen. Al tratarse de imagen vectorial, se puede escalar a diferentes tamaños sin perder calidad, por lo que funciona muy bien en wed. "Los SVG son ideales para el diseño web receptivo, así como para la creación de logotipos de empresas que deben conservar la calidad, ya sea que estén impresos en una tarjeta de presentación o en un cartel."[9]


RAW y JPG en cámaras fotográficas [10]
GIF[11]
JPG en comparación a PNG, transparencias. [12]

Ráster

Expresa la dimensión en número de píxeles que forman una imagen en mapa de bits, ancho x alto. El ráster de una imagen digital se expresa multiplicando su anchura por la altura en pantalla, por ejemplo, la imagen de 1.200 x 1.200 píxeles es igual a 1.440.000 píxeles, expresado en megapíxeles es igual a 1,4 Mp.

Resolución

En la impresión la resolución corresponde a los puntos por pulgadas, donde la pulgada mide 2,54 cm. La resolución es la relación entre las dimensiones digitales (los pixeles) y las físicas, que tendrá una vez impresa sobre papel u otro soporte incluso digitales.

Tamaño de impresión = Número de pixeles / Resolución(pixeles por pulgada)  

Resoluciones recomendadas

  • Imágenes para impresión doméstica: 150 dpi
  • Imágenes para imprenta: 300dpi o más
  • Imágenes para pantalla: entre 72dpi y 458 dpi

bits y Bytes

El bit es el acrónimo de binary digit. Es un dígito del sistema de numeración binario 0 y 1, siendo 0 un punto apagado y 1 un punto prendido.

Byte es una representación de información por bits y está formada por ocho de ellos: 7 de información y uno adicional de control.

  • bits=b Bytes=B

Las cadenas de bits actúan de forma exponencial. En 8 bits se pueden producir 256 opciones de combinaciones, lo que cubre el lenguaje escrito completo, permitiendo representar todos los caracteres de los alfabetos.

Imágenes de Mapas de bits

La imágenes rasterizadas utilizan una cuadrícula rectangular de elementos de imágenes (píxeles) para representar imágenes. Cada píxel se le asigna una ubicación en la matriz de una pantalla y un valor de color específico. Generalmente para imágenes como fotografías o pinturas digitales.

Estas imágenes dependen de una dimensión, es decir, contienen un número dijo de píxeles y pierden detalle y pueden aparecer pixeladas si se cambia la escala a grandes ampliaciones en pantalla o si se imprimen con una resolución inferior que aquella para la que fueron creadas.

Ejercicio con foto propia para ver los pixeles

Profundidad de bits

Especifica la cantidad de información de color que está disponible para cada píxel de una imagen. Mientras más bits por píxel, mas colores disponibles y mas precisión en la representación del color.

Blanco y negro= 1 bits que contiene 2 valores posibles
Escala de grises= 8 bits contiene 256 posibilidades 
RGB= 3 canales de color con 8 bits por píxel para cada canal, contiene 16000000 de valores de color
  • Photoshop puede trabajar con imágenes que contienen 16 o 32 bits por canal. Las imágenes de 32 bits por canal son las imágenes de alto rango dinámico (HDR), principalmente usadas en fotografía profesional.
bits por canal de color[14]

Además de canales de color, a una imagen se pueden añadir canales alfa para almacenar y editar selecciones como máscaras, y también se pueden añadir canales de tintas planas para añadir placas de tintas planas en la impresión.

Edición de imágenes

Capas

Son como láminas apiladas transparentes sobre las que se puede crear imágenes, poner textos y otros elementos visuales. Permiten componer independiente cada nivel, donde en las partes transparentes de cada capa, se puede ver lo que hay detrás.

Exploración en edición de imagen

  • Dado que la wiki no permite subir archivos en formato TIFF, este queda pendiente
Archivo en formato JPG
Archivo en formato PNG



Originales

Notas y observaciones

  • Las dos cosas más notorias que encontré fue la diferencia de tamaño entre los archivos y la diferencia entre los colores de jpg y png, que se aprecian menos brillantes e jpg.
Comparación de tamaño de los archivos

Edición

Edición de la imagen
Edición de la imagen


Exploraciones

Imagen Vectorial e Illustrator

En un comienzo las imágenes que se diseñaban por computadoras se lograban mediante programación, siendo un trabajo mucho mas complicado que la manera de crear ilustraciones actual. La manera actual que trabaja Illustrator es mediante vectores que van dibujando en una "mesa de trabajo".

Vectores

Dos puntos en un espacio bidimensional se pueden unir por un segmento, un vector el cuenta con tres características:

  • Módulo: corresponde a la longitud del segmento.
  • Dirección: ángulo del segmento respecto del eje x.
  • Sentido: orientación del segmento, es indicada mediante una punta de flecha.

Imagen vectorial

Las imágenes vectoriales son imágenes 2D compuestas por objetos geométricos dibujados a partir de atributos matemáticos, para posiciones, color, etc.

Las imágenes vectoriales se pueden escalar y nunca se van a pixelar como las imágenes con mapas de bits.

Usualmente se aplican en tipografías, logos, juegos de video y gráficos web

Ejercicio calco de imagen

Curvas de Bézier

Son ecuaciones paramétricas que dan atributos de posición, color, etc. Los puntos ancla o nodos determinan los segmentos y posibilitan realizar formas redondeadas o con ángulos.

Illustración en "An Ode to the Bezier Curve"[16]

Illustrator

En Illustrator se puede trabajar con imágenes vectoriales, iniciando por formas, trazos, trazados de formas/vectorizar y extrusión de formas.

"El software de gráficos vectoriales estándar del sector te permite crear de todo, desde gráficos en el sitio web y dispositivos móviles hasta logotipos, iconos, ilustraciones para libros, paquetes de productos y afiches. Ahora puedes experimentar la libertad y la flexibilidad de Illustrator en escritorio e iPad."[17]

Composición en Illustrator

Proceso de edición


Resultado final

JPG
PNG


Observaciones:

1.Siento que las figuras que agregué en cierto modo aportan y dan continuidad, al terreno y al cielo, y como estos se extienden desde el horizonte. Por eso creí que no era necesario poner más elementos que se amontonaran sombre el lienzo, sino estos dos elementos que se extienden desde las fotografías en el centro, hacia los extremos del lienzo.

2.Al abrir el archivo eps en Illustrator el "calco de imagen" aparece por capas, cada figura de color por capa.

Capas de calco de imagen

3.Los archivos svg, pdf, y eps, son de mayor tamaño en relación a jpg y png. Incluso al abrir los archivos, mi computador por lo menos, se demora mucho más en abrirlos, pero son imágenes con mucho mas detalle. De hecho, me pasó que al usar calco de imagen, este luce bien para jpg y png, pero en svg y pdf, se ve mal.

Tamaño de los tipos de archivo
Visualización archivo svg
Visualización archivo pdf

Espacio Audiovisual y Premiere Pro

Invención de la imagen en movimiento

Antes de la cinematografía, nace la fotografía y ya en 1852, estas comenzaron a sustituir a los dibujos en los aparatos para ver imágenes animadas. En 1877 el fotógrafo Eadweard Muybridge empleó una batería de 24 cámaras para grabar el ciclo de movimientos del galope de un caballo. Posteriormente el cronofotógrafo portátil, una especie de fusil fotográfico, movía una única banda que permitía obtener doce imágenes en una placa giratoria que completaba su revolución en un segundo.[18]

El caballo en movimiento (1878) de Eadweard Muybridge.[19]
Los 16 fotogramas[20]


La primera maquina en lograr grabar y proyectar películas de cine fue el cinematógrafo, creado por los hermanos Lumière en el siglo XIX, dando inicio a la cinematografía, un nuevo espacio de creación artística.

cinematógrafo en modo filmaciòn[21]
cinematógrafo en modo proyección [22]


Las primeras películas eran cortometrajes de 16 a 18 fotogramas por segundo aproximadamente, lo que permitía reconocer cierta continuidad y fluidez del movimiento. Así se abre el mundo del cine mudo y también la fantasía.

Fragmento película Viaje a la Luna[23]
Fragmento película Viaje a la Luna[24]



Recién en 1920 se incorpora el sonido al movimiento, y cambia el estándar a 24 fotogramas por segundo, pues el sonido al estar expuesto en la película requería mas fotogramas para que el audio fuese de una buena resolución, para la época.

Pelicula con onda sonora[25]


La llegada de las nuevas tecnologías de la información y los distintos formatos de video digital, favoreció la generación de sorprendentes efectos visuales y auditivos y también una circulación masiva de estos. Hoy en día se podría decir que todos tienen acceso a servicios basados en herramientas audiovisuales, desde el uso de videollamada, hasta el registro por cámara y video, incluso acceso a la edición de estos en un mismo aparto y de manera sencilla.

Medios audiovisuales

Los medios audiovisuales son aquellos que comunican involucrado el sentido de la vista y la audición, como es el caso de la televisión, el cine, y la mayoría del internet.

Se puede decir que son efímeros y perdurables al mismo tiempo, ya que tienen una duración de reproducción determinada, pero se pueden reproducir "infinitamente" desde principio a fin.

Edición de video

Es el proceso en el que un editor se encarga de transformar los diferentes fragmentos de un vídeo, además de añadir otro elemento gráficos, como pueden ser fotografías, audios, efectos digitales, así como también cualquier otro material audiovisual en una cinta o en un archivo informático.

En un principio la edición se realizaba sobre una cinta llamada master de video, en la década de 1980 nació la edición digital donde la edición se realiza sobre un archivo informático, el master digital de vídeo (MDV).

Edición vs Montaje

Serguéi Eisenstein: los sentimientos y el ritmo en el cine[26]

El montaje es el proceso realizado con películas de cine, que partían de una emulsión fotosensible. Por tanto, para realizar copias o duplicados con los que trabajar, se debía recurrir a procesos químicos, con líquidos, grandes espacios, cámaras oscuras, y tiempos de espera. A diferencia de la edición el montaje se encarga del modo de mostrar la historia, en cierto orden y con un ritmo especifico, para dar a entender y comunicar los que se quiere.

"Serguéi Eisenstein fue un pionero del uso del montaje en el cine. Para Eisenstein, la edición no era un simple método utilizado para enlazar escenas, sino un medio capaz de manipular las emociones de su audiencia. Después de una larga investigación en el tema, Eisenstein desarrolló su propia teoría del montaje."[27]

Por otro lado la edición es un termino propio de los soportes magnéticos(cintas, memorias flash o discos duros). Se utiliza material audiovisual grabado electrónicamente para obtener una cinta o un archivo de computadora.

Luego en el siglo XXI se fue produciendo una convergencia de los dos sistemas, que sólo se diferenciaban por su formato y calidad, no necesariamente por su soporte. Los dos podían ser digitales y manejados en ocasiones con equipos idénticos.


Cinta vhs. Imagen propia


Edición Lineal

En 1956 Ampex desarrolló el magnetoscopio, una maquina que graba a gran velocidad el sonido e imagen en un mismo soporte. Los equipos y soportes eran más baratos y no necesitaban esperar al revelado, ni crear una copia de trabajo, pero tenía baja calidad en relación a una cinta cinematográfica. Se basa en la linealidad del soporte de cinta magnética (vhs, beta, etc) y su principal característica es que no permitía inserciones sin regrabar linealmente todo el contenido, por ello es un proceso engorroso y lento. Fue usado más para programas de televisión, que para películas que requieran de un proceso de montaje.

Video Una vista del proceso por el que la cinta magnética sale de la carcasa del casete hacia la cabeza lectora de la videograbadora.





Edición No-Lineal

Se asemeja al primer montaje cinematográfico, donde es posible seleccionar los fragmentos y reordenar las grabaciones, pero sin recaer en los extensos procesos de antaño. La edición no-lineal digital fue una innovación creada por Avid en los años '80 que se mantiene hasta la actualidad

Conceptos esenciales para la edición de video

  • Formato de video

Son la manera de guardar los datos dentro de un archivo de video o de un fichero. Estos diferentes contenidos pueden ser, video, audio, y texto generalmente. Los formatos de video más conocidos son: AVI, MKV, FLV, MP4, MOV y WMV. Recomendable usar FLV, MP4 o MOV.

  • Codec video

"Codificar"; comprimir los datos de un archivo para agilizar su transferencia y que el archivo sea mas portable, y "Decodificar"; descomprimir al reproducir o editar el video, para proporcionar todos los datos del archivo. Los Codecs de video más conocidos son: Theora, H.264, MPEG, VP8, XVID, DIVX. Recomendable usar H.264.

  • Relación de aspecto

Se refiere a la proporción que existe entre el ancho y el alto de una imagen o video. Se calcula dividiendo en largo entre la altura dela imagen visible de la pantalla, y se expresa normalmente como "x:y".

16:9 / Televisores HD
4:3 / Televisor tradicional
2:3 / Celular


Existen mas proporciones aparte de las anteriores, como el 1.85:1 (cine).

  • Resolución de video

Es el número total de píxeles que puede ser mostrados en la pantalla de un monitor de ordenador, televisor, un teléfono móvil o en cualquier dispositivo con pantalla. Todos los dispositivos tienen en sus pantallas una resolución concreta, y de ella va a depender la resolución que puedes llegar a alcanzar de los videos.

  • Línea de tiempo

Es la herramienta básica del montaje no-lineal. Sobre este se compone varias pistas de forma vertical que va organizando la edición, teniendo un total control en la manipulación de los elementos puestos sobre un espacio de tiempo determinado. Su unidad es un frame y sus sistema de medida es el Código de tiempo, el cual se presenta en HH:MM:SS:FF, Horas, Minutos, Segundos y Frames.

Linea de tiempo en Adobe premiere. Imagen propia

Adobe Premiere pro

Adobe premiere pro permite "Editar el grado de color de los videos, ajustar el sonido e importar gráficos y efectos especiales de otras aplicaciones de Adobe. Tanto si eres un editor de video profesional como si eres un aficionado. Importar las secuencias en cualquier formato de archivo. Recortar las secuencias con precisión. Agregar animación y efectos de video. Gestionar la edición y los efectos de sonido."[28]

Practica en Adobe Premiere

Proceso de edición

Observaciones:

1.En relación al programa, tiene demasiadas herramientas que me faltaron "curiosear" pero creo que con incluso sabiendo ocupar pocas de estas se podría lograr expresar lo que se quiere comunicar

2.Respecto al modo en que muestro el concepto "Extenso", me cuestioné si era mejor mostrar un objeto extenso, o una situación extensa, en este caso que era un video de 30 segundos, opté por un elemento extenso, me seguí cuestionando si el video luce más como "rapidez" o velocidad" o "ventoso", pensé en hacer un video de una planicie con cierta cantidad de elementos que no estuviesen "amontonados" y grabarlo lentamente, pero también se podría interpretar como "pacifico" o "calmo". Finalmente me quedé con el video que presento, sobre el extenso camino que nos muestra el ciclista. De todas formas el texto al final aclara la idea.

3.Escogí agregar esa música porque me parecía, tener sonidos que acompañaban el ritmo del video, y el sonido del violín le da cierta extensión al ritmo.






Referencias

  1. https://blog.filestack.com/thoughts-and-knowledge/complete-image-file-extension-list/
  2. https://blog.filestack.com/thoughts-and-knowledge/complete-image-file-extension-list/
  3. https://blog.filestack.com/thoughts-and-knowledge/complete-image-file-extension-list/
  4. https://www.intelcoms.net/diferencias-png-jpg-tif-gif-cuando-usar-uno-u/
  5. https://blog.filestack.com/thoughts-and-knowledge/complete-image-file-extension-list/
  6. https://www.intelcoms.net/diferencias-png-jpg-tif-gif-cuando-usar-uno-u/
  7. https://blog.filestack.com/thoughts-and-knowledge/complete-image-file-extension-list/
  8. https://blog.filestack.com/thoughts-and-knowledge/complete-image-file-extension-list/
  9. https://blog.filestack.com/thoughts-and-knowledge/complete-image-file-extension-list/
  10. https://www.dzoom.org.es/raw-o-jpeg-ejemplos/
  11. https://www.ofnblog.com/gif/gif-no15-morphin-colors-by-davidope
  12. http://blog.fidelizador.com/2019/12/17/formato-tamano-imagen-email/jpg-versus-png/
  13. https://hardzone.es/reportajes/que-es/profundidad-color-monitor/
  14. https://hardzone.es/reportajes/que-es/profundidad-color-monitor/
  15. https://sp.depositphotos.com/stock-photos/carretera-austral.html
  16. https://blog.prototypr.io/an-ode-to-the-bezier-curve-3eb9eca038ff
  17. https://www.adobe.com/la/products/illustrator.html?sdid=KQPQL&mv=search&ef_id=CjwKCAjwqIiFBhAHEiwANg9szjCWqfkKBMIWaE6jg0AYKReaG3STBism16AdoJa0BUlkIAHlgNv19hoClksQAvD_BwE:G:s&s_kwcid=AL!3085!3!442303212642!e!!g!!illustrator!9499870682!97813414318&gclid=CjwKCAjwqIiFBhAHEiwANg9szjCWqfkKBMIWaE6jg0AYKReaG3STBism16AdoJa0BUlkIAHlgNv19hoClksQAvD_BwE
  18. https://es.wikipedia.org/wiki/Pel%C3%ADcula
  19. https://es.wikipedia.org/wiki/Fotograma
  20. https://es.wikipedia.org/wiki/Fotograma
  21. https://es.wikipedia.org/wiki/Cinemat%C3%B3grafo#/media/Archivo:Cinematograf-Camera1.jpg
  22. https://es.wikipedia.org/wiki/Cinemat%C3%B3grafo#/media/Archivo:Cinematograf-Project3.jpg
  23. https://www.pinterest.es/pin/509821620310765692/
  24. https://makeagif.com/gif/le-voyage-dans-la-lune-georges-melies-1902-Gp55HU
  25. https://es.scribd.com/doc/169402223/Sonido-optico-cine-pdf
  26. https://www.elretruecano.com/serguei-eisenstein-los-sentimientos-y-el-ritmo-en-el-cine/
  27. https://es.wikipedia.org/wiki/Sergu%C3%A9i_Eisenstein
  28. https://www.adobe.com/la/products/premiere/movie-and-film-editing.html?promoid=Y2KRGXD5&mv=other