Título	Ciclo formatos de imagen - Soledad Araya
Asignatura	Producción Grafica
Del Curso	Producción gráfica 2020
Carreras	Diseño, Diseño Gráfico"Diseño Gráfico" is not in the list (Arquitectura, Diseño, Magíster, Otra) of allowed values for the "Carreras Relacionadas" property.
Nº	3
Alumno(s)	Soledad Araya Urrutia

Ciclo Formatos de imagen

En la actualidad, una imagen, sea fija o en movimiento, es la pieza fundamental de cualquier proyecto en donde se quiera comunicar algo, incluso prescindiendo del texto. Tal es la importancia de las imágenes en el mundo de hoy, más aun cuando la fotografía es de uso común y accesible para todos los usuarios gracias a smartphones y cámaras digitales.

En este aspecto, las imágenes que tomamos o las que descargamos de Internet no son idénticas, más allá de su tamaño y resolución. Existen múltiples formatos de imágenes, y todos ellos tienen un propósito específico. Aunque parezca que es lo mismo, una imagen para un logotipo listo para la imprenta no es ni puede ser lo mismo que una imagen preparada para la web ya que no poseen los mismos atributos.

Tipos de imagen

Primeramente hay que diferenciar que los tipos de imagen no son lo mismo que los formatos de imagen. Dentro de los tipos de imagen digital encontramos las de mapa de bit y las vectoriales.

Qué es un bit y que es un byte

Un bit (b) es un dígito del sistema de numeración binario, su acrónimo significa binary digit, traducido dígito binario.El sistema binario, en ciencias de la computación, es un sistema de numeración en el que los números se representan utilizando solamente dos cifras: cero (0) y uno (1). Es uno de los sistemas que se utilizan en las computadoras, debido a que estas trabajan internamente con dos niveles de voltaje, por lo cual tienen solo dos opciones de decisión,como un interruptor que se enciende o se apaga. El byte (B) en tanto es una representación de información utilizada en computación y en telecomunicaciones conformada por bits.Un byte es equivalente a un conjunto ordenado de ocho bits, 7 de ellos de información y uno adicional de control el cual dice a que tipo de categoría de información corresponden los otros 7 bits. La razón de la cantidad de bits que integran un byte es asimilable a la función de las cadenas de bits, ya que estas trabajan 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 diversos alfabetos, es por tanto el 256 un numero clave.

Un byte es equivalente a 8 bits.

Imagen en tamaño original.

.Imagen ampliada.

Imágenes en mapa de bits

Ejemplo profundidad de bits.Imagen en mapa de bits, ajustado a un bit.

Las imágenes de mapa de bits o imágenes rasterizadas, utilizan una cuadrícula rectangular proyectada encima denominada matriz, formada por elementos llamados píxeles para representar imágenes. Los píxeles tienen solo un color plano asignado, por tanto no existe gradiente de color y se distribuyen en la matriz de la pantalla a través de coordenadas X e Y.Generalmente se usan para imágenes como fotografías o pinturas digitales es por tanto photoshop el software mas apropiado para editarlas, de igual manera las imágenes de mapa de bits suelen ser las mas usadas en internet.

Resolución Las imágenes de mapa de bits tienen una resolución específica, es decir, tienen un numero de pixeles de ancho y de alto, esto causa que la imagen se vea pixelada si se cambia la escala a grandes ampliaciones en pantalla, o si se imprime con una resolución inferior que aquella para la que fue creada.

La profundidad de bits especifica la cantidad información de color que puede contener cada píxel de una imagen, cuanto mas bits de información tenga el píxel mas disponibilidad de color puede tener el cuadrado pixel. Mientras mas informas mayor precisión de color habrá en la imagen.Por ejemplo Al abrir en Photoshop un archivo nuevo permite cambiar el modo de color, por defecto aparece en rgb y de 8 bits en adelante , sin embargo se puede configurar para mapa de bits y ajustar a un bits,la imagen generada tendrá solo dos opciones,el blanco o negro, ni siquiera existirán matices de grises porque el formato no lo permite. A diferencia de las imágenes con una profundidad de 8 bits las cuales si generan una escala de grises con posibilidad de 256 valores de gris o gradientes entre blancos y negros.

