29 de Abril de 2009
-----------------------------------------------
Autores:
AMD_iRadeon,
dbertua y
Marcelo Monzón
-----------------------------------------------
Guía de Términos, Conceptos y
Formatos del Diseño Gráfico
Imágenes de Mapa de Bits
El pixel es la unidad mínima de información que compone a una imagen de mapa de bits. La palabra Pixel proviene de la compresión de Picture Element (Elemento de Imagen), ya que como he dicho anteriormente, el pixel es el elemento mínimo e indispensable para la formación de mapas de bits.
Los mapas de bits tambien suelen llamarse Bitmaps (Mapa de Bits en Inglés) o PixMap (Mapa de Pixeles); también se le puede decir Imagen Lineal; cualquiera de estos nombres hace referencia a lo mismo.
Tamaño de Imagen
El Tamaño de Imagen es la cantidad de pixeles que la componen. Se puede representar de dos formas: pixeles horizontales multiplicados por los verticales (1280x1024px) o la cantidad de pixeles totales que tiene la imagen (5 MegaPixels). Para saber cuantos Mega Pixels tiene una imagen, lo que debemos hacer es multiplicar su ancho por su alto: una imagen de 1024x768px tiene 786.432 pixeles, que significan 0,8MP.
El tamaño que debamos elegir, debe adecuarse al tamaño mínimo estandar de monitores actuales. Hoy en día, la gran mayoría de usuarios tiene un monitor de 1024x768px o superior, por ende, 1024x768 es el estandard para la creación de sitios Web. Es recomendable utilizar este tamaño para que el sitio pueda ser perfectamente visualizado por todos los usuarios.
Sin embargo, los sitios más vanguardistas no sólo utilizan resoluciones más grandes, sino que generan su sitio con resoluciones WideScreen (16:10/16:9) en vez de la clásica relación 4:3/5:4. Estos sitios suelen ser dinámicos y utilizan las últimas tendencias en creación de sitios (Videos, Flash, Trasnparencias...). Si bien son vistosos e impactantes, sólo podrán ser disfrutados al 100% por usuarios con monitores superiores a las 20", ya que pantallas más chicas deberán desplazarse a lo ancho y alto del sitio, y esto es realmente molesto.
Las Paletas de Color
Una Paleta es el conjunto de colores que pueden ser representados por la imagen. Las paletas se pueden crear a medida (con los colores que uno elija) o con los colores predefinidos. Cada paleta predefinida es diferente una de otra, por lo que si elegimos una paleta con pocos colores, sólo podremos utilizar esos colores. La paleta es uno de los parámetros que determina el tamaño final de la imagen: cuantos menos colores tenga, más liviana es la imagen final.
Modos de Color
Al elegir un Modo de Color se está determinando la cantidad máxima de colores que la imagen puede representar. Sólo serán admitidos los colores que estén dentro de la paleta de ese modo de color; el resto no podrá ser representado. El modo de color debe ser elegido según el fin que tenga la imagen (visualizarla en monitores o en papel impreso), ya que cada fin requiere un modo de color específico. Además, el modo de color es uno de las características que determinarán el peso final de la imagen.
En imprenta, al uso de los canales CMYK se lo llama citocromía. El termino cuatricromía se refiere a cuatro canales de color; pueden ser CMYK u otros. A las impresiones de cinco canales o más se las llama HiFi.
Dado los variados fines y características puede tener una imagen, existen diversos modos de color; ahora explicaremos los más utilizados:
Modo RGB
El Modo RGB se basa en la emisión de luz mediante tres canales: Red (rojo), Green (verde) y Blue (azul). Cada canal tiene un rango de intensidad que va de 0 a 255. Al modo RGB se lo llama aditivo, ya que cuanto mayor es la intensidad de los tres canales, se obtiene un blanco más puro, mientras que si la intensidad es baja, se obtiene el color negro. El blanco puro se obtiene cuando los tres canales alcanzan los 255 niveles de intensidad, mientras que el negro puro se genera con el valor 0 en los tres canales. Para lograr un color determinado, cada canal varía su intensidad, y al sumar todos los canales, se genera el color que se debe representar.
Dado que todos los monitores y pantallas utilizan el Modo RGB para representar los colores, debemos seleccionar el Modo RGB si nuestra imagen tiene como fin ser expuesta en la Web.
Adobe RGB (1998)
El Modo Adobe RGB es una variante del RGB convencional, pero que incluye una mayor gama de colores, por lo que es el más utilizado en diseño gráfico.
Modo CMYK
El Modo CMYK se basa en el uso de tintas o pigmentos de color distribuídos en cuatro canales: Cian (Cian), Magent (Magenta), Yellow (Amarillo) y Black (negro). El modo CMYK es un modo sustractivo ya que al aumentar la cantidad de tinta en los canales, el color se obscurece, y al reducirla, se aclara.
Si bien al unir cian, magenta y amarillo se logra un color obscuro, éste no alcanza la tonalidad del negro puro. Fue por esto que se decidió agregar un cuarto canal para el color negro, y de esta manera poder lograr un contraste óptimo. A este canal se lo llamó K por dos razones: la letra B (de Black) ya era utilizada por el azul (Blue) de RGB, y podía generar confuciones; además, la implementación del canal negro significó el Key Color (Color Clave) para el modo CMYK, y gracias a esto se evitó el fracaso, dado que de poco serviría un modo de color que mostrara colores "grisáseos" y con poco contraste.
Si queremos imprimir una imagen RGB, ya sea en una Imprenta o en una impresora hogareña, debemos cambiarle el Modo de Color por CMYK, ya que es el modo en el que trabajan todas las impresoras. En caso de no hacer esto y enviarla a impresion Modo RGB, la imagen será impresa con colores diferentes a la que vemos en el monitor. Recordemos que el Modo RGB crea los colores a partir de rojo, verde y azul de forma aditiva, mientras que CMYK utiliza Magenta (similar al rojo), Cian (similar al azul) y Amarillo (similar al verde) de forma sustractiva. Esto hace que las paletas de ambos modos sean similares, pero no iguales, y genera esta clase de incombrenientes.
Dentro del modo CMYK puede crearse los llamados "negros enriquesidos", que consisten en el canal negro al 100% más un porcentaje de Magenta o Cyan. La eleccion del color que va a enriqueser a ese negro y el porcentaje dependen de los colores utilizados en esa imagen. Por ejemplo: Si estuvieramos haciendo una "citocromía", y si hay un logotipo que lleva Negro y Amarillo, ese "negro enriquecido" debería formarse con 100% de negro y 100% de amarillo, y no sería aconsejable para nada el ponerle 100% de cian o 100% de magenta.
Modo Escala De Grises
El Modo Escala de Grises elimina la información de color de cada uno de los pixeles que componen la imagen. En consecuencia, este modo sólo puede representar los colores comprendidos dentro de la gama del Negro (iniciandose en Blanco y pasando por diferentes graduaciones de gris). Al eliminar la información de color de todos los pixeles, el tamaño final de la imagen se ve drásticamente reducido. Cabe aclarar que este modo sólo elimina la información de color, manteniendo intactas la información de luminacidad, la resolución, la calidad, etc.
El Modo Escala de Grises puede ser utilizado tanto para impresión como para proyectos Web. Sin embargo, no es tan utilizado como RGB o CMYK justamente por la pérdida de la información de color.
Modo Indexado
El Modo Indexado adapta los colores de la imagen a una paleta de colores que tiene no más de 256 colores. La paleta seleccionada puede ser una predefinida o se puede crear una paleta a medida con 256 colores (o menos) que se muestran en la imagen. Todos los colores que no estén comprendidos por la paleta, se eliminan de la imagen, y se reemplazan por el color más similar dentro de la paleta elegida.
El Modo Indexado es útil para imágenes Web que no muestren muchos colores, como logos simples, ya que la imagen sólo guardará los colores de la paleta que elijamos, por lo cual, el tamaño final del archivo se verá muy reducido. Sin embargo, este modo no es utilizado en las Imprentas, por lo que sólo es recomendable en ciertas imágenes creadas para la Web, dado su reducido tamaño.
Flexografía
Es un sistema de impresión, basado en una plancha flexible, el cual es normalmente utilizado para imprimir en materiales flexibles como bolsas, cartones, etc. Trabaja con tintas de diferente densidad, no son grasas (su base es alcohólica o acuosa) y tienen poca viscosidad por lo que secan muy rápidamente, por lo cual es un proceso de impresión de alta demanda.
La ventaja de la flexografía por sobre otros sistemas es la impresión en altas tiradas, por ese motivo es el mas utilizado en la producción de packagings, etiquetas, etc.
Resoluciones de Imagen
PPI significa Pixels Per Inch, y hace referencia a la cantidad de pixeles que pueden entrar en una pulgada cuadrada (6,4516 cm). Cuanto mayor sea la cantidad de pixeles que entren en esa pulgada cuadrada, mayor será la resolución de la imagen. El estandar PPI es el más utilizado en diseño gráfico. Sin embargo, en el entorno de la Imprenta, al PPI se lo llama DPI, haciendo referencia a los Dots Per Inch (Puntos Por Pulgada). Sin embargo, PPI y DPI son exactamente lo mismo.
Existen diferentes cantidades de PPI/DPI para diferentes tipos de fines. El estandar para la creación de imágenes para la Web es 72ppi, suma que puede ser alcanzada facilmente por cualquier cámara digital convencional.
Si el proyecto tiene como fin ser impreso, debemos entregar la imagen con una resolución no menor a 150ppi. Lo ideal son 300ppi si es que queremos el mejor resultado, aunque necesitaremos cámaras digitales semi-profesionales si es que queremos alcanzar esta cifra.
Sin embargo, dentro de la impresión de imágenes digitales entra en juego un nuevo parámetro, el LPI (Lines Per Inch – Líneas Por Pulgada). En términos generales, si queremos imprimir a 150LPI (el valor estandar utilizado), debemos utilizar una imagen del doble de DPIs, es decir 300DPI.
Debemos tener en cuenta que una resolución mayor al doble de LPI soportado por la impresora, será desaprovechado y solo incrementará el tamaño final del archivo, sin mostrar mejorías.
La mayoría de las cámaras convencionales suele capturar a 72PPI. Sin embargo, si queremos imprimir esta imagen a tamaño A4, la imagen redimenciona su Tamaño de Impresión, aumentando los PPIs. Es así que una imagen de 7MP a 72PPI, al ser impresa al tamaño A4, puede llegar a tener 200PPI, por lo que la impresión aumenta enormemente su calidad.
Este redimencionamiento se realiza de manera proporcional. Cuando una imagen es achicada, su resolución aumenta, y sus PPIs se agrupan; cuando una imagen es agrandada, sus PPIs se dispersan, achicando su resolución y generando un efecto de desenfoque llamado Interpolación.
Formatos de imágenes Pixmap
Este es un tema muy complejo, ya que constantemente surgen nuevos formatos y los formatos ya existentes se actualizan. Los formatos sitados a continuación, son los más populares e importantes, y todos trabajan con imágenes de mapa de bits (bitmap/pixmap):
.PSD
Es el formato propio de Adobe Photoshop. Este formato nos permite guardar y seguir editando capas, máscaras, transparencias, selecciones, etc. Es uno de los formatos más completos a la hora de trabajar con Photoshop. Como desventaja, podemos decir que son muy pocos los programas que logran abrir este formato con éxito (obviamente excluyendo a los creados por Adobe), y los visualizadores de imágenes más populares (como el Visor de Windows) no suelen ofrecer una preview de esta clase de archivos (aunque otros más modernos como Picasa 3 si lo hacen). Este formato es muy utilizado para realizar y guardar proyectos que serán impresos en una imprenta gráfica.
.TIFF
Este formato es idéntico al .PSD de Photoshop, pero tiene la ventaja de permitir una preview en practicamente cualquier visualizador decente. Este también es uno de los formatos ideales para guardar proyectos que serán impresos.
.RAW
Este formato es el utilizado por las cámaras digitales de alta gama. Si bien su peso es enorme comparado con el clásico .JPG, éste formato no tiene ninguna clase de compresión, lo que significa que el archivo es la fiel representacion de lo captado por la cámara. Este es uno de los formatos más utiliados en las imprentas (junto con .PSD y .TIFF) dado que al no tener compresión, ofrecen la máxima calidad posible. Se recomienda para su uso una memoria de varios Gigabytes, y en lo posible de Alta Velocidad.
.GIF
Éste fue uno de los formatos más populares en los inicios de la Web, ya que en su momento (antes de Flash y porsupuesto de YouTube), era el único formato que permitía lograr animaciones manteniendo un peso adecuado para las conexiones Dial-Up de aquellos días y sin requerir ninguna clase de Plugin ni nada especial. Actualmente no es muy utilizado dada la baja calidad de imagen que ofrece, aunque si es muy visto en avatares, sobre todo por sus animaciones de bajo peso. De más está decir que si vas a una imprenta con un .GIF, llaman a la policía y te encierran en un manicomio. Este formato es sólo utilizable en páginas livianas de la Web, ya que Flash y PNG lo han superado ampliamente. Como pundo a favor, además de la posibilidad de crear animaciones, permite transparencias.
.JPG
Este es el formato comprimido de imágen más popular de la Web, y de la vida cotidiana. A pesar de ésto, son increíblemente desastrosas sus características: no permite transparencias, mucho menos cápas y máscaras, no es el más liviano, no es el que mejor se ve. Sin embargo una de las características más peligrosas de .JPG es su compresión progresiva. Pero, Qué quiere decir compresión progresiva?
Cuando uno crea una imagen y la guarda en .JPG, el programa (como Photoshop) nos permite asignarle un grado de compresión a nuestra imagen, que puede ir de 1 (máxima compresion, pero calidad) a 12 (mínima compresión, máxima calidad). Normalmente, si queremos ver la imágen con una buena nitidez, elegimos un valor entre 8 y 12 y guardamos la imagen. Pero qué pasa si el cliente me dice que tengo que arreglar tal o cual cosa de la ilustración: yo vuelvo a abrir ese .JPG comprimido en 12 (por dar un ejemplo), lo edito como el cliente quiere y lo vuelvo a guardar con compresión 12. Al ser la compresión "porgresiva", esa mínima compresión de valor 12, se le suma a la compresion (tambien 12) que le otorgué la primera vez que guardé, dándome por resultado, en vez de una compresion 12, una compresion 10, ya que las compresiones se fueron sumando
Pero que pasa si el cliente no queda satisfecho del todo, y me pide cambiar algo de la imagen: yo vuelvo a abrir ese .JPG (ya con 2 compresiones nivel 12 aplicadas), lo edito y lo guardo con compresión nivel 12. Esta vez, la nueva compresión se le suma a las compresiones anteriores, por lo que me va a dar la calidad de una compresion 9 u 8 (por tirar un número). A partir de aquí, la degradación de la calidad comienza a ser muy visible. Y qué pasa si dentro de 6 meses el cliente me llama y me dice que le gustaría renovar la imagen, que quiere cambiarle el color de fondo y alguna cosita más: yo vuelvo a abrir el .JPG (ya con 3 compresiones nivel 12), lo edito y lo guardo con compresion nivel 12. Otra vez, la compresión progresiva se suma, y termino "por arte de magia" con una imagen pixelada, descolorida y con textos ilegibles.
Dado este gran incombeniente que presenta el formato .JPG, sólo es utilizado en la Web, aunque puede llegar a utilizarse en gráfica, pero claramente no es lo aconsejable.
.PNG
Este es uno de los formatos más utilizados en la Web, sobre todo en el "mundo Linux", y tambien a la hora de crear íconos y banners con transparencias y buena calidad. Si bien tiene un peso un tanto superior a .JPG, éste si soporta transparencias. Podría decirse que .PNG se ha combertido en la union de lo mejor de .JPG (la buena calidad de imagen con un bajo peso al comprimirse) y .GIF (soporte para transparencias y a partir del nuevo .PNG Animado, soporte para animaciones). Sólo es recomendable su uso para la Web, no para gráfica. El nuevo .PNG Animado promete poner a .PNG en la sima, así que abrá que tenerle fe a este formato.
-----------------------------------------------
Software Libre
Llamamos Software Libre a todo programa que con las cuatro Libertades fundamentales:
1. El usuario es libre de usar el programa para cualquier fin, sin pedir autorización a nadie.
2. El usuario debe tener acceso al Código Fuente del software, para poder estudiarlo.
3. El usuario es libre de copiar el software cuantas veces quiera, en el medio de almacenamiento que desee y compartirlo con quier quiera.
4. El usuario tiene la libertad de modificar el software a traves de su Código Fuente, y es libre de hacer pública su versión modificada.
De ninguna manera el Software Libre debe ser gratuito; fijar el precio depende de los desarrolladores, aunque, generalemente los programas más populares son gratuitos, o tienen un costo mucho más accesible que los Privativos.
A diferencia de los que muchos piensan, el Software Libre es lo suficientemente maduro como para ser utilizado en entornos profesionales. De hecho, la oferta de Software Libre en el campo del Diseño Gráfico es mucho más amplia y variada que en el Software Privativo.
Retoque Fotográfico
GIMP
GIMP (GNU Image Manipulation Program) es un programa es un programa libre y gratuito de edición de imágenes digitales en forma de mapa de bits. Nace en 1995, con el nombre de “General Image Manipulation Program”, creado por Spencer Kimball y Peter Mattis. Dada su integración con el proyecto GNU (GNU is Not UNIX), en 1997 cambió su nombre a “GNU Image Manipulation Program”.
GIMP es el programa de tratamiento de imágenes libre más utilizado. Sin embargo, actualmente no soporta el perfil de color CMYK, muy utilizado en imprenta. Es un programa multiplataforma, ya que ofrece versiones para Microsoft Windows, GNU/Linux y Mac OS X.
Características:
Licencia: GPL
Plataforma: Microsoft Windows, GNU/Linux, Mac OS X
Más información:
Sitio Oficial de GIMP
Sitio Oficial de GIMP en español
GIMP en Wikipedia
Krita
Krita es un software de edición de imágenes de mapa de bits, y forma parte de la suite de oficina KOffice del proyecto KDE. Es libre, gratuito y multiplataforma. Antes de lanzarse una versión públicamente, su nombre era KImageShop y luego Krayon, pero por problemas legales se adoptó el nombre de Krita (crayón en sueco).
Si bien programas como GIMP pueden ser más completos y profesonales, Krita cuenta con la ventaja de tener soporte para CMYK, por lo cual es el complemento perfecto para GIMP.
Más información:
Sitio Oficial de Krita
Krita en Wikipedia
Dibujo Vectorial
Inkscape
XARA X
Publicación Editorial
Scribus
-----------------------------------------------
Galerías Fotográficas
Ale Burset
Douglas Fisher