1.1.

Tipos de Imagen vectores y mapas de bits

Digitalizar una imagen significa convertirla en una serie de datos de código binario
(ceros y unos), que es el único lenguaje que entienden las computadoras, sin
embargo una vez digitalizadas, las imágenes pueden tomar la forma de más de una
docena de formatos gráficos diferentes.

Los archivos de imagen digital pueden clasificarse en dos grandes categorías

Archivos de mapas de bits Archivos Vectoriales

Están formados por puntos llamados Están formados por líneas

pixeles, cada uno de distinto color, lo cual curvas(vectores), que representan
resulta en imágenes realistas, pero se ecuaciones matemáticas, lo que
deterioran al ampliarse. permite escalar esas imágenes sin
que se deterioren.

Ejemplo de ellos: BMP, GIF, PNG, JPEG, Ejemplos de ellos: SVG, EPS
PIC, TIFF
Aquí se aprecia la diferencia entre mapas de bits y vectores más claramente,
como observarás los archivos de mapas de bits está formada por puntos al
ampliarse se observa un efecto de diente de sierra en los bordes, esta
transformación no se observa con los archivos vectoriales, pues están
compuestos por vectores que se calculan y redibujan al escalar su tamaño.

Página 2
Cada tipos de archivo, tiene características que lo distinguen y lo hacen más
adecuado para determinados fines, Los archivos Bitmap permiten reproducciones
fotográficas con alto grado de detalle, 100% realistas, mientras que los archivos
Vectoriales son más adecuados para reproducir ilustraciones. Por lo tanto, pese a
ser susceptibles a deformarse(pixeles) al ser ampliados, los archivos Bitmap son los
únicos que se adaptan al trabajo fotográfico.

1.2. Formatos de archivos de imagen

AI: Es el formato propietario del software de diseño vectorial de Adobe Illustrator.

EPS: (Encapsulated Post Script), Formato de archivo vectorial creado por Adobe
System, para facilitar la impresión con impresoras post scrip. Tiene gran capacidad
para especificar tonos de grises utilizando patrones de puntos.

BMP (Bitmap): Es el formato nativo de Windows, soporte profundidad de color de

hasta 24 bits. Su principal ventaja es no tener perdida de color un inconveniente de
este formato es el gran tamaño de los archivos.

GIF: (GraphicsInterchangeGroup): Formato bitmap de 8 bits que permite un rango de

tan sólo de 256 colores. Entre sus ventajas está el de permitir fondos transparentes y
archivos de muy bajo peso, por lo que es utilizado en aplicaciones Web, además
soporta la creación de secuencias animadas.

PNG: (Portable Network Graphics): Archivo bitmap diseñado especialmente para

manejar gráficos para web. Permite gran compresión, transparencias y acepta hasta
24 bits de color, Es el formato nativo del software Fireworks, de Adobe System.

JPEG:(JointPhotographicsExpertGroup): Es el formato más utilizado para fografías

porque permite alta calidad y buena compresión sin pérdida evidente de calidad.
Excelente para imágenes de color o en escala de grises.

PSD: (Protosol) Es el formato propietario de software Adobe Photoshop.

RAW. Formato bitmap utilizado por las cámaras digitales profesionales. Permite gran
calidad, puesto que trabaja prácticamente sin compresión y soporta todos los modos

Página 3
de color. Permite redimensionar las imágenes sin pérdida de calidad, así como incluir
en ellos metadatos).

TIFF: Formato bitmap de gran calidad y escasa compresión, soportado por todos los
programas de imagen y utilizado por todos los escáner. Incluye todos los tipos de
color, (RGB, CMYK, Indexado, escala de grises) hasta de 32 bits de profundidad.

XCF: Archivo propietario del software libre de diseño digital GIMP, es equiparable al
PSD de Photoshop, aunque son incompatibles entre sí.

1.3. Modos de Color

Probablemente has escuchado que hay colores primarios o básicos y colores

secundarios que son producto de la mezcla de colores básicos. Si alguna vezhas
pintado, seguramente estas convencido de que el verde es un color secundario, el
cual se forma al mezclar pintura amarilla y azul. Pero en realidad, esto depende del
modo de color con el que estemos trabajando, ya que existen dos modos o formas
de crear colores: La síntesis aditiva y la substractiva.