Algunos ejemplos de profundidad de bits:

Imagen con 4 bit.

Imagen con 32 bit.

Imagen con 8 bit.

El RGB y los canales de color

Los canales son imágenes en escala de grises que almacenan diferentes tipos de información. Existen tres tipos de canales, los canales de información de color que se crean automáticamente al abrir una nueva imagen. El modo de color de la imagen determina el número de canales de color creados. Los canales alfa que almacenan selecciones de imágenes en escala de grises. Puede añadir canales alfa para crear y almacenar máscaras, lo que le permite manipular o proteger partes específicas de una imagen, y los canales de tintas planas especifican placas adicionales para imprimir con tintas planas.

El canal alfa suma 8 bits mas para determinar el grado de opacidad de ese pixel, en el cual podemos tener mas o menos transparencia. Esta información permite que podamos unir y fusionar imágenes de distintas formas y tamaños sin tener el marco propio de una resolución.

Las imágenes RGB cuentan con 3 canales de color, el canal verde, el rojo y el azul.Una imagen rgb con ocho bits por píxel tiene 256 posibilidades de valores para cada canal, lo que significa que hay mas de 16 millones de posibles valores de color por pixel.Este tipo de imagenes con 8 bits por canal a veces se les llama imágenes de 24 bits, esto porque multiplican los 8 bit por los 3 canales, es decir, 24 bits de datos por píxel. Photoshop también ofrece la posibilidad para trabajar con imágenes que contienen 16 o 32 bits por canal. A este tipo de imágenes de 32 bits por canal se les denomina imágenes de alto rango dinámico (HDR), pero son de uso generalmente para fotografía profesional ya que producen mayor profundidad de color.

Canales

Ejemplo de imagen de alto rango dinámico.

La cantidad de canales de color por defecto de una imagen depende de su modo de color. Por ejemplo: al trabajar con negro se utiliza solo un canal, al trabajar con RGB y LAB se utilizan tres canales y al trabajar con CMYK se utilizan cuatro canales.

Edición de imágenes

La edición digital de imágenes se ocupa de la modificación apoyada en computadoras de imágenes digitales , comúnmente un gráfico rasterizado, en la mayoría de los casos fotos o documentos escaneados. Estas imágenes son editadas para optimizarlas, manipularlas, retocarlas, o agregar algún objeto o cosa que está imagen no poseía previamente. Photoshop y todos lo editores de imágenes trabajan conforme a capas. Las capas son láminas apiladas transparentes y que permiten crear ordenadamente composiciones, permiten comprender el trabajo e independizar los elementos de una composición.

Ejemplo de capa en Photoshop.

Ilustración de las capas en Photoshop.

Algunas características de las capas

1)Photoshop por defecto crea un documento lienzo que está bloqueado, en las capas aparece fondo y sale una llave que bloquea , esto no permite moverlo.

2)Las capas se pueden nombrar ejemplo “fondo” y también se pueden destacar en caso que la capa sea importante.

3)En la zona inferior de la ventana de capas hay un icono para agregar estilo a las capas,pero se aplica solo a la que se encuentra abierta.

Primer encargo

Observaciones y fundamento

Crear una composición en Photoshop utilizando lo aprendido en clases, de medidas 21 x 21 centímetros, en una resolución de 300 píxeles por pulgada en RGB sobre un lienzo blanco, la composición debe llevar capas, colores, tipografías e imágenes.

Por definición la palabra intenso corresponde a un suceso o evento que se manifiesta con gran intensidad o que se expresa con mucha actividad. Dentro de los sinónimo de intenso podemos destacar enérgico, apasionado, penetrante, fuerte y profundo, por el contrario, sus antónimos mas competentes son apagado, débil, lánguido y frágil. Hacer este ejercicio nos permite tener un panorama mas clarificador asociado a lo que se quiere comunicar gráficamente.

