Uso de imágenes en diseño web
-
Upload
adriana-atzimba -
Category
Design
-
view
127 -
download
1
Transcript of Uso de imágenes en diseño web
![Page 1: Uso de imágenes en diseño web](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b07a771a28ab47108b457c/html5/thumbnails/1.jpg)
USO DE IMÁGENES EN DISEÑO WEB
![Page 2: Uso de imágenes en diseño web](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b07a771a28ab47108b457c/html5/thumbnails/2.jpg)
UNA IMAGEN DICE MÁS QUE MIL PALABRAS
UNA IMAGEN DICE MÁS QUE MIL PALABRAS
![Page 3: Uso de imágenes en diseño web](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b07a771a28ab47108b457c/html5/thumbnails/3.jpg)
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
![Page 4: Uso de imágenes en diseño web](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b07a771a28ab47108b457c/html5/thumbnails/4.jpg)
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.
![Page 5: Uso de imágenes en diseño web](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b07a771a28ab47108b457c/html5/thumbnails/5.jpg)
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
![Page 6: Uso de imágenes en diseño web](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b07a771a28ab47108b457c/html5/thumbnails/6.jpg)
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
![Page 7: Uso de imágenes en diseño web](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b07a771a28ab47108b457c/html5/thumbnails/7.jpg)
TENDENCIAS
![Page 8: Uso de imágenes en diseño web](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b07a771a28ab47108b457c/html5/thumbnails/8.jpg)
TENDENCIAS EN EL USO DE IMÁGENES
USO DE MONOCROMAS
![Page 9: Uso de imágenes en diseño web](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b07a771a28ab47108b457c/html5/thumbnails/9.jpg)
TENDENCIAS EN EL USO DE IMÁGENES
GRÁFICOS, INFOGRAFÍAS, INFOGRAFÍAS ANIMADAS
![Page 10: Uso de imágenes en diseño web](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b07a771a28ab47108b457c/html5/thumbnails/10.jpg)
TENDENCIAS EN EL USO DE IMÁGENES
HIPERREALIDAD
![Page 11: Uso de imágenes en diseño web](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b07a771a28ab47108b457c/html5/thumbnails/11.jpg)
TENDENCIAS EN EL USO DE IMÁGENES
IMÁGENES EN 360
![Page 12: Uso de imágenes en diseño web](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b07a771a28ab47108b457c/html5/thumbnails/12.jpg)
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”
![Page 13: Uso de imágenes en diseño web](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b07a771a28ab47108b457c/html5/thumbnails/13.jpg)
HERO IMAGE
![Page 14: Uso de imágenes en diseño web](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b07a771a28ab47108b457c/html5/thumbnails/14.jpg)
IMÁGENES RESPONSIVAS
![Page 15: Uso de imágenes en diseño web](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b07a771a28ab47108b457c/html5/thumbnails/15.jpg)
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”
![Page 16: Uso de imágenes en diseño web](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b07a771a28ab47108b457c/html5/thumbnails/16.jpg)
BANCOS DE IMÁGENES
BANCOS DE IMÁGENES
▸ Shutter stock
▸ Bigstock
▸ Adobe Stock
▸ Dreamstime
▸ Pexels
▸ Pic Jumbo
![Page 17: Uso de imágenes en diseño web](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b07a771a28ab47108b457c/html5/thumbnails/17.jpg)
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
![Page 18: Uso de imágenes en diseño web](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b07a771a28ab47108b457c/html5/thumbnails/18.jpg)
CREATIVE COMMONS
![Page 19: Uso de imágenes en diseño web](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b07a771a28ab47108b457c/html5/thumbnails/19.jpg)
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/
![Page 20: Uso de imágenes en diseño web](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b07a771a28ab47108b457c/html5/thumbnails/20.jpg)
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/
![Page 21: Uso de imágenes en diseño web](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b07a771a28ab47108b457c/html5/thumbnails/21.jpg)
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/
![Page 23: Uso de imágenes en diseño web](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b07a771a28ab47108b457c/html5/thumbnails/23.jpg)
CONCEPTOS BÁSICOS
![Page 24: Uso de imágenes en diseño web](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b07a771a28ab47108b457c/html5/thumbnails/24.jpg)
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.
![Page 25: Uso de imágenes en diseño web](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b07a771a28ab47108b457c/html5/thumbnails/25.jpg)
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.
![Page 26: Uso de imágenes en diseño web](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b07a771a28ab47108b457c/html5/thumbnails/26.jpg)
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.
![Page 27: Uso de imágenes en diseño web](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b07a771a28ab47108b457c/html5/thumbnails/27.jpg)
FORMATOS DE IMAGEN
![Page 28: Uso de imágenes en diseño web](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b07a771a28ab47108b457c/html5/thumbnails/28.jpg)
¿Te has preguntado cuál es la diferencia entre un archivo JPEG, GIF o PNG?
FORMATOS DE IMAGENComo 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.
![Page 29: Uso de imágenes en diseño web](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b07a771a28ab47108b457c/html5/thumbnails/29.jpg)
FORMATOS DE IMAGEN
FORMATOS DE IMAGEN
▸ TIFF
▸ BMP
▸ RAW
GIF
JPG
PNG
SVG
![Page 30: Uso de imágenes en diseño web](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b07a771a28ab47108b457c/html5/thumbnails/30.jpg)
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.
![Page 31: Uso de imágenes en diseño web](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b07a771a28ab47108b457c/html5/thumbnails/31.jpg)
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%
![Page 32: Uso de imágenes en diseño web](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b07a771a28ab47108b457c/html5/thumbnails/32.jpg)
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.
![Page 33: Uso de imágenes en diseño web](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b07a771a28ab47108b457c/html5/thumbnails/33.jpg)
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.
![Page 34: Uso de imágenes en diseño web](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b07a771a28ab47108b457c/html5/thumbnails/34.jpg)
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
![Page 35: Uso de imágenes en diseño web](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b07a771a28ab47108b457c/html5/thumbnails/35.jpg)
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.
![Page 36: Uso de imágenes en diseño web](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b07a771a28ab47108b457c/html5/thumbnails/36.jpg)
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.
![Page 37: Uso de imágenes en diseño web](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b07a771a28ab47108b457c/html5/thumbnails/37.jpg)
OPTIMIZACIÓN Y COMPRESIÓN DE IMÁGENES PARA WEB
![Page 38: Uso de imágenes en diseño web](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b07a771a28ab47108b457c/html5/thumbnails/38.jpg)
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.
![Page 39: Uso de imágenes en diseño web](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b07a771a28ab47108b457c/html5/thumbnails/39.jpg)
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).
![Page 40: Uso de imágenes en diseño web](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b07a771a28ab47108b457c/html5/thumbnails/40.jpg)
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.
![Page 41: Uso de imágenes en diseño web](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b07a771a28ab47108b457c/html5/thumbnails/41.jpg)
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.
![Page 42: Uso de imágenes en diseño web](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b07a771a28ab47108b457c/html5/thumbnails/42.jpg)
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