Diferencia entre revisiones de «Ciclo Formato de Imagen - Gabriela Marín»

De Casiopea
(Encargo 3)
Línea 108: Línea 108:
  
  
[[Archivo:fgm2.gif|200x|sinmarco|thumb|]]
+
[[Archivo:gabi4.gif|200x|sinmarco|thumb|]]
  
 
'''''PNG'''''
 
'''''PNG'''''

Revisión del 17:21 21 may 2020


Florgm6.png


TítuloCiclo formato de imagen - Gabriela Marín
AsignaturaProducción gráfica 2020
Del CursoProducción gráfica 2020
CarrerasDiseño
3
Alumno(s)Gabriela Marín

Mapa de bits y Photoshop

thumb
Bitsgm1.jpg

Bits y Bytes

BIT (b) es la abreviación de dígito binario, la cual en términos técnicos es la menos unidad de información de una computadora. Un bit tiene solamente un valor que puede ser 0 o 1. Toda la información procesada por una computadora es medida y codificada en bits. Toda la información en el lenguaje del usuario es convertida a bits para que el computador la "entienda". La combinación de bits entre sí dan origen a unidades como byte, mega, giga y tera.

BYTE (B) es un conjunto de 8 bits, siete son de información y uno el que da el control, formando según una secuencia que representa un carácter.

¿Por qué 8 bits?

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.

Bitsgm9.jpg

Mapa de bits

Imágenes mapa de bit

Las imágenes de mapa de bits, también llamadas imágenes pasterizadas o bitmaps, están formadas por una cuadricula de puntos llamados pixeles, para representar imágenes. Cada uno de esos pixeles tiene un color definido por un valor. Si hacemos zoom sobre ellas veremos esos pixeles, cuantos mas pixeles tenga una imagen mayor será su calidad.

Bitsgm4.jpg

Resolución

Las imágenes de mapa de bits dependen de la resolución que viene determinada por la longitud de la palabra digital (bits), es decir por las agrupaciones de ceros y unos con que se va codificando la señal.

Bitsgm5.jpg

Profundidad de bits

Profundidad de bits o de color, es la cantidad de información que es posible almacenar en cada pixel para representar el valor del tono. Cada pixel es portador de una información de color.

Una imagen en profundidad de 1 bit, tiene pixeles con dos valores posibles: blanco y negro.

Bitsgm6.jpg

RGB con 8 bits y más

Las imágenes RGB se componen de tres canales de color. Una imagen RGB con 8 bits por pixel cuenta con 256 posibles valores para cada canal, lo que significa mas de 16 millones de posibles valores de colores. En ocaciones , las imágenes RGB con 8 bits por canal (azul, verde, rojo) se denominan imágenes de 24 bits (8 bits x 3 canales). Photoshop también puede trabajar con imágenes que contiene 16 o 32 bits por canal. Las imágenes con 32 bits por canal también se denominan imágenes de alto rango dinámico (HDR), pero es de uno principalmente de fotografía profesional.

Bitsgm7.png


Canales

Término convencional utilizado para referirse a cierto componente de una imagen. Las imágenes digitales en color están hechas en pixeles y los pixeles están formados por combinaciones de colores primarios. Un canal en este contexto es la imagen en escala de grises del misma tamaño que la imagen en color, hecha de uno de estos colores primarios. Por ejemplo, una imagen de una cámara digital estándar tendrá los canales rojo, verde y azul. Una imagen en escala de grises tendrá sólo un canal.

Bitsgm89.jpg

Edicion de imágenes

Capas

Las capas de Photoshop semejan hojas apiladas de acetato. Puede ver las capas que se encuentran debajo a través de las áreas transparentes de una capa. Si mueve una capa a fin de colocar el contenido en ella, es como si deslizara una hoja de acetato dentro de una pila. Las capas sirven para realizar diversas tareas, entre otras, componer varias imágenes, añadir texto a una imagen o añadir formas de gráficos vectoriales.

Bitsgm8.jpeg

Encargo 1

Crear una composición a partir de sus ejercicios anteriores en photoshop en un formato de 21x21 cms, en una resolución de 300 px x pulgada, en modo color RGB sobre un lienzo blanco. Usando capas, colores, tipografías e imágenes. Todo en relación a la palabra estrecho.


thumb

Formatos de imagen y resolución

Formatos de imagen

thumb


Los formatos de imagen están estandarizados para organizar y almacenar imágenes digitales. Puede almacenar datos en un formato sin comprimir, en un formato comprimido o en formato de vector.