La intensidad se puede expresar de una infinidad de maneras, entre ellas quise destacar el aspecto sensorial de gusto (sabor) del espectador, haciendo una relación sinestésica entre el sentido visual y el de sabor. Intenté simular el experimento del condicionamiento clásico, alterando el sonido de la campanilla por la imagen, pero esperando la misma respuesta del receptor. El condicionamiento clásico modelo estímulo-respuesta o aprendizaje, es un tipo de aprendizaje asociativo que fue demostrado por primera vez por Iván Pávlov. Este autor ideó unos experimentos con perros que son la base del condicionamiento clásico Se dio cuenta de que al ponerle la comida al perro, este salivaba. Cada vez que le pusiera la comida, Pavlov hacía sonar una campana, de modo que, cuando el perro la escuchaba, asociaba ese sonido con la comida y salivaba. Así, el perro estaba dando una respuesta (en este caso, la salivación) a un estímulo (la campana). La próxima vez que escuchara la campana, independientemente de si iba unida a la comida, empezaría a salivar. Partiendo desde este experimento surge la idea de que el estímulo visual al que se le expone a los receptores provoque en ellos una respuesta de antojo por un intenso café.

Creación de la imagen.Comencé tomando una imagen de la web. que luego modifiqué sus proporciones. Posteriormente exploré las tipografías escogiendo Century ghotic bold la misma utilizada en el ciclo anterior y añadiendole el efecto bandera justo por arriba del vapor, el color del texto es en blanco para que sintonice con la densidad del vapor y por último bajé la opasidad para hacerlo mas translucido y no fuera tan duro el contraste entre letra y vapor de la imagen.

Imagen original.

Primera propuesta.

Efecto bandera.

Formato de imagen y resolución

Actualmente existen muchos formatos de imagen pero se diferencian en dos grandes categorías de compresión de imagen. la compresión destructiva o con pérdida que elimina la información no visible o irrelevante para ahorro de espacio aunque también disminuye la calidad y la compresión no destructiva que es la que mantiene todos los parámetros de compresión que la original codificando la misma cantidad de información de manera mas eficiente.

TIFF

TIFF (Tagged Image File Format) es un formato de archivo informático para almacenar imágenes de mapa de bits. Es prevalente en la industria gráfica y en la fotografía profesional por su versatilidad y compresión no destructiva. Creado en 1986 para scaner, grabadores de pantalla y programas de pintura con retoque fotográfico muy especializados. TIFF es capaz de describir datos de imagen en dos colores, escala de grises, paleta de colores y color completo en varios espacios de color, sin embargo ocasionalmente es posible tener dificultades en abrir un TIFF creado en otras aplicaciones o en una plataforma diferente.

GIF

Formato de Intercambio de Gráficos y más conocido como GIF, es un formato gráfico digital utilizado ampliamente en la World Wide Web, tanto para imágenes como para animaciones.Es un formato antiguo de originado por CompuServe 1987. Creado para comprimir imágenes de 8 bits, que pudiesen ser telecomunicadas a través de su servicio e intercambiada entre los usuarios.En la actualidad el formato es popular porque permite crear animaciones sencillas en formato muy liviano para compartir. Es mas duro visualmente que un jpg pero es ágil, rápida fabricación y envío.

PNG

El formato PNG o portable network graphics es un formato de compresión sin pérdida, generalmente considerado como el reemplazo de gif, sin embargo, png no soporta animaciones. Es decir,sirven para cosas diferente. El formato PNG es frecuentemente usado para imágenes con líneas, colores sólidos y texto, que requieren precisión. Una característica importante es que admite el canal alfa en las imágenes, lo que permite guardar imágenes con sectores transparentes. El PNG permite comprimir más de 8 bits, eso le da una profundidad de color mejor, es un mejor formato para usar en logos y en imágenes que necesitan fineza en las terminaciones. Un aspecto en contra que posee el PNG es que no escala muy bien, es decir, si se amplia o reduce la imagen no se verá muy bien, está creada para tener un tamaño único.

JPEG Y JPG

JPEG o por sus siglas Photographic Experts Group, es el nombre de un comité de expertos que creó un estándar de compresión y codificación de archivos e imágenes fijas. Mientras que JPG es el formato de imagen creado por este comité. Este formato de imagen usa un algoritmo de compresión que disminuye el tamaño/peso de las imágenes, sin embargo, también reduce su calidad ya que jpg solo guarda imágenes con un máximo de 8 bits. Es practico porque hace las imágenes mas livianas pero transforma el fondo en blanco, en caso de requerir transparencia conviene utilizar PNG.