La síntesis aditiva: (El color Luz). La suma de todos los coloresproduce un color
blanco este es el modo de color que se utiliza en las computadoras, monitores de
video, televisores y todos aquellos medios en los cuales el color sea producido por la
luz.

Tal vez en alguna de tus clases de física has observado que al pasar por un prisma
de cristal, la luz de una linterna se descompone en colores. Lo mismo pasa con la luz
solar al cruzar las gotas de lluvia, y por ello se forma el arcoíris. A ese fenómeno se
le conoce como refracción de luz.

La síntesis la substractiva: Cuando pintas con lápices de colores sobre una hoja de
papel, mientras más colores mezclas, el color resultante se obscurece acercándose
al color negro. Esto sucede porque los colores materia, es decir es decir aquellos
formados por pigmentos, funcionan de manera inversa a los colores de la luz y en
vez de sumar su luminosidad, la restan. Por lo tanto, los colores materia usan el
modo de color de síntesis substractiva, donde la suma de coloresresulta en la
ausencia de luz, es decir en el color negro.

Página 4
La síntesis la substractiva, es el modo de color utilizado para cualquier tipo de
pintura: acuarela, óleo, tintas, crayones, y hasta pinturas para casa y automóviles.
Mientras más colores mezcles, más obscuro será el color que obtengas.

RGB Y CMYK. Los colores primarios y secundarios son diferentes en cada modo de
color, puesto que los colores luz, suman su luminosidad, mientras que los colores
materia lo restan.

Así para los colores luz, los colores básicos son tres rojo(Red), verde(Green), azul
(Blue) por eso a este esquema se le denomina RGB.

1.4. Colores primarios

Los colores primarios aditivos son los tres colores de la luz (rojo, verde y azul), que
producen todos los colores del espectro visible al unirse en distintas combinaciones.
Al sumar partes iguales de rojo, azul y verde, se obtiene el colorblanco. La total
ausencia de rojo, azul y verde da como resultado el color negro. Los monitores de
ordenador son dispositivos que emplean colores primarios aditivos para crear color.

Página 5
El sistema de colores materia es llamado CMYK por las siglas de sus colores
primariosCyan(azul), Magenta, Yellow(amarillo) y Black(negro).

A diferencia de los monitores, las impresoras emplean colores primarios sustractivos

(pigmentos cian, magenta, amarillos y negros) para producir los colores mediante
mezclas sustractivas. Se usa el término “sustractivo” porque los colores primarios
son puros hasta que se empiezan a mezclar entre ellos; el resultado son unos
colores que son versiones menos puras de los primarios. Por ejemplo, el color
naranja se crea mediante la mezcla sustractiva de magenta y amarillo.

1.5. Rueda de colores

Si no tiene experiencia en ajustar los componentes del color, los diagramas de la

rueda de colores estándar le servirán de ayuda al trabajar con equilibrio de color. La
rueda de colores se utiliza para predecir cómo un cambio en un componente afecta a

Página 6
otros colores y también cómo se convierten los cambios entre los modelos de color
RGB y CMYK.

Teoría del color: https://www.youtube.com/watch?v=HnqqW4PKpus

Por ejemplo, puede disminuir la cantidad de cualquier color de una imagen

aumentando la cantidad de su opuesto en la rueda de colores, y viceversa. Los
colores que se encuentran en posiciones opuestas de la rueda de colores estándares
denominan colores complementarios. De forma similar, puede aumentar o disminuir
un color ajustando los dos colores adyacentes de la rueda, o incluso ajustando los
dos colores adyacentes de su opuesto.

En una imagen CMYK puede disminuir el magenta disminuyendo la cantidad de

magenta o aumentando su complementario, que es el verde (el color del lado
opuesto en la rueda de colores). En una imagen RGB puede disminuir el magenta

Página 7
suprimiendo rojo y azul o añadiendo verde. Todos estos ajustes producen un
equilibrio de color global que contiene menos magenta.

1.6. Resolución