Antes de revisar los tipos de formatos de imagen, debemos conocer tipos de comprensión de imagen:

  • Comprensión destructiva: elimina la información no visible para buscar un ahorro de espacio.
  • Comprensión no destructiva: mantiene los parámetros de compresión originales codificando la misma cantidad de información de manera más eficiente.

Tiff

Tiff (Tag Image File Forma) es un formatos flexible de imágenes de mapa de bits que admiten todos los programas de pintura, edición de imágenes y diseño de paginas. Admite imágenes CMYK, RGB, LAB, de color indexado y en escala de grises con canales alfa, e imágenes en modo de mapa de bits sin canales alfa. Photoshop puede guardar capas en un archivo TIFF pero si abre el archivo en otra aplicación, es posible tener problemas. Además no es un formato para Internet debido al gran tamaño de los archivos con este formato.


Gif

GIF (Graphics Interchange Formato) fue desarrollado en 1987 para comprimir imágenes de 8 bits, que pudiesen ser telecomunicadas a través de su servicio e intercambiadas entre los usuarios. Es el formato de archivo que se utiliza habitualmente para mostrar gráficos e imágenes de color indexado en documentos HTML en Internet y otros servicios en línea. En la actualidad el formatos es especialmente popular porque permite crear animaciones sencillas en formato muy liviano para compartir.


Gabi4.gif

PNG

PNG (Portable Network Graphics) es un formato de comprension sin perdida, fue desarrollado como alternativa sin patente al formato GIF, con la diferencia que PNG no soporta animaciones. Es frecuentemente usado para imágenes con lineas, colores sólidos y textos, que requieren precisión. Una característica importante es que admite el canal alfa en las imágenes, lo que perite guardar imágenes con sectores transparentes.


JPEG y JPG

JPEG (Join Photographic Expert Group) es un mecanismo estandarizado de compresión de imagen, cuyo contenedor más común es JPG. Admite los modos de color CMYK, RGB y Escala de grises pero no admite canales alfa (No preserva la transparencia)

JPG usa un algoritmo de compresión que disminuye el tamaño/peso de las imágenes, sin embargo también reduce su calidad. JPG sólo guarda con un máximo de 8 bits.

Ambos archivos se utilizan habitualmente para mostrar fotografías y otras imágenes de tono continuo en documentos HTML en Internet y otros servicios en línea. Aplican un proceso de compresión donde el resultado es un compromiso de calidad.

Fgm9.jpeg

EPS

EPS (Encapsulated PostScript) puede contener texto y gráficas vectoriales pero adicionalmente suelen incluir una previsualización en mapa de bits de la imagen encapcualadamente. Se usa en ordenador o dispositivo digital para transmitir de un programa a otro la información de una imagen PostScript.

En la actualidad ha sido reemplazado por el formato PDF, que se ha vuelto un estándar para el intercambio de imágenes vectoriales.

PSD

PSD es un formato nativo de Photoshop y permite guardar todas las presentaciones, retoques, nuevas creaciones realizadas con este programa, almacenando todas las capas y canales que existan en el archivo de imagen.

Este formato casi no tiene compatibilidad con otros programas, por lo que se recomienda tener dos archivos: uno en el propio formato nativo (PSD) y otro en algún formato compatible con otros programas, como JPEG o TIFF.

PDF

PDF (Portable Document Format), desarrollado por Adobe. Puede contener no solo imágenes y texto, sino también botones interactivos, links, videos, etc. Se usa ampliamente como formato de documento independiente de la plataforma para uso general.

Fgm8.png


RAW

RAW significa crudo o bruto por lo tanto se trata de un formato con el cual conservamos la foto cruda, sin procesar, como si no la hubiésemos tomado aun. Si disparas la foto en formato RAW estás conservando de alguna manera la escena dentro de la tarjeta de memoria y así mantienes la posibilidad de terminar de tomar la foto posteriormente, en tu ordenador.

Fgm7.jpg

SVG

SVG (Scalable Vector Graphics) es un formato vectorial poco conocido pero muy útil para su uso online por su flexibilidad y por la capacidad de ofrecer gráficos de calidad. Está basado en lenguaje XML el cual describe las características de cómo debe aparecer la imagen.

Svggabi.png

Ráster

Fm6.gif


Ráster expresa la dimensión en numero de pixeles que forman una imagen de mapa de bits, ancho por alto. Consta de una matriz de celdas organizadas en filas y columnas en la que cada celda contiene un valor que representa información.

