Diferencia entre revisiones de «Ciclo Formato de Imagen-Michell Díaz»

De Casiopea
Línea 427: Línea 427:


Usar JPG, pues PNG no podrá aguantarlo.
Usar JPG, pues PNG no podrá aguantarlo.


===== EPS =====
===== EPS =====

Revisión del 16:05 21 may 2020



TítuloCiclo Formato de Imagen
AsignaturaProducción gráfica 2020
Del CursoProducción gráfica 2020
CarrerasDiseñ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.
3
Alumno(s)Michell Diaz

Mapa de Bits y Photoshop

bit
Bits-bytesmd.gif

binary digit, dígito binario, (0 y 1, si o no, blanco o negro), solo cuenta con dos posibles respuestas.

BYTE

Representación de información representada por bits (8 bits) 7 de bits de información y el otro que queda da un control acerca del tipo de información que se mostrará.

los bits siempre van escritos en minúscula y los BYTE en mayúscula




Cantidades de bit y BYTE

1 kilobyte: equivale a 1024 bits 1 megabyte: equivale a 1024 kilobyte

el escalado de de estas cantidades van creciendo en 1024 y algunos de ellos son Kilo-Mega-Giga-Tera.

¿Por qué 8 bits?

Como cada bit son dos posibilidades esto crece de forma exponencial, en este caso estos 8 bits formarían una cadena de 256 combinaciones(cubre todo el lenguaje escrito), por ello estos 8 bits cubren todo el espectro.

  • Para transmitir un carácter al PC necesita 1 BYTE (8 bits)

Por ejemplo: La letra V (en mayúscula) seria 1 BYTE y su código para la aparición de esta letra es 01010110 una palabra de 4 letras equivaldría a 32 bits (4BYTE x 8bits)

MAPA DE BITS
10bitmd.png

Imágenes en mapa de bit (imágenes rasterizadas) son las que tienen una cuadricula proyectada encima que es una cuadricula de pixeles, cada pixel solo tiene un color asignado


RESOLUCIÓN
Impresion-resolucion-dpi-ejemplosmd.png

Las imágenes en mapa de bits tienen una resolución especifica y esta es un numero de pixeles (ancho - alto)

PROFUNDIDAD DE BITS
Gatomd.png
Pixelesmd.jpg
Imagenes-digitalesmd.jpg








Especificar la cantidad de información de color que puede contener un pixel en especifico, que posibilidad de color puede tener un pixel, mientras mas bits de información de color tenga el pixel, más colores disponibles habrán para poder rellenar.

Ejemplo: Si tenemos una imagen con una profundidad de un bit ese pixel tendrá solo dos posibilidades (blanco o negro)

Las imágenes en modo escala de grises tienen una profundidad de 8 bits o sea son 256 posibilidades de valores de gris

Prfmd.jpg










CANALES

Cuando hablamos de canales nos referimos a la cantidad de canales que tiene cada color que utilizamos y conocemos acá aparecerán los más utilizados y que usamos en Photoshop.

  • Mapa de bits - 1 bit no interpreta el color
  • Escala de grises - es de un solo canal de color (negro a blanco)- 8 bits - muestra los tonos de gris. (256 tonalidades)
  • RGB Y LAB- 3 canales (8 bits por canal es decir 256 posibilidades por canal).
  • CMYK- 4 canales
RGB con 8 bits y más

¿Que pasa cuando el RGB tiene más de 8 bits?

Normalmente el RGB tiene 3 canales de color que como mencionábamos en 8 bit serian 256 posibilidades POR CANAL. Photoshop nos otorga la posibilidad de aumentar estos bits que son llamadas de 24 bits y también están las de 32 bits por canal que también se les conoce como imágenes de alto rango dinámico (HDR) son utilizadas principalmente por fotógrafos.

Canalesdecolormd.jpg
Unnamedmd.gif














CAPAS
Infografia-capas-1md.png

Edición de imágenes

