Archive for agosto, 2008

iFlick

Encargo de LC2 acerca de una plataforma de Flickr para el iPhone (gracias a todos los que contestaron el cardsorting).

agosto 7, 2008 at 9:58 am 2 comentarios

Requisitos de imagen

Encargo de LC2 acerca de los distintos soportes y requisitos que puede tener una imágen digital

agosto 4, 2008 at 9:08 pm 1 comentario

Imagen para Medios digitales

A diferencia de los requerimeintos de la imagen para pre-prensa, las imágenes para medios digitales presentan una ventaja para su manipulación: debido a una convención, las pantallas admiten imágenes de solo 72 DPI de resolución. Cualquier imagen de mayor resolución es leida y mostrada por el ordenador con una resolución de 72 DPI. Esto significa que si estamos diseñando y trabajando imágenes para medios digitales la resolución se vuelve una constante en vez de una variable, pues en medios digitales lo que cambia es el tamaño de la pantalla ya que ordenadores y aparatos de telefonía móvil tienen distintas resoluciones y tamaños de pantalla.

Peso de una imagen

Las imagenes digitales son (la mayoría de las veces) construidas mediante una rejilla cartesiana que acumula información tanto de posicionamiento como de valor correspondiente al color del pixel. Todo esto es información la cual se mide en los ordenadores por una unidad llamada Kbit. El Kbit es la unidad de medida general para determinar la cantidad de información que tiene un archivo digital.

Mientras más pixeles tenga la imagen (calidad), mayor será su peso en Kb. Esto porque mientras más pese la imagen, más cálculos deberá realizar el ordenador para lo que sea, con lo que los tiempos transaccionales de cada acción también aumentarán de acuerdo al peso de la imagen. Cuando las imagenes necesitan de muchos cálculos para ser tratadas, se recurre a mejorar la implementación de nuestro computador para que procese datos más rápido.

Calidad vs peso

Los medios digitales generan, transmiten y reciben información y esta información tiene diferentes vías para ser recibida. En Chile tenemos banda Ancha, sin embargo de acuerdo al target de nuestro producto (suponiendo que estamos diseñando para alguien) podría pasarle que no tiene acceso a banda ancha, sino que se conecta a internet via módem o cable telefónico. Por lo mismo si pensamos que el producto cumpla en usabilidad y accesibilidad, debemos hacer que las imágenes que lea el Browser sean lo más livianas posibles, de manera que el tiempo de espera que se produce al cargar una imagen sea reducido al mínimo, para beneficio del usuario.

Telefonía celular

En telefonía móvil el peso de las imágenes es un punto crítico. Si bien se puede procesar imágenes con una velocidad aceptable, el problema es transmitir o recibir archivos muy pesados. La velocidad de transferencia de un móvil con tecnología 3G es de 384 Kbps en condiciones ideales, mientras que de un móvil sin esta tecnología es de 14 Kbps (más info acá).

Si consideramos que una imagen para celular es de 200×200 px en formato JPG, pesará de acuerdo a la calidad que tenga lo cual incidirá en el tiempo de descarga (suponiendo que es de 15Kbps)

JPG High, 62K, 4.1sg

JPG High, 62K, 4.1sg

JPG Good, 48K, 3.2sg

JPG Good, 48K, 3.2sg

JPG Mid, 40K, 2.8sg

JPG Mid, 40K, 2.8sg

JPG Low, 37K, 2.5sg

JPG Low, 37K, 2.5sg

Podemos observar que el tiempo de espera de la primera imagen es largo, mientras que si lo acortamos la imagen pierde mucha calidad. Lo ideal es encontrar un equilibrio entre las variables peso y calidad de la imagen, el cual a veces se ayuda por los formatos que ocupemos: como la imagen es de colores planos, usaremos PNG en vez de JPG.

PNG High, 32K, 2.1sg

PNG High, 32K, 2.1sg

Al hacer el cambio de formato encontramos que tenemos que la imagen tiene una alta calidad y el tiempo de descarga se ha reducido a lo mismo que el de la imagen JPG de pésima calidad. Por estos detalles es que la experiencia del usuario en navegación desde móviles se vuelve más usable, que es a la hospitalidad que todos apuntamos para con el usuario.

agosto 2, 2008 at 9:07 pm Deja un comentario

Imágen para pre-prensa

