Uso de imágenes en diseño web

1. USO DE IMÁGENES EN DISEÑO WEB

2. UNA IMAGEN DICE MÁS QUE MIL PALABRAS UNA IMAGEN DICE MÁS QUE MIL PALABRAS

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. 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. 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. 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. TENDENCIAS

8. TENDENCIAS EN EL USO DE IMÁGENES USO DE MONOCROMAS

9. TENDENCIAS EN EL USO DE IMÁGENES GRÁFICOS, INFOGRAFÍAS, INFOGRAFÍAS ANIMADAS

10. TENDENCIAS EN EL USO DE IMÁGENES HIPERREALIDAD

11. TENDENCIAS EN EL USO DE IMÁGENES IMÁGENES EN 360

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. HERO IMAGE

14. IMÁGENES RESPONSIVAS

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. BANCOS DE IMÁGENES BANCOS DE IMÁGENES ▸ Shutter stock ▸ Bigstock ▸ Adobe Stock ▸ Dreamstime ▸ Pexels ▸ Pic Jumbo

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. CREATIVE COMMONS

19. CREATIVE COMMONS ¿QUÉ ES CC? ▸ Creative Commons es una organización sin ﬁnes 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 modiﬁcar los términos de los derechos de autor que mejor se adapte a sus necesidades. http://www.creativecommons.mx/

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. 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 ﬂexibilidad (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 especiﬁcado. http://www.creativecommons.mx/

22. CREATIVE COMMONS HTTPS://SEARCH.CREATIVECOMMONS.ORG/

23. CONCEPTOS BÁSICOS

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. CONCEPTOS BÁSICOS RESOLUCIÓN DE IMAGEN ▸ Es el grado de detalle o calidad de una imagen digital ya sea escaneada, fotograﬁada 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 reﬁere al número de píxeles por pulgada que es capaz de mostrar. ▸ La resolución de una pantalla es de 72 ppp.

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. FORMATOS DE IMAGEN

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. FORMATOS DE IMAGEN FORMATOS DE IMAGEN ▸ TIFF ▸ BMP ▸ RAW GIF JPG PNG SVG

30. GRAPHICS INTERCHANGE FORMAT FORMATO GIF ▸ Diseñado especíﬁcamente 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. 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. 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 modiﬁca y guarda un archivo JPEG, se puede perder algo de su calidad si se deﬁne cierto factor de compresión.

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 conﬁguren adecuadamente dimensiones y compresión. ▸ Si se deﬁne un factor de compresión se pierde calidad. Por este motivo no es recomendable para archivar originales.

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 deﬁciencias 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. 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áﬁca. ▸ 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. 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. OPTIMIZACIÓN Y COMPRESIÓN DE IMÁGENES PARA WEB

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. OPTIMIZACIÓN Y COMPRESIÓN OPTIMIZACIÓN Y COMPRESIÓN ▸ El tamaño de un archivo gráﬁco viene determinado por las dimensiones de la imagen, su resolución, el número de colores y el formato (JPG, GIF, PNG).

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. OPTIMIZACIÓN Y COMPRESIÓN ORGANIZACIÓN Y COMPRESIÓN ▸ Conviene utilizar un programa de edición gráﬁca para deﬁnir 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. 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íﬁcamente nos ayudarán a optimizar imágenes ▸ Kraken Image Optimizer ▸ JPEG Optimizer ▸ Opti PNG