Diseño de páginas web Unidad 3. Edición de imágenes

Transcripción

1 Diseño de páginas web Unidad 3 Edición de imágenes

2 ÍNDICE 3 Edición de imágenes 3.1. Introducción 3.2. Gráficos en la página web Tipos de gráficos: vectorial frente a mapa de bits Formatos de imagen para la web Tamaño de las imágenes frente a tiempo de descarga Obtención de imágenes Optimización para la web 3.3. Macromedia FreeHand: una aplicación para el dibujo vectorial 3.4. Aplicaciones para edición de imágenes Adobe Photoshop Fireworks Paint Shop Pro 3.5. Proceso de creación de una imagen CONCLUSIONES BIBLIOGRAFÍA 2

3 3 Edición de imágenes 3.1. Introducción Las imágenes son un elemento muy importante en el diseño de nuestras páginas web. Por eso dedicaremos esta unidad didáctica al estudio de algunas de las consideraciones más interesantes a la hora de trabajar con imágenes como son: los formatos utilizados en la web, la calidad de las imágenes, los tiempos de descarga, etc. Asimismo, estudiaremos algunas de las aplicaciones de las que disponemos en la actualidad para el procesado de imágenes Gráficos en la página web En el lenguaje informático se le llama gráfico a cualquier imagen que se genera por ordenador. En los primeros pasos de Internet, estos elementos eran poco utilizados, debido a su peso, ya que por pequeño que fuese ralentizaba en exceso las descargas de las páginas web. Con el paso del tiempo, y a medida que avanzaba la tecnología, el aumento de la velocidad de los equipos y de las líneas que los conectan ha hecho posible que los gráficos, sean del tipo que sean, se conviertan en el elemento fundamental de toda web que son actualmente. Los gráficos pueden ser de dos tipos: vectoriales o de mapa de bits. Ambos son útiles en el diseño de páginas web. A continuación analizamos cada tipo de forma individual, para poder estudiar con más detalle algunas de sus características: Gráficos vectoriales: Estos gráficos están compuestos por segmentos rectos y curvos que se definen situando una serie de puntos unidos entre sí rellenos de un color específico y situados en un lugar determinado. Los programas de dibujo vectorial crean curvas definidas mediante puntos de control que nos permiten ajustar las curvas a la forma que deseemos. El formato vectorial, como su propio nombre indica, almacena la información mediante vectores calculados matemáticamente. Esto nos permite escalarlos a cualquier tamaño e imprimirlos a cualquier resolución sin que se pierdan detalles o nitidez. Es importante resaltar que cuando trabajamos con gráficos vectoriales, un cambio en el tamaño de la imagen no implica modificación alguna en el tamaño del archivo que lo contiene. Algunas aplicaciones que nos permiten crear este tipo de gráficos son: Macromedia FreeHand, Adobe Illustrator y CorelDRAW. Gráficos mapa de bits: Tipos de gráficos: vectorial frente a mapa de bits 3