La resolución de una imagen Número de píxeles por pulgada (ppp) de una imagen
de mapa de bits. El uso de una resolucióndemasiado baja para una imagen impresa
produce una pixelación, píxeles de gran tamaño con un aspecto muy desigual en la
impresión. Utilizar una resolución demasiado alta (píxeles más pequeños que los que
puede producir eldispositivo de salida) aumenta el tamaño del archivo sin mejorar la
calidad de la salida impresa y ralentiza la impresión de la ilustración.

1.7. Acerca de las dimensiones en píxeles y la resolución de la imagen

impresa

Las dimensiones en píxeles miden el número total de píxeles de altura y anchura de

la imagen. La resolución es la precisión del detalle en las imágenes de mapa de bits,
que se mide en píxeles por pulgada (ppp). Cuantos más píxelespor pulgada, mayor
resolución. En general, las imágenes con más resolución producen una calidad de
impresión mejor, Imagen idéntica con 72 ppp y 300 ppp; obsérvese con el zoom al
200%

Página 8
1.8. Profundidad de bits

La profundidad de bits especifica la cantidad de información de color que está

disponible para cada píxel de una imagen. Cuantos más bits de información por píxel
hay, más colores disponibles existen y más precisión en la representación del color
se aprecia. Por ejemplo, una imagen con una profundidad de bits de 1 tiene píxeles
con dos valores posibles: blanco y negro. Una imagen con una profundidad de bits
de 8 tiene 28 ó 256 valores posibles. Las imágenes en modo de escala de grises con
una profundidad de bits de 8 tienen 256 posibles valores de gris.

Las imágenes RGB se componen de tres canales de color. Una imagen RGB con 8
bits por píxel cuenta con 256 posibles valores para cada canal, lo que significa más
de 16 millones de posibles valores de color. En ocasiones, las imágenes

RGB con 8 bits por canal se denominan imágenes de 24 bits (8 bits x 3 canales = 24
bits de datos por píxel). Además de las imágenes de 8 bits por canal, Photoshop,

Página 9
también puede trabajar con imágenes que contienen 16 ó 32 bits por canal. Las
imágenes con 32 bits por canal también se denominan imágenes de alto rango
dinámico (HDR).

1.9. Tamaño de archivo

El tamaño de archivo de una imagen es el tamaño digital del archivo de imagen

calculado en kilobytes (K), megabytes(MB) o gigabytes (GB). El tamaño de archivo
es proporcional a las dimensiones en píxeles de la imagen. Las imágenes con más
píxeles muestran mejor los detalles a un tamaño de impresión determinado,
pero necesitan mayor espacio en disco para su almacenamiento y requieren
más tiempo para su edición e impresión. En consecuencia, la resolución de
imagen llega a ser un compromiso entre la calidad de la imagen (capturando todos
los datos necesarios) y el tamaño de archivo.

Otro factor que afecta al tamaño de archivo es el formato del mismo. En función de
los distintos métodos de compresión que se usan en los formatos de archivo GIF,
JPEG y PNG, los tamaños de los archivos pueden ser muy distintos aun teniendo las
mismas dimensiones en píxeles. De igual manera, la profundidad de los bits de color
y la cantidad de capas y canales de una imagen afectan al tamaño de archivo.

1.10. Acerca de la resolución del monitor

La medida de la resolución del monitor se expresa en píxeles. Por ejemplo, si la

resolución del monitor y las dimensiones en píxeles de la fotografía tienen el mismo
tamaño, la fotografía llenará toda la pantalla cuando se visualice al 100%. El tamaño
de la imagen en la pantalla depende de una combinación de factores: las
dimensiones en píxeles de la imagen, el tamaño del monitor y el ajuste de
resolución del monitor. En Photoshop, puede cambiar el tamaño de la imagen en
pantalla para facilitar el trabajo con imágenes de cualquier dimensión en píxeles.

Página 10
Imagen de 620 x 400 píxeles mostrada en monitores de diferentes tamaños y
resoluciones.

Al preparar las imágenes para su visualización en la pantalla, debe tener en cuenta la

menor resolución del monitor en la que es probable que se vea la fotografía.

1.11. ¿Qué es Adobe Photoshop y para qué sirve?

Es una aplicación que sirve para la creación y edición de imágenes. Este espacio
de trabajo incluyemenús y una serie de herramientas y paneles para visualizar, editar
y añadir elementos a las imágenes.

