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.
USO DE IMÁGENES
EN DISEÑO WEB
UNA IMAGEN DICE MÁS QUE
MIL PALABRAS
UNA IMAGEN DICE MÁS QUE MIL PALABRAS
UNA IMAGEN DICE MÁS QUE MIL PALABRAS
USO DE IMÁGENES
▸ Sin duda las imágenes son cruciales en el diseño web pero
esto sólo...
UNA IMAGEN DICE MÁS QUE MIL PALABRAS
USO DE IMÁGENES
▸ Tener consistencia con el concepto, objetivo,
organización y estilo...
UNA IMAGEN DICE MÁS QUE MIL PALABRAS
USO DE IMÁGENES
Evitar:
▸ Usar imágenes que no relación
▸ Usar demasiadas imágenes qu...
EN LA CONSTRUCCIÓN DE UN SITIO WEB USANDO HTML Y CSS
USO DE IMÁGENES
Recomendaciones:
▸ Optimizar las imágenes.
▸ Proporci...
TENDENCIAS
TENDENCIAS EN EL USO DE IMÁGENES
USO DE MONOCROMAS
TENDENCIAS EN EL USO DE IMÁGENES
GRÁFICOS, INFOGRAFÍAS, INFOGRAFÍAS ANIMADAS
TENDENCIAS EN EL USO DE IMÁGENES
HIPERREALIDAD
TENDENCIAS EN EL USO DE IMÁGENES
IMÁGENES EN 360
DISEÑO WEB RESPONSIVE
TENDENCIAS EN EL USO DE IMÁGENES
▸ Imágenes responsivas
▸ Uso de zonas “Hero”
▸ Uso de imágenes como...
HERO IMAGE
IMÁGENES RESPONSIVAS
TENDENCIAS EN EL USO DE IMÁGENES
MENOS USO DE IMÁGENES DE STOCK Y MÁS INTEGRACIÓN DE IMÁGENES DE PERSONAS
Y SITUACIONES “R...
BANCOS DE IMÁGENES
BANCOS DE IMÁGENES
▸ Shutter stock
▸ Bigstock
▸ Adobe Stock
▸ Dreamstime
▸ Pexels
▸ Pic Jumbo
20 BANCOS DE IMÁGENES GRATIS DE GRAN CALIDAD Y ALTA RESOLUCIÓN
BANCOS DE IMÁGENES
▸ #11-. Super Famous
▸ #12.- Every Stock...
CREATIVE
COMMONS
CREATIVE COMMONS
¿QUÉ ES CC?
▸ Creative Commons es una organización sin fines de lucro que permite el
intercambio y uso de ...
CREATIVE COMMONS
¿CÓMO FUNCIONA CC?
▸ Es el sistema del derecho de autor que promueve la
libertad creativa que plantea un ...
CREATIVE COMMONS
¿CUÁNDO DEBO DE UTILIZAR LAS LICENCIAS CC?
▸ Si deseas dar a la gente el derecho a compartir, usar, e
inc...
CREATIVE COMMONS
HTTPS://SEARCH.CREATIVECOMMONS.ORG/
CONCEPTOS
BÁSICOS
CONCEPTOS BÁSICOS
PIXEL
▸ El píxel es la unidad mínima de visualización de una
imagen digital.
▸ Si aplicamos el zoom sobr...
CONCEPTOS BÁSICOS
RESOLUCIÓN DE IMAGEN
▸ Es el grado de detalle o calidad de una imagen digital ya sea
escaneada, fotografi...
CONCEPTOS BÁSICOS
RESOLUCIÓN DE IMAGEN
▸ En una impresora se habla del número de puntos por
pulgada que puede imprimir: 60...
FORMATOS DE
IMAGEN
¿Te has preguntado cuál es la diferencia entre un archivo JPEG, GIF o PNG?
FORMATOS DE IMAGEN
Como diseñador - y en especi...
FORMATOS DE IMAGEN
FORMATOS DE IMAGEN
▸ TIFF
▸ BMP
▸ RAW
GIF
JPG
PNG
SVG
GRAPHICS INTERCHANGE FORMAT
FORMATO GIF
▸ Diseñado específicamente para comprimir imágenes digitales.
▸ Reduce la paleta de...
GRAPHICS INTERCHANGE FORMAT
FORMATO GIF
▸ Los archivos GIF son reconocidos por los llamados GIFs
animados.
▸ Cuando se com...
JOINT PHOTOGRAPHIC EXPERTS GROUP
FORMATO JPG-JPEG
▸ A diferencia del formato GIF, admite una paleta de hasta 16 millones d...
JOINT PHOTOGRAPHIC EXPERTS GROUP
FORMATO JPG-JPEG
▸ Las cámaras digitales suelen almacenar directamente las
imágenes en fo...
PORTABLE NETWORK GRAPHICS
FORMATO PNG
▸ Basado en un algoritmo de compresión sin pérdida para
bitmaps no sujeto a patentes...
FORMATO RAW
FORMATO RAW
▸ Formato de archivo digital de imágenes que contiene la
totalidad de los datos de la imagen tal y...
SCALABLE VECTOR GRAPHICS.
FORMATO SVG
▸ Especificación para describir gráficos vectoriales
bidimensionales, tanto estáticos ...
OPTIMIZACIÓN Y
COMPRESIÓN DE
IMÁGENES PARA WEB
OPTIMIZACIÓN Y COMPRESIÓN
OPTIMIZACIÓN Y COMPRESIÓN
▸ Al crear una página web interesa que los archivos que
contienen las ...
OPTIMIZACIÓN Y COMPRESIÓN
OPTIMIZACIÓN Y COMPRESIÓN
▸ El tamaño de un archivo gráfico viene determinado por las
dimensiones...
OPTIMIZACIÓN Y COMPRESIÓN
OPTIMIZACIÓN Y COMPRESIÓN
▸ Crea y guarda imágenes en resolución no superior a 72
ppp. Es la res...
OPTIMIZACIÓN Y COMPRESIÓN
ORGANIZACIÓN Y COMPRESIÓN
▸ Conviene utilizar un programa de edición gráfica para
definir las dime...
OPTIMIZACIÓN Y COMPRESIÓN
HERRAMIENTAS PARA COMPRESIÓN
▸ Además de las herramientas más conocidas como
Photoshop e Illustr...
Upcoming SlideShare
Loading in …5
×