4 Los gráficos de mapa de bits están formados por una serie de puntos a los que llamamos píxeles. Cada píxel contiene información de la imagen, en concreto, el color y la posición donde se sitúa ese píxel en la imagen. En los mapas de bits, al contrario que en los gráficos vectoriales, las dimensiones de la imagen son proporcionales al tamaño del archivo. Con estos gráficos podemos representar imágenes complejas (fotografías, ilustraciones, etc.), aunque hemos de tener en cuenta que un aumento del tamaño de la imagen hace que su calidad se vea mermada, debido a que el número de píxeles se mantiene fijo. Algunos de los formatos que se utilizan para guardar los gráficos de mapa de bits son: PSD, BMP y TIFF. Sin embargo, en el diseño web no se emplea ninguno de estos, debido a que los tamaños (peso) de los archivos son muy grandes, lo que implican tiempos de descarga muy elevados. Los formatos que sí se utilizan en web son los comprimidos: GIF, JPEG y PNG. Vectorial frente a mapa de bits: Una vez conocidas las características de ambos tipos de gráficos, podríamos llegar a la conclusión de que los vectoriales son mucho mejores, debido a que no perdemos calidad al aumentar la imagen, y el peso del archivo no se modifica. Sin embargo, los gráficos vectoriales no son los más extendidos por Internet. El principal inconveniente de este tipo de gráficos es que generalmente no son aceptados por los navegadores, por lo que antes de utilizarlos en la web debemos transformarlos a mapa de bits. Este proceso conlleva una pérdida de calidad, además de todos los problemas que surgen al trabajar con mapas de bits, que ya conocemos, si deseamos aumentar el tamaño de la imagen a posteriori. Pero, como en todo, existe una excepción, ya que los gráficos vectoriales de Flash (SWF) pueden ser descargados desde cualquier navegador. Este es el motivo por el que se han convertido en el estándar de facto para imágenes vectoriales en Internet, con la ventaja de que nos permiten incorporar sonido, movimiento e interactividad con el usuario. Los formatos de imagen más utilizados en el diseño web, que han ganado la batalla al resto gracias a que son archivos de baja resolución y pequeño tamaño, lo que permitirá al usuario descargarlas con mucha más rapidez, son los que siguen: GIF: Formatos de imagen para la web GIF o Graphic Interchange Format es uno de los formatos más utilizados para imágenes web, debido a que utiliza un sistema de compresión que permite que la pérdida de calidad sea mínima. En este formato la información del color se guarda en 8 bits, lo que implica que una imagen con este formato podría contener únicamente 256 (256=2^8) colores distintos. Esta limitación de la paleta de colores hace que sea muy utilizado para imágenes que contienen pocos colores como pueden ser: logotipos, iconos y textos guardados como imagen. Debido a esta misma limitación, se desaconseja su uso para otro tipo de imágenes que necesitan una gama más amplia de colores como son, por ejemplo, las fotografías. El formato GIF tiene una variante que encontramos en gran parte de los elementos animados que pueden aparecer en una página web: GIF animado. Se trata, simplemente, de secuencias de imágenes comprimidas en formato GIF. 4

5 Ejemplo: Los banners que encontramos en cualquier página web utilizan este formato. JPEG: El formato JPEG o Joint Photographic Experts Group no es un formato de imagen propiamente dicho, sino que es más bien un formato de compresión. A diferencia del GIF, dispone de 24 bits para almacenar la información del color, lo que nos permite almacenar imágenes de millones de colores (2^24 son más de 16 millones). Por tanto, este formato es ideal para fotografías, texturas y todas aquellas imágenes que demanden una amplia paleta de colores. Además, aunque la compresión es elevada, la pérdida visible de calidad es aceptable. Este formato es idóneo para fotografías, pero no es adecuado para imágenes con pocos colores como dibujos o textos, debido al formato de compresión que utiliza. Casi todos los programas de edición de imágenes nos permiten cambiar el nivel de compresión, mostrándonos de forma interactiva una previsualización de la calidad de la imagen, es decir, nos permiten un control exhaustivo sobre el equilibrio tamaño-calidad. PNG: 1 El formato PNG o Portable Network Graphics fue creado específicamente para la web y ha robado mucho protagonismo al JPEG y al GIF, ya que aúna la ventajas de los dos y es válido tanto para imágenes como para fotografías. Con este formato el rango de colores es, al igual que en JPEG, de millones de colores, lo que nos permite representar las imágenes con una calidad excepcional, pues, a diferencia del JPEG, el algoritmo de compresión que utiliza no produce una pérdida de calidad. Sin embargo, PNG no ha sido capaz de sustituir ni a JPEG ni a GIF, debido a que no permite animaciones, frente al GIF animado, y las imágenes PNG tienen mayor peso que las JPEG. Además, para que se muestre correctamente, en algunas versiones de navegadores, es necesario un plug in. Otros formatos: - EPS (Encapsulated Postscript): es uno de los formatos más adaptables, ya que puede utilizarse tanto para gráficos vectoriales, como para mapa de bits. - WMF (Windows Metafile): este formato fue desarrollado por Microsoft, y como consecuencia está adaptado para trabajar con programas Microsoft. - PSD (Photoshop format): es el formato del programa Adobe Photoshop, y es muy frecuente, ya que la aplicación que lo utiliza es una de las herramientas fotográficas más potentes, gráficamente hablando. - BMP (BitMaP): es el formato de Windows para mapas de bits y, a pesar de que es muy conocido, su compresión es pésima en comparación con la de otros formatos como GIF o JPEG. - TIFF (Tag Image File Format): ha sido muy utilizado debido a que este formato lo admite, prácticamente, la totalidad de las aplicaciones para edición de imágenes. Además, tiene la ventaja de que es compatible con Mac y PC. 1 PNG es el formato nativo de la aplicación de edición Macromedia Fireworks. 5