EPS

PostScript encapsulado, o EPS, es un formato de archivo gráfico que puede contener texto y gráfica vectoriales como por ejemplo ilustraitor, pero adicionalmente suele incluir una pre visualización en mapa de bits de la imagen encapsuladamente. El actual formato de ilustraitor (Ai) 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.Apesar de eso eps no esta totalmente extinto.

PSD

El formato PSD es nativo del programa para edición de imágenes Photoshop, este programa ha liderado durante años, la edición profesional de fotografías y gráficos digitales en mapas de bits. Permite guardar todas las presentaciones, retoques y nuevas creaciones, realizadas con este programa, almacenando todas las capas y canales que existan en el archivo de la imagen. Este formato casi no tiene compatibilidad con ningún otros programa, por lo que se recomienda tener dos copias del archivo, una en el formato nativo y otra en jpg o TIFF.

PDF

PDF también llamado portable document Format es un formato de almacenamiento para documentos digitales independiente de plataformas de software o hardware. Este formato es de tipo compuesto puede contener no solamente imagenes y texto sino también poner botones interactivos, videos, links formularios que se pueden responder, casi como un sitio web. Se usa mucho para manuales de productos,e-book y en general para todo aquello que no será editado posteriormente.

Imagen comparativa entre formato RAW y posteriormente procesada.

RAW

Raw es el formato crudo o bruto,es decir, contiene la imagen sin modificar. Es un formato que contiene la totalidad de los datos de la imagen tal y como ha sido captada por el sensor digital de la cámara. Al estar crudo no tiene definido ningún parámetro de color y solo algunos software son capaces de interpretarlos. por ejemplo no se puede abrir una imagen Raw en paint pero si en Photoshop y la imagen tendrá un peso mayor al habitual. Es un formato complejo ya que no tiene definido parámetros ni siquiera de color.

SVG

El formato svg o scalabre vector graphics es un formato de gráficos vectoriales bidimensionales, tanto estáticos como animados,esta basado en el lenguaje XML el cual describe las características de como debe aparecer la imagen. Al tratarse de imagen vectorial un archivo SVG se puede escalar a diferentes tamaños manteniendo sus mismos atributos, sin perder calidad, por lo que funciona muy bien en la web.Por otro lado el SVG no es útil en fotografías, ya que se necesitaría convertir la imagen a vectores para representarse.

Raster

El concepto de raster expresa la dimensión en número de píxeles que forman una imagen en mapa de bits, ancho por alto.Es común oir sobre los mega píxeles de una cámara digital y atribuirla a una mejor calidad de imagen, sin embargo, los megapixeles solo dicen una relación con el tamaño del lienzo, que tan grande es la foto que se puede obtener no obstante la calidad de la imagen dependerá de la óptica, el sensor y el factor humano, es decir, quien manipula la cámara, etc.Por tanto el tamaño en píxeles no asegura la calidad de una imagen.

Ejemplo gráfico rasterizado. El raster es una imagen digital que se expresa multiplicando ancho por alto.

Para calcular el tamaño en píxeles a tamaño en centímetros para la impresión se aplica la siguiente fórmula:tamaño de impresión = numero de píxeles/resolución.

La resolución de impresión son los puntos por pulgada (ppp) o dpi, donde la pulgada es equivalente a 2,54 cm. la resolución es la relación entre las dimensiones digitales y las físicas,considera donde vamos a mostrar esta imagen en papel o en digital.

Resoluciones de impresión recomendadas

imágenes para impresora doméstica: 150 dpi imágenes para imprenta: 300 dpi o más imágenes para pantalla: solían tener un estándar de 72 dpi, sin embargo, con la creación de pantallas retina, las resoluciones para pantalla incluso superaron los estándares altos para papel, llegando a 458 dpi.

Segundo encargo

Modificar la resolución de su composición (de la clase anterior) a 100 dpi. Exportar su composición a diferentes formatos de imagen como jpg, png y tiff. Observar diferencias y registrarlas en tu tarea.