Este programa sirve para trabajar y editar toda clase de imágenes y nos ayuda a
modificar, retocar, deformar, rotar, crear efectos, etc. en cualquier tipo de imagen
(fotografía o ilustración). También es unprograma que nos permite realizar ciertas
aplicaciones gráficas, como Illustrator, pero su funciónprincipal es la de trabajar con
imágenes.

1.12. Iniciando Photoshop

Para iniciar con el programa de photoshop, primero damos clic en

Inicio>todos los programas > Adobe máster collection cs5 >photoshop

Página 11
O bien podemos dar clic en el icono del acceso directo que se encuentra en la parte
del escritorio o escribimos photoshop en la caja de búsqueda.

Una vez que la aplicación haya sido iniciada se comienzan a cargar todos sus
plugins, herramientas, menús etc. Este proceso puede tardo un poco, sobre todo en
los ordenadores lentos y con poca memoria RAM, una vez cargada la aplicación
podemos comenzar a trabajar.

Página 12
 Ahora aprenderemos algunas funciones y conceptos básicos del programa de
photoshop para poder entender mejor el curso.

1.13. Abrir una imagen

Para comenzar a editar una imagen, lo primero que tendremos que hacer es abrir
Photoshop.

Pasos que debemos de seguir para abrir un archivo desde Photoshop.

 Nos vamos a la barra de menús, damos clic en archivo

Al momento de dar clic en archivo nos mostrara una lista de opciones.

Página 13
 Posteriormente se nos abrirá un cuadro de dialogo en donde podemos
buscar nuestro archivo que vamos a modificar.

Página 14
 Ahora seleccionamos nuestro archivo que vamos a editar y se mostrara
en el área de trabajo para poder manipular los cambios.

Página 15
 Otra manera de abrir una imagen es a través del Explorador de
Windows y damos clic derecho a nuestra imagen y después abrir con
Photoshop como se muestra a continuación:

Página 16
 Adobe Bridge es una manera más rápida de navegar por las carpetas y
organizar todas las imágenes y también añadiendo información en la imagen
(metadatos) como lo son datos técnicos y derechos de autor. Además te permite
acceder a opciones de Photoshop,

Página 17
Página 18
1.14. Guardar una imagen

Podemos encontrar dos estados de trabajo en los que se puede encontrar una
imagen como son:

 Imagen en proceso: esto quiere decir que guardamos la imagen para no

perder los cambios realizados porque posteriormente continuaremos con
la edición.

 Imagen terminada: quiere decir que la imagen ya está lista para ser
publicada, se puede imprimir o almacenarla.

Por tanto, si la imagen puede encontrarse en dos estados de trabajos,

guardaremos nuestros archivos de formas diferentes.

En ambos casos el procedimiento inicial es el mismo, haremos clic en Archivo y

luego en

Página 19
Guardar Como.

Aparecerá un cuadro de dialogo como el siguiente:

Página 20
Navegaremos por las carpetas hasta encontrar el lugar donde queremos guardar el
archivo.

Ahora elegimos una de las dos opciones:

a) Guardar Imágenes inacabadas o en proceso.

Si todavía no hemos terminado la manipulación de la imagen y queremos guardar el

trabajo que hemos hecho, que la imagen permanezca con el estado en el que se

Página 21
encuentra, manteniendo las capas, transparencias y objetos tal y como están para
poder seguir trabajando con ellos después.

Entonces elegimos el tipo de archivo en el que queremos guardar la imagen, por lo

tanto debemos de elegir Photoshop (.PSD o .PDD).

Este tipo de archivo ocupa mucho espacio, es porque guarda una gran cantidad de
información sobre el estado en el que se encuentra.

.PSD y .PDD no son archivos de imagen, son archivos de trabajo propios de

Photoshop y por tanto sólo podrá utilizarse con este programa.

Página 22
b) Guardar imágenes terminadas

En este caso, nuestra imagen ya ha alcanzado su estado final, hemos trabajado con
la imagen y queremos finalizar su proceso.

Ahora lo que haremos será guardar la imagen como un archivo de imagen para que
pueda ser utilizada más tarde como mejor nos interese. Hacemos clic en la lista
desplegable en donde nos muestra diferentes manera de guardar nuestra imagen y
seleccionamos el formato de imagen digital que queremos darle a nuestra imagen.