Photoshop y programas de adobe funcionan con una lógica de capas, que podríamos definirla como laminas que se ponen una sobre otra con el fin de independizar los elementos y así logramos una versatilidad del trabajo, por ejemplo podríamos separar una ilustración en partes especificas para poder darle alguna sombra pero esa sombra puede estar en una capa aparte pues no queremos que intervenga con el dibujo principal y así.








ENCARGO

Crear una composición a partir de sus ejercicios anteriores en Photoshop en un formato de (21 x 21 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.


Basándonos en la palabra seleccionada (Gravedad), se realizó una composición en colores morados y azules en base a una descomposición de imágenes encontradas en la web y a su vez editando estas imágenes para lograr diferentes efectos tanto visuales como de ligamento en la propia composición, para una primera instancia se hizo un pequeño estudio de como seria esta composición en una baja resolución de pixeles así que fue en un cuadrado de 248 x 248 pixeles donde se quiso comprobar cuanta deformación habría en comparación al resultado final en la calidad solicitada (300 px).

Estudio 1
PRUEBA 1 COLORES.jpg
Zoom In
PRUEBA 2 COLORES.jpg

En la vista reducida se puede apreciar bien el conjunto pero al realizar un zoom in a la imagen podemos ver como esta pierde toda su resolución y dificulta la apreciación de la composición.












Estudio 2
Cappsmd.png



En base a la misma composición anterior fue ubicada en los margenes requeridos del encargo. Aquí hay una breve descripción del proceso para editar esta imagen:

  • Ubicar al inicio de Ps las medidas (21 x 21cm) y también la resolución (300 px)
  • Luego de seleccionada las imágenes a utilizar para la edición con la herramienta lazo magnético cortamos lo que vamos a utilizar en este caso las zonas esféricas que mostrarían un agujero negro y otros objetos que se dirigen hacia el como punto de gravedad.
  • Al ubicarlas en nuestro lienzo las encogemos para que calcen con las medidas y las vamos editando una por una, en el caso de la esfera brillante se aplico una edición de Superposición de degradado, sombra paralela y ajuste en su tono y saturación
  • En cuanto al fondo se utilizo un color morado para este y se le realizo una edición en el apartado FX de superposición de degradado probando así dos degradados uno referente a los azules y otro a los violetas
  • 3 capas pertenecen a formas que son de la herramienta linea con el efecto de disolver pues se buscaba esa manera de mostrar partículas fluyendo en un espacio.
  • Sobre la tipografía se utilizo: Roboto,Impact y Orbitron y fueron deformadas con CTRL+T y manteniendo Shift.
  • En total se utilizaron 17 capas siendo 3 de ellas de formas, 3 de tipografía y las demás son referentes a la imagen.

Resultado final :

BuenacalidadjMD.jpg
Zoom In
Buenacalidad 2MD.jpg
Zoom In






































Formatos de imagen y resolución

Reso+formmdmd.png


Formatos más comunes en el área del diseño gráfico, resolución y temas claves que debemos comprender y conocer.



Formato de imagen

Cuando registramos alguna imagen como en cámara digital, webcam o cámara de celular, obtenemos una imagen con dígitos binarios. Esto nos lleva a la existencia de varios formatos de imagen pero son dos las principales categorías (compresión de imagen).



  • Compresión destructiva o con perdida: Modifica la imagen para eliminar la información no relevante, es decir, la que no es visible para el ojo, con el objetivo de ahorrar espacio, así las imágenes serán mas livianas.

Una consecuencia de esto es que disminuye la calidad de imagen.


No se puede volver a la versión original aunque si que se puede lograr un acercamiento muy próximo.


Lenna-600x197destrucmd.png



  • Compresión no destructiva o sin perdida: Mantiene todos los parámetros de compresión de la imagen original codificando la misma cantidad de información pero de manera más eficiente.

Es utilizado principalmente para archivos de texto donde la pérdida de cualquier tipo de dato puede cambiar el significado del mismo.


Algoeditmd.png


Ej: si tenemos una imagen con código 1+1+1+1 (formato crudo de la imagen), la eficiencia de este sistema la mostraría como 2+2.

Menos información o menos peso requiere de un procesador más complejo pero así la imagen es más liviana, es decir, siempre hay una consecuencia.

TIFF
Imagentiffvsjpgmd.jpg


Tag Image File Formates un formato creado para guardar imágenes desde escaner, grabadores de pantalla y programas de pintura con retoque fotográfico, especializado para imágenes de alta calidad, actualmente es un formato de mapa de bits siendo el mas versátil, seguro y que aguanta variados pesos. Describe datos de imagen en dos colores, escala de grises, paleta de color y color completo en varios espacios de color.

Uno de sus problemas es que no todas las plataformas pueden abrirlo o dependiendo desde que aplicación fue guardada. (Problemas de compatibilidad). Depende de que versión de programa también se utiliza, también habrá problemas de lectura al moverlo a otro programa mas actualizado.


GIF
Fotografía original a la izquierda, indizada con GIF con una paleta de 64 colores a la derecha.


Graphics Interchange Format: Bloques y sub-bloques con parámetros relevantes utilizados para la reproducción de un gráfico, soporta transparencias. Formato ágil, de rápida fabricación, rápido envió, permite crear animaciones sencillas y muy livianas.

Antes se utilizaba mucho para maquetear algo que después se le incrustarían las imágenes definitivas, no como nosotros creemos que es como una animación.

Creado para comprimir imágenes de 8 bits que pudiesen ser telecomunicadas a través de un servicio e intercambiadas entre los usuarios, siempre fue pensada para ser una imagen eficiente, mas rápida y liviana de compartir.





PNG
De izquierda a derecha: PNG8 de 16 colores, PNG8 de 16 colores con transparencia de índice, PNG24 (color real), PNG32 (color real más transparencia de canal alfa).


Portable Network Graphics es un formato de compresión sin pérdida, se considera el reemplazo del gif, aun que el PNG no soporta animaciones, pero si es mejor soportando transparencias pues lo que hace es reconocer el canal alfa (lo que hace que una imagen tenga una capa de transparencia. ) de las transparencias. Si no tiene fondo o es blanco y lo exportamos como png este fondo quedará transparente.

Permite comprimir imágenes de 24 bit, eso le da una mejor profundidad de color, mejor formato para usar con logos, imágenes que requieres finezas en sus terminaciones, como colores planos, fuertes, etc.

Un contra seria que el PNG no escala muy bien, solo se puede poner en un formato, es mala escalando entre formatos por ejemplo si lo usamos en un formato afiche para luego pasarlo a una pagina web en un tamaño superior este se vera en menor calidad o no se vera completamente bien como en el afiche.




JPEG y JPG

Join Photographic Experts Group (JPEG), sistema de compresión de imagen, el nombre viene de este grupo que decidió este nuevo estándar de compresión, así que en teoría no es el formato de el archivo, si no, es como está codificado.

JPG es el formato que mas utiliza JPEG para exportar, muchas veces se usan uno u otro nombre.

Es un formato que permite comprimir significativamente el peso de las imágenes, la proporción tamaño peso, es ideal para esta era en donde guardamos tantas cosas visuales, JPG es practico para el guardado de estas, esta compresión tiene de malo que le baja la calidad a la imagen, que no suele ser tan visible (va a depender en la calidad final en que la terminemos guardando).

JPG aguanta solo 8 bits pero cuando comprime imágenes de 24 bits es capaz de achicarla a una vigésima parte.


01-12 jpg transparencymd.jpg


¿Cuando usar PNG o JPG? si no es un problema que la imagen sea pesada puedo usar PNG, si es que tiene que ser liviana debo usar JPG.


¿Mi imagen necesita transparencia?

Usar PNG, pues JPG transformará el fondo en blanco.


¿Necesito que mi imagen escale de muchos tamaños?

Usar JPG, pues PNG no podrá aguantarlo.



EPS

Encapsulated PostScript formato que puede contener texto, gráficas vectoriales y que además guarda una previsualización de imagen comprimida en formato mapa de bits.

Cuando lo que yo creo es completamente vectorial, lo exporto con EPS y seguirá siendo vectorial.

Tanto EPS, .Ai, han sido reemplazados por el formato PDF.

PSD
Mixips.png


Nativo de Photoshop, permite guardar todas las características editables que se utilizaron en PS, pero no tiene compatibilidad con ningún otro programa de imagen.

PDF

Portable Document Format desarrollado por Adobe.

Puede contener no solo imágenes y texto, sino también botones interactivos, links, vídeos y formularios que se pueden responder allí,etc.

Una virtud es que no depende de ningún software, es decir, todos podrán abrir este archivo y verlo tal cuál es.

Aguanta imágenes vectoriales.

RAW

crudo o bruto. Formato sin modificar nada, puro de la fotografía. Totalidad de los datos de la imagen tal cual como fue tomada, es decir no tiene ningún parámetro de color. Programas como photoshop pueden abrir este tipo de formatos.

SVG

Scalable Vector Graphics basado en lenguaje XML, el cual esta descrita en código, al ser una imagen vectorial se puede escalar en cualquier tamaño y se vera nítida, además al estar escrita en lenguaje XML se puede abrir en un lector de texto para ver el código que esta tiene, para así poder cambiar fácilmente sus colores, definiciones, etc. Podríamos decir que es como el EPS del internet.


Raster

Dimensiones en pixeles de las imágenes.(medida de lienzo) Expresar la dimensión en numero de pixeles dentro de un mapa de bits, el ancho por el alto.

El ráster de una imagen se calcula multiplicando el ancho por altura en pantalla.

ej: la imagen de 1200 x 1200 de pixeles= 1.440.000 px, expresado en mgpx es igual a 1,4 Mp.

Resolución

de impresión son los puntos por pulgada (ppp) o dots per inch (dpi), donde la pulgada mide 2,54 cm. tiene que ver con las relaciones digitales (ráster) y las físicas (donde mostrare este trabajo)

para calcular el tamaño de pixel a centímetros para impresión se aplica esta formula:

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

Las recomendaciones son;

Impresión domestica: 150dpi (la podemos ver bien en la distancia mano o ojo)

Imágenes imprenta: 300dpi o más.

Imágenes para pantalla: el estándar eran de 72 dpi, sin embargo las pantallas de retina, son muy superiores, incluso superaron los estándares altos para papel, llegando a 458 dpi.


ENCARGO

Modificar el formato del trabajo anterior para ver como esta varía según cada formato. Bajar de 300 dpi a 100 dpi y anotar sus diferencias.

La imagen subida en el encargo anterior (estudio 1) estaba en un formato png y (estudio 2) en un formato jpg.

De cualquier manera se expondrán algunos formatos en base al estudio 2 del encargo anterior, en especifico la imagen numero dos (rosados).

Formatos:

Formatos wikimd.png


Estos son los formatos aceptados en la wiki para subir imágenes



  • PNG

La imagen que en comparación con los otros dos formatos quedó más nitida, los colores no fueron deformados y al hacer zoom en la imagen esta no pierde a gran escala la calidad de la imagen, es la más "limpia" de las tres puesto que al mirar el fondo que es un degrade que otorga la aplicación, no se ve ruidoso o cortado, mantiene su forma.



Imagen 1: exportar a PNG en photoshop (se eligió la estándar)

Pngsave100.png










Imagen 2: imagen ya exportada y guardada en PNG

Png100.png
Zoom In














  • JPEG (JPG)

En este formato la imagen al observarla en un primer momento, se ve que el fondo está afectado, es decir, el fondo tiene unos "cortes", el degradado del fondo no se ve en un todo, si no que junto con el fondo los objetos que la componen empiezan a tomar protagonismo por si solos en ves de ser un conjunto, puesto que se empiezan a marcar los efectos que estos tenían puestos (como las sombras tras las imágenes). Así una diferencia con el formato anterior (PNG) seria que la imagen en PNG se ve más compacta.

Cuando le hacemos un zoom in a la imagen nos percatamos que esta se ve muy mal, en el sentido de resolución, la imagen se ve borrosa y se pierde la riqueza de la composición en general, a comparación del PNG que mantuvo en gran parte la calidad de esta imagen.



Imagen 1: exportar a JPEG (se elige la mayor calidad) (10)

Jpgsave100.png













Imagen 2: imagen ya exportada en JPEG (JPG)

Jpeg100md.jpg
zoom in













  • GIF

La verdad es que en este formato al menos en el caso de la imagen que estamos estudiando, los cambios que pasan no son realmente perceptibles al menos del ojo que lo está estudiando, sin embargo algunas cosas que agregar es que no se le puede hacer zoom a la imagen, puesto que queda bloqueada en su tamaño, a menos que utilizamos otras formas de cortarlo.

Los colores pareciera que se mantienen y el fondo al igual que en PNG también se mantiene, hasta el momento solo el JPG es el que más varia en cuanto a su forma.

edit*: una vez que la imagen ya esta subida en la wiki se observan algunas deformaciones en la tipografía, como mucho más pixelada, algunas volviéndose difusas y aparece "ruido" en la parte inferior izquierda de la imagen, por lo que podríamos confirmar que hay una baja de resolución en comparación a la imagen original.



Imagen 1: exportar a GIF

Gif2md.png












Imagen 2: ya exportada en GIF

Gif100.gif



  • BMP

Se intentó guardar el archivo en formato BMP (bitmap) y se logró pero la wiki no acepta este formato como lo vimos en la imagen al inicio de este encargo, pero se mostrará la imagen previa a la exportación a BMP y las opciones que nos entrega PS para poder guardar este tipo de archivos.


Bitsave100.png




Imagen Vectorial e Illustrator

¿Que se dice de los vectores, cuando hablamos de gráfica?

El origen tiene que ver con la representación de los vectores

VECTORES

Lógica matemática desde la geometría, esencial para comprender los que es un vector

El vector en geometría en el plano euclideo estudia los elementos a partir de dos dimensiones.

Un vector fijo en el plano, es un segmento orientado (es decir que tiene una dirección) y tiene tres características:


  • Módulo: longitud del segmentos [valor numérico], contiene al vector
  • Dirección: ángulo del vector con respecto al eje x
  • Sentido: la dirección u orientación del segmento, si es que va en positivo o negativo, si avanza en el plano o retrocede (en numeros negativos).
Imagen vectorial

Imagen en dos dimensiones (2D) compuesta por objetos geométricos, independientes, que se pueden escalar haciendo que sus atributos matemáticos, (en que parte del plano euclideo están, en que posición, cual es su color, angulo, como se junta con otro, etc).

Por ejemplo los videojuegos están hecho con imágenes vectoriales.

Las imágenes al ser vectoriales guardan su forma, color y nitidez y pensamos que por ello son más pesadas pero no es así, puesto que no tienen un "peso", suele ser más liviana que las imágenes en mapa de bits, puesto que son ecuaciones matemáticas y más livianas en su representación, pues es de un punto a otro, entonces podríamos decir que son lineas que forman un todo.

Las imágenes en mapa de bit al hacer zoom muestran los pixeles y como lo mencionábamos las imágenes vectoriales no pierden calidad a pesar del zoom que se les haga y esto por su composición matemática (2 puntos).


¿Donde se aplican los gráficos vectoriales?

  • Tipografías
  • Logos
  • Juegos de vídeo
  • Gráficos web (todo lo que uno ve en la web, salvo imágenes)
Curvas de Bézier

Pierre Étienne Bézier desarrollador de lenguaje mediante una ecuación (parametrica), pues cambia parámetros para poder darle atributos, lo mas importante es que cada punto determina un segmento, al mover estos extensores producen formas redondeadas y retorcidas.

Curva lineal: es la más simple, la que se mueve de un punto a otro, con ella se puede trazar una circunferencia desde el centro.

Curva cuadrática: se mueven en X Y

Curva cubica: se mueven en X Y Z (estas pueden hacer las formas retorcidas)

Todos los Cad (computer aided design) todo lo que se desarrolle vectorialmente y permite una producción a futuro con otros programas, como illustrator.

Illustrator

¿Cómo iniciarnos en Illustrator?

Conocimos las funcionalidades más básicas (exportar archivos por ejemplo) a otras funcionalidades más complejas como formas, trazados, extrusión de formas, etc.