6 Ejercicio: Haz clic con el botón derecho encima de una imagen que forma parte de una página web, selecciona en el menú desplegable Propiedades y se te mostrará la información sobre el tipo de fichero: dimensiones, nombre y tamaño. El tamaño de las imágenes en el diseño web es un factor determinante, porque de él depende, en gran medida, la velocidad a la que el usuario podrá descargar nuestra página. Encontrar el equilibrio justo entre la calidad de la imagen y el tiempo de descarga es una tarea importante para todo diseñador web, por eso veremos a continuación algunas pautas que nos ayudarán a conseguir ese objetivo. El tamaño de una imagen depende de los siguientes parámetros: - Dimensión: es el número de píxeles de ancho por el número de píxeles de alto. - Número de colores de la imagen: porque en función de la paleta de colores que necesitemos para representar una imagen, tendremos que utilizar un formato u otro, lo que implica un mayor o menor tamaño de fichero. - Resolución: es el número de píxeles por pulgada o puntos por pulgada (dpi). En función de la finalidad a la que se destine, una imagen debe tener una resolución u otra. Las imágenes cuyo fin es ser impresas deberán tener una resolución mayor (sobre 300 píxeles por pulgada), mientras que las que sean implementadas en una web no necesitarán tanta resolución, y podrán ser, por tanto, de 72 píxeles por pulgada aproximadamente. Es posible que necesitemos incluir en nuestra web imágenes con mayor calidad para que puedan ser impresas, lo que haría que el conjunto de nuestro sitio web tuviese mayor peso y aumentase, consecuentemente, el tiempo de descarga. Para evitar esto, debemos colocar imágenes de pequeña calidad con un enlace a las de mayor resolución, de forma que los usuarios sólo esperarán si optan por descargar las imágenes con una mayor calidad. Además del tamaño de las imágenes, existen otros factores que influyen en el tiempo de descarga de nuestra página web: - La velocidad del ordenador. - La velocidad de la conexión. - El tráfico de la red Tamaño de las imágenes frente a tiempo de descarga Aunque en la actualidad están muy en alza las conexiones ADSL y el cable, debemos diseñar nuestro sitio web pensando en todo tipo de usuarios, es decir, en aquellos que disponen de este tipo de conexiones, pero también en los que utilizan, por ejemplo, el módem de su ordenador para conectarse desde su casa. A la hora de diseñar nuestros sitios, también tendremos en cuenta que las imágenes que ya se han descargado una vez quedan guardadas en la memoria caché del ordenador. Esto hace que las próximas veces que se utilicen su descarga será mucho más rápida, puesto que se trata de un acceso a la memoria interna del ordenador). Para garantizar que aprovechamos esta ventaja, debemos tener cautela y guardar las imágenes en la misma ruta y directorio en el servidor, pues si el navegador detecta otra copia de la misma imagen en otra localización, intentará descargársela de nuevo. 6

7 Entre los dispositivos más utilizados para la obtención de imágenes podemos destacar el escáner y la cámara digital, aunque existen otras fuentes de imágenes digitales a las que podemos acudir. A continuación veremos con más de detalle algunas de estas fuentes. Fotografía digital: Obtención de imágenes Las cámaras digitales son dispositivos digitalizadores de imágenes. Este tipo de cámaras ha evolucionado a partir de las analógicas, sustituyendo la parte de impresión en película por circuitería digital, gracias a la aparición de los sensores ópticos CCD. Aunque son digitales, precisan de una óptica, y existe una estrecha relación entre la calidad de la óptica y calidad de la imagen fotográfica tomada. La nitidez de la imagen que se proyecta sobre la superficie de la emulsión sensible (en el caso de las analógicas) o sobre el sensor electrónico (en el caso de las digitales) depende de las lentes que posea nuestra cámara. Este es el motivo por el que las mejores cámaras digitales son aquellas que cuentan con un sistema óptico de prestigio. Ejemplo: Algunas de estas marcas de prestigio para óptica fotográfica son: Nikon, Canon, Olimpus, etc. Las cámaras digitales almacenan las fotografías tomadas en formato JPEG, de forma que apenas ocupan espacio en memoria, aunque esto dependerá de las dimensiones y de la resolución a la que tomemos nuestra fotografía. Estos parámetros son configurables en la mayoría de las cámaras digitales. Escaneado: Un escáner es, al igual que las cámaras digitales, un dispositivo digitalizador que convierte imágenes impresas en un fichero que el ordenador puede utilizar. 7