Página 23
Página 24
JPG, GIF y PNG son los formatos más comunes. El primero, está pensado para
imágenes con muchos colores, como fotografías, para las cuales se obtiene mejor
calidad en menor tamaño que otros formatos. El segundo, GIF, esta ideado para
gráficos, imágenes con pocos colores (un máximo de 256) y áreas de color uniforme.
Por lo general, un archivo GIF es muy ligero, permite transparencias y animaciones.
PNG tiene varias versiones: PNG 8 puede usarse como los GIF, y PNG 24 está
especialmente diseñado para gráficos con degradados y transparencias de distinta
intensidad.

Vamos a realizar algunos pasos que debemos seguir cuando guardamos un archivo
en otro formato

a) Si se guarda un archivo en formato PSD, cuando quieras volver a abrirlo

solo tendrás que dar doble clic sobre el icono o como ya lo habíamos dicho antes
desde el menú Archivo y Abrir

Página 25
 b) Si guardamos el archivo en formato JPG aparecerá el siguiente
recuadro:

Podemos configurar diferentes opciones de la imagen. En la opción de Mate se

desplegara una lista y podrás seleccionar el color en el que quieres que se muestren
las transparencias, si tu imagen ya la tienes en formato JPG ya no podrás mostrar
los espacios transparentes.

Ahora nos vamos al apartado de calidad de imagen, desde ahí podemos elegir
entre calidad baja, media, alta y máxima.

Página 26
Nos vamos al siguiente apartado que es el de opciones de formato, aquí
podemos elegir el tipo de formato JPG en el que se quiere comprimir el
archivo.Otra opción que se presenta es escoger el tipo de formato JPG en el que
quieres comprimir el archivo, podrás elegir entre tres tipos diferentes.

c) Si guardamos el archivo en formato GIF,al momento de dar clic en Guardar

aparecerá un cuadro de dialogo como el siguiente:

El formato GIF es capaz de almacenar solamente 256 colores como

máximo, por lo que tendremos que decidir que colores deberá almacenar y
que colores debemos despreciar (en el caso de que nuestra imagen tuviera
más de 256 colores).

En el primer apartado encontramos una lista desplegable llamada Paleta,

aquí seleccionamos el conjunto de colores de salida que nosotros
queremos que contenga la imagen. La opción Local (Selectiva), es la
predeterminada, e intenta ajustar la paleta de colores final a los colores
contenidos en la imagen, despreciando algunos medios tonos para
conseguir un número de colores final que se ciña a las propiedades del
formato.

Página 27
 Si se quieres crear tu propia paleta personalizada, deberás seleccionar la
opción A medida, añadir y eliminar colores a través del cuadro de dialogo
que te va a aparecer.

Independientemente de la paleta seleccionada, podrás modificar el número total de

colores de salida bajo la lista desplegable de Paleta.

Si la casilla de Transparencia se activa, las trasparencias que contenga la

imagen permanecerán trasparentes, mostrándose el fondo de la página
donde coloques la imagen. Este es un recurso muy utilizado en la web para
crear efectos como éste:

Página 28
Nos encontramos con la primera imagen es un GIF sin transparencia, la segunda una
imagen GIF que tiene un color transparente y la tercera imagen un PNG con varios
niveles de transferencia, el borde punteado nos indica el borde real de la imagen.

Ya que hemos seleccionado todas las opciones de color damos clic en OK, te
aparecerá un cuadro de dialogo en donde te pregunta si deseas que la imagen se
guarde normal o entrelazada.

Página 29
GIF es un formato diseñado para el intercambio de imágenes por la red, el efecto
entrelazado facilita este proceso reservando el espacio de la imagen en la página
para luego descargar la imagen línea a línea.

No es recomendable utilizar el entrelazado en imágenes pequeñas de esta manera

ahorramos en el tamaño final del archivo.

1.15. Abrir un nuevo documento de trabajo

Aprenderemos a crear un nuevo documento en blanco desde el que crearemos una

imagen a partir de cero, bien sea añadiendo recortes o imágenes completas desde
otros archivos o introduciendo objetos propios como texto o formas.