Uso de imágenes en diseño web

En el diseño web es muy importante el manejo de las imágenes.

Hay que considerar que su uso y tratamiento es completamente distinto de cuando se usarán para medios impresos.

Para trabajar imágenes en web es importante que éstas tengan el peso y dimensiones adecuadas.

  • Login to see the comments

Uso de imágenes en diseño web

  1. 1. USO DE IMÁGENES EN DISEÑO WEB
  2. 2. UNA IMAGEN DICE MÁS QUE MIL PALABRAS UNA IMAGEN DICE MÁS QUE MIL PALABRAS
  3. 3. UNA IMAGEN DICE MÁS QUE MIL PALABRAS USO DE IMÁGENES ▸ Sin duda las imágenes son cruciales en el diseño web pero esto sólo se puede lograr si cada imagen colocada está ahí por una razón. ▸ Deben tener un propósito claro
  4. 4. UNA IMAGEN DICE MÁS QUE MIL PALABRAS USO DE IMÁGENES ▸ Tener consistencia con el concepto, objetivo, organización y estilo de la página web. ▸ Enriquecer el diseño sin desviar la atención. ▸ Ayudar al usuario a ubicar contenido importante en la página.
  5. 5. UNA IMAGEN DICE MÁS QUE MIL PALABRAS USO DE IMÁGENES Evitar: ▸ Usar imágenes que no relación ▸ Usar demasiadas imágenes que impliquen un mayor tiempo de carga de la página
  6. 6. EN LA CONSTRUCCIÓN DE UN SITIO WEB USANDO HTML Y CSS USO DE IMÁGENES Recomendaciones: ▸ Optimizar las imágenes. ▸ Proporcionar un texto alterno que indique el contenido de la imagen. ▸ Evitar sustituir texto por imágenes
  7. 7. TENDENCIAS
  8. 8. TENDENCIAS EN EL USO DE IMÁGENES USO DE MONOCROMAS
  9. 9. TENDENCIAS EN EL USO DE IMÁGENES GRÁFICOS, INFOGRAFÍAS, INFOGRAFÍAS ANIMADAS
  10. 10. TENDENCIAS EN EL USO DE IMÁGENES HIPERREALIDAD
  11. 11. TENDENCIAS EN EL USO DE IMÁGENES IMÁGENES EN 360
  12. 12. DISEÑO WEB RESPONSIVE TENDENCIAS EN EL USO DE IMÁGENES ▸ Imágenes responsivas ▸ Uso de zonas “Hero” ▸ Uso de imágenes como fondo de pantalla “Background image”
  13. 13. HERO IMAGE
  14. 14. IMÁGENES RESPONSIVAS
  15. 15. TENDENCIAS EN EL USO DE IMÁGENES MENOS USO DE IMÁGENES DE STOCK Y MÁS INTEGRACIÓN DE IMÁGENES DE PERSONAS Y SITUACIONES “REALES”
  16. 16. BANCOS DE IMÁGENES BANCOS DE IMÁGENES ▸ Shutter stock ▸ Bigstock ▸ Adobe Stock ▸ Dreamstime ▸ Pexels ▸ Pic Jumbo
  17. 17. 20 BANCOS DE IMÁGENES GRATIS DE GRAN CALIDAD Y ALTA RESOLUCIÓN BANCOS DE IMÁGENES ▸ #11-. Super Famous ▸ #12.- Every Stock Photos ▸ #13.- Flickr ▸ #14.- Foter ▸ #15.-Morgue File ▸ #16.- Photogen ▸ #17.- Picjumbo ▸ #18.- Pixabay ▸ #19.- Stockvault ▸ #20.- Death to the Stock Photo ▸ #1.- Designer Pics ▸ #2.- Foddies Feed ▸ #3.- New Old Stock ▸ #4.- Unplash ▸ #5.- Little Visual ▸ #6.- Gratisography ▸ #7.- Picography ▸ #8.- Public Domain Archive ▸ #9.- Startup Stock Photos ▸ #10.- Pexels
  18. 18. CREATIVE COMMONS
  19. 19. CREATIVE COMMONS ¿QUÉ ES CC? ▸ Creative Commons es una organización sin fines de lucro que permite el intercambio y uso de la creatividad y el conocimiento a través de herramientas legales gratuitos. ▸ Nuestras licencias de derechos de autor además de fáciles de utilizar, de manera gratuita proporcionan una manera sencilla y estandarizada para dar el permiso para compartir y utilizar su trabajo creativo en condiciones de tu elección. Las licencias CC permiten cambiar fácilmente los plazos del copyright del incumplimiento de “todos los derechos reservados” a “algunos derechos reservados”. ▸ Las licencias Creative Commons no son una alternativa al copyright. ▸ Trabajan junto a los derechos de autor y le permiten modificar los términos de los derechos de autor que mejor se adapte a sus necesidades. http://www.creativecommons.mx/
  20. 20. CREATIVE COMMONS ¿CÓMO FUNCIONA CC? ▸ Es el sistema del derecho de autor que promueve la libertad creativa que plantea un esquema en el que no hay que pedir permiso para usar las obras. ▸ ¡Porque el permiso ya ha sido otorgado! http://www.creativecommons.mx/
  21. 21. CREATIVE COMMONS ¿CUÁNDO DEBO DE UTILIZAR LAS LICENCIAS CC? ▸ Si deseas dar a la gente el derecho a compartir, usar, e incluso construir sobre una obra que has creado, debes considerar publicarlo bajo una licencia Creative Commons. ▸ CC le da la flexibilidad (por ejemplo, puedes prohibir o permitir únicamente los usos comerciales) y protege a las personas que utilizan tu trabajo, por lo que no tienes que preocuparse acerca de la infracción de derechos de autor, siempre y cuando cumplan con las condiciones que tiene especificado. http://www.creativecommons.mx/
  22. 22. CREATIVE COMMONS HTTPS://SEARCH.CREATIVECOMMONS.ORG/
  23. 23. CONCEPTOS BÁSICOS
  24. 24. CONCEPTOS BÁSICOS PIXEL ▸ El píxel es la unidad mínima de visualización de una imagen digital. ▸ Si aplicamos el zoom sobre ella observaremos que está formada por una parrilla de puntos o pixeles. ▸ Las cámaras digitales y los escáneres capturan las imágenes en forma de cuadrícula de píxeles.
  25. 25. CONCEPTOS BÁSICOS RESOLUCIÓN DE IMAGEN ▸ Es el grado de detalle o calidad de una imagen digital ya sea escaneada, fotografiada o impresa. ▸ Este valor se expresa en ppp (píxeles por pulgada) o en inglés dpi (dots per inch). ▸ Cuantos más píxeles contenga una imagen por pulgada lineal, mayor calidad tendrá. ▸ La resolución de un monitor se refiere al número de píxeles por pulgada que es capaz de mostrar. ▸ La resolución de una pantalla es de 72 ppp.
  26. 26. CONCEPTOS BÁSICOS RESOLUCIÓN DE IMAGEN ▸ En una impresora se habla del número de puntos por pulgada que puede imprimir: 600, 1200, etc. ▸ Las cámaras digitales prestan una calidad que se expresa en MegaPíxels. Así por ejemplo una cámara de 8 MP es aquella capaz de tomar una fotografía con 8 millones de píxeles.
  27. 27. FORMATOS DE IMAGEN
  28. 28. ¿Te has preguntado cuál es la diferencia entre un archivo JPEG, GIF o PNG? FORMATOS DE IMAGEN Como diseñador - y en especial como diseñador web - es importante saber la diferencia entre los diferentes formatos de imagen y saber cómo usarlos en cada situación.
  29. 29. FORMATOS DE IMAGEN FORMATOS DE IMAGEN ▸ TIFF ▸ BMP ▸ RAW GIF JPG PNG SVG
  30. 30. GRAPHICS INTERCHANGE FORMAT FORMATO GIF ▸ Diseñado específicamente para comprimir imágenes digitales. ▸ Reduce la paleta de colores a 256 colores como máximo (profundidad de color de 8 bits). ▸ Admite gamas de menor número de colores y esto permite optimizar el tamaño del archivo que contiene la imagen. ▸ No es recomendable para fotografías de cierta calidad ni originales ya que el color real o verdadero utiliza una paleta de más de 256 colores.
  31. 31. GRAPHICS INTERCHANGE FORMAT FORMATO GIF ▸ Los archivos GIF son reconocidos por los llamados GIFs animados. ▸ Cuando se combinan varias imágenes mostrándose consecutivamente pueden crearse pequeñas escenas. ▸ La compresión de este tipo de archivos es la que permite soportar la animáción. ▸ Permite trabajar con transparencias pero únicamente al 100%
  32. 32. JOINT PHOTOGRAPHIC EXPERTS GROUP FORMATO JPG-JPEG ▸ A diferencia del formato GIF, admite una paleta de hasta 16 millones de colores. ▸ Es el formato más común junto con el GIF para publicar imágenes en la web. ▸ La compresión JPEG puede suponer cierta pérdida de calidad en la imagen. En la mayoría de los casos esta pérdida se puede asumir porque permite reducir el tamaño del archivo y su visualización es aceptable. Es recomendable utilizar una calidad del 60-90 % del original. ▸ Cada vez que se modifica y guarda un archivo JPEG, se puede perder algo de su calidad si se define cierto factor de compresión.
  33. 33. JOINT PHOTOGRAPHIC EXPERTS GROUP FORMATO JPG-JPEG ▸ Las cámaras digitales suelen almacenar directamente las imágenes en formato JPEG con máxima calidad y sin compresión. ▸ Es ideal para publicar fotografías en la web siempre y cuando se configuren adecuadamente dimensiones y compresión. ▸ Si se define un factor de compresión se pierde calidad. Por este motivo no es recomendable para archivar originales.
  34. 34. PORTABLE NETWORK GRAPHICS FORMATO PNG ▸ Basado en un algoritmo de compresión sin pérdida para bitmaps no sujeto a patentes ▸ Desarrollado para solventar las deficiencias del formato GIF ▸ Permite almacenar imágenes con una mayor profundidad de contraste y otros importantes datos. ▸ Una de las principales características de los archivos PNG es la capacidad de manejar transparencias
  35. 35. FORMATO RAW FORMATO RAW ▸ Formato de archivo digital de imágenes que contiene la totalidad de los datos de la imagen tal y como ha sido captada por el sensor digital de la cámara fotográfica. ▸ Generalmente lleva aplicada compresión de datos sin pérdida de información. ▸ El gran inconveniente de este formato es la falta de estandarización: cada fabricante de cámaras usa su propia versión del formato.
  36. 36. SCALABLE VECTOR GRAPHICS. FORMATO SVG ▸ Especificación para describir gráficos vectoriales bidimensionales, tanto estáticos como animados. ▸ Los gráficos SVG se construyen a partir de puntos, ángulos y distancias. ▸ Escalable ▸ Por ser un lenguaje vectorial, SVG permite crear imágenes complejas.
  37. 37. OPTIMIZACIÓN Y COMPRESIÓN DE IMÁGENES PARA WEB
  38. 38. OPTIMIZACIÓN Y COMPRESIÓN OPTIMIZACIÓN Y COMPRESIÓN ▸ Al crear una página web interesa que los archivos que contienen las imágenes sean lo menos pesados posibles para agilizar su descarga y visualización por Internet.
  39. 39. OPTIMIZACIÓN Y COMPRESIÓN OPTIMIZACIÓN Y COMPRESIÓN ▸ El tamaño de un archivo gráfico viene determinado por las dimensiones de la imagen, su resolución, el número de colores y el formato (JPG, GIF, PNG).
  40. 40. OPTIMIZACIÓN Y COMPRESIÓN OPTIMIZACIÓN Y COMPRESIÓN ▸ Crea y guarda imágenes en resolución no superior a 72 ppp. Es la resolución que se suele usar en las pantallas de ordenador.
  41. 41. OPTIMIZACIÓN Y COMPRESIÓN ORGANIZACIÓN Y COMPRESIÓN ▸ Conviene utilizar un programa de edición gráfica para definir las dimensiones concretas de la imagen antes de insertarla en la página web. ▸ Lo más conveniente es guardar los originales de las imágenes sin comprimir. A partir de ellas se puede crear una copia en formato GIF (PNG) o JPEG con las dimensiones, resolución y paletas adecuados para publicarlas en la web.
  42. 42. OPTIMIZACIÓN Y COMPRESIÓN HERRAMIENTAS PARA COMPRESIÓN ▸ Además de las herramientas más conocidas como Photoshop e Illustrator podemos encontrar herramientas que específicamente nos ayudarán a optimizar imágenes ▸ Kraken Image Optimizer ▸ JPEG Optimizer ▸ Opti PNG

×