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 pixeles, cada uno de distinto color, lo cual resulta en imágenes realistas, pero se deterioran al ampliarse. Están formados por líneas curvas(vectores), que representan ecuaciones matemáticas, lo que 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