Producción de gráficos
![](http://materials.cv.uoc.edu/daisy/Materials/PID_00216991/html5/img/logo_UOC_color.jpg)
Índice
- 1.Preparación de gráficos para impresión
- 1.1.El flujo de trabajo
- 1.1.1.Originales
- 1.1.2.Autoedición
- 1.1.3.Arte final, PDF y ripeado
- 1.1.4.Lenguaje de descripción de página
- 1.1.5.PostScript
- 1.1.6.Del ripeado a la impresión
- 1.1.7.La impresión
- 1.1.8.La postimpresión
- 1.2.La impresión digital
- 1.3.La impresión analógica o convencional
- 1.3.1.Offset
- 1.3.2.Flexografía
- 1.3.3.Huecograbado
- 1.3.4.Serigrafía
- 1.4.Preimpresión e impresión
- 1.4.1.Resolución
- 1.4.2.Selección de color
- 1.4.3.Gestión de color
- 1.4.4.Sobreimpresión (trapping)
- 1.4.5.Tipografías digitales
- 1.1.El flujo de trabajo
- 2.Optimización de gráficos para web
- 2.1.Estrategias para reducir el peso de los gráficos
- 2.1.1.Optimización de archivos de mapa de bits en formato PNG y GIF. Compresión basada en LZ77
- 2.1.2.Optimización de archivos de mapa de bits en formato PNG y GIF. Indexado de color
- 2.1.3.Optimización de archivos de mapa de bits en formato PNG y GIF. Tramados
- 2.1.4.Optimización de archivos de mapa de bits en formato PNG y GIF. Transparencia
- 2.1.5.Optimización de archivos de mapa de bits en formato PNG y GIF. Entrelazado
- 2.1.6.Optimización de archivos de mapa de bits en formato JPEG. Compresión
- 2.1.7.Optimización de archivos de mapa de bits en formato JPEG. Compresión selectiva
- 2.1.8.Optimización de archivos de mapa de bits en formato JPEG. Suavizado
- 2.1.9.Optimización de archivos de mapa de bits en formato JPEG. Tipografías
- 2.1.10.Optimización de archivos de mapa de bits en formato JPEG. Carga progresiva
- 2.2.Software de optimización de gráficos
- 2.1.Estrategias para reducir el peso de los gráficos
- Bibliografía
1.Preparación de gráficos para impresión
1.1.El flujo de trabajo
![76511_m3_01.gif](http://materials.cv.uoc.edu/daisy/Materials/PID_00216991/html5/img/76511_m3_01.gif)
1.1.1.Originales
1.1.2.Autoedición
1.1.3.Arte final, PDF y ripeado
![76511_m3_02.gif](http://materials.cv.uoc.edu/daisy/Materials/PID_00216991/html5/img/76511_m3_02.gif)
1.1.4.Lenguaje de descripción de página
1.1.5.PostScript
1.1.6.Del ripeado a la impresión
1.1.7.La impresión
1.1.8.La postimpresión
1.2.La impresión digital
1.2.1.Dispositivos de impresión digital según tecnología
Impresoras de inyección de tinta (inkjet)
Impresoras láser
1.2.2.Dispositivos de impresión digital según formato
Impresoras
![Impresoras de inyección de tinta y láser. Fuente: www.sxc.hu. Esta imagen se reproduce acogiéndose al derecho de cita o reseña (art. 32 LPI), y está excluida de la licencia por defecto de estos materiales.](http://materials.cv.uoc.edu/daisy/Materials/PID_00216991/html5/img/50018_m3_01.jpg)
Plotters
![Hay un sinfín de aplicaciones para imágenes de gran formato. La posibilidad de imprimir sobre diversidad de soportes ha abierto oportunidades de aplicación gráfica en muchos productos y elementos: edificios, coches, trenes, cortinas, ropa deportiva, cojines, camisetas, tapizados,... ¡y mucho más!
Fuente: www.impresionesexpress.com. Esta imagen se reproduce acogiéndose al derecho de cita o reseña (art. 32 LPI), y está excluida de la licencia por defecto de estos materiales.](http://materials.cv.uoc.edu/daisy/Materials/PID_00216991/html5/img/50018_m3_02.gif)
Fuente: www.impresionesexpress.com. Esta imagen se reproduce acogiéndose al derecho de cita o reseña (art. 32 LPI), y está excluida de la licencia por defecto de estos materiales.
1.3.La impresión analógica o convencional
1.3.1.Offset
![Imagen fotográfica y esquema de una prensa offset.](http://materials.cv.uoc.edu/daisy/Materials/PID_00216991/html5/img/50018_m3_05.jpg)
1.3.2.Flexografía
1.3.3.Huecograbado
1.3.4.Serigrafía
![Estampación "artesanal" sobre un soporte textil. La estampación por serigrafía se ha industrializado, pero el proceso conserva casi siempre una parte de intervención manual. Fotografía: David Gómez (2008). Creative Commons. Reconocimiento-CompartirIgual 3.0. España](http://materials.cv.uoc.edu/daisy/Materials/PID_00216991/html5/img/50018_m3_06.jpg)
1.4.Preimpresión e impresión
-
Resolución
-
Selección de color
-
Gestión de color
-
Sobreimpresión (trapping)
-
Tipografías digitales
1.4.1.Resolución
Carga de memoria por píxel
|
Gama cromática reproducible
|
Espacio de color
|
Tipo de imagen
|
---|---|---|---|
1 bit |
2 tonalidades |
monocromático (sin modulaciones) |
de línea o monocromática |
1 byte (8 bits) |
256 tonalidades |
escala de grises (monocromático con modulaciones) |
escala de grises (b/n) |
color indexado (paleta determinada de colores) |
imagen indexada (imagen de línea para web)* |
||
3 bytes (24 bits) |
16,7 millones de tonalidades |
RGB |
modulada a color (fotografía) |
*Condición característica de los gráficos presentados en formato digital GIF (graphic interchanges format). Pueden presentar un máximo de 256 colores pertenecientes a una paleta establecida, donde cada color se encuentra indexado. Por lo tanto, resulta un formato común para imágenes de línea web, dado su reducido peso en memoria y su admisión de transparencias.
Cantidad de píxeles
|
Dimensiones físicas
|
Resolución (ppp, píxeles por pulgada)
|
Profundidad de tono
|
Peso en memoria digital
|
||
---|---|---|---|---|---|---|
amplitud
|
altura
|
amplitud
|
altura
|
|||
236 px |
591 px |
2 cm |
5 cm |
300 ppp |
3 bytes |
408,6 Kb |
236 px |
591 px |
4 cm |
10 cm |
150 ppp |
3 bytes |
408,6 Kb |
236 px |
591 px |
8 cm |
20 cm |
75 ppp |
3 bytes |
408,6 Kb |
Tipo de imagen
|
Dispositivo de salida
|
Lineatura o frecuencia de trama
|
Resolución digital*
|
|
---|---|---|---|---|
imagen monocromática (1 bit por píxel) |
pantalla |
- |
72 ppp |
|
impresión digital & analógica |
- |
1200 ppp |
||
imagen en escala de grises (1 byte por píxel) & imagen RGB (3 bytes por píxel) |
pantalla |
- |
72 ppp |
|
impresión digital |
- |
300 ppp |
||
impresión analógica |
offset |
85 a 175 lpp** |
170 a 350 ppp |
|
huecograbado |
200 lpp |
400 ppp |
||
flexografía |
75 a 150 lpp |
150 a 300 ppp |
||
serigrafía |
50 a 100 lpp |
100 a 200 ppp |
* Todos los valores resolutivos se reproducen con un factor de reproducción 1, es decir,
sin amplicación ni reducción.
** Dado el caracter introductorio de esta tabla, no tenemos en cuenta la lineatura para
impresión en el denominado offset seco.
1.4.2.Selección de color
1.4.3.Gestión de color
1.4.4.Sobreimpresión (trapping)
1.4.5.Tipografías digitales
-
las fuentes PostScript Tipo 1 (PS1)
-
las fuentes TrueType
-
las fuentes OpenType
2.Optimización de gráficos para web
2.1.Estrategias para reducir el peso de los gráficos
-
reducir la profundidad de color, es decir, menor número total de colores en la imagen.
-
utilizar algoritmos de compresión que empaquetan la información redundante o bien que eliminan información.
-
formatos PNG y GIF
-
formato JPEG
2.1.1.Optimización de archivos de mapa de bits en formato PNG y GIF. Compresión basada en LZ77
![a) Archivo GIF original. b) Valor de pérdida de 30. c) Valor de pérdida de 100.](http://materials.cv.uoc.edu/daisy/Materials/PID_00216991/html5/img/50018_m3_10.jpg)
2.1.2.Optimización de archivos de mapa de bits en formato PNG y GIF. Indexado de color
-
Paleta exacta: sólo es posible para imágenes con 256 colores o menos, el programa se encarga de crear una paleta que contenga todos los colores que hay en la imagen. La imagen no se ve afectada.
-
Paleta adaptable: el programa elige de la imagen original los 256 colores más frecuentes. También se pueden crear paletas adaptables a una cantidad menor de colores.
-
Paleta perceptual: el programa crea una paleta de 256 colores adaptable en la que tienen prioridad aquellos colores a los cuales el ojo humano tiene más sensibilidad.
-
Paleta predefinida: ajusta la imagen a una de las paletas disponibles con el programa. Por ejemplo: paleta Windows (paleta de colores del sistema operativo Windows), paleta Macintosh (paleta de colores del sistema operativo MacOS), uniforme (paleta creada a partir de un muestreo uniforme de los colores de cada componente RGB), etc. Cambia los colores de la imagen por su color más próximo en la paleta elegida.
-
Web216: una paleta con los 216 colores que los navegadores web usan para mostrar imágenes en monitores limitados a 8 bits (cada vez más escasos). Se trata de un subconjunto de colores de la paleta de 8 bits de MacOS que coinciden con la paleta de 8 bits de Windows. También es conocida como websafe o browser-safe. Si se escoge esta paleta el programa adapta los colores de la imagen a los colores más próximos de la paleta. Aunque es una opción que sigue presente en algunos programas es cada vez menos necesaria.
-
Adaptable WebSnap: el programa adapta los colores de la imagen próximos a la paleta Web216 y respeta los alejados de ella.
-
Selectiva: el programa crea una paleta parecida a la perceptual pero respetando los colores Web216.
2.1.3.Optimización de archivos de mapa de bits en formato PNG y GIF. Tramados
-
Motivo: usa un motivo cuadrado regular que genera un efecto similar a la trama de semitonos de imprenta para aproximar una representación de cualquier color que no está en la paleta.
-
Difusión: utiliza un método aleatorio de difusión de puntos de trama para generar un tramado menos estructurado que el de motivo, generalmente se obtiene mejor calidad.
![50018_m3_12.jpg](http://materials.cv.uoc.edu/daisy/Materials/PID_00216991/html5/img/50018_m3_12.jpg)
2.1.4.Optimización de archivos de mapa de bits en formato PNG y GIF. Transparencia
-
Transparencia de índice: se elige uno o varios de los colores de la paleta como transparente.
-
Transparencia alfa: un canal alfa sirve como referencia para aplicar valores de transparencia (u opacidad) a la imagen.
![50018_m3_13.jpg](http://materials.cv.uoc.edu/daisy/Materials/PID_00216991/html5/img/50018_m3_13.jpg)
![a) Transparencia de índice en una imagen GIF89a. b) Transparencia alfa en una imagen PNG-32. Este ejemplo usa el formato PNG con semitransparencia por canal Alfa. Para su correcta visualización se recomienda un navegador compatible con este formato, como Firefox o una versión de Internet Explorer 7 o superior.](http://materials.cv.uoc.edu/daisy/Materials/PID_00216991/html5/img/50018_m3_14.gif)
2.1.5.Optimización de archivos de mapa de bits en formato PNG y GIF. Entrelazado
2.1.6.Optimización de archivos de mapa de bits en formato JPEG. Compresión
![a) Compresión JPEG: 12. Tamaño: 68 kb. b) Compresión JPEG: 6. Tamaño: 32 kb. c) Compresión JPEG: 2. Tamaño: 25 kb. d) Compresión JPEG: 0. Tamaño: 24 kb. e) PNG-24 sin optimización. Tamaño: 4 kb.](http://materials.cv.uoc.edu/daisy/Materials/PID_00216991/html5/img/50018_m3_17.jpg)
2.1.7.Optimización de archivos de mapa de bits en formato JPEG. Compresión selectiva
2.1.8.Optimización de archivos de mapa de bits en formato JPEG. Suavizado
![a) Imagen JPEG. Compresión: 100. Suavizado: 0. Memoria ocupada: 83,33 k. b) Imagen JPEG. Compresión: 100. Suavizado: 3. Memoria ocupada: 71,14 k.
Un ligero suavizado en esta imagen consigue una reducción significativa del espacio que ocupará el fichero.](http://materials.cv.uoc.edu/daisy/Materials/PID_00216991/html5/img/50018_m3_19.jpg)
Un ligero suavizado en esta imagen consigue una reducción significativa del espacio que ocupará el fichero.
2.1.9.Optimización de archivos de mapa de bits en formato JPEG. Tipografías
![La primera imagen es la imagen de partida. En la segunda aplicamos una compresión con pérdida y aparecen una serie de puntos alrededor del texto que dificultan su lectura. En la tercera, con una compresión con pérdida que afecta de una forma similar al resto de la imagen, se ha protegido la calidad del texto, conservando su legibilidad.](http://materials.cv.uoc.edu/daisy/Materials/PID_00216991/html5/img/50018_m3_20.jpg)
2.1.10.Optimización de archivos de mapa de bits en formato JPEG. Carga progresiva
2.2.Software de optimización de gráficos
-
indexado y gestión de paletas
-
transparencias
-
control de calidad en compresión con pérdidas
-
herramientas para aplicar compresión selectiva
-
parámetros de suavizado
-
protección de texto
-
carga progresiva o entrelazado