En el mundo de la pre-prensa hoy se trabaja con softwares digitales como InDesign o Quark, por lo que se le conoce como pre-prensa Digital y su particularidad es que todo lo relacionado a ella posee el caracter digital al tener que ver con ordenadores. Por lo mismo el hecho de que las cámaras fotográficas comenzaran a registrar en formatos digitales no sorprendió desprevenido al mundo de la pre-prensa, de hecho le acomodó puesto que las imágenes ya no era necesario digitalizarlas por complejos scanners (donde por más que se tenga cuidado, siempre hay un porcentaje de pérdida de calidad por ínfimo que este sea) pues ya vienían digitalizadas.

Las imágenes que se necesitan para pre-prensa son variadas y dependen del formato y el soporte en el que se vayan a imprimir. Lo cierto es que existe siempre una variable que regula la calidad impresa de la imágen llamada resolución de la imagen. Considerando todos los escenarios posibles, tomaremos el de la impresión de una revista de alta calidad para ver los requerimientos de la imágen.

El formato de la revista CARAS es de 24,1×31,1 cms y la fotografía de la portada es lo suficientemente buena para verse bien. ¿Qué significa esto? Significa que la resolución de la imágen es óptima y su área de impresión es de 24×31 cms. Una impresión es óptima cuando su resolución es de 300 DPI: dots per inch (lo que significa que en una pulgada hay 300 líneas que “dibujan” la imagen) ya que el ojo humano no es capaz por si solo de reconocer la ilusión de la cuatricromía a esta resolución.

Resolución vs. calidad

Como se mencionó anteriormente, en el mundo de pre-prensa digital las imágenes son digitales o bien hay que digitalizarlas, por lo que entonces se nos hace necesaro saber cómo tratar una imágen digital para que cumpla los requisitos que necesitamos.

Una imágen digital es básicamente información la cual puede estar construida de múltiples maneras, sin embargo la más usada para imágenes fotográficas es la construcción cartesiana de la imágen. Esto es que en una rejilla cudricular cada espacio que se genera obtiene un valor de color. A este espacio llamamos pixel.

La imágen digital y su unidad pixel son unidades virtuales que no tienen presencia en el mundo físico, después de todo nadie sabe cuánto mide un pixel, ni mucho menos ha podido tomar uno con la mano. Sin embargo el pixel puede ser traducido al mundo físico en donde puede tomar un valor de impresión. Esto se logra mediante el cálculo de la resolución de salida de una impresión de imágen digital.

A: La dimensión de la imágen en pixeles. Es acá donde se ve la cantidad de información de una imagen. Mientras más pixeles tenga una imagen, más grande y con mayor resolución podrá salir al momento de ser impresa.

B: Tamaño del documento imprimible. Es acá en donde se ve el tamaño de impresión y la resolución de salida del documento que estamos tratando. Es necesario hacer incapié en que todos los puntos marcados con rojo están íntimamnete ligados al momento de la impresión, ninguno es prescindible.

1-2: Alto y ancho del documento en pixeles. Es la medida de información que guarda la extensión de la rejilla cartesiana y la proporción de la imagen

3-4: Alto y ancho de la imagen en centímetros (o pulgadas, picas o cíceros). De acuerdo a esta información sabremos qué tamaño tendrá nuestra imágen al ser impresa.

5: Resolución de la imagen. Es la calidad visible de la imagen al momento de ser impresa.

Ya sabemos que la resolución óptima de una imagen es de 300 DPI, por lo que para saber cómo se verá una imagen al momento de ser impresa debemos fijarnos en el tamaño de impresión vs. la resolución de la imágen. Nunca tratar de “agrandar” la imágen desde sus pixeles, puesto que aquella variable no puede crecer ya que es información (sin embargo si puede reducirse).

Recomendaciones para imagen de Pre-prensa

En cuanto a la cantidad de pixeles que debe tener una imagen en pre-prensa, debe ser la necesaria para que la imagen tenga el tamaño deseado a la resolución deseada. Por ejemplo si volvemos a la imagen de la portada de CARAS, tendremos que para un espacio de 24,1×31,1 cms a 300 DPI necesitaremos al menos que la grilla cartesiana sea de 2846×3673 px.

