Este documento presenta una guía sobre el diseño de imágenes para la web. Explica los diferentes tipos de imágenes como las vectoriales y de mapa de bits, los formatos de archivo como JPG, PNG y GIF y las herramientas para editar imágenes como PIXLR. El objetivo es mostrar las mejores prácticas para seleccionar, editar y publicar imágenes en la web para apoyar la enseñanza en línea.

1. Herramientas
para la
Enseñanza en
Línea
Licdo. Jesús Rojas
Diseño de Imágenes para la Web
ADI
UNEFM

2. Licdo. Jesús Rojas ADI
UNEFM
Preliminares
Prácticas
Aplicación
• Tipos de imagen
• Formatos de imagen
• Imágenes para la Web
• Selección y corte
• Manejo de capas
• Ajustes y efectos
• Identificación
• Acompañamiento
• Presentación

3. Licdo. Jesús Rojas ADI
UNEFM
Tipos de imágenes: Diferencia entre imagen Vectorial y
Mapa de Bits
Las imágenes de mapa de bits o rasterizadas son imágenes con
puntos que se van distribuyendo en una cuadrícula, llamados
píxeles. Estos puntos son perfectos para imágenes con muchos
detalles, y así definir bien sus contrastes y colores mediante
cada uno de los píxeles.
Sin embargo, las imágenes vectoriales o vectorizadas son
creadas mediante vectores, que están compuestos de líneas y
formas escalables. Por ello, un gráfico vectorial no pierde calidad
por mucho que amplíes, y se adaptan a la resolución de
cualquier dispositivo de salida.
Esto es, si yo tengo la siguiente imagen de la casa, cuando
amplío el zoom, en el caso de una imagen de mapa de bits la
acabaremos viendo pixelada o dentada, sin embargo, en una
imagen vectorizada por mucho que ampliemos seguirá sin
pixelarse.

4. Licdo. Jesús Rojas ADI
UNEFM

5. Licdo. Jesús Rojas ADI
UNEFM
¿Qué es un formato de archivo
gráfico?
El formato de imagen se puede
definir como el modo en que el
programa guarda toda la
información que constituye la
imagen. El formato permite que
diferentes programas puedan
reconocer y abrir el archivo.
Por ejemplo, si guardamos una
imagen desde Photoshop para
poder visualizarla posteriormente
desde un navegador, una opción
sería guardarla con el formato
JPEG. Una vez guardada el archivo
resultante tendría una extensión
.jpg.

6. Licdo. Jesús Rojas ADI
UNEFM
Formatos para la Web
Formato JPG: es el indicado para guardar imágenes fotográficas
o con degradados. Este formato admite millones de colores (24
bits) y mantiene el modo de color en RGB de la imagen original.
Al guardar en JPG se debe elegir una calidad de compresión.
Formato PNG: es la más usada para iconos o marcas. La
transparencia de PNG a diferencia del GIF no tiene halo,
logrando una calidad de imagen mucho mayor y simplificando el
maquetado, permitiendo independizar las imágenes de sus
fondos.
Formato GIF: comprime mejor las imágenes con plenos de color
originados en dibujos vectoriales. Este formato reduce la paleta a
256 colores como máximo. En el momento de guardar una
imagen como gif, los más importante es decidir la cantidad de
colores porque de esto depende el peso del archivo: cuanto
menos colores, más liviano.

7. Licdo. Jesús Rojas ADI
UNEFM
Podemos editar nuestras
imágenes en programas
locales o en aplicaciones
disponibles en la Web. Para
este curso emplearemos el
editor PIXLR
https://pixlr.com/es/x/

8. Licdo. Jesús Rojas ADI
UNEFM
Al ingresar a editor, selecciona
el tipo de trabajo que deseas
hacer. Si escoges crear un
nuevo archivo, podrás escoger
algunos tamaños
predeterminados según el
destino de tu imagen

9. Licdo. Jesús Rojas ADI
UNEFM
La interfaz de este editor se
basa en la misma estructura de
los programas para edición de
diapositivas, cambiando éstas
por capas y presentando ala
izquierda una barra de
herramientas adapatable.

10. Licdo. Jesús Rojas ADI
UNEFM
Par comenzar, puedes
insertar una imagen de
fondo o referencia, desde tu
ordenador o la Web, la cual
podrás manipular según el
objetivo de tu proyecto

11. Licdo. Jesús Rojas ADI
UNEFM
Para destacar texto sobre tu
imagen, puedes insertar de
forma directa o sobre una forma
que te garantice el correcto
contraste entre los colores.

12. Licdo. Jesús Rojas ADI
UNEFM
La edición de etiquetas de
texto se realiza por capas,
aun cuando posee la
mayoría de las
características de un editor
convencional como
fuentes, tamaños, colores,
entre otros

13. Licdo. Jesús Rojas ADI
UNEFM
Si decides además
utilizar solo parte de
otras imágenes, puedes
emplear las opciones de
recorte para mejorar su
presentación

14. Licdo. Jesús Rojas ADI
UNEFM
No olvides que las capas se
agregan de forma automática
a la derecha de la interfaz,
pero que siempre podrás
agregar nuevas capas de
forma controlada en la opción
ubicada en la parte baja de la
patalla.

15. Licdo. Jesús Rojas ADI
UNEFM
Cuando tu proyecto esta
completo, puedes guardar
la imagen que será
descargada en tu
computador, seleccionado
además el formato de la
misma

16. Licdo. Jesús Rojas ADI
UNEFM
Finalmente, recuerda que
puedes registrarte para llevar
un seguimiento de los
proyectos realizados en este
editor.

17. Licdo. Jesús Rojas ADI
UNEFM
Aplicación de
Imágenes para
Estrategias de
Aprendizaje
Identificación
Acompañamiento
Presentación