Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Biblioteca/CRAI – Formación de usuarios
Tratamiento de
Imágenes para la Web
Tipos de imágenes
Tipos de imágenes
Mapa de bits (Bitmap o Raster)
Los archivos de las imágenes se guardan normalmente en forma de mapa de b...
Tipos de imágenes
Ejemplos de imágenes de Mapa de Bits
www.prepressure.com www.liax.com
umaine.edu
Tipos de imágenes
Ejemplos de Efecto de Pixelación:
http://recursostic.educacion.es/observatorio/web/eu/software/software-...
Tipos de imágenes
GIF
Es un tipo de mapa de bits.
Formato de archivo sin pérdida, es decir, se conserva cada pixel de la i...
Tipos de imágenes
JPEG
Es un tipo de mapa de bits.
Comprime mucho el archivo pesa menos Ideal para Web
Excelente para fo...
Tipos de imágenes
PNG
Es un tipo de mapa de bits.
Surgió como alternativa al GIF.
Permite transparencias y con ello permi...
Tipos de imágenes
Vectoriales
El concepto de imagen vectorial está vinculado a la imagen digital.
Son gráficos formados a ...
Tipos de imágenes
Ejemplos de imágenes vectoriales
www.serif.com www.liax.com
umaine.edu
Tipos de imágenes
Mapa de bits vs Vector
www.nintento.wikia.com
www.inksterinc.com
Tipos de imágenes
Mapa de bits vs Vector
www.liax.com www.liax.com
http://www.newdimensionlabels.com
Tipos de imágenes
Mapa de bits vs Vector
www.indiana.edu.com
jessicastengrim.com
Herramientas de edición
de imágenes
Herramientas de edición de imágenes
Herramientas de edición de imágenes
Enlaces herramientas online:
Pho.to http://editor.pho.to/es/
Befunky https://www.befun...
Herramientas de edición de imágenes
Enlaces Software principiante:
Photoscape http://www.photoscape.org/ps/main/index.php
...
Herramientas de edición de imágenes
Enlaces Banco de Imágenes:
Creative commons http://es.creativecommons.org/blog/licenci...
Herramientas de edición de imágenes
Upcoming SlideShare
Loading in …5
×

Tratamiento de Imágenes para la Web

Presentación general de tipos de imágenes en la web, partiendo de conceptos básicos para terminar con un listado de bancos de imágenes y herramientas de edición y tratamiento de imágenes.

  • Login to see the comments

  • Be the first to like this