Ráster son fotografías aéreas digitales, imágenes de satélite, digitales o incluso mapas escaneados.

Los datos almacenados en formato ráster representan fenómenos del mundo real:

  • Los datos temáticos (también conocidos como discretos) representan entidades como datos de la tierra o de uso de la tierra.
  • Los datos continuos representan fenómenos como la temperatura, la elevación o datos espectrales, entre ellos imágenes satelitales y fotografías aéreas.
  • Las imágenes incluyen mapas escaneados o dibujos y fotografías de edificios.

Resolución

Fgm5.jpg

Es la relación entre las dimensiones digitales (los píxeles) y las físicas, que tendrá una vez impresa sobre papel u otro soporte incluso digitales.

La resolución de impresión son los puntos por pulgada (ppp) o dots per inch (dpi), donde la pulgada mide 2,54cm.

Se recomienda lo siguiente:

  • Imágenes para impresión doméstica: 150 dpi
  • Imágenes para imprenta: 300 dpi o más
  • Imágenes para pantallas: 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

Encargo 2

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.

PNG :

thumb

JPG:

thumb

Diferencia entre JPG y PNG:

""

200x

TIFF:

Diferencia entre TIFF y PNG :

"La diferencia en nula, en el caso del trabajo realizado"

thumb

GIFF:

thumb

Diferencia entre GIFF y PNG:

"Se observa una calidad baja en el archivo GIFF en comparación a png en la parte de la tipografía, en gif esta se deteriora no dejando ver el efecto que se buscaba entregar."

thumb

Imagen Vectorial e Illustrator

Vectores

El vector en geometría

La geometría plana o geometría del plano euclidiano estudia los elementos geométricos a partir de dos dimensiones.

Un vector fijo del plano euclídeo es un segmento orientado que cuenta con tres características:

  • Módulo: longitud del segmento (valor numérico)
  • Dirección: ángulo del vector con respecto al eje x
  • Sentido: orientación del segmento

Imagen Vectorial

Vector de imagen o imagen vectorial es una imagen digital 2D, formada por objetos geométricos dependientes (segmentos, polígonos,etc), cada uno de ellos definido por atributos matemáticos de forma, de posición , etc.

El interés principal es poder ampliar el tamaño de una imagen a voluntad sin sufrir la pérdida de calidad que sufren los mapas de bits. De la misma forma, permiten mover, estirar y retorcer imágenes de manera relativamente sencilla.

Aplicación de gráficos vectoriales:

  • Tipografías
  • Logos
  • Juegos de video
  • Gráficos Web

Curvas de Bézier

Se denomina "Curvas de Bézier" a un sistema desarrollado en 1960 para el trazado de dibujos técnicos, en el diseño aeronáutico y en el de automóviles. Su denominación es en honor a Pierre Bézier, quien ideó un método de descripción matemática de las curvas que se comenzó a utilizar con éxito en los programas de CAD.

Illustrator

Illustrator es un editor grafico vectorial desarrollado por Adobe Systems, que trabaja sobre un tablero de dibujo conocido como "mesa de trabajo" esta destinado a la creación artística de dibujo y pintura para ilustración, para crear y diseñar imágenes, sirve para editar entre otras cosas.

¿Cómo iniciarnos en Illustrator?

Principales secciones y funcionalidades del software:

  • Formas
  • Trazos
  • Trazado de formas/vectorizar
  • Extrusion de formas


Encargo 3

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. Deben seleccionar y poner su nombre junto a la planta que escojan de la siguiente lista (no pueden elegir otras):

Exportar imagen como PDF y SVG

Sisyrinchium arenarium


thumb
thumb

Ilustración en papel

thumb

Avance en Illustrator

- Vectorizar la imagen


thumb
thumb

- Dibujo con trazos de distintos grosores

thumb

Fuentes

https://dospuntocero.cl/profundidad-de-color-que-es/

https://helpx.adobe.com/la/photoshop/using/layer-basics.html

https://helpx.adobe.com/es/photoshop/using/image-essentials.html

https://es.wikipedia.org/wiki/Formatos_de_archivos_de_imagen

https://desarrolloweb.com/articulos/formatos-imagen.html

https://es.vectormagic.com/support/file_formats

https://www.blogdelfotografo.com/todo-sobre-el-formato-raw-ventajas-e-inconvenientes/

https://graffica.info/formato-svg-ventajas/

https://es.wikipedia.org/wiki/Gráfico_vectorial

https://es.wikipedia.org/wiki/Curva_de_Bézier