En cuanto al formato de la imagen es ideal ocupar formatos que no compriman la informacion, tales como TIFF o RAW. Si se ocupan formatos de compresión y pérdida (JPG, GIF, PNG) estaremos perdiendo valiosa información acreca de colores y pixeles lo que harán que la impresión no sea óptima. Además el uso de canal de colores debe ser CMYK en vez de RGB para que no exista una instancia de pérdida de información en la traducción desde RGB a CMYK.

agosto 2, 2008 at 5:54 pm 3 comentarios

Teorías y sistemas del Color

Se hace necesario que antes de hablar de imágen, se haga una pequeña revisión a los fundamentos que generan las diferencias entre los distintos soportes de imágen. Las teorías del color que se expondrán son dos muy relacionadas: Síntesis aditiva del color y Síntesis sustractiva del color.

Teoría aditiva y sustractiva

Se habla de síntesis aditiva del color cuando desde un generador de luz (normalmente pantallas) se emite una onda luminosa correspondiente a un color determinado. El color que el lector percibirá irá de 400 nanómetros (violeta) hasta los 700 nanómetros (rojo) puesto que ese es el espectro de visión del ojo humano. La luz emitida por los tubos de rayos catódicos está en tres canales: Rojo (R), Verde (G) y Azul (B), puesto que las células receptoras de nuestros ojos perciben justamente en estos colores.

Se habla de síntesis sustractiva del color cuando la luz del ambiente rebota con alguna superficie. Bien es sabido por cualquiera que es imposible ver la luz, sin embargo es posible ver las cosas cuando estas se iluminan. Lo que sucede es que la superficie capta y devuelve solamente una parte de la onda luminosa del ambiente, así podemos ver aquella resta de luz como un color específico. En el caso de cuando vemos negro es porque la superficie absorbe toda la luz incidente, mientras que cuando vemos blanco es debido a que la superficie devolvió la luz en su totalidad (por lo mismo la ropa negra es más calurosa que la ropa blanca, ya que toda la luz absorvida se transforma en calor).

Relación cromática

Ahora bien, cuando ya se ha adquirido el conocimiento de ¿cómo funciona el color? se nos hace necesario aprender sobre los sistemas existentes para la administración del color según el soporte en donde estemos manipulando esta variable.

De acuerdo al hecho de que el ojo humano ve en tres colores (RGB), es natural pensar hoy en día cómo se llegó a que el cine y la fotografía pudiesen captar imágenes en colores: la separación de tres canales sensibles a los colores Rojo, Verde y Azul que al ser proyectados sobre una superficie que no absorbiera nada de color (blanca) entregarían al ojo una imágen de colores casi exactos a los reales.

Sin embargo el uso de canales RGB solamente funciona cuando existe un emisor de luz: si tratamos de crear canales superpuestos de tintas Verde Roja y Azul sobre un papel, en vez de obtener blanco obtendremos algo muy parecido al negro, puesto que la síntesis luminosa es totalmente distinta. Entonces ¿cómo hacemos que el color aparezca cómo queremos en las superficies físicas que no poseen emisión de luz propia? La respuesta se nos proporciona desde los mismos tres canales que percibe nuestro ojo: RGB.  Por lógica pura podemos hacer que la suma de dos canales de síntesis aditiva nos entregue un canal de síntesis sustractiva.


Sistemas de control del color

Ya sabemos que para soportes de color luz regirá la base RGB, sin embargo para manipular estos tres canales se han inventado sistemas convencionales como el HSV, HSL o la cuatricromía. El HSV consiste en tres variables que rigen a los colores luz: Tonalidad, Saturación y Valor, las cuales toman grados determinados y hacen aparecer el color deseado cuando se trata de pantallas.

También para pantallas está el modelo HSL, el cual consta de tres variables que son: Tono, Brillo y Matiz. Estas variables (al igual que en el sistema HSV) toman valores para obtener el color deseado. La diferencia con el modelo HSV es que HSL es más intuitivo dado a que existe un simetría en los valores de luz y oscuridad (lo cual no ocurre en HSV).

En el caso de las impresiones, se tomaron los tres colores resultantes de las sumas aditivas de dos canales RGB (Cyan, Magenta y Amarillo) y se combinaron exitosamente. El problema es que la suma de aquellos tres colores seguía rebotando un poco de luz, por lo que se añadió un cuarto canal (Key color) el cual otorgaba profundidad a las imágenes. Este sistema se conoce hoy como cuatricromía y es el sistema más usado por la industria de impresión mundial.

agosto 1, 2008 at 7:22 pm 3 comentarios


Feeds