Photoshop
LAS IMAGENES:
Las imágenes están compuestas de "pixeles", siendo éstas pequeños
puntos cuadrados. Son como los "ladrillos" con los que está construida una imagen:
Cada uno de esos píxeles puede tener UN solo color, liso,
pero al ser tan pequeños que el ojo no los percibe, podemos acomodarlos
uno al lado de otro, creando la sensación de matices, luces y sombras.
El sistema de color de las imágenes que usaremos es el sistema RGB
(Red, Green, Blue, o sea, Rojo, Verde y Azul)., ya veremos para otras aplicaciones
el sistema CMYK (cian, magenta, amarillo y negro).
El sistema RGB son los colores primarios de haces de luz, que, combinados,
dan color a cada pixel de una imagen.
Debemos asegurarnos, entonces, que el Modo de color de nuestra
imagen esté especificado en RGB, de lo contrario, la imagen cambiará de tono
cuando la convirtamos a ese modo de color.
CAMBIOS DE TAMAÑO Y RESOLUCION:
Al contrario que cuando preparamos un diseño gráfico para papel,
cuando trabajamos para la pantalla de un dispositivo capaz de navegar la web,
no tenemos la certeza de "en cuál tamaño" estará viendo nuestro trabajo cada usuario.
Existen diferentes tamaños de pantalla, y diferentes "resoluciones".
Así que, a la hora de crear nuestras primeras imágenes, ¿a qué tamaño y resolución las crearemos?
RESOLUCION:
Cada imagen es una "grilla" cuadriculada, formada por miles o millones de cuadraditos
llamados "pixeles", que a la manera de ladrillos en una pared, van formando
el rectángulo completo de la imagen (toda imagen es siempre rectangular o cuadrada).
Cada pixel o "ladrillo" es cuadrado, y solo posee un único color. Es la cantidad enorme de
pixeles adyacentes y de muy diminuto tamaño lo que da la sensación de "continuidad" y
luces y sombras, pero (recordemos esto porque es fundamental),
cada pixel solo puede ser de UN solo color liso:
Por eso, cuando hablamos de "resolución" de una imagen, nos referimos al tamaño de cada pixel,
fundamental para la calidad de la imagen, que se logra llevando el tamaño del "ladrillo" (pixel)
a algo tan pequeño que el ojo no alcance a percibirlo.
Cuanto más pequeño sea el pixel, mejor calidad tendrá la imagen, aunque el
archivo será más grande (más "pesado" en megas o Kb) ya que harán
falta muchos más pixeles para lograr el mismo tamaño final, serán "azulejos o ladrillos"
mucho más pequeños:
En el primer caso, suponiendo que la imagen mida 1 pulgada por 1 pulgada, tenemos
una resolución muy baja, de apenas 5 pixeles por pulgada, insuficiente para mostrar algo entendible.
En la segunda imagen, hemos mejorado la resolución a unos 12 píxeles por pulgada,
pero tanpoco se distingue el motivo, siguen siendo muy grandes los pixeles.
En la tercera imagen, la resolución subió a 36 píxeles por pulgada, y aunque ya se nota
bastante bien el motivo de la imagen, todavía se distinguen los "ladrillos" a simple vista,
se ve "borrosa" la imagen.
Recién en la cuarta imagen, dejamos de perbicir los pixeles, porque esa imagen posee
la resolución típica de toda imagen en la web, que es de 72 puntos por pulgada
(ppp, o dpi en inglés -dots per inch, puntos por pulgada).
La resolución a emplear en todas nuestras imágenes será de 72 puntos por pulgada
(72 dpi, "dots per inch"). Ya que no tiene sentido darle mayor resolución,
porque los monitores actuales no pueden mostrar puntos más pequeños que esos.
Salvo que si necesitamos imprimir nuestro trabajo necesitaremos llevarla a 300dpi.
FORMATOS EDITABLES Y FINALES:
Editables:
Crearemos siempre un archivo "original", al que llamaremos "editable", en formato PSD en Photoshop.
Este lo usaremos para modificar, agregar, quitar, etc. y para guardarlo "por si acaso"
hubiera necesidad de hacer algún cambio en la imagen.
La ventaja de esos formatos "editables" es que permiten mantener separadas en "capas"
independientes las distintas partes de una imagen (el texto, los diferentes elementos o motivos
de la imagen, líneas, bordes, etc.), haciendo que sea fácil luego crear una nueva
versión de la imagen con algún retoque, con algún pequeño cambio con respecto a su anterior estado
o version, reacomodando cosas, ocultando o mostrando elementos, textos, etc.
Por supuesto, ninguno de esos formatos editables puede ser mostrado por un navegador,
así que para usarlos en una página debemos generar otra imagen, la imagen "final".
Imagen final:
Al guardar para la web en Photoshop (o "exportar" en otros programas)
nuestras imágenes finales, lo haremos en los formatos JPG, PNG o GIF.
Así que siempre trabajaremos con al menos DOS ARCHIVOS DISTINTOS por cada imagen
un archivo EDITABLE (PSD,) y una imagen FINAL (sin capas y en formato GIF, JPG o PNG).
Un "original", y una "copia" en formato más liviano y compatible.
Pero la pregunta es: ¿cuál formato de imagen final me conviene utilizar? Y la respuesta es: ¡depende!
Hay varias preguntas a hacerse para determinar cuál es el formato que vamos a usar.
* ¿Necesitamos transparencias? Usaremos GIF o PNG.
* ¿Se trata de un dibujo con colores planos, lisos? Usaremos PNG o GIF
* ¿Necesitamos animaciones? GIF.
* ¿Es una foto con muchos matices de luces y sombras? JPG.
El formato GIF:
Si hablamos de dibujos lineales y logos el formato JPEG no es el adecuado ya que los
resultados serán entre malos y pésimos; aparecerán manchas y colores poco definidos.
¿Necesitamos imágenes de colores planos, como logotipos y dibujos?
Mejor que sean GIF o PNG:
El formato GIF permite transparencias (que ciertas partes de la imagen dejen ver el fondo a través suyo)
pero "a todo o nada", es decir, cada pixel, o es sólido o es totalmente transparente,
sin matices translúcidos (eso puede hacer que se noten los bordes al superponer
una imagen transparente sobre otra imagen o sobre un color de fondo).
Como contrapartida, la cantidad de colores de los GIF está limitada a solo 256 y por lo tanto,
se pierde cierta definición. Es para imágenes muy simples, dibujos, logos simples, de pocos colores,
planos, lisos. Cabe destacar que los 256 colores como máximo entre los que puede elegir para dar
color a cada pixel, no son siempre los mismos 256 colores, sino que cada imagen, según su tonalidad,
requiere unos 256 colores que no son los mismos 256 de otra imagen.
Por ejemplo, un paisaje con pasto y cielo tendrá entre los 256 colores muchos verdes y celestes,
en cambio, un retrato en primer plano tendrá marrones, beiges y rojos.
El formato PNG:
El formato PNG (Portable Network Graphic) tiene dos tipos: 8 y 24 bits. El de 8 bits es similar al GIF (
8 bits es 2 elevado a la 8, o sea 256). Los píxeles translúcidos en transparencias de PNG de 8 bits
en Explorer 6 se verán totalmente transparentes.
En cambio el de 24 bits también admite transparencias sin llimitar la cantidad de colores pero
su tamaño es bastante mayor y, en Internet Explorer estas transparencias "translúcidas" no se muestran
correctamente, salvo que se utilicen algunos trucos.
El formato GIF y PNG son "casi intercambiables" ya que los PNG fueron inventados para reemplazarlos.
Pero los PNG pueden tener paletas de colores mucho más amplias
(no solo de 256 colores como los GIF). El único problema de los PNG es que no pueden ser
visualizado directamente por navegadores web antiguos y las transparencias no son soportadas
por Internet Explorer.
Compresión:
Por supuesto, a mayor calidad, mayor volumen de información y por lo tanto,
archivos de mayor tamaño, lo que significa tiempos de carga superiores y para peor..
No hay reglas fijas. El tamaño de un archivo, no depende exclusivamente del formato
con que la guardemos, depende mucho de la imagen en sí misma, de la cantidad de colores
que tenga, de cómo esten distribuidos, etc.
En la realidad, el ojo humano sólo capta un número limitado de colores así que una forma de
comprimirlos es eliminar algunos de esos colores.
* De los tres formatos de archivo más utilizados en la web, el JPEG es el que más comprime
y por lo tanto, es el que mayor pérdida tiene. Como esa compresión puede ser establecida
por nosotros, la pérdida variará y habrá una relación directa con el tamaño del archivo generado.
* El formato GIF comprime y no tiene pérdida, pero está limitado a usar solo 256 colores por imagen.
* El formato PNG, comprime con menor pérdida, pero sus transparencias no se ven en Explorer.
Así que todos poseen ventajas y desventajas...
El formato a elegir, dependerá de cada imagen a mostrar y no queda otro remedido que probar.
Todos tienen sus ventajas y desventajas, pero si sabemos a grandes rasgos para qué es mejor
cada uno, podremos elegir sin equivocarnos.
Conclusiones:
* JPG para fotos.
* GIF para animaciones.
* PNG para todo lo demás (iconos, botones, fondos, gráficos, etc.).
VECTORES Y PIXELES:
Básicamente este tipo de imágenes digitales se divide en dos grandes grupos: Los vectores y los Mapas de Píxeles (más conocidas como mapas de bits).
Los vectores son exactamente eso, líneas o puntos que mediante ciertos parámetros matemáticos pasan a tener un largo, ancho y dirección determinados. Esto significa que si yo tengo una imagen de un triángulo formada por vectores no importa cuánto amplíe la imagen, siempre se verá nítida.
Esto es porque la fórmula matemática que forma la figura se vuelve a generar adaptada a distinto tamaño y en consecuencia se redibuja la imagen.
Por el otro lado tenemos los mapas de bits. Son cuadrados o rectángulos divididos en casilleros como un tablero de ajedrez, donde a cada celda le corresponde un valor de color determinado. Son "mapas" porque la información real digital sería algo así como "casillero 1: rojo oscuro; casillero 2: verde aguamarina; casillero 3: azul; etc…" De esta forma se forma la imagen, cada celda se llama píxel, y al unirlos se forma la imagen.
El gran problema con los píxeles es que al agrandar una imagen, a diferencia de los vectores, esta no se redibuja, es decir, se agrandará el detalle, y empezarán a ver las diferencias donde termina un píxel y empieza otro (comúnmente esto se llama "imagen pixelada").
PROFUNDIDAD DE COLOR:
Hay diferentes sistemas para asignar color a una imagen, llamados profundidad de color. Es una característica de la computación: la cantidad de bits por píxel será la profundidad. Pocos colores ocuparán pocos bits y viceversa.
Teniendo en cuenta que los colores se forman por luz o por tintas por ejemplo, en un monitor, que emite luz o en una hoja impresa, hay ciertos colores que no se pueden reproducir por ciertos medios. Una luz súper brillante se verá bien en una pantalla pero en un impreso se verá "apagada". Esto es obviamente porque las tintas no tienen luz.
De esta forma se asigna un sistema para el color a las imágenes digitales de acuerdo a su finalidad. Estos son:
Escala de grises (comúnmente llamado blanco y negro): ocupa 8 bits por píxel.
RGB (Rojo Verde y Azul, en inglés. Son los colores primarios de la luz): 24 bits por píxel.
CMYK (Cyan, Magenta, Amarillo y Negro, en inglés. Son los colores primarios de las tintas, como aprendimos en la escuela -rojo, amarillo y azul-): ocupan 36 bits por píxel.
Formato RAw
Es la información monocromática en bruto, sin procesar, del sensor. La información de cada píxel es registrada por un fotocaptador, que solo es capaz de medir niveles de luz, no de color, generando por tanto una imagen en blanco y negro. La cantidad de tonos diferentes que un fotocaptador es capaz de registrar se expresa en bits por píxel.