Una vez que hayamos iniciado el programa, nos vamos a la herramienta menú,
posteriormente damos clic en Archivo > Nuevo y aparecerá un cuadro de dialogo
Nuevo Documento.

Desde esta ventana se configura el documento que vamos a crear, definiendo

todas las características básicas (tamaño, color, resolución y color de fondo)

Página 30
Si conocemos el tamaño final que queremos que tenga la imagen, podemos definir
su tamaño introduciendo la altura y anchura que se desea directamente.También
puedes cambiar las unidades con las que se mide el lienzo (el área de la imagen)
y medirlas en centímetros, útil para imágenes fotográficas, o en píxeles, más
recomendado para imágenes destinadas a la publicación en Internet.

 Se preguntaran ¿Qué es un pixel? Un píxel es la unidad más pequeña en

la que se puede descomponer una imagen digital, a cada píxel le
corresponde un color, de esta manera de píxel a píxel se va formando la
imagen total.

 A simple vista la imagen con un zoom real (al 100%) parece normal, pero si
aumentamos el zoom podemos observamos la imagen cada vez más
"cuadriculada".

Página 31
Un píxel no tiene un tamaño real (en centímetros). Depende de la resolución de
pantalla con la que se muestre. Si tu resolución de pantalla es de 1680x1050
significa que tu pantalla (sea del tamaño que sea) mostrara 1680 píxeles en su
anchura y 1050 en su altura. Podemos configurar la pantalla para que muestre
muchos más o menos píxeles en el mismo espacio, seleccionando una resolución
mayor o menor que dependerá del monitor. Por ejemplo, 1024x768 píxeles o
1920x1200 en una gran pantalla panorámica. El tamaño en centímetros será el
mismo, pero se mostrarán más píxeles en un mismo espacio.

Una imagen en pixeles es más apropiada para la web, si quieres que tu imagen
tenga un tamaño estándar ya definido. Damos clic en la lista desplegable predefinir
y hacer clic en sobre el elemento que se ajuste a tus medidas.

La resolución de una imagen nos permite conocer la cantidad de píxeles que

podemos encontrar en ella, se define como el número de píxeles por pulgada (ppp
o ppi; 1 pulgada equivale a 2.54 centímetros), y por tanto, si las dimensiones son
pequeñas y la resolución alta, tendremos una imagen de buena calidad. Las
imágenes de mayor resolución pueden reproducir más detalle y transiciones de
color más suaves debido a la densidad de píxeles.

Observa dos imágenes con las mismas dimensiones pero con diferentes
resoluciones:

Página 32
 Mayor Resolución

Menor Resolución

Ahora que conocemos mejor el concepto de resolución podemos escoger una

resolución para nuestra nueva imagen. Por defecto, Photoshop asigna al nuevo
documento una resolución de 72ppp, el estándar para imágenes en Internet, ya
que es la máxima que se aprecia a través de una pantalla. Si quieres imprimir la
imagen es recomendable que utilices una resolución entre 240 y 300ppp.

Página 33
Otra opción que tenemos esModo de color.Si trabajamos con una imagen
destinada a ser visualizada en pantalla utilizaremos el modo RGB (rojo, verde y
azul, el sistema que utilizan los monitores), pero si lo que queremos hacer es
imprimir nuestra imagen deberemos seleccionar el modo CMYK (cian, magenta,
amarillo y negro, el sistema en el que las impresoras "dibujan" las imágenes). Esto
no quiere decir que no podamos pasar de un modo a otro, o que no podamos
imprimir una imagen si elegimos el modo RGB.

Una vez que ya hemos seleccionado todas las características elegiremos el color
de fondo de la imagen. Si seleccionamos algún modo que no sea transparente, la
capa de fondo será inamovible y no se podrán realizar algunas de las
características avanzadas de Photoshop. Es recomendable seleccionar un fondo
transparente.

El fondo transparente, en Photoshop,

Una vez configurado el documento pulsa OK y una ventana en blanco se abrirá en

el espacio de trabajo.

Referencias:

Consultado el día 7 de noviembre de 2012

http://www.aulaclic.es/photoshop-cs5/secuencias/p01_basico_yt.htm

Página 34