Tratamiento de Imágenes para la Web

  1. 1. Biblioteca/CRAI – Formación de usuarios Tratamiento de Imágenes para la Web
  2. 2. Tipos de imágenes
  3. 3. Tipos de imágenes Mapa de bits (Bitmap o Raster) Los archivos de las imágenes se guardan normalmente en forma de mapa de bits o mosaico de píxeles (cámara de fotos, escáner…). Cada píxel guarda la información de color de la parte de imagen que ocupa. Son imágenes creadas pixel a pixel (cada uno con un valor). Ocupan más memoria que las vectoriales. Inconveniente: Al ampliarse se distorsiona la imagen, mostrándose el mosaico (los píxeles) y se aprecia una degradación en los colores ”efecto de pixelación”. Encontramos tres tipos de BMP: JPG (fotos), GIF/PNG (iconos, dibujos, esquemas,…) que comprimen con calidad y menos peso. www.taringa.net
  4. 4. Tipos de imágenes Ejemplos de imágenes de Mapa de Bits www.prepressure.com www.liax.com umaine.edu
  5. 5. Tipos de imágenes Ejemplos de Efecto de Pixelación: http://recursostic.educacion.es/observatorio/web/eu/software/software-general/293-lorena-arranz
  6. 6. Tipos de imágenes GIF Es un tipo de mapa de bits. Formato de archivo sin pérdida, es decir, se conserva cada pixel de la imagen original, lo que implica que el tamaño suele ser mayor que en formatos .JPG. Para gráficos sencillos con pocos colores es muy eficiente  puede contener hasta 256 colores. Permite crear animaciones: una secuencia de imágenes GIF se almacena en un único archivo. www.ionlitio.com
  7. 7. Tipos de imágenes JPEG Es un tipo de mapa de bits. Comprime mucho el archivo pesa menos Ideal para Web Excelente para fotografías de muchos colores y texturas, mantiene la calidad con pesos de imagen realmente bajos. Inconveniente pierde algo de información y puede afectar a su calidad. www.immaginize.net
  8. 8. Tipos de imágenes PNG Es un tipo de mapa de bits. Surgió como alternativa al GIF. Permite transparencias y con ello permite hacer montajes más creativos frente al JPG que el fondo es blanco. Comprime menos que el JPG. www.nintento.wikia.com
  9. 9. Tipos de imágenes Vectoriales El concepto de imagen vectorial está vinculado a la imagen digital. Son gráficos formados a base de curvas y líneas a través de elementos geométricos definidos como vectores (no por píxeles) Las características de estos objetos están definidas por atributos matemáticos (color, posición…). Ventaja no sufren pérdida de resolución al producirse una ampliación de los mismos. Se utiliza mucho para trabajos de rotulación, rótulos, iconos, dibujos, logotipos de empresa etc. Esta clase de imagen tiene poco peso como archivo informático. www.nintento.wikia.com www.behance.net www.behance.net
  10. 10. Tipos de imágenes Ejemplos de imágenes vectoriales www.serif.com www.liax.com umaine.edu
  11. 11. Tipos de imágenes Mapa de bits vs Vector www.nintento.wikia.com www.inksterinc.com
  12. 12. Tipos de imágenes Mapa de bits vs Vector www.liax.com www.liax.com http://www.newdimensionlabels.com
  13. 13. Tipos de imágenes Mapa de bits vs Vector www.indiana.edu.com jessicastengrim.com
  14. 14. Herramientas de edición de imágenes
  15. 15. Herramientas de edición de imágenes
  16. 16. Herramientas de edición de imágenes Enlaces herramientas online: Pho.to http://editor.pho.to/es/ Befunky https://www.befunky.com/es/ Ribbet Photo Editor http://www.ribbet.com/ Canva https://www.canva.com/ Fotor http://www.fotor.com/es/ Getloupe http://www.getloupe.com/
  17. 17. Herramientas de edición de imágenes Enlaces Software principiante: Photoscape http://www.photoscape.org/ps/main/index.php Paint.net http://www.getpaint.net/index.html Microsoft https://www.microsoft.com/es-es/ Office Picture Manager Powerpoint Word Paint Enlaces Software Profesional: Photoshop http://www.adobe.com/es/products/photoshop.html Gimp http://www.gimp.org.es/ Pixelmator http://www.pixelmator.com/mac/ Corel Paintshop Pro http://www.paintshoppro.com/en/products/paintshop-pro/
  18. 18. Herramientas de edición de imágenes Enlaces Banco de Imágenes: Creative commons http://es.creativecommons.org/blog/licencias/ Freepik http://www.freepik.es/ Iconfinder https://www.iconfinder.com/ Iconarchiver http://www.iconarchive.com/ Pixabay https://pixabay.com/es/ Britannica Image Quest http://0-quest.eb.com.athenea.upo.es/ Microsoft Word/PowerPoint Themeyourself http://es.themeyourself.com/bancos-de-imagenes-gratis/ Unsplahs https://unsplash.com/explore Foter http://foter.com/ Dreamstime https://es.dreamstime.com/ 123RF http://es.123rf.com/freeimages.php Freeimages http://es.freeimages.com/ Picjumbo https://picjumbo.com/ Gratisography http://www.gratisography.com/
  19. 19. Herramientas de edición de imágenes

×