8 La mayoría de los escáneres nos permiten configurar, además de la resolución a la que deseamos escanear nuestras imágenes, el formato en el que queremos guardarlas. Internet: La red es la fuente más importante de imágenes digitalizadas. Hasta hace poco tiempo cualquier imagen que se encontrase en Internet podía guardarse simplemente a través del menú contextual que surge al hacer clic con el botón derecho del ratón sobre la imagen. Esto vulneraba los derechos de autor de algunas de estas imágenes, por este motivo ha surgido una corriente de licencias de uso, que designan una serie de condiciones que se deben respetar a la hora de descargarse estas imágenes (que aparezca el nombre del autor, por ejemplo) Optimización para la web El hecho de que la página web que hemos creado sea visitada por el mayor número de usuarios posible depende, en gran parte, de una buena optimización y del procesado de las imágenes. Como hemos visto, el tamaño de un fichero gráfico depende del número de colores, del tamaño y de la resolución. Por tanto, la optimización es todo proceso que nos permita recortar estos parámetros, ya que implicará una reducción del tamaño del fichero y también del tiempo de descarga. Antes de comenzar la tarea de optimización, lo primero que debemos hacer es guardar una copia de la imagen original. Esta copia es de vital importancia, ya que si deseásemos recuperar la información original después de la optimización sería imposible. Los formatos originales en los que debemos guardar estas imágenes deben ser: BMP, TIFF, PSD, etc., es decir, todos aquellos en los que no se produzca pérdida de la información de la imagen (colores, resolución y dimensiones). En el caso de que el tratamiento se realizase sobre gráficos vectoriales no tendríamos estos problemas, puesto que no se produce pérdida de información. Antes de insertar una imagen en nuestra web, esta debe cumplir una serie de características. De no ser así, será necesario procesarla para que las cumpla. Entre estas características destacamos las siguientes: Las imágenes para web no deben superar los 72 dpi: Debido a que la resolución de un monitor es de 72 dpi, si cualquier imagen que vaya a ser utilizada sólo para ser vista en una página web cuenta con una resolución mayor que esta, 8

9 será innecesariamente grande, pues la mayor resolución no se apreciará y tardará más en descargarse. Si la imagen es muy grande, dividiremos la imagen en partes: Si la imagen es muy grande (por ejemplo, debe ocupar todo el monitor), podemos utilizar una técnica que consiste en dividir la imagen en partes, optimizando cada una de ellas por separado. Con este método conseguiremos reducir los tiempos de descarga y la diferencia no será apreciable, sólo debemos montar la imagen en una tabla para que se muestre como una única imagen. Reducir el número de colores: Para un formato como el JPEG el número de colores es casi irrelevante, pero para otros como el GIF puede ser un problema importante. Para este tipo de formatos la optimización de los colores puede realizarse de varias formas: - Automáticamente (el editor de imágenes con el que trabajamos elige cómo realizar esta tarea). - Convertir los colores que no existen a los más próximos de la paleta de la que disponemos. - Simular una trama de colores que nos permita aproximarnos al color que nos falta. Por supuesto, estas dos últimas tareas son mucho más tediosas que la primera, pero hay programas con paletas adaptativas que nos permiten llevarlas a cabo de forma cómoda y casi automatizada. Los programas de edición más populares, entre los que podemos destacar: Fireworks, Paint Shop Pro y Photoshop, incluyen herramientas para la transformación a los formatos de compresión y optimizan las imágenes utilizando técnicas muy parecidas Macromedia FreeHand: una aplicación para el dibujo vectorial La herramienta FreeHand, de Macromedia, es un programa de dibujo que nos permite crear todo tipo de gráficos vectoriales. Esta aplicación permite realizar ilustraciones web como logotipos y banners publicitarios, y también puede utilizarse para convertir cualquier gráfico en una animación Flash. 9