En este encargo,decidí modificar los parámetros de tono, saturación y luminosidad aprendidos en el primer ciclo de Producción gráfica, con el propósito de obtener una imagen mas vibrante y que mostrara mas intensidad cromática para poder asociarse mas al concepto intenso. También decidí cambiar el texto, pero manteniendo la misma tipografía, cambié el color por un tono que había dentro del café de la imagen gracias a la herramienta cuentagotas. Trabajé utilizando capas entre la imagen y el texto. Se guardó en formato png y jpg,sin embargo, el formato tiff no es permitido en la wiki. Al comparar las imágenes visualmente son idénticas, sin embargo, al estudiar sus atributos de tamaño se diferencian.

Imagen definitiva con 300 dpi.

Versión modificada a 100dpi y en formato jpg.

Versión modificada a 100dpi y en formato PNG.

Efectos utilizados en el texto.

Trabajo en capas de texto y de imagen.

Propiedades de la imagen JPG tamaño de 127 KB.

Propiedades de la imagen PNG tamaño 532 KB.

Propiedades de la imagen TIFF 17,6 mb

Imagen vectorial

Imagen vectorial.

La geometría plana o geometría de plano euclidiano estudia los elementos geométricos a partir de dos dimensiones.Aquí encontramos un elemento llamado vector. Un vector fijo del plano euclidiano es un segmento de recta orientado que cuenta con tres características, el módulo equivalente longitud del segmento (valor numérico), la dirección que es el ángulo del vector con respecto al eje x y el sentido correspondiente a la orientación del segmento.

Desde ahí nace la imagen vectorial, una imagen que se mueven gracias a fórmulas matemáticas (polinomios). En gráfica, una imagen vectorial se refiere a una imagen 2D, compuesta por objetos geométricos independientes ya sean abiertos o cerrados, como línea o polígono, definidos por atributos matemáticos para la posición, el color, etc. Este tipo de imágenes suelen ser mas livianas que las de mapa de bits.

Los gráficos vectorial se aplica en: tipografías, logos, juegos de video, gráficos web., pictogramas.etc

curbas de Bezier Se denomina curvas de Bézier a un sistema que se desarrolló hacia los años 1960 para el trazado de dibujos técnicos, en el diseño aeronáutico y en el de automóviles. Pierre Bezier lo desarrolló para representar partes de la carrocería de los autos de Renault. En tipografía estas curvas son definidas por cuatro puntos: la curva pasa por el primero y el ultimo llamados puntos de anclaje y es atraída por los otros dos que se conocen como controladores o puntos de control, Las curvas de bezier se adaptan idealmente para las replicas de curvas complejas como las de los ojos tipográficos de los caracteres.Los puntos ancla o nodos determinan los segmentos y posibilitan realizar formas redondeadas o con ángulos.

Adobe Illustrator (AI) es un editor de gráficos vectoriales en forma de taller de arte que trabaja sobre un tablero de dibujo, conocido como mesa de trabajo y está destinado a la creación artística de dibujo y pintura para ilustración, para crear y diseñar imágenes, diseño editorial, dibujo profesional, maquetación web, gráficos para móviles, interfaces web, o diseños cinematográficos.

Tercer encargo

Crear una ilustración botánica desde el papel, para luego vectorizarla en illustrator. Trabajar con colores, figuras y trazos vectoriales. Exportar en formatos de imagen vectorial.

Chloraea bletioides, llamada popularmente pico de loro,1 es una orquídea de hábito terrestre endémica de Chile. Se distribuye en el centro del país: desde la provincia de Aconcagua hasta Concepción, también se encuentra con frecuencia en la costa de Valparaíso, así como en las cordilleras bajas (alrededor de Santiago: Salto de Conchalí, Manquehue, Peñalolén). En altitudes desde el nivel del mar hasta los 500 metros.

Flor elegida, Chloraea Bletioides.

Boceto.

Ilustración.

Boceto contrastado.

Fragmento ilustración.

Exploración con colores y degradados.

Este encargo fue realizado con un boceto a lápiz, que luego fue redibujado digitalmente con la herramienta pluma. Siendo esta vez la primera en utilizar este software se me dificultó el manejo de los nodos, es por tanto que quedaron zonas sin unir y el trazo regular sin variantes ni de grosor ni colores.Todo el trazo está en color negro y de tamaño 5 pt.