10 Los navegadores no pueden mostrar por sí solos los documentos creados con Macromedia FreeHand, por lo que, para mostrarlos en una página web, debemos emplear alguna de las técnicas que indicamos a continuación: - Convertir los documentos creados con FreeHand en documentos HTML, a través de la función Publicar como HTML. - Asignar vínculos URL a los objetos o al texto de un documento creado con FreeHand con el Panel de navegación. De esta forma, al hacer clic sobre uno de estos objetos con URL asignada, se abrirá la página web correspondiente. - Guardar los documentos creados con los formatos web: GIF, JPEG o PNG, con el fin de insertarlos posteriormente en un documento HTML. - Crear películas interactivas, mediante la asignación de acciones Flash a los objetos de los documentos creados con FreeHand. - Exportar los documentos de FreeHand al formato de archivo de Flash (SWF), ya que con la simple instalación de un plugin (actualmente muy extendido) también podrían verse. Otra forma de convertir un documento de FreeHand en una animación Flash es utilizando el Xtra Animar. También es muy útil la ventana de reproducción de Flash que incorpora FreeHand, que nos permite previsualizar y comprobar el funcionamiento de las películas Flash Aplicaciones para edición de imágenes Todo diseñador web necesita una serie de aplicaciones para cubrir sus necesidades gráficas, entre las que destacan: la edición de imágenes, la creación de texto, la creación de animaciones y la optimización de imágenes. 10

11 Aunque, en apartados anteriores, hemos citado algunas de ellas, a continuación las estudiaremos con más detalle Adobe Photoshop Adobe Photoshop es el líder en el mercado para el procesamiento de imágenes, ya que nos proporciona un conjunto muy completo de herramientas para crear, editar y retocar imágenes y fotografías. Esta aplicación, elaborada por la compañía de software Adobe, inicialmente para máquinas Apple, cobró tal importancia y popularidad que no tardó en implementarse para PC. En sus primeras versiones el espacio de trabajo era un bitmap formado por una sola capa, donde se aplicaban todos los efectos y tratamientos a la imagen. 11

12 Actualmente, este software ha evolucionado de forma que el espacio de trabajo se ha convertido en multicapa, se ha incorporado el uso de gráficos vectoriales, permite un mayor control sobre los retoques de color y los efectos creativos, etc. Es el software más utilizado, porque abarca un amplio abanico de disciplinas como el retoque fotográfico, la fotocomposición, el estilismo digital y el diseño web, entre otras Fireworks Esta aplicación de Macromedia nos ofrece un entorno de trabajo integrado para la creación de todos los elementos que componen las páginas web: gráficos, botones, menús, animaciones, etc. Al mismo tiempo, nos permite optimizar y exportar todos esos elementos para conseguir la máxima calidad con el menor tamaño de archivo posible, y automatizar tareas repetitivas para ahorrar tiempo. 12

13 Con el Fireworks podemos crear cualquier gráfico, tanto vectorial como de mapa de bits, sin necesidad de recurrir a otras aplicaciones Paint Shop Pro Las características más destacables de la Suite de Corel Paint Shop Pro son: el ajuste y retoque de imágenes, la creación de fotomontajes, su gran cantidad de filtros y efectos gráficos, y, por último, las herramientas de organización y compartición de imágenes Proceso general para la creación de una imagen Si aglutinamos los conceptos que hemos visto hasta este momento, el proceso de creación de una imagen para la web sería: 13

14 - Crear la imagen con un programa de dibujo vectorial (Illustrator, FreeHand o CorelDRAW) o con uno de edición de imágenes de mapa bits como Photoshop. - Retocar (cambiar los colores, filtros, etc.) con el Adobe Photoshop y optimizar la imagen. - Si necesitásemos imágenes en movimiento, deberíamos utilizar un programa de animación. - Para comprobar, finalmente, que el resultado final es el buscado, debemos visualizar las imágenes creadas en el navegador web. Si no alcanzásemos ese resultado, deberíamos comenzar de nuevo el proceso desde el primer punto. 14

15 CONCLUSIONES En esta unidad didáctica hemos conocido los formatos de imagen más importantes. Además, hemos prestado especial atención aquellos que se utilizan en diseño web y a sus características. También nos hemos familiarizado con alguna de las aplicaciones más completas para la edición y la creación de imágenes. Por último, hemos visto unas pautas generales sobre los pasos a seguir desde la creación de una imagen hasta que se inserta en una página web, analizando con más detalle el proceso de optimización, fundamental para alcanzar un buen equilibrio entre el tamaño de la imagen y su tiempo de descarga. 15

16 BIBLIOGRAFÍA Bibliografía complementaria VALDÉS-MIRANDA, C. y E. RODRÍGUEZ (2005): Creación y diseño Web. Edición 2005, Anaya Multimedia, Madrid. Recursos